View Full Version : Problem with CSS displaying in Fx vs IE7

04-01-2008, 05:16 AM
Hey guys, this is my first post here, and I'm pretty new to this.

I've run into a problem, I decided to change my table based layout into a completely new website using div's and CSS. I spent nights working in IE (now I realized this is bad, after finding research saying its much better to work in Fx or so, then convert for IE instead of vice versa) and got it looking exactly how I wanted! Then I open it up in Fx and wow.

I'll attach the CSS and the HTML of one of the pages.

Basically, in IE it looks exactly how I would like it, in Fx the div that should be on the right is stuck in the middle for some reason. I've googled my butt off and can't find a single solution. Also, the right border of the div called columnleft does not scroll all the way down with the content when viewed in Fx. I would like to keep the scrollbar in the main div element because the final layout is going to have a top and bottom frame.

Anyone know a way to fix this?

style.css is the basic styleshee
theband.txt is the HTML doc for that page, uses the two column divs
news.txt is same as above, but uses one single div. (the problem with this is the scrollbar seems to cover some of the content)

Thanks to anyone who gets a chance to view this over!

Edit: www.bassmetal.net is the site if anyone wants to view it online.

04-01-2008, 09:54 AM
You haven't got a DOCTYPE as the FIRST line of your code.

No DOCTYPE and you have lost the control of your site. The browser will not know which version of HTML you are using.


04-01-2008, 10:01 AM
He is using framesets and the original page is http://www.bassmetal.net/home.html

04-01-2008, 10:08 AM
I still cannot find a Doctype. Am I missing something here?


04-01-2008, 10:14 AM
I still cannot find a Doctype. Am I missing something here?

Frank No, you are right :)

04-01-2008, 10:35 AM

First, you should'nt use the center tag...it's a deprecated element (http://www.codehelp.co.uk/html/deprecated.html), Use margin:auto; instead :)

You haven't had added propert DTD (http://www.w3schools.com/TAGS/tag_doctype.asp) in your page :)
Add this above your html tag in index.html

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

Change your columnright class declaration to:

width: 200px;
height: 100&#37;;
text-align: center;
padding: 5px;

There is no length attribute in the hr tag. Use size instead ;)

There is no align property in CSS, find it in your content class declaration :)

Enlarge your content div width so that it will place your columnright and columnleft div :)

Also note that scroll-bars do change color only in IE. :)

See if it helps ;)

04-01-2008, 07:50 PM
EDIT: After cleaning it up so it validates into xhtml transitional, adding that doctype, and applying the changes, all seems to be in working order. One more thing:
1. the right border of the left div seems to not scroll down with the rest of the content (i would like this so it appears there are two columns all the way down, without using faux columns)
2. in firefox, the home page does not seem to be displaying the footer. (www.bassmetal.net or www.bassmetal.net/home.html for the unframed bottom)

Thanks much again guys, I really appreciate the help.

Here is new code:


04-02-2008, 10:12 AM
Not showing?!...Well, it's showing, apparently in the wrong place :)

Give you footer class a clear:both; ;)