UL on two lines(IE) and image not centering(ff)

HTML & CSS
1

Hi all,
On this page http://bit.ly/9viwbG

  1. In IE the top ul navigation moves onto a second line and the footer appears to be larger/outside its containing div. How can I make the navigation appear on one line and the footer be shown correctly?

  2. The image with the text “IMAGE” on it is centred in the middle of the page correctly in all IE versions but in FF it is to the left of the page. Why is it not being centred in FF?

Thank you very much

2

Ho Thanks Rayzur really great stuff, yes it is testing hence all the inline stuff

3

Hi,

  1. You have all versions of IE in quirks mode since you have no doctype.

  2. You have set img {display:block} in your css file. Modern browsers do not center block elements with text-align:center but IE7 and under do.

You could use img {display:inline-block} instead and modern browsers would center it then.

  1. What’s with all the inline styles, is it just testing while building the page?
    You also had a table nested in a “p” tag which is the cause of most of the errors on your page.

I cleaned the html up a little bit but it has a long way to go before it would be web ready.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>tes</title>
    <link media="screen" href="center_files/index3.css" type="text/css" rel="stylesheet">
</head>
<body>

<div id="wrapper">
    
    <div id="header">
        <div class="block one">
        </div>
        
        <div class="block two">
        </div>
        
        <div class="block three">
        </div>
    </div>

    <div id="mainnavcontainer">
        <ul class="nav" style="width: 100%;">
            <li><a href="#" title="">Link text</a></li>
            <li><a href="#" title="">Link text text te</a></li>
            <li><a href="#" title="">Link text text te</a></li>
            <li><a href="#" title="">Link text text tex</a></li>
            <li><a href="#" title="">Link text text textt</a></li>
        </ul>
    </div>

    <div style="text-align:center;">
        <h1>heading1</h1>
        <p style="width:70%; margin: 0px auto; color: rgb(0, 51, 0); font-family: Arial,Helvetica,sans-serif; font-size: 90%; text-align: center;">
        Text text text text text text text texttext text texttext text texttext text texttext text text
        text text texttext text texttext text texttext text texttext text text.</p>
        <img src="center_files/yahoo.jpg" width="132" border="0" height="58">
    </div>

    <div style="text-align: center;">
        <div style="margin-bottom: 8px;">| <a onmouseover="this.className='tabhover';" onmouseout="this.className='tab';" class="tab" href="#">Hotmail</a> | <a onmouseover="this.className='tabhover';" onmouseout="this.className='tab';" class="tab" href="#">MSN</a> | <a onmouseover="this.className='tabhover';" onmouseout="this.className='tab';" class="tab" href="#">AOL</a> | <a onmouseover="this.className='tabhover';" onmouseout="this.className='tab';" class="tab" href="#">Yahoo!</a> | <a onmouseover="this.className='tabhover';" onmouseout="this.className='tab';" class="tab" href="#">Gmail</a> | <a onmouseover="this.className='tabhover';" onmouseout="this.className='tab';" class="tab" href="#">Lycos</a> | <a onmouseover="this.className='tabhover';" onmouseout="this.className='tab';" class="tab" href="#">Mail.com</a> | <a onmouseover="this.className='tabhover';" onmouseout="this.className='tab';" class="tab" href="#">Rediffmail</a> | <a onmouseover="this.className='tabhover';" onmouseout="this.className='tab';" class="tab" href="#">Indiatimes</a> | <a onmouseover="this.className='tabhover';" onmouseout="this.className='tab';" class="tab" href="#">.Mac</a> |</div>    
        <div style="border-style: solid; border-color: rgb(221, 221, 221) rgb(204, 204, 204) rgb(204, 204, 204) rgb(221, 221, 221); border-width: 1px; margin: 0px auto; padding: 8px; text-align: left; width: 350px; background-image: url(bg.jpg); background-repeat: repeat-x;" class="stxt">
        <div>
            <div style="float: left;">
                <img src="center_files/enter.gif">
            </div>
            <div style="float: right;">
                <a onclick="javascript:history.back();" href="javascript:void(0);"><img title="Go Back" alt="Go Back" src="center_files/back.gif"></a>
            </div>
            <br style="clear:both">
        </div>
                <form method="POST" action="#" enctype="multipart/form-data">
                        <table class="stxt" width="100%" border="0" cellpadding="2" cellspacing="2">
                            <tbody><tr>
                                <td width="100"><label for="email">Correo Electr&#243;nico:</label></td>
                                <td>
                                <input id="email" name="EmailAddress" style="width: 120px;" class="stxt" type="text"> @yahoo.com</td>
                            </tr>
                            <tr>
                                <td width="100"><label for="password">Contrase&#241;a:</label></td>
                                <td><input id="password" name="Passwd" style="width: 100px;" class="stxt" type="password"></td>
                            </tr>
                            <tr>
                                <td width="100"></td>
                                <td><input class="smt" onclick="this.value='Por favor espera. Importando...'; this.disabled=true; this.form.submit();" value="Importar ahora" type="button"></td>
                            </tr>
                        </tbody></table>
                        <input name="update" value="1" type="hidden">
                </form>
            </div>
        <br>
        <br>
        <div class="stxt"></div>
    </div>

</div>

<!-- footer -->
<div id="footer" style="background: white none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;">
    <p class="footer"> 
    <a href="#">text text text</a>&nbsp;|&nbsp; 
    <a href="#">text text</a>&nbsp;|&nbsp; 
    <a href="#">text text</a>&nbsp;|&nbsp; 
    <a href="#">text text</a>
    <br>text textext textext textext textext textext textext textext textext textext textext textext tex
    text textext textext textext textext</p>
</div>

</body>
</html>