Can the following rounded corner example be created to be XHTML Strict???
Hello
Are you talking about this code here?
<div class="sidebox">
<div class="boxhead"><h2>Test Headline</h2></div>
<div class="boxbody">
<p>This is a short sample paragraph.</p>
<p>And another one.</p>
</div>
</div>
If so it validates both XHTML 1.0 Strict, and XHTML 1.1 also.
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The ThrashBox</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" media="screen" href="style.css" title="Style" />
</head>
<body>
<div class="sidebox">
<div class="boxhead"><h2>Test Headline</h2></div>
<div class="boxbody">
<p>This is a short sample paragraph.</p>
<p>And another one.</p>
</div>
</div>
</body>
</html>
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The TrashBox</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<div class="sidebox">
<div class="boxhead"><h2>Test Headline</h2></div>
<div class="boxbody">
<p>This is a short sample paragraph.</p>
<p>And another one.</p>
</div>
</div>
</body>
</html>
I took the liberty of adding the external link to the css file.
If I misunderstood what you were talking about let me know.
Later
Johnny
Hello
In the event you meant the actual page example you gave the link for above this will work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The ThrashBox</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" media="screen" href="style2.css" title="style" />
</head>
<body>
<h1>"Sliding Doors" Box– Rounded Corners for All</h1>
<h2> A Simple, Semantically Correct CSS Box with Clean Code</h2>
<p class="exp"><strong>update:</strong> I'll be working on an update to this technique soon using fewer images, better instructions based on all the feedback I've received and downloadable PhotoShop templates for the graphics.</p>
<p class="exp">While working on an <a href="http://www.omegacart.com/">e-commerce system</a>, I wanted to use some neat CSS tricks for its sample XHTML/CSS template. This new cart will support styling the entire cart in a way similar to the <a href="http://www.csszengarden.com">CSS Zen Garden</a>: strictly by altering the CSS. This technique will be used for the CSS template to replace the common osC-clone sideboxes found on virtually every other cart out there.</p>
<p class="exp">The goal of the exercise was to create rounded-corner boxes with visual flare and the absolute minimal amount of semantically correct markup. Oh yeah, and to make sure they could resize while keeping their backgrounds intact. The important relevant XHTML and CSS for the first box on this page is directly below the box.</p>
<p class="exp">Questions/Comments: <script type="text/javascript">
//<![CDATA[
function hiveware_enkoder(){var i,j,x,y,x=
"x=\"783d2235373336663634365c223d783765323437653635366436383235363437393632" +
"37373738363032313663333232323263356433363635363236343763363936313664363237" +
"38363437323761336637333730343836333731363637663639363436353734323837353634" +
"37323735363337663364366636333665373336353661363236353730323335333533346433" +
"34363436653635376636323538376636323430323436353266366436353634343032393635" +
"37313765363934303730323232633539373237643335366336343739363436643664323536" +
"32326335393732353032633639363137383634353032653631366335303238363337313632" +
"36643664323536653332323937323530326336393631373836343530326536313663333032" +
"38363337313632333932323265333136663227273d793b5c2262333033623c693b303d6928" +
"726f663b2b693b6874676e656c2e7873656e753d2b797b29323d2e782b2725272865706163" +
"29322c6928727473627573797d3b29223b793d27273b666f7228693d303b693c782e6c656e" +
"6774683b692b3d3131297b666f72286a3d4d6174682e6d696e28782e6c656e6774682c692b" +
"3131293b2d2d6a3e3d693b297b792b3d782e636861724174286a293b7d7d793b\";y='';fo" +
"r(i=0;i<x.length;i+=2){y+=unescape('%'+x.substr(i,2));}y";
while(x=eval(x));}hiveware_enkoder();
//]]>
</script></p>
<hr />
<div class="sidebox">
<div class="boxhead"><h2>Test Headline</h2></div>
<div class="boxbody">
<p>This is a short sample paragraph.</p>
<p>And another one.</p>
</div>
</div>
<p class="exp">The XHTML: </p>
<pre style="text-align:left;width:30em;margin: 10px auto;">
<div class="sidebox">
<div class="boxhead"><h2>Test Headline</h2></div>
<div class="boxbody">
<p>This is a short sample paragraph.</p>
<p>And another one.</p>
</div>
</div>
</pre>
<p class="exp">The CSS: </p>
<pre style="text-align:left;width:30em;margin: 10px auto;">
/* Show only to IE PC \*/
* html .boxhead h2 {height: 1%;} /* For IE 5 PC */
.sidebox {
margin: 0 auto; /* center for now */
width: 17em; /* ems so it will grow */
background: url(sbbody-r.gif) no-repeat bottom right;
font-size: 100%;
}
.boxhead {
background: url(sbhead-r.gif) no-repeat top right;
margin: 0;
padding: 0;
text-align: center;
}
.boxhead h2 {
background: url(sbhead-l.gif) no-repeat top left;
margin: 0;
padding: 22px 30px 5px;
color: white;
font-weight: bold;
font-size: 1.2em;
line-height: 1em;
text-shadow: rgba(0,0,0,.4) 0px 2px 5px; /* Safari-only, but cool */
}
.boxbody {
background: url(sbbody-l.gif) no-repeat bottom left;
margin: 0;
padding: 5px 30px 31px;
}
</pre>
<hr />
<p class="exp">For success, make sure your background images are large enough to grow however big you need them. The ones used in this demo are 600px tall for the lower div, for example.</p>
<p class="exp">Also note, any top margin on the top element (the upper <p> in this case) inside the lower div (.boxbody) will leak out in
IE5/Win (and probably others) and seperate the two divs, breaking the box. To prevent this
just remove that margin through adding a class to the element (or any other preferred method),
and replace the margins with a top padding on the lower div (.boxbody).</p>
<p class="exp">IE5/Win also has a glitch in the upper left corner that can be fixed
by applying a dimension to the <h2> element. In this demo it's done
using the "Holly Hack", feeding a {height: 1%;} only to IE/win browsers.
<em>(see the code)</em></p>
<h2>Known Issues</h2>
<p class="exp">Issue #1: At certain font-scaling sizes in Gecko browsers, there is a 1px jog at the bottom-left. YMMV. This can be avoided by setting the font-size on the body to 100%, and sizing your text elsewhere...</p>
<p class="exp">Issue #2: The CSS won't validate because of the text-shadow used for Safari with transparency color. So much for "progressive enhancement".</p>
<p class="exp">Issue #3: The KHTML engine in Safari pre-Panther does not render this technique correctly. The backgrounds flow out of their containing boxes. Yet another reason to upgrade. ;) But considering there's now a cookie hijacking exploit with the browser, maybe they'll release an upgrade across the board.</p>
<hr />
<p class="exp">The credit box below is unique in that it has no width specified. Its width is controlled only by the margins on its containing div (.sidebox). Resize the browser window to see it dynamically grow. This opens up a lot of interesting possibilities!</p>
<hr />
<div class="widthlessbox">
<div class="boxhead"><h2>Special Thanks & Credits</h2></div>
<div class="boxbody">
<p style="color: gray">This demo was inspired by the <a href="http://alistapart.com/articles/slidingdoors/">Sliding Doors</a> technique found at A List Apart (Douglas Bowman rocks!). Tested to work in IE 5+ PC, IE 5.2.x Mac, Mozilla, Firebird, Opera and even with enhanced text headers in Safari!</p>
<p style="color: gray">A huge special thanks to Big John who artfully squashed a glitch in IE 5 PC, and helped me write this demo. You should never, ever hesitate to use <a href="http://www.positioniseverything.net/design/index.html">Holly 'n John's CSS Repair Service</a>. They make CSS layouts easy and fun again ... even the tough ones!</p>
</div>
</div>
</body>
</html>
Then save the css in a file called style.css or whatever you want to call it just change the path in the head section of the XHTML document.
body {
margin: 20px 0 0 ;
padding: 0;
border: 0;
background: white;
font: normal 100%/1.4em 'Lucida Grande', LucidaGrande, Lucida, Helvetica, Arial, sans-serif; color: #222;
text-align: center; /* Center on IE5 PC */
}
div, p, pre {
text-align: left;
}
p {
font-size: 76%;
line-height: 1.8em;
margin-top: 0px;
}
pre {
font-size: 85%;
line-height: 1.2em;
margin-top: 0px;
}
.boxbody p {font-size:76%}
.boxbody a {color:gray}
.boxbody a:hover {color:blue}
h1 { color: #777; font-size:1.8em; }
h2 { color: #888; font-size:1.4em; }
.exp { width:30em; margin:10px auto; }
hr { width:35em; margin: 10px auto;}
/* Show only to IE PC \*/
* html .boxhead h2 {height: 1%;} /* For IE 5 PC */
.sidebox {
margin: 0 auto; /* center for now */
width: 17em; /* ems so it will grow */
background: url(sbbody-r.gif) no-repeat bottom right;
font-size: 100%;
}
.boxhead {
background: url(sbhead-r.gif) no-repeat top right;
margin: 0;
padding: 0;
text-align: center;
}
.boxhead h2 {
background: url(sbhead-l.gif) no-repeat top left;
margin: 0;
padding: 20px 30px 5px;
color: white;
font-weight: bold;
font-size: 1.2em;
line-height: 1em;
text-shadow: rgba(0,0,0,.4) 0px 2px 5px; /* Safari-only, but cool */
}
.boxbody {
background: url(sbbody-l.gif) no-repeat bottom left;
margin: 0;
padding: 5px 30px 31px;
}
.widthlessbox {
margin: 0 25%; /* NO WIDTH! Opens up a world of possibilities! */
background: url(sbbody-r.gif) no-repeat bottom right;
font-size: 100%;
}
Hope this helps
Later
Johnny
I see, so is there a way for that rounded corner example to be built to degrade nicely in an older browser like Netscape 4.7?
Hello
It’s dinner time right now, but after dinner I will have a working example of what needs to be done.
Later
Johnny
Hello
Don’t you just love dumb mistakes?
Well I have been making one for the last 30 minutes or so, but the good news is I finally figured it out.
In the XHTML file link to an external style sheet named “redirect.css” or whatever you want to name it.
<link rel="stylesheet" type="text/css" media="screen" href="redirect.css" title="redirect" />
Then open notepad and add this to it:
@import "style.css";
Save it as “redirect.css” or whatever just rename the path. All it is gonna do is import another style sheet.
Then the your actual css file “style.css” or whatever you want to name it. Will import into more modern browsers, and Netscape 4 and so on… will not recognize the @import method and it will render unstyled content.
Hope it works as I do not have an older browser to look at it in, but that is what the experts say to do.
Later
Johnny
