Welcome to WebmasterWorld Guest from 54.162.168.187

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Troubles in Firefox But Not IE

Page won't align properly in FF

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

New User

5+ Year Member

joined:Aug 31, 2008
posts: 2
votes: 0

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

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

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 4, 2001
posts:2201
votes: 34


Welcome to WebmasterWorld CoolVaughan.

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

Marshall

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

New User

5+ Year Member

joined:Aug 31, 2008
posts: 2
votes: 0


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]

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

Full Member

5+ Year Member

joined:July 26, 2008
posts:265
votes: 0


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.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members