Forum Moderators: not2easy
Any ideas why IE/Mac seems to be ignoring the Holly Hack below?
I'm trying to make the width of .navigation the same in FF and IE. I want FF's width to be the basis (170px + 10px padding right/left = 190px).
In IE the width is still 170. In fact it doesn't do anything to change the Hack to something ridiculous like 350px. In fact, even if I remove the width: entry completely from the Hack, the .navigation still displays at 170.
.navigation {
float: left;
clear: left; <---- This is here to make navigation beneath another left-floated div; works great
padding: 7px 10px;
width: 170px;
border: 2px solid #5a6969;
font-weight: bold;
background-color: #DEDEB0;
font-size: 15px;
margin-top: 10px;
text-align: right;
background-image: url(images/notes-091703.jpg);
line-height: 14px;
}
/* Begin Holly Hack Navigation \*/
* html .navigation {
float: left;
clear: left;
padding: 7px 10px;
width: 190px;
border: 2px solid #5a6969;
font-weight: bold;
background-color: #DEDEB0;
font-size: 15px;
margin-top: 10px;
text-align: right;
background-image: url(images/notes-091703.jpg);
line-height: 14px;
}
/* End Holly Hack Navigation */
What am I missing?
Thanks!
/*\*/ this is hidden from IE mac /**/
However, I'm a little confused. IE/Mac is not displaying .navigation how I want it to -- it's too narrow because it's not including the 10px left/right padding. Therefore, I would like to force IE/Mac to display .navigation at 190px. I thought the Holly Hack was supposed to do this?
Maybe I've got the syntax backward in my code?
Thanks again.
Could you paste the doctype you're using?
Unfortunately it's definitely not getting it the way I want it at the moment. ;-)
Intuitively it seems to me that IE should be considered to be doing it right: I specify 170px for the box and the 10px left/right padding shouldn't change the size of the box, just push the text inward 10 px from the edges.
Yet I recall reading somewhere that FF's model of determining the box size as width + padding is correct, hence my need for IE/Mac to render the box as 190px.
Anyway, here's the doctype I'm using. I don't know if it's what I should be using though.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
Thanks for your help!
Intuitively it seems to me that IE should be considered to be doing it right: I specify 170px for the box and the 10px left/right padding shouldn't change the size of the box, just push the text inward 10 px from the edges.
Is this a wind-up? ;-)
Just kidding--this version of 'intuitive' is often hotly debated here and elsewhere. In any case for reasons best looked into outside of this thread, the Firefox way is the right way, but it's not as simple as that...
You need to look into quirks mode [google.com]. Because IE5 Windows was a very widely used browser, when the much more standards-compliant IE6 came out Microsoft had to provide a way not to break old sites--this method was quirks mode. Briefly put, quirks mode provides a way of emulating IE 5 Win's incorrect behaviour. Other browsers have since built in the same feature for the same reason.
Activating 'standards mode'--in other words, forcing the browser to use the standard box model--in most browsers is simple; you just use a complete doctype [w3.org] (which is not what you're using now...)
Note that this may cause all kinds of havoc at first if you've built a page with an abbreviated doctype like the one that you posted above. It's worth it to do, however, because it makes the coding of webpages much more predictable and controllable.
-b
Thanks so much for the helpful explanation of the doctype/quirks mode issue. And I certainly didn't mean to wind anyone up regarding the intuitiveness of IE vs. FF re: the box model. :)
I copied the XHTML doctype from the page you linked to. However, I'm building a PHP page so the first line of the recommended doctype:
<?xml version="1.0" encoding="utf-8"?>
caused PHP to implode with a parse error (no doubt related to the "<?xml" bit). I removed that line and the page rendered again.
It rendered my .navigation box perfectly in both FF and IE/Mac (I'll have to wait to test IE/Win 6). That's the great news, and thank you for your help.
However, what might I have broken by removing the <?xml line? It seems IE/Mac isn't being thrown into quirks mode because that line is missing (good), but how necessary is that line?
-G
a) Serving XHTML as application/xhtml+xml or application/xml
and
b) using a character encoding that isn't UTF-8 or UTF-16
You're definitely not doing a) because it's working in IE :) So leave it out.
