firefox not working with css

Forum Moderators: not2easy

Message Too Old, No Replies

firefox not working with css

trying to view a website but it doesnt show up right in FF>

khan538

10:42 pm on Mar 11, 2005 (gmt 0)

I am redesigning a website in css to get ride of tables. I am having some problems as far as testing goes. I have two tags a container which has one called navsite. The navsite has navigation texts and all. They are at the end of document. They appear exactly where i want them in IE. But in firefox they appear on the opposite end next to the header i have. Can anyone tell me how i can fix this. Thank You.

#container {
padding: 0px 170px 0px 115px;
margin: 0px;
}

#navsite
{
text-align:center;
float:left;
width:200px;
}

4css

3:22 am on Mar 12, 2005 (gmt 0)

Hi khan538
Welcome to WebmasterWorld!

You might wish to post a bit more code then what you have right now. Sometimes it isn't the code that we think it is that is causing the problems. This would be a sort of trimed down of your xhtml/html and the css.

Also, let me suggest that you validate your xhtml/html and css first. There could be a few errors within your code that you might be missing.

Also, IE doesn't get things correctly. So it could be that what you are seeing in firefox is really how the page is working. IE is very forgiving of things that don't work in other browsers.

4css

khan538

7:26 am on Mar 12, 2005 (gmt 0)

Thank You 4CSS for the reply. Appreciate it. I have already validated my css files. The html had some problems that i didnt know if they were problems or not. Here is the html code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>VIB</title>
<link rel="stylesheet" href="test1.css" type="text/css"/>
<link rel="stylesheet" type="text/css" href="vaph.css">
</head>
<body BGCOLOR=#F3ECE3 text="#000000" link="#793C3C" vlink="#9C5656" alink="#B57373">
<div id="container">
<div id='header'>
<h1>
<a></a>
<b>></b>
<c></c>
</h1>
</div>

<div id="navsite">
<div align="left"> <a class="skipnav" href="#content">[skip navigation]</a><br>
<p><a>Career Opportunities</a><br>
<a>Faculty Listing</a> <br>
<a>Faculty Research<br></a>
<a>Graduate Studies<br></a>
<a>Research Focus<br></a>
<a>Teaching Focus<br></a>
<a>VIBS Home</a></p>
<p><a>CVM Home</a><br>
<a>CVM Departments</a></p>
</div>
<div align="left"> </div>
</div>
</div>
<div id="content">
</div>
</body>

</html>

here is the css file.
#header{
width:800px;
text-align:center;
}

#header h1 a{
display:block;
height: 122px;
font-size: 0;
text-align:left;
float:left;
width: 122px;
}

#header h1 b{
margin:30px;
display:block;
height:67px;
font-size:0;
text-align:center;
float:left;
width:434px;
}

#header h1 c{
display:block;
height:122px;
font-size:0;
text-align:right;
float:left;
width:122px;
}

DanA

9:27 am on Mar 12, 2005 (gmt 0)

You may fix one of the problems by adding
clear:both; in
#navsite{
/*...*/
clear:both;
}

4css

2:54 pm on Mar 12, 2005 (gmt 0)

Hi Khan538,
sorry so long to get back in here ;)

Anyhow, your headings might be causing the problem. Browsers render headings differently from each other. Some of them will add paddings and margins as per "their" default rendering. It is always good to zero out your margins and paddings in the headings, then add them in the div that they are in, if you need to add anything in regards to margins and paddings for that div.
#header h1 {
margin: 0px;
padding: 0px;
}
This might help you out. Let us know how things are after you do this.

khan538

2:14 pm on Mar 14, 2005 (gmt 0)

Thankx DanA that worked fine. Thank You very much.