#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    18
    Rep Power
    0

    XHTML1.1/CSS2.0 - Not rendering correctly


    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;">&nbsp;</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)
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2002
    Location
    Seattle WA
    Posts
    863
    Rep Power
    14
    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.
  4. #3
  5. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    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
    http://www.w3.org/TR/xhtml-media-types/

    in the#bodydisplay use <p> instead of <br /> <br />

IMN logo majestic logo threadwatch logo seochat tools logo