...
PDA

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

edd1e
09-12-2007, 02:21 PM
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:

http://www.eddnichols.co.uk/CSS_Testing/firefox.JPG

IE6:

http://www.eddnichols.co.uk/CSS_Testing/ie6.JPG

Heres the code:

CSS:


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:


<!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!
effpeetee
09-12-2007, 04:12 PM
Try this.

http://www.positioniseverything.net/explorer.html

Frank
ahallicks
09-12-2007, 04:17 PM
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
edd1e
09-12-2007, 04:39 PM
Thanks guys,

well that kind of helped.

http://www.eddnichols.co.uk/CSS_Testing/slightly_better.JPG

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
ahallicks
09-12-2007, 04:42 PM
Try floating it left as well
edd1e
09-12-2007, 04:46 PM
Nope thats just makes it move to the left right under the left_news. Also means u see the overflow again.
ahallicks
09-12-2007, 04:50 PM
Do you have a live link, or is it just local?
edd1e
09-12-2007, 04:53 PM
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:


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


<!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>
ahallicks
09-12-2007, 04:55 PM
!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:

Sorry, it does now!
edd1e
09-12-2007, 04:58 PM
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
ahallicks
09-12-2007, 05:00 PM
It works now! The problem was that the news on the left needed overflow hidden too!
edd1e
09-12-2007, 06:17 PM
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;?

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum