Welcome to WebmasterWorld Guest from 54.157.222.62

Forum Moderators: not2easy

Message Too Old, No Replies

Holly Hack not working

IE/Mac unresponsive to width changes

   
2:41 am on Jan 26, 2006 (gmt 0)

5+ Year Member



Hi,

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!

7:45 am on Jan 26, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



IE on the mac doesn't suffer from the box model problem, and therefore doesn't need the hack - this is why you've used a 'hide from ie mac hack' around your IE/win code:

/*\*/ this is hidden from IE mac /**/
6:50 pm on Jan 26, 2006 (gmt 0)

5+ Year Member



Thanks for the response.

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.

8:59 pm on Jan 26, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



IE5 Mac definitely gets the box correct. Maybe it follows IE5/Win in quirks mode though? I can't find anything to back that up...

Could you paste the doctype you're using?

10:48 pm on Jan 26, 2006 (gmt 0)

5+ Year Member



Hi,

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!

11:26 pm on Jan 26, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

12:22 am on Jan 27, 2006 (gmt 0)

5+ Year Member



Hi,

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

12:28 am on Jan 27, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Completely unnecessary. It's needed if you're doing both of the following:

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.