November 28th, 2003, 03:06 PM
XHTML1.1/CSS2.0 - Not rendering correctly
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):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
<title>ITS Web Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" href="its.css" />
<!-- begin top bar -->
<img src="banners/banner2.jpg" alt="ITS Web Site" />
<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" />
<!-- end top bar -->
<!-- begin top section links -->
<!-- dynamically generated php code will fill this in later -->
<span class="lightBG"><span class="darkBG">blah </span>| blah | blah | blah | blah | blah |</span>
<!-- end top section links -->
<!-- begin side webtree links -->
Hello world!<br />
This is a link.
<!-- end side webtree links -->
<!-- begin body -->
<snipped>Hello World! x several lines</snipped>
<!-- end body -->
Any idea how I can fix these problems?
/* HTML Elements */
/* IDs */
font-family: Verdana, sans-serif;
font-family: Verdana, sans-serif;
border-bottom: 2px solid #57a;
font-family: Tahoma, Verdana, Arial, sans-serif;
/* position: relative;
left: 170px; */
font-family: Verdana, Arial, sans-serif;
border-left: 1px solid black;
border-right: 1px solid black;
/* Class templates */
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)
November 28th, 2003, 03:35 PM
Well, to get you started, the doctype thing usually affects the way browsers render the information. A proper doctype usually forces the browser into standards compliant mode, without the doctype, many use their 'quirky' mode (that is one more consistent with previous versions).
The text-align property will not affect the layout of elements in child nodes. It only should affect the way text is aligned. Explorer though incorrectly applies the property to everything. That's why your stuff isn't centered in Mozilla, it's actually the way it should be.
Standard-compliant centering is usually done by assigning a width to a block-level element, and having the margins set to auto. No surprise though, this doesn't work in Explorer. So, to do a pure css center, you're usually left with using both the margin: auto properties and the text-align settings to be cross-browser friendly, though you have to be careful about inheritance since the properties won't have the same effect in different browsers.
The border arises because you have your links set to absolute position. You've set it to go to the right, but you gave it no vertical coordinates. So, since there is no room beside the image, the browser places it below the image, creating that gap. You can either assign the proper vertical coordinate based on the size of your banner, or simply make the banner the background image of the parent div (and size the two accordingly).
Sorry, no code. I don't even have enough time to finish looking at your example. Hope that gets you going though.
November 28th, 2003, 09:06 PM
ie does the things wrong not MozFB,
one thing that you should note,
you shouldn't server your pages as text/html when using xhtml1.1
in the#bodydisplay use <p> instead of <br /> <br />