CSS Troubles in Firefox But Not IE - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Troubles in Firefox But Not IE

Page won't align properly in FF

CoolVaughan

11:24 pm on Aug 31, 2008 (gmt 0)

10+ Year Member

I am working on a website and am attempting to use CSS to help with layout. I did this with a site in the past to relative success but am struggling with this one. When I load the page in Firefox the main Content box floats to the left and overlaps the menu bar.

I have looked through about 15 previous threads about this issue and have attempted to follow all the steps in them to no avail. I have used the CSS and the HTML Validator sites and have corrected all the errors that they informed me of. I have made sure the css is loading as text/css instead of text/plain and am still having issues.

Here is the CSS and the HTML for the relevant area, any help is greatly apppreciated.

I attempted to make it anonymous as per the TOS by using TEXT for any of my info.

Header:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<title> TEXT </title>
<meta http-equiv="Content-Type" content="text/html; charset=">
<link href="biostyle.css" rel="stylesheet" type="text/css">

HTML:

<div id="divContent">
<p align="center"><img src="Pix/Edited/IMG_1140.jpg" alt="Church" align="left" height="369" hspace="3" width="495" /> <span class="style2"> TEXT </span></p>
<br />
<p class="style2" align="center"> TEXT <br /> TEXT <br /> TEXT</p>
<br />
<p class="style2" align="center"> TEXT </p>
<p class="style2" align="center"> TEXT <br /> TEXT </p>
<br /><br /><br /></div>

CSS:

#divContent {
background-color: #FFFF99;
float: right;
padding: 1em;
margin-right: 1em;
margin-bottom: 2em;
margin-left: 2em;
color: #000000;
font-weight: bold;
border: 1px solid #FFFFFF;
width: 60%;
padding-right: 2em;
position: absolute;
width: 849px;
border-color: #FFCC66;

Once again thanks for any help,
Jonah

Marshall

1:38 am on Sep 1, 2008 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Welcome to WebmasterWorld CoolVaughan.

Try removing the position: absolute; from the #divContent. You have conflicting setting with that and float: right;

Marshall

CoolVaughan

1:48 am on Sep 2, 2008 (gmt 0)

10+ Year Member

Well ya, when I removed the position: absolute; and changed the float to align it looks and works great in FF but is struggling in IE.

The content element aligns over on the right hand side great in both when I have the screen fully maximized on a widescreen. When I "restore down" using IE, instead of creating a scroll bar along the bottom, it pushes that content element down below the nav bar on the left.

The position: absolute; fixed this and I think thats why I had it in the first time.

Here is what the #div tag looks like now

#divContent {
background-color: #FFFF99;
align: right;
padding: 1em;
margin-right: 1em;
margin-bottom: 2em;
margin-left: 12em;
color: #000000;
font-weight: bold;
border: 1px solid #FFFFFF;
width: 60%;
padding-right: 2em;
width: 849px;
border-color: #FFCC66;

Thanks,
Jonah

[edited by: CoolVaughan at 1:53 am (utc) on Sep. 2, 2008]

csuguy

7:03 am on Sep 2, 2008 (gmt 0)

10+ Year Member

Sounds like a spacing issue. IE uses a slightly different box model - and this is often the cause of differences in layout between IE and other browsers. Try giving the boxes plenty of space and see if they don't go to their proper places (though a bit farther apart than you want). You may want to use IE comments to give different values for margins & padding, while constructing the page to look right in FF. Once its good in FF just keep lowering the margins&padding for IE until it looks right.

I suggest starting off by simply increasing the width - and commenting out all margin/paddings associated with the floats.