I have recently been converted to using CSS and removing all tables and frames from my html.
However, searching the web has revealed something bizarre - the existance of an "ugly hack" :
#nav1 {position: absolute;
left: 8px;
width: 272px;
line-height:17px;
text-align: left;
background-repeat: no-repeat;
background-position: center;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width: 250px;}
/* Again, "be nice to Opera 5". */
body>#nav1 {width:250px;}
I am confused - do I need this or not?
Do I also need to put it in for the "height" statement?
Any info would be most appreciated...cheers, JimbobYou need it only in some situations to compensate for IE5.x's broken box model. IE5 (and 6 in Quirks Mode) includes padding and border in the width of a box. The hack lets you feed one width to IE, using it's poor understanding of selectors, and another width to compliant browsers.
You find the original Tantek hack here:
<!-- m --><a class="postlink" href="http://www.tantek.com/CSS/Examples/boxmodelhack.html">http://www.tantek.com/CSS/Examples/boxmodelhack.html</a><!-- m -->
and a more humanly readable explanation of it together with a simplified form here:
<!-- m --><a class="postlink" href="http://doxdesk.com/personal/posts/css/20020212-bmh.html">http://doxdesk.com/personal/posts/css/20020212-bmh.html</a><!-- m -->
So, the hack is for IE and not for Opera and yes, you may need it for heights too but heights don't screw up as often as widths.If you are interested here are a few more examples including which browser it affects.
div.myDiv{
color: black; /* Used by IE5/win & IE5.5/win */
voice-family: "\"}\""; voice-family:inherit;
color: blue; /* Used by IE6/win */
}
div.myDiv{
color: black; /* Used by IE5/win */
color/**/: yellow; /* Used by IE5.5/win */
color /**/: aqua; /* NOT Used by IE6/win but all others*/
c\olor: blue; /* Used by IE6/win */
}
html>body div.myDiv {
color: red; /* Used by Opera 3-5 */
c\olor: lime; /* Used by Opera 6 (any letter G-Z can be escaped with a backslash in CSS) */
}
head:first-child+body div.myDiv {
color: green; /* Used by Opera 7beta & IE5/Mac */
}
html[xmlns] div.myDiv{
color: purple; /* Used by Gecko when XHTML sent as text/html */
}
<script type="text/javascript">
<!--
//Since NN4 requires Javascript to be on for CSS to work at all this method is 100% safe.
if (document.layers) { document.write('<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"ns4.css" />'); }
//-->
</script>
Also, this is a link to a resource which AFAIK contains all know (valid) hacks to work around browserbugs, including links to the explanation of how they work
<!-- m --><a class="postlink" href="http://centricle.com/ref/css/filters/Thanks">http://centricle.com/ref/css/filters/Thanks</a><!-- m --> meow and Stefan - I think I finally get it...suppose the obvious thing is to never define padding or border widths for any of the boxes. Then no work around would be needed as the width would always be the same, broken-box model or not (or maybe I have completely missed the point...???);-) No, you've got it. Only, sometimes padding and border are nice to have. If course this all only matters if the width needs to fit into some other width or match it in some way. When the box in question is surrounded by lots of space it doesn't really matter if it's a little wider or more narrow.
Another workaround is to wrap your box in an extra div the way <!-- m --><a class="postlink" href="http://alistapart.com">http://alistapart.com</a><!-- m --> do. It's simpler but maybe less 'clean'.If the HTML code doesn't come out right, I'll repost this with the corrections:
I've discovered another hack for getting around IE 5/5.5 Pc's box model, and it's a little easier to understand.
It does require a little extra HTML and CSS. You use two DIVs to contain elements; a parent and a child DIV.
<div id="parent">
<div id="child">
Content goes here.
</div>
</div>
Set the parent DIV to the width you want and set the padding, margins, and borders to 0, 0, and none respectively.
#parent {
width: 100px;
padding: 0px;
margin: 0px;
border: none;
}
You shouldn't need to specify the margins, padding and borders, but just because I'm anal retentive I do.
For the child DIV, add any padding, margins or borders that you want, but don't specify a width.
#child {
border: 1px solid green;
padding: 10px;
}
One inherent property of DIVs in most browsers (nearly all W3C compliant browsers) is that a DIV without a width specified in CSS will be as wide as its parent element.
In this case, you limit the child DIV's width with the parent DIV's width.
In essence, you let the browser calculate the width of the DIV with the padding and border, and then it doesn't matter if the browser absorbs padding, margins and borders into the DIV's width, or tacks them on in addition to the width.That's what ALA does. It's simpler in a way, but it does add an extra HTML element. Matter of taste I guess.Originally posted by meow
Matter of taste I guess.
I would like to add, since we are dealing with a pure CSS bug in some browsers, I would always prefer a pure CSS solution if possible.
The main reason for this is that if you fix it with CSS, once the browser(s) with the bug "go out of fassion" and people have to new working ones, then you can simply remove the extra CSS from your 1 single externally linked CSS file, and your entire site is updated.
If you solve the CSS bug wth HTML, to later remove the fix is a lot harder (since it requires editing each and every document manually).
Of cource if you don't predict you will upgrade the pages ever, then which method you use doesn't matter.
However, searching the web has revealed something bizarre - the existance of an "ugly hack" :
#nav1 {position: absolute;
left: 8px;
width: 272px;
line-height:17px;
text-align: left;
background-repeat: no-repeat;
background-position: center;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width: 250px;}
/* Again, "be nice to Opera 5". */
body>#nav1 {width:250px;}
I am confused - do I need this or not?
Do I also need to put it in for the "height" statement?
Any info would be most appreciated...cheers, JimbobYou need it only in some situations to compensate for IE5.x's broken box model. IE5 (and 6 in Quirks Mode) includes padding and border in the width of a box. The hack lets you feed one width to IE, using it's poor understanding of selectors, and another width to compliant browsers.
You find the original Tantek hack here:
<!-- m --><a class="postlink" href="http://www.tantek.com/CSS/Examples/boxmodelhack.html">http://www.tantek.com/CSS/Examples/boxmodelhack.html</a><!-- m -->
and a more humanly readable explanation of it together with a simplified form here:
<!-- m --><a class="postlink" href="http://doxdesk.com/personal/posts/css/20020212-bmh.html">http://doxdesk.com/personal/posts/css/20020212-bmh.html</a><!-- m -->
So, the hack is for IE and not for Opera and yes, you may need it for heights too but heights don't screw up as often as widths.If you are interested here are a few more examples including which browser it affects.
div.myDiv{
color: black; /* Used by IE5/win & IE5.5/win */
voice-family: "\"}\""; voice-family:inherit;
color: blue; /* Used by IE6/win */
}
div.myDiv{
color: black; /* Used by IE5/win */
color/**/: yellow; /* Used by IE5.5/win */
color /**/: aqua; /* NOT Used by IE6/win but all others*/
c\olor: blue; /* Used by IE6/win */
}
html>body div.myDiv {
color: red; /* Used by Opera 3-5 */
c\olor: lime; /* Used by Opera 6 (any letter G-Z can be escaped with a backslash in CSS) */
}
head:first-child+body div.myDiv {
color: green; /* Used by Opera 7beta & IE5/Mac */
}
html[xmlns] div.myDiv{
color: purple; /* Used by Gecko when XHTML sent as text/html */
}
<script type="text/javascript">
<!--
//Since NN4 requires Javascript to be on for CSS to work at all this method is 100% safe.
if (document.layers) { document.write('<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"ns4.css" />'); }
//-->
</script>
Also, this is a link to a resource which AFAIK contains all know (valid) hacks to work around browserbugs, including links to the explanation of how they work
<!-- m --><a class="postlink" href="http://centricle.com/ref/css/filters/Thanks">http://centricle.com/ref/css/filters/Thanks</a><!-- m --> meow and Stefan - I think I finally get it...suppose the obvious thing is to never define padding or border widths for any of the boxes. Then no work around would be needed as the width would always be the same, broken-box model or not (or maybe I have completely missed the point...???);-) No, you've got it. Only, sometimes padding and border are nice to have. If course this all only matters if the width needs to fit into some other width or match it in some way. When the box in question is surrounded by lots of space it doesn't really matter if it's a little wider or more narrow.
Another workaround is to wrap your box in an extra div the way <!-- m --><a class="postlink" href="http://alistapart.com">http://alistapart.com</a><!-- m --> do. It's simpler but maybe less 'clean'.If the HTML code doesn't come out right, I'll repost this with the corrections:
I've discovered another hack for getting around IE 5/5.5 Pc's box model, and it's a little easier to understand.
It does require a little extra HTML and CSS. You use two DIVs to contain elements; a parent and a child DIV.
<div id="parent">
<div id="child">
Content goes here.
</div>
</div>
Set the parent DIV to the width you want and set the padding, margins, and borders to 0, 0, and none respectively.
#parent {
width: 100px;
padding: 0px;
margin: 0px;
border: none;
}
You shouldn't need to specify the margins, padding and borders, but just because I'm anal retentive I do.
For the child DIV, add any padding, margins or borders that you want, but don't specify a width.
#child {
border: 1px solid green;
padding: 10px;
}
One inherent property of DIVs in most browsers (nearly all W3C compliant browsers) is that a DIV without a width specified in CSS will be as wide as its parent element.
In this case, you limit the child DIV's width with the parent DIV's width.
In essence, you let the browser calculate the width of the DIV with the padding and border, and then it doesn't matter if the browser absorbs padding, margins and borders into the DIV's width, or tacks them on in addition to the width.That's what ALA does. It's simpler in a way, but it does add an extra HTML element. Matter of taste I guess.Originally posted by meow
Matter of taste I guess.
I would like to add, since we are dealing with a pure CSS bug in some browsers, I would always prefer a pure CSS solution if possible.
The main reason for this is that if you fix it with CSS, once the browser(s) with the bug "go out of fassion" and people have to new working ones, then you can simply remove the extra CSS from your 1 single externally linked CSS file, and your entire site is updated.
If you solve the CSS bug wth HTML, to later remove the fix is a lot harder (since it requires editing each and every document manually).
Of cource if you don't predict you will upgrade the pages ever, then which method you use doesn't matter.