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 12 of 12
  1. #1
    New Coder
    Join Date
    Sep 2007
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS Not displaying correctly in IE6 but shows fine in IE7/FF

    Hi all, my first post!

    I have a template working fine in IE 7 and Firefox but it does not work correctly in IE6. heres what i mean:

    FireFox / IE7:



    IE6:



    Heres the code:

    CSS:

    Code:
    body {
    text-align: center; /* center's things in pre IE6 */
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    }
    
    #container {
    margin: auto;
    padding: 0px;
    width: 579px;
    height: auto;
    text-align: left;
    background-color: #CCCCCC;
    }
    
    #navbar {
    width: 579px;
    height: 35px;
    padding: 0px;
    margin: 0px;
    }
    
    #header_image {
    width: auto;
    background-color: #009999;
    height: 35px;
    padding: 0px;
    margin: 0px;
    }
    
    #latest_news {
    width: auto;
    background-color: #009999;
    height: 35px;
    min-height: 35px;
    padding: 0px;
    margin: 0px;
    }
    
    #news_container {
    width: 579px;
    height: auto;
    min-height: 80px;
    overflow: hidden;
    text-align: left;
    }
    
    #news_left {
    float: left;
    width: 23px;
    margin: 0px;
    background-color: #000099;
    padding: 0px;
    min-height: 80px;
    height: auto;
    padding-bottom: 32767px;
    margin-bottom: -32767px;
    }
    
    #news_right {
    float: right;
    width: 21px;
    background-color: #000099;
    margin: 0px;
    padding: 0px;
    min-height: 80px;
    height: auto;
    padding-bottom: 32767px;
    margin-bottom: -32767px;
    }
    
    #news_center {
    float: left;
    width: 535px;
    margin-left: 23px;
    margin-right: 21px;
    background-color: #333333;
    min-height: 80px;
    height: auto;
    padding: 0px;
    margin: 0px;
    padding-bottom: 32767px;
    margin-bottom: -32767px;
    }
    
    #news_bottom {
    width: 579px;
    background-color: #009999;
    height: 35px;
    min-height: 35px;
    padding: 0px;
    margin: 0px;
    }
    
    #footer {
    clear: both;
    background-color: #333333;
    padding: 0px;
    margin: 0px;
    }
    HTML:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <link href="style3.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    
    <div id="container">
    
    <div id="navbar"></div>
    
    <div id="header_image"></div>
    
    <div id="latest_news"></div>
    
    <!-- start 3 columns -->
    
    <div id="news_container">
    
    <div id="news_left">blah blah blah blah blah blah blah blah blah blah blah</div>
    
    <div id="news_center">blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</div>
    
    <div id="news_right">lllllljkjiivilll bbvu ufuf uf uyf uyf u fuf uy</div>
    
    </div> <!-- news container -->
    
    <div id="news_bottom"></div>
    
    <div id="footer">footer</div>
    
    </div>
    
    </body>
    </html>
    just so you know the

    padding-bottom: 32767px;
    margin-bottom: -32767px;

    are to expand all the columns to same height if one overflows, i'm not sure if this is the best method of doing it. but i don't think this is the problem

    cheers guys!

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    IE6 is incorrectly stretching that right-news div to fit the content that should otherwise overflow (as it does in IE7 and FF). I would suggest you stick overflow: hidden; on that div so that anything that potentially overflows will not show up
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #4
    New Coder
    Join Date
    Sep 2007
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks guys,

    well that kind of helped.



    As you can see its now the right width but it does not want to sit beside the the news_center div? also doing it this way means it crops the text and word-wrap: break-word; only appears to work in IE and not FF.

    I don't see why its not just working like the left_news dev?

    really confusing me!

    Thanks for your help guys, anymore would be great.

    Edd

  • #5
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Try floating it left as well
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #6
    New Coder
    Join Date
    Sep 2007
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Nope thats just makes it move to the left right under the left_news. Also means u see the overflow again.

  • #7
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Do you have a live link, or is it just local?
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #8
    New Coder
    Join Date
    Sep 2007
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    local atm. code is just the same as i posted above.

    Could just copy it into a css and html file if you want to test

    Would REALLY appreachate it.

    heres the latest code i'm working from:

    Code:
    body {
    text-align: center; /* center's things in pre IE6 */
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    }
    
    #container {
    margin: 0 auto;
    width: 579px;
    height: auto;
    text-align: left;
    background-color: #CCCCCC;
    padding: 0px;
    }
    
    #navbar {
    width: auto;
    height: 35px;
    }
    
    #header_image {
    width: auto;
    background-color: #009999;
    height: 35px;
    }
    
    #latest_news {
    width: auto;
    background-color: #009999;
    height: 35px;
    min-height: 35px;
    }
    
    #news_container {
    width: 579px;
    height: auto;
    min-height: 80px;
    overflow: hidden;
    }
    
    #news_left {
    float: left;
    width: 23px;
    height: auto;
    background-color: #000099;
    min-height: 80px;
    padding-bottom: 32767px;
    margin-bottom: -32767px;
    }
    
    #news_center {
    float: left;
    width: 535px;
    height: auto;
    background-color: #333333;
    min-height: 80px;
    padding-bottom: 32767px;
    margin-bottom: -32767px;
    }
    
    #news_right {
    float: right;
    width: 21px;
    height: auto;
    background-color: #000099;
    min-height: 80px;
    padding-bottom: 32767px;
    margin-bottom: -32767px;
    overflow: hidden;
    }
    
    #news_bottom {
    width: 579px;
    background-color: #009999;
    height: 35px;
    min-height: 35px;
    }
    
    #footer {
    clear: both;
    background-color: #333333;
    height: 35px;
    min-height: 35px;
    }
    HTML

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <link href="style3.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    
    <div id="container">
    
    <div id="navbar"></div>
    
    <div id="header_image"></div>
    
    <div id="latest_news"></div>
    
    <!-- start 3 columns -->
    
    <div id="news_container">
    
    <div id="news_left">blah blah blah blah blah blah blah blah blah blah blah</div>
    
    <div id="news_center">blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</div>
    
    <div id="news_right">12345678910111213</div>
    
    </div> <!-- news container -->
    
    <div id="news_bottom"></div>
    
    
    <div id="footer">footer</div>
    
    </div>
    
    </body>
    </html>

  • #9
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Code:
    !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style type="text/css">
    * {
    	margin: 0;
    	padding: 0;
    }
    
    #container {
    	margin: auto;
    	width: 579px;
    	height: auto;
    	text-align: left;
    	background-color: #CCCCCC;
    }
    
    #navbar {
    	width: 579px;
    	height: 35px;
    }
    
    #header_image {
    	width: auto;
    	background-color: #009999;
    	height: 35px;
    }
    
    #latest_news {
    	width: auto;
    	background-color: #009999;
    	height: 35px;
    	min-height: 35px;
    }
    
    #news_container {
    	width: 579px;
    	height: auto;
    	min-height: 80px;
    	overflow: hidden;
    }
    
    #news_left {
    	float: left;
    	width: 23px;
    	background-color: #000099;
    	min-height: 80px;
    	height: auto;
    	overflow: hidden;
    	padding-bottom: 32767px;
    	margin-bottom: -32767px;
    }
    
    #news_center {
    	float: left;
    	width: 535px;
    	background-color: #333333;
    	min-height: 80px;
    	height: auto;
    	padding-bottom: 32767px;
    	margin-bottom: -32767px;
    }
    
    #news_right {
    	float: left;
    	width: 21px;
    	background-color: #000099;
    	min-height: 80px;
    	height: auto;
    	overflow: hidden;
    	padding-bottom: 32767px;
    	margin-bottom: -32767px;
    }
    
    #news_bottom {
    	width: 579px;
    	background-color: #009999;
    	height: 35px;
    	min-height: 35px;
    }
    
    #footer {
    clear: both;
    background-color: #333333;
    }
    </style>
    </head>
    
    <body>
    
    <div id="container">
    
    <div id="navbar"></div>
    
    <div id="header_image"></div>
    
    <div id="latest_news"></div>
    
    <!-- start 3 columns -->
    
    <div id="news_container">
    
    	<div id="news_left">blah blah blah blah blah blah blah blah blah blah blah</div>
    
    	<div id="news_center">blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</div>
    
    	<div id="news_right">lllllljkjiivilll bbvu ufuf uf uyf uyf u fuf uy</div>
    
    </div> <!-- news container -->
    
    <div id="news_bottom"></div>
    
    <div id="footer">footer</div>
    
    </div>
    
    </body>
    </html>

    This works:

    Edit: Sorry, it does now!
    Last edited by ahallicks; 09-12-2007 at 05:59 PM.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #10
    New Coder
    Join Date
    Sep 2007
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    i'm guessing you made the container slightly wider?

    i have also tried this works fine in IE6 but then when you view in FF there is a gap.

    I have got to go home now but i will check back later.

    thank you for your help

  • #11
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    It works now! The problem was that the news on the left needed overflow hidden too!
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #12
    New Coder
    Join Date
    Sep 2007
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ah yes so it does! thanks alot. Is there anyway you can get it to wrap the text though? without having to use a word-wrap: break-word;?


  •  

    Posting Permissions

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