...

View Full Version : Does IE7 handle CSS differently than IE6? (not NASH hack or Star hack)



CitznFish
05-22-2007, 02:31 AM
I am baffled as to why IE7 displays my CSS differently than IE6.

If you look at this URL:

http://family.go.com/parenting/article-205684

in IE6 it displays correctly. in IE7 the content is pushed up 10 pixels or so and is overlapping our star ratings.

I see teh error in IE 7.0.59***

The only CSS I'm using for the content that is messed up in IE7 is this one:

http://static.family.go.com/css/aggregate_template.css

I have a feeling there is somethign wrong which is why I needed to code what's in bold/red below

/* Aggregate Page Template CSS */


.agg_left_container {
width: 198px;
float: left;
/*border: solid 1px red;*/
position: relative;
margin-top: -45px !important; margin-top: -5px;

}
.agg_nav_box {
width: 188px;
padding: 5px;

border-bottom: solid 1px #ededed;
margin-bottom: 10px;
padding-bottom: 10px;
}
.agg_nav_box_last_entry {
width: 188px;
padding: 5px;

margin-top: 10px;
margin-bottom: 10px;
}
.agg_outer_right_container {
width: 386px;
float:left;
border-left: solid 1px #ededed;
padding-left: 2px;
position: relative;
margin-top: -55px !important; margin-top: -15px;

}
.agg_inner_right_container {
width: 342px;
float: left;
border: solid 12px #F0F8FB;
padding: 10px;
/*border: solid 1px blue;*/


}
.agg_left_nav_title {
margin-bottom: 0px;
font:bold 12px Georgia, "Times New Roman", Times, serif;
color:#558599;
}
.agg_left_nav_title a {
font:bold 12px Georgia, "Times New Roman", Times, serif !important;
color:#558599 !important;
}
.agg_right_title {
margin-bottom: 0px;
font:bold 14px Georgia, "Times New Roman", Times, serif;
color:#558599;
}
.agg_right_title a {
font:bold 14px Georgia, "Times New Roman", Times, serif !important;
color:#558599 !important;
}
.agg_right_title_lower {
margin-left: 10px;
margin-top: 10px;
font:bold 14px Georgia, "Times New Roman", Times, serif;
color:#558599;
}
.agg_right_title_lower a {
font:bold 14px Georgia, "Times New Roman", Times, serif !important;
color:#558599 !important;
}
.spacer12p {
margin-top: 12px;
}
.agg_upsell_box_top {
margin-left: -10px;
margin-right: -14px;
padding-right: 10px;
padding-bottom: 10px;
width: 356px;
position: relative;

}
.agg_upsell_box {
border-top: 12px solid #F0F8FB;
margin-left: -10px;
margin-right: -14px;
padding-right: 10px;
padding-bottom: 10px;
width: 356px;
position: relative;

}
.agg_image_container {
width: 70px;
float: left;
margin: auto;
}
.agg_image {
margin-top: -15px;

}
.agg_left_links {
float: left;
width: 130px;
position: relative;

}

.agg_right_links {
float: right;
width: 130px;
position: relative;

}
.agg_line {
border-top: solid 1px #ededed;
margin-top: 5px;
margin-bottom: 10px;
width: 330px;
margin-left: 4px;
}

probably sloppy CSS on my end no doubt, but how do i fix it?

CitznFish
05-22-2007, 07:21 PM
still looking for info on this... :)

Deuce
05-22-2007, 07:40 PM
still looking for info on this... :)

Hi CitznFish,

From the looks of your site you should really validate it. Without valid html you have no basis to complain that your css doesn't work. CSS relies on valid HTML and without will most likely return unsightly results.


HTML ERRORS (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Ffamily.go.com%2Fparenting%2Farticle-205684)

CSS ERRORS (http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Ffamily.go.com%2Fparenting%2Farticle-205684)

VIPStephan
05-22-2007, 08:48 PM
Indeed, your website is probably one of those examples where numerous hacks that were used to tweak incorrect display of already crappy code in IE and that used to work in IE 6 donít work in IE 7 anymore (while that one still being IE and doing things wrong, or behaving differently on errors than other browsers).

The thing is that until HTML 5 is official the way browsers handle errors in the code isnít standardized and while you probably got it alright in Firefox and hacked it to look alright in IE 6, IE 7 is a different pair of shoes. The primary goal for you now is to correct the HTML errors Deuce mentioned and then adapt the CSS for Firefox. Chances are that IE 7 will also display it alright then. However, youíll probably have to go a different way for IE 6 then. And note that your website is also displayed in quirks mode because you have some blank lines above your doctype. This makes IE 6 behave like even older browsers. It helps to have IE in standards mode which you can achieve by removing the emtpy lines and any character and/or white space before the doctype. It must sit directly at the top of your document.

koyama
05-22-2007, 08:49 PM
Hmm... It looks like float clearing is the problem.

From your stylesheet:


#articleHeader #articleTools:after {
clear: both;
content: ".";
height: 0;
display: block;
visibility: hidden;
}

This doesn't suffice for float clearing in IE6 or IE7 since the :after pseudo element is not supported. Or did I miss something in your style sheet?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum