issues with CSS - IE hack

[nolawi]

my blog (http://bernos.org/blog/) is having problems...

and after two days i have isolated the problem... to css...

.primary {
width: 500px;
_width: 500px; /* IE Hack */
float: left;
padding: 20px 0 10px;
margin: 0 10px 0 30px;
_margin: 0 20px 0 15px; /* IE Hack */
display: inline;
}

the main page is fine.... but the other (http://bernos.org/blog/?page_id=2) pages are not working

if i update the css above to this below

#primary {
width: 500px;
/*_width: 500px;*/ /* IE Hack */
float: left;
padding: 20px 0 10px;
margin: 0 10px 0 30px;
/*_margin: 0 20px 0 15px;*/ /* IE Hack */
display: inline;
}

then the other pages will work fine and the main page doesnt correctly divide in the sections...

i'm trying to find out what the second line in the above does?....

[toicontien]

.primary is a class and #primary is an ID. In your first page, if you see class="primary" then the #primary {} declaration is ignored. Change class="primary" to id="primary" in your first page.


#primary {
display: inline; /* Fixes IE-Win double margin float bug */
float: left;
margin: 0 10px 0 30px;
padding: 20px 0 10px;
width: 500px; /* For IE5-Win's botched box model */
voice-family: "\"}\"";
voice-family: inherit;
width: 480px; /* For standards browsers and IE6+ Win (standard box model) */
}

.fixIE501 { /* IE 5.01 often ignores the declaration after a voice-family hack */ }


Double Margin Float Bug in Internet Explorer (http://www.positioniseverything.net/explorer/doubled-margin.html)

Standard Box Model (http://www.w3.org/TR/CSS21/box.html#box-dimensions)

The Internet Explorer Box Model Problem (http://www.communitymx.com/content/article.cfm?cid=E0989953B6F20B41)

[Fang]

Don't use hacks! If you need a seperate css for IE use conditional comments.

[nolawi]

.primary is a class and #primary is an ID. In your first page, if you see class="primary" then the #primary {} declaration is ignored. Change class="primary" to id="primary" in your first page.

^ can you explain a bit more about what i need to change on that page...

becuase i played around with style sheet like you recommended and its better... but i think i do need to change somehting on the page...

the problem is i cant find exactly where the since the page is generated though different php files... to make it easier edit the template -- they broke it up in like 15 files...

[toicontien]

I saw <div class="primary"> in your HTML source, so the CSS declaration needs to start out .primary. That's all I was saying to begin with. and an alteration to another one of your classes:

.secondary {
font: 1em/1.5em 'Lucida Grande', Verdana, Arial, Sans-Serif;
padding: 10px 0;
margin: 0 0 20px 500px; /* Left margin = to .primary's width + padding */
color: #666;
}

That style sheet needs major cleaning up. They created styles so you can easily have a fluid layout or fixed width layout, which only served to confuse you.

[nolawi]

huh that fixed it ..i had to change the id to class.. ^ thank you ...

that css does need major cleaning up...you are right... !

[nolawi]

plus thank Q for having the link about
IE Doubled Float

excellent thanks