PDA

Click to See Complete Forum and Search --> : Cross Broswer Div Issue

bytemedia
01-29-2008, 03:28 PM
Can someone take a look at my CSS and HTML and tell me why the layout lines up correctly in IE but not firefox? In IE the right side div (#content2) lines up beautifully with my header and left content div, but in firefox it is pushed to the bottom of the wrapper below the left content div. It seems like the div content2 is about 15 pixels wider in firefox than it is in IE. Can anyone give me a hand?

Here's my CSS:

}body {
margin: 0;
padding: 0;
background-color: #FFFFFF;
color: #000000;
}

#wrapper {
width: 800px;
background-color:#FFFFFF;
position:relative;
}

#banner {
width: 800px;
height: 150px;
background-color:#FFFFFF;
border-style:dotted;
border-width:2px;
border-color:#660033;
border-bottom-style:none;
}

#menu {
width: 800px;
height: 30px;
background-color:#660033;
color: White;
padding-top: 4px;
}

#content {
padding: 5px;
float: left;
width: 500px;
line-height: 1.1em;
text-align:justify;
background-color:#FFFFFF;
border-style:dotted;
border-width:2px;
border-color:#660033;
border-top-style: none;
}

#content2 {
padding: 5px;
float:right;
width: 300px;
line-height: 1.4em;
text-align:justify;
background-color:#FFFFFF;
border-style:dotted;
border-width:2px;
border-color:#660033;
border-top-style: none;
border-left-style: none;

Here's the HTML to go along with it:

<head>
<link rel="stylesheet" href="layout.css">
<title></title>
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</head>
<body>
<center>
<div id="wrapper">
<div id="banner"></div>
<div id="menu"><font class="menu"><a class="menu" href="meetMV.htm">link here</a> | <a class="menu" href="vid.htm">
Videos</a> | <a class="menu" href="pic.htm">link here</a> | <a class="menu" href="article.htm">
link here</a> | <a class="menu" href="coach.htm">link here</a></font></div>
<div id="content">
<center><font class="header">Michael 411 Moment</font><br><font class="date">content here</font>
<p><font class="content">content here</font></p></center>
<hr>
<center><font class="header">content here</font><br>
<font class="date">By MVTL Staff 2007-01-29</font>
</center>
<font class="subHeader">content here</font>
<p><input type="checkbox" name="opt1" id="chk1"><font class="content">content here</font><br>
<input type="checkbox" NAME="opt2" id="chk2"><font class="content">content here</font><br>
<input type="checkbox" NAME="opt3" ID="chk3"><font class="content">content here</font><br>
<input type="checkbox" NAME="opt4" ID="chk4"><font class="content">content here</font><br>
<input type="checkbox" NAME="opt3" ID="chk5"><font class="content">content here</font><br>
<p><input type="submit" value="Submit" ID="Submit1" NAME="Submit1"></p>
</div>
<div id="content2"><font class="subHeader">Fast Fact</font><br>
<font class="content">content here</font>
</div>
</div>
</center>
</body>


Thanks in advance!
Centauri
01-29-2008, 04:29 PM
The content is too wide to fit...

Whilst the #wrapper is set to 800px wide, #banner is 804px wide, and #content is 514px wide with #content2 being 314px wide (making a total content width of 828px).

If this is working in IE, then it could only be due to you not having a valid doctype on the page, throwing IE into quirks mode with its broken box model.
bytemedia
01-29-2008, 05:04 PM
I accidentally posted a test css i had been screwing around with. I have made all the size properties fit within the wrapper. They all add up to 800 yet I still get it lined up perfectly in IE and horribly in Firefox. With the values as it, Firefox displays #content2 to the right of #content but under it and it looks as though its about 15 pixels too wide.

Here's the CSS, apologies for the mix-up:

body {
margin: 0;
padding: 0;
background-color: #FFFFFF;
color: #000000;
}

#wrapper {
width: 800px;
background-color:#FFFFFF;
position:relative;
}

#banner {
width: 800px;
height: 150px;
background-color:#FFFFFF;
border-style:dotted;
border-width:2px;
border-color:#660033;
border-bottom-style:none;
}

#menu {
width: 800px;
height: 30px;
background-color:#660033;
color: White;
padding-top: 4px;
}

#content {
padding: 5px;
float: left;
width: 500px;
line-height: 1.1em;
text-align:justify;
background-color:#FFFFFF;
border-style:dotted;
border-width:2px;
border-color:#660033;
border-top-style: none;
}

