Home/ Questions/Q 598603
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T16:24:22+00:00

This works fine in Webkit, but when I go to Firefox (Or IE8) it

  • 0

This works fine in Webkit, but when I go to Firefox (Or IE8) it totally messed up. I’ve been staring at this for so long that I can’t find any errors at all with it, so maybe one of you guys can point out where I’m going wrong.

CSS:

body {
    font-family: Georgia, serif;
    margin: 0px;
    padding: 0px;
    background: #222;
}


header {
    background: #fff url('images/header-border.gif') bottom repeat-x;
    width: 980px;
    margin: 0px auto;
    height: 100px;
    padding: 0px 0px 0px 20px;
    -moz-border-radius-topright: 4px; -moz-border-radius-topleft: 4px; 
    -webkit-border-top-right-radius: 4px; -webkit-border-top-left-radius: 4px; 
    border-top-right-radius: 4px; border-top-left-radius: 4px;
}


section {   
}


article {


}


footer {
    clear: left;
}

nav {
    width: 980px;
    margin: 0px auto;
    height: 70px;
    padding: 10px 0px 10px 0px;
    font-size: 21px;
    font-weight: bold;
    font-family: Arial, serif;
}

nav a {
    color: #fff;
    text-decoration: none;
    padding: 10px;
}

nav a:hover {
    background: #060606;
}

#content {
    width: 980px;
    background: #fff;
    padding: 0px 0px 0px 20px;
    margin: 0px auto;
}

nav ul li {
    float: left;
    list-style: none;
    width: 155px;
}

#left-column, #logo {
    width: 560px;
    margin: 0px auto;
    float: left;
}

#right-column, #share {
    width: 380px;
    margin: 0px auto;
    float: left;
    height: 100%;
    padding: 0px 0px 0px 20px;
    border-left: 1px solid #d9d9d9;
}

address {
    display: inline;
}

a img {
    border: 0px;
}

.clear-left {
    clear: left;
}

And the HTML:

<!DOCTYPE html>

<html lang="en">
<head>

<meta charset="text/html; charset=UTF-8" />

<title>Webtint </title>

<link rel="stylesheet" href="http://localhost/wp-content/themes/clean/style.css" type="text/css" />

<link rel="pingback" href="http://localhost/xmlrpc.php" />

</head>
<body>

<nav>
    <ul>
        <li><a href="#">home</a></li>
        <li><a href="#">tutorials <img src="http://localhost/wp-content/themes/clean/images/arrow.gif" alt="Arrow" /></a></li>
        <li><a href="#">resources <img src="http://localhost/wp-content/themes/clean/images/arrow.gif" alt="Arrow" /></a></li>
        <li><a href="#">articles <img src="http://localhost/wp-content/themes/clean/images/arrow.gif" alt="Arrow" /></a></li>
        <li><a href="#">contact</a></li>

        <li><a href="#">follow us</a></li> 
    </ul>
</nav>


<header>

    <section id="logo">
        &nbsp;
    </section>

    <section id="share">
        &nbsp;
    </section>

</header>
<div id="content">

    <section id="left-column">  
        <article>
            <h2>
                <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
                        <?php the_title(); ?>
                </a>
            </h2>
            <time><?php the_time('F jS, Y') ?></time> by <address><?php the_author(); ?></address>
            <?php the_excerpt(); ?>
            <br /><br />
        <a href="<?php the_permalink(); ?>">Read More</a> 
        <?php comments_popup_link(
        '<span class="boxed">No Responses &#187;</span>', 
        '<span class="boxed"> 1 Response &#187;</span>',
        '<span class="boxed">% Responses &#187;</span>'); ?>
    </article>
    <hr />
    </section>


    <section id="right-column">

             <h2>Popular Posts</h2>

    </section>  


</div>
<footer>

</footer>

</body>
</html>

Screenshot in Firefox:
https://i.stack.imgur.com/L1Abl.gif

Screenshot in Chrome: (How it’s supposed to look)
https://i.stack.imgur.com/NICpJ.gif

Screenshot in IE8:
https://i.stack.imgur.com/1YRwX.gif

Thanks for any help in advance 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try using a debug tool like Firebug or the IE developer toolbar to figure out which elements are being placed wrongly and why.

    Both let you hover your mouse over blocks and will highlight the corresponding HTML. You will be able to see exactly which element it is that is being placed incorrectly, and view the CSS to try and figure out why.

    • 0