Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Nov 2002
    Location
    Southern California
    Posts
    110
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer Does IE7 handle CSS differently than IE6? (not NASH hack or Star hack)

    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
    Code:
    /* 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?
    Last edited by CitznFish; 05-22-2007 at 01:36 AM.
    Everyone has the right to be stupid, some just abuse the privilege.

  • #2
    Regular Coder
    Join Date
    Nov 2002
    Location
    Southern California
    Posts
    110
    Thanks
    0
    Thanked 0 Times in 0 Posts
    still looking for info on this...

  • #3
    New Coder
    Join Date
    May 2007
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by CitznFish View Post
    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


    CSS ERRORS

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,005 Times in 978 Posts
    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.

  • #5
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Hmm... It looks like float clearing is the problem.

    From your stylesheet:
    Code:
    #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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •