PDA

View Full Version : my site IE vs Firefox


chaser7016
May 6th, 2007, 05:46 PM
www.techavid.com the left float height covers both elements, while Firefox they are separated as I wish them to be. Here is code

Here is the portions of CSS that Im using:


Body
{

background-color: #FFEBCD;
background-color: #454C67;
color: #000000;
font: normal 76% Verdana, Helvetica, Arial, sans-serif;
line-height: 170%;
}

div.sidebar {

float:left;
width: 150px;
height: 250px;
background-color: white;
margin: 100px 0px 0px 0px;
clear: left;
text-align: center;
background-image: url(../images/about.gif);

}


#box {
margin-left: 170px;
margin-top: 1px;
background-color: #FFFFFF;
width: 700px;
height: 650px;

}

#box2
{
margin-left: 170px;
margin-top: 1px;
background-color: #FFFFFF;
width: 700px;
height: 800px;
text-align: center;
background-image: url(../images/box2.gif);
}


#box3
{
margin-left: 170px;
margin-top: 1px;
background-color: #FFFFFF;
width: 700px;
height: 1000px;
text-align: center;
background-image: url(../images/box3.gif);
}



Here is the html where the problem occurs:



<div class="sidebar">
<br><H3><u><a href="http://www.ryanismy.name">About/Me</u></a></H3>
Thanks, for stopping by! Here you will find some Internet & technology ideas discussed that peaked my interest enough to create & demonstrate.
<br><br><br><img src="images/gmail.png"><script src="http://gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/googletalk.xml&amp;synd=open&amp;w=150&amp;h=451&amp;title=Have+Gmail?+Chat+With+Me&amp;border=%23ffffff%7C3px%2C1px+sol id+%23999999&amp;output=js"></script></div>


Thanks to anyone who can school me on why IE is treating these elements differently then Firefox.

Chaser
koyama
May 6th, 2007, 08:23 PM
You have this for the sidebar:


div.sidebar {
float:left;
width: 150px;
height: 250px;
background-color: white;
margin: 100px 0px 0px 0px;
clear: left;
text-align: center;
background-image: url(../images/about.gif);
}
Firefox correctly gives it a height of 250px and displays overflowing content outside the box. IE6 and previous versions do not support the height property correctly. Rather it works like a minimum height. This is bug is referred to as the expanding box problem (http://www.positioniseverything.net/explorer/expandingboxbug.html). Fortunately this has been fixed in IE7.

With that said you have no doctype declaration. This is unfortunate because this causes your page is rendered in quirks mode (http://www.quirksmode.org/css/quirksmode.html). This especially has severe consequences in Internet Explorer. It is locked in a rendering mode similar to the one of IE5.

The right doctype for you may be this one:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
chaser7016
May 6th, 2007, 08:55 PM
Thank you very much! I completely forgot the doctype !

Cheers, Chaser