homepage Welcome to WebmasterWorld Guest from 54.166.65.9
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS Troubles in Firefox But Not IE
Page won't align properly in FF
CoolVaughan




msg:3735650
 11:24 pm on Aug 31, 2008 (gmt 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

 

Marshall




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

Welcome to WebmasterWorld CoolVaughan.

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

Marshall

CoolVaughan




msg:3736300
 1:48 am on Sep 2, 2008 (gmt 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]

csuguy




msg:3736356
 7:03 am on Sep 2, 2008 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved