Forum Moderators: not2easy
<No URLs, thanks. See TOS [WebmasterWorld.com] and CSS Forum Charter [WebmasterWorld.com]>
My CSS code:
body, html { margin: 0px; padding: 0px; height: 100%; width: 100%; border: 0px; }
#main { margin-left: 0px; position: absolute; left: 0px; top: 15px; overflow:
auto; height: 400px; padding-right: 0px; ; clip: rect(auto auto auto auto); width: 750px ; z-index: 1; visibility: visible} html { overflow: hidden; } #content { margin-left: 0px; position: absolute; left: 470px; top: 75px; overflow: auto;
height: 290px; padding-right: 0px; ; clip: rect(auto auto auto auto); width: 275px; z-index: 2}
#nav { margin-left: 0px; position: absolute; left: 415px; top: 25px; overflow: auto; height: 45px; padding-right: 0px; ; clip: rect(auto auto auto auto); width: 320px; z-index: 3}
The complete HTML:
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body text="#000000" link="#336666" vlink="#666666" alink="#000000" bgcolor="#333333" background="images/2_bgcolor.jpg">
<div id="nav" style="">
<p align="right"><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><a href="index.html"><img src="images/b_home.gif" width="57" height="16" border="0"></a> <a href="#"><img src="images/b_tunes.gif" width="55" height="16" border="0"></a>
<a href="#"><img src="images/b_merch.gif" width="55" height="16" border="0"></a>
<a href="gallery.html"><img src="images/b_gallery.gif" width="58" height="16" border="0"></a>
<a href="shows.html"><img src="images/b_shows.gif" width="55" height="16" border="0"></a>
<a href="#"><img src="images/b_journal.gif" width="61" height="16" border="0"></a>
<a href="press.html"><img src="images/b_press.gif" width="58" height="16" border="0"></a>
<a href="about.html"><img src="images/b_about.gif" width="58" height="16" border="0"></a>
<a href="linx.html"><img src="images/b_linx.gif" width="58" height="16" border="0"></a></font></p>
</div>
<div id="main" style="height: 392px; width: 752px; overflow: hidden; left: auto">
<p><img src="images/layout_A_2.jpg" width="750" height="400"></p>
</div>
<div id="content" style="">
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Test text. </font><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Test text. </font><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Test text.</font></p>
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Test text. </font><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Test text. </font><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Test text.</font></p>
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Test text. </font><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Test text. </font><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Test text.</font></p>
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Test text. </font><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Test text. </font><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Test text.</font></p>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p align="center"> </p>
<p align="center"><br>
</p>
<p align="center"> </p>
<p align="center"><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#666666">Copyright stuff</font></p>
<p align="center"> </p>
</body>
</html>
Any ideas?
[edited by: DrDoc at 10:01 pm (utc) on Mar. 6, 2006]
[edit reason] removed specifics [/edit]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
The second thing I notice is that you're using a lot of outdated and depreciated attributes and tags like:
<body text="#000000" link="#336666" vlink="#666666" alink="#000000" bgcolor="#333333" background="images/2_bgcolor.jpg">
and
<p align="right">
and
<font face="Verdana, Arial, Helvetica, sans-serif" size="2">
This bold items above are all presentational and should be defined in your stylesheet, not in the HTML.
Also, be aware that users with increased font sizes may not see your site as you intended it. That is, much of it may get clipped off as you have defined heights in pixel values.
I would start by cleaning up those things above. The DOCTYPE will at least bring IE out of quirks mode so you can see how things are supposed to look.
I believe the problem you are having is that the font size in Firefox may be slightly larger than in IE. Thus, your navigation links don't all fit on 2 lines because you have characters between the images, which are not a static size.
Also, your semantics are incorrect. You are placing lists of links in a <p> tag... that's not a paragraph. You're using a bunch of empty <p> elements for vertical spacing... I don't mean to sound rude or crass, but are you sure you're a web developer?
As always, the first step when running into problems should be to validate both your markup [validator.w3.org] and CSS [jigsaw.w3.org].
It will save you some headache.