#content2 {
padding: 5px;
float:right;
width: 300px;
line-height: 1.4em;
text-align:justify;
background-color:#FFFFFF;
border-style:dotted;
border-width:2px;
border-color:#660033;
border-top-style: none;
border-left-style: none;
}

/* #menu {
float: right;
width: 200px;
background-color:#FFFFFF;
border-style:dotted;
border-width:2px;
border-color:#660033;
} */

#footer {
border-top: 2px solid #444;
float: left;
width: 800px;
height: 25px;
background-color:#ccc;
border-style:dotted;
border-width:2px;
border-color:#660033;
}
Centauri
01-29-2008, 06:26 PM
#content {
padding: 5px;
float: left;
width: 500px;
line-height: 1.1em;
text-align:justify;
background-color:#FFFFFF;
border-style:dotted;
border-width:2px;
border-color:#660033;
border-top-style: none;
}These add up to 514px

#content2 {
padding: 5px;
float:right;
width: 300px;
line-height: 1.4em;
text-align:justify;
background-color:#FFFFFF;
border-style:dotted;
border-width:2px;
border-color:#660033;
border-top-style: none;
border-left-style: none;
}These add up to 312px.
bytemedia
01-30-2008, 12:46 PM
Alright I have changed my borders to 10px wide and I've accounted for all the space taken up by padding and borders. Now everything lines up perfectly in firefox but in IE my banner isn't as wide so the layout is not lining up. Here is my CSS:

(the banner is only 820px wide because there are two instances of the border at the top, but there are three instances of the border in the content under the menu --two on the outside and one dividing the content near the middle--)

I just don't get how it could line up fine in firefox but not IE



body {
margin: 0;
padding: 0;
background-color: #FFFFFF;
color: #000000;
}

font.menu
{
color:White;
font-size: 14px;
font-family: Calibri;
}

font.content
{
font-family:Calibri;
color: Black;
font-size: 14px;
}

font.menuRight
{
font-family:Calibri;
color: Black;
font-size: 14px;
text-align:right;
}

font.date
{
font-family:Calibri;
color: Gray;
font-size: 11px;
}


font.header
{
font-family:Calibri;
color: #660033;
font-size: 25px;
}

font.subHeader
{
font-family:Calibri;
color: #660033;
font-size: 16px;
}

hr
{
color:Gray;
height: 2px;
width:90%;
}

#wrapper {
width: 840px;
background-color:#FFFFFF;
position:relative;
top:10px;
}

#banner {
width: 820px;
height: 150px;
background-color:#FFFFFF;
border-style:ridge;
border-width:10px;
border-color:#FF94FF;
border-bottom-style:none;
}

#menu {
width: 840px;
height: 60px;
background-color:#FF94FF;
color: White;
}

#content {
padding: 5px;
float: left;
width: 495px;
line-height: 1.1em;
text-align:justify;
background-color:#FFFFFF;
border-style:ridge;
border-width:10px;
border-color:#FF94FF;
border-top-style: none;
}

#content2 {
padding: 5px;
float:right;
width: 295px;
line-height: 1.4em;
text-align:justify;
background-color:#FFFFFF;
border-style:ridge;
border-width:10px;
border-color:#FF94FF;
border-top-style: none;
border-left-style: none;
}

#footer {
border-top: 2px double #444;
float: left;
width: 800px;
height: 25px;
background-color:#ccc;
border-style:double;
border-width:2px;
border-color:#660033;
}

A.menu:link
{
COLOR: #FFFFFF;
}
A.menu:visited
{
COLOR: #FFFFFF;
}
A.menu:hover
{
COLOR: #FFFF33;
}
A.menu:active
{
COLOR: #FFFF33;
}

A:link
{
COLOR: #FFFFFF;
}
A:visited
{
COLOR: #FFFFFF;
}
A:hover
{
COLOR: #FFFF33;
}
A:active
{
COLOR: #FFFF33;
}

*{text-decoration: none;}
Centauri
01-30-2008, 03:23 PM
Reduced display size in IE can ONLY mean it is in quirks mode - do you have a valid doctype as the first thing on the page ?
bytemedia
01-30-2008, 03:58 PM
here's the first line of my page (home.htm)...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Isn't that good enough?
Centauri
01-30-2008, 04:03 PM
No, the doctype should include the URI, otherwise IE is still in quirks mode. The full version of what you have is<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

New pages should really be using a strict doctype, which is <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
bytemedia
01-31-2008, 09:17 AM
Yep It looks like it's all working now. Thank you very very much for sticking with me through it. I'm sort of new to divs. I had been a table guy for so long.