homepage Welcome to WebmasterWorld Guest from 54.163.91.250
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Holly Hack not working
IE/Mac unresponsive to width changes
pillsbur




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

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!

 

Robin_reala




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

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 /**/

pillsbur




msg:1179767
 6:50 pm on Jan 26, 2006 (gmt 0)

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.

Robin_reala




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

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?

pillsbur




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

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!

bedlam




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

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

pillsbur




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

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

Robin_reala




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved