Pages not rendering correctly on Chrome,safari and ie8 but ok on ff for ubu

Amaina 14 Newbie Poster

14 Years Ago

I am working on a project in CSS and xhtml but when i tested the layout on different browsers i identified a problem in positioning of elements. To be precise, the navigation bar renders well in firefox 11 for ubuntu canonical 1.0 but seems not to work in IE, safari and google chrome. I have not tested with chrome yet....i'm a green horn(just starting) on CSS

here is the code

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"      
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">      
 <html xmlns="http://www.w3.org/1999/xhtml">      
   <head>      
     <title>Backpacking East Africa, Backpacking Kenya, Backpacking Tanzania, Backpacking Uganda, Backpacking Zambia, Backpacking Zimbabwe, BackPacking Rwanda,</title>      
     <meta http-equiv="Content-Type"      
         content="text/html; charset=utf-8"/>
<link href="style1.css" rel="stylesheet" type="text/css"/> 

   </head> 

        <body>
            <div id = "header"></div>
                <ul>
                <li><a href="home">Home</a></li>
                    <li><a href="about us">about us</a></li>
                    <li><a href="locations">locations</a></li>
                    <li><a href="blog">blog</a></li>

                </ul>
                        <div id = "container">
                            <div id = "box_1"></div>
                                <div id ="box_2">
                                <h6>Travel News</h6>
                                </div>
                         </div>

            <div id = "footer"></div>     
   </body>

   </html>



   CSS 

   /*CSS designed by amaina/
/*---------------------------------------*/
/*HTML elements
/*----------------------------------------*/
/*font family*/

body,table,tr,p,h1,h2,h3,h4,h5,h6,ol,ul,li,a{
    font-family:trebuchet ms, arial, helvetica, sans-serif;
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/*headings should be conspicuous*/
h1 {
    font-weight: normal;
    color: #333;
    font-size: 1em;
    font-weight: bold;
    padding: 0 10px 0 10px;
}

h2 {
    font-weight: normal;
    color: #666;
    font-size: 0.8em;
    font-weight: bold;
    padding: 0 10px 0 10px;
}


/*body layout */
html,body
{
    height:100%;
    margin: 0px;
    padding: 0px;
    font-size: 100%;
    background-color: #fff;

}


/*paragraph style */
p
{
    font-weight: normal;
    color: #666;
    font-size: 0.8em;
    margin-top: 0px;
    margin-bottom: 18px;
    padding: 0 10px 0 10px;
}

ul {
    list-style-type:none;
    position:absolute;
    top: 150px;
    left: 195px;
    margin:0;
    padding:0;
    overflow:hidden;
}

li {
    float:left;
    display:inline;
    list-style-type:none;

}
a:link,a:visited
{
    display:block;
    border: 0.1em solid #FFFFFF;
    width:120px;
    font-weight:bold;
    color:#424242;
    background-color:#F2F2F2;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:capitalize;
}

a:hover,a:active
{
    background-color:#E6E6E6;
}

/*header for page*/

#header {

    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background-color:#73AD73;
}

/*Container where to put content*/
#container {

    font-size:1.4em;    
    min-height:100%;
    padding-top:90px;
    margin: 0 auto;
    /*width: 90%;*/
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
    background-color:#FAFAFA;

}

#box_1 { 
    position:absolute;
    top:180px;
    left:675px;

    width:480px;
    height:300px;
    background: #2E2E2E;
}


#box_2 {
    position:absolute;
    top:180px;
    left:195px;
    width: 480px;
    height: 300px;
    background:yellow;
}

#footer {
    position:relative;
    bottom:0px;
    left:0px;
    width: 100%;
    height: 50px;
    background: #73AD73;
}

Edited 14 Years Ago by Member #120589 because: apply code tags

1 Contributor
0 Replies
130 Views

Dani AI

Generated 9 Months Ago

Note for : the cross‑browser symptom you describe (works in Firefox, breaks in WebKit/IE) is very often caused by one or more of these: the document is rendered in quirks mode (bad/malformed DOCTYPE or BOM/whitespace before the DOCTYPE), absolutely positioned elements that have no positioned ancestor (so browsers use different containing blocks), or invalid markup (unclosed tags / unexpected attributes). Start by checking whether the page is in standards mode and whether the nav is inside a positioned parent.

A small, low‑risk fix that usually clears this up is to make the header a positioned container and place the menu inside it. For example, give the header position: relative and position the nav inside that header so the absolute offsets are calculated against the header, not the viewport:

#header { position: relative; }

#header nav { position: absolute; bottom: 0; left: 20px; }

Use the browser devtools to see what each engine is computing: inspect the UL/LI and anchors, check the computed position, top/left, and box sizes, then toggle position on the parent to watch the effect. In Chrome open DevTools > Elements > Computed; in Firefox use the Inspector. Checking document.compatMode in the console will tell whether the page is in quirks mode.

Validate the HTML/CSS (https://validator.w3.org/) and review the DOCTYPE/encoding (see MDN on Doctype and quirks mode: https://developer.mozilla.org/en-US/docs/Glossary/Doctype). Also make sure files are saved without a UTF‑8 BOM and that href values are valid (spaces in URLs can cause odd behavior). For CSS behavior rules see MDN’s position reference: https://developer.mozilla.org/en-US/docs/Web/CSS/position. These steps will quickly reveal whether the issue is a malformed DOCTYPE, an unpositioned ancestor, or invalid markup.

Be the first to reply

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.