Hi,
I'm currently working on a site for work experience that uses XHTML1.1 and CSS2.0 to create a standards-compliant webpage. I've completed the bulk of the layout, which displays nearly perfectly in Internet Explorer, but is completely messed up in Mozilla Firebird. I've checked out several reference sites and tried different arrangements of styles, but the page does not work. The site in its current state is at
http://itsweb.50free.org/ .
As you can see, in Mozilla Firebird, the body is not centered (even though there is a text-align: center; in the body element in my stylesheet), and the text body and menu are severely messed up. Also, in both IE and Mozilla, there is a border on the bottom of the top graphic that creates some whitespace in between the top graphic and the section links (currently: "blah blah blah blah blah blah"). How can I get rid of this? I tried setting the IMG style to be: "border: none; border-style: collapse", but to no avai.
Here is a brief overview of my code (you can obtain the full code on my website above):
HTML:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="en">
<head>
<title>ITS Web Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" href="its.css" />
</head>
<body>
<div id="bodyContainer">
<!-- begin top bar -->
<div id="topbar">
<img src="banners/banner2.jpg" alt="ITS Web Site" />
<div id="topright">
<div style="text-align: right;"><a href="#">sitemap</a> | <a href="#">search</a> | <a href="#">contact</a><br /></div>
<span style="font-size: 4pt;"> </span><br />
<input style="width: 100px; border: 1px solid #5577aa;" type="text" />
</div>
</div>
<!-- end top bar -->
<!-- begin top section links -->
<div id="seclinks">
<!-- dynamically generated php code will fill this in later -->
<span class="lightBG"><span class="darkBG">blah </span>| blah | blah | blah | blah | blah |</span>
</div>
<!-- end top section links -->
<!-- begin side webtree links -->
<div id="linktree">
Hello world!<br />
This is a link.
</div>
<!-- end side webtree links -->
<!-- begin body -->
<div id="bodyDisplay">
<snipped>Hello World! x several lines</snipped>
</div>
<!-- end body -->
</div>
</body>
</html>
CSS:
Code:
/* HTML Elements */
BODY {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
height: 100%;
text-align: center;
}
IMG {
border: none;
border-style: collapse;
}
A {
text-decoration: underline;
color: #57a;
}
/* IDs */
DIV#topbar {
width: 100%;
height: 100px;
}
DIV#topright {
position: absolute;
vertical-align: top;
display: inline;
font-family: Verdana, sans-serif;
font-size: 8pt;
text-align: right;
padding-bottom: 0px;
}
DIV#seclinks {
font-family: Verdana, sans-serif;
font-size: 8pt;
font-weight: bold;
text-align: right;
padding-top: 0px;
width: 100%;
border-bottom: 2px solid #57a;
}
DIV#linktree {
background-color: #def;
color: #57a;
width: 170px;
height: 100%;
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 10pt;
font-weight: bold;
padding-left: 15px;
padding-top: 50px;
float: left;
display: inline;
}
DIV#bodyDisplay {
/* position: relative;
top: 0px;
left: 170px; */
width: 600px;
font-family: Verdana, Arial, sans-serif;
color: #333;
font-size: 10pt;
}
DIV#bodyContainer {
width: 794px;
height: 100%;
vertical-align: top;
text-align: left;
border-left: 1px solid black;
border-right: 1px solid black;
padding-right: 1px;
clear: both;
}
/* Class templates */
SPAN.lightBG {
background-color: #def;
color: #57a;
}
SPAN.darkBG {
background-color: #57a;
color: #fff;
padding-left: 8px;
padding-right: 8px;
}
Any idea how I can fix these problems?
Thanks!
Also, another thing that's weird: when I remove the DOCTYPE at the top, it renders in Firebird nearly the same as IE (still not centered, but the body text works)
Dev Shed Forums Sponsor:
November 28th, 2003, 02:06 PM
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
