css looks good in IE terrible in FF ... help

	Home Register Search Help Login

Recent Posts
Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Sponsors
Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.
Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.
Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

css looks good in IE terrible in FF ... help

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> css looks good in IE terrible in FF ... help

Page: [1]


dbguide Posts: 33 Joined: 12/12/2007 From: New York Status: offline	css looks good in IE terrible in FF ... help - 10/6/2008 20:57:35 Hey everyone, Hows it going? I have a prob with my css layout and I have fiddling around with it for 3 days and can't seem to understand why it looks great in IE and it lines up terrible in FF. I kinda need a fresh set of eyes. Here it is-- http://greenbolnyc.com/policy/policies.htm here is my css layout-- http://greenbolnyc.com/css/msgstyle.css Basically my main div does not contain the divs that are inside it. I know it has something to do with the "float control" but if you look at the header div the menu div fits perfectly it could be the DIV { margin: 0px, auto; } which I think centers all divs ... but I am not sure any suggestions would be fantastic!


Tailslide Posts: 6692 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	RE: css looks good in IE terrible in FF ... help - 10/7/2008 2:23:08 Hi there. Couple of things to start with. Firstly and most easily solved - add overflow:hidden to the rule for the div with the class .main1. That will enclose the floats with the background and border. Secondly - you've got an incomplete doctype in the incorrect position which will put all browsers into Quirks mode. This means that you need to rely on various browsers' error handling routines - very dodgy. So get rid of the current partial doctype and get yourself a proper, full doctype - try this one: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Put it right at the top of the code - before absolutely everything else. Now you're working in standards mode and you can address any issues that still exist. You may well find some other errors arising now that you're declaring a proper doctype but get these bits done first and we'll sort those out if they arise. _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to dbguide)

dbguide

Posts: 33
Joined: 12/12/2007
From: New York
Status: offline

RE: css looks good in IE terrible in FF ... help - 10/7/2008 4:29:12

Hey Tailslide,

great stuff thanks, please see comments

quote:

Firstly and most easily solved - add overflow:hidden to the rule for the div with the class .main1. That will enclose the floats with the background and border.

doh --- awesome!!!

quote:

Secondly - you've got an incomplete doctype in the incorrect position which will put all browsers into Quirks mode. This means that you need to rely on various browsers' error handling routines - very dodgy. So get rid of the current partial doctype and get yourself a proper, full doctype - try this one:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Yeah read about the strict.dtd ... I didn't realize. I guess my builder just uses a generic one. Thanks!!

I think I addressed most of the css issues that arose after adding the overflow rules

but I got one more that I can't figure out. There is a 1px background color line showing up btwn my header div and main div on FF but not on IE. I am going to look for the problem but maybe you can pinpoint it faster. It could be from my menu css?

All help is greatly appreciated.

webpage -- http://greenbolnyc.com/policy/policies.htm

css file overall -- http://greenbolnyc.com/css/msgstyle.css

menu css -- http://greenbolnyc.com/css/msgmenu0.css

(in reply to Tailslide)


Tailslide Posts: 6692 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	RE: css looks good in IE terrible in FF ... help - 10/7/2008 4:53:15 Hi The Doctype is still in the wrong place - it needs to be above the html tag... There's probably a smart way around the gap in FF... but I find that adding a top or bottom border the same colour as the background usually solves it - I guess it's something to do with margin collapsing. In this case if you add border-bottom:1px solid white; to the div with the class .menu1 it seems to sort it. _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to dbguide)

dbguide

Posts: 33
Joined: 12/12/2007
From: New York
Status: offline

RE: css looks good in IE terrible in FF ... help - 10/7/2008 14:13:45

Thanks again for your concern, your help and advice is much appreciated.

quote:

The Doctype is still in the wrong place - it needs to be above the html tag...

ok sorry messed up again. ..right on it

quote:

There's probably a smart way around the gap in FF... but I find that adding a top or bottom border the same colour as the background usually solves it - I guess it's something to do with margin collapsing. In this case if you add border-bottom:1px solid white; to the div with the class .menu1 it seems to sort it.

I solved it, I just adjusted the height of the header div from auto to a static value. The menu divs are all auto values so adjusting the header was the easiet fix.

thanks a bunch tailslide

(in reply to Tailslide)