2 Centre Columns Different width in Firefox and IE. Hack needed please.

markmid

11-28-2005, 09:21 AM

Okay after ripping my hair out i'll get right to it. I've been around in circles with this annoyance now for several days.

The width of the centre content column is different in IE and Firefox, the thing is I have no idea why. Its probably to do with the padding which IE likes and Firefox doesn't or something, if you have a hack for padding please send it my way.

Here is the site:
http://www.debtloaninvest.com/test.html

You'll need to open this up in IE then firefox to see what I am talking about.
Firefox is out IE is lined up correctly.

Ignore the footer comment that is fine now unless i have to alter it again :)

Here is the html code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link type="text/css" rel="stylesheet" href="styles/mainstyle.css">
<title>test page</title>

</head>

<body>

<div id="wrap">

<div class="headcol">
<p><img src="images/debtloaninvestbusinesssuccess.gif" width="760" height="155"></p>
</div>

<div class="headsep"> <img src="images/whitespace.gif" width="760" height="49">
</div>

<div id="innerwrap">

<div class="leftcol" >
<p> <br>
<br>
<br>
Text goes here</p>
</div>

<div class="maincol">
<p><br>
<br>
<br>
Text Goes here...
</div>

</div>

<div id="clearwrap">
</div>

<div class="footer" >

<p align="left"><br>
<Bottom Links here.><br>
This is the troubled footer, which I have had to make the same color as the
main page :) as it extended behind the other columns...<br>
</p>

</div>

</div>

</body>
</html>

Here is the Css Code.

body{
background-color:#333366;
margin:0;
padding:0;
text-align:center;
}

#pagewidth{ }

#wrap {
width:760px;
margin:0 auto;
text-align:left;
}

#innerwrap {

width:760px;
float:none;
margin:0 auto;

}

#clearwrap {
float:left;
margin:0 auto;
}

div.headcol{
width:760px;
top:17px;
height:155px;
}

div.headsep{
background-color: #FFFFFF;
height:40px;
width:760px;
}

div.footer{

background-color:#FFFFCC;
float:left;
padding:2px;
width:100%;
}

div.leftcol{
background-color: #F8F1D7;
color: #333366 ;
width:150px;
float:left;
padding:2px;
}

div.maincol{
background-color: #FFFFFF;
padding:2px;
width:610px;
float:right;
}

I won't alter this so the bug stays the same when you view it, i'll alter a seperate test sheet.

Thank you for your time.

-Edit tried to sort the spacing out so its easier to read but the forum doesn't like it :(

_Aerospace_Eng_

11-28-2005, 09:48 AM

Use the [ code][ /code] to make code more readable on the forums. Now to your problem well you have a partial doctype, this isn't good for IE, it is now rendering the padding/margin incorrectly. Change this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
to this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
See if that fixes anything. Remember overall width DOES include padding. Currently your left column is 154px wide. 150px + 2px + 2px and your maincol is 614px wide 610 + 2px + 2px so total width of your leftcol and maincol is 768 not 760 make your maincol 602px for the width. Use this for your footer CSS
div.footer{
background-color:#FFFFCC;
padding:2px;
}
A block level element like a div will expand to fit the element it is in unless it is floated. No need to set a width.

markmid

11-28-2005, 10:10 AM

Thank you, the pages are virtually identical now. The transitional document is something I actually didn't know about, I got the original code from a website that generated some of it :) so I had no idea.

http://www.debtloaninvest.com/newtest.html

The above is the new page showing the changes, I will leave both of them up a couple of days so people can see the difference, for anyone having a similiar coding problem.

The only thing now I don't understand is the small space below the text, in the main columns, showing up in firefox and not in IE. It just seems strange, any idea's as to the cause? Probably padding again but it would be nice to know :)

There is also minor shrink in the overall margins in IE over firefox but they are both things I can play with or at the very least, being a bit of a perfectionist :), accept as being the browser rather than my code.

Thank you again,
Mark

-Edit I made sure the missing </p> was added in the html but the extra line is still there.

_Aerospace_Eng_

11-28-2005, 10:52 AM

Paragraphs have default margins and padding. It varies among browsers.
.leftcol p, .maincol p {
margin:0;
padding:0;
}
Something I do often is add this at the top of my CSS
* {
margin:0;
padding:0;
}
The above will set all padding and margin on all elements to 0. Then you will need to add in margin and padding where needed. This just takes care of the inconsistency between margin and padding among different browsers.

markmid

11-28-2005, 11:32 AM

Thanks the problem is making more logical sense now.

For anyone copying the code, I did have to align the footer to the right, else it was sitting behind the left column, because its trying to align underneath the main one heh. :D

Thank you again for the help, I am all set now and can tweak away.