Why is Internet Explorer screwing up my css?

Probably something simple or stupid I am doing but why does this page render correctly in FF and chrome but seems to put an extra padding or something in any version of Internet Explorer?

http://gatorsfishandchicken.com/final/



  Internet Explorer
LVL 2
drhamel69Asked:
Who is Participating?
 
remorinaCommented:
Hi drhamel69,
I believe this is resulting from the left navigation unordered lists < UL > and the associated styling.

The left nav links, when displayed are taking  much wider than the table cell resulting in the overflow which IE doesn't like as it tries to occupies all the content within the table cell which causes it to expand even though the width has been explicitly specified, you can expirement this if you removed the left navigation table, it will render correctly in IE.

I would suggest using a tableless layout using DIVs instead of a table, it might be a bit hard at the beginning but table layouts are way too old and would probably give you more problems than their benefits.

Now answering your question, you can overcome this by using absolute positioning for the left while giving its container cell a relative position as below

<td width="167" height="600" align="center" valign="top" background="menu_bar.png" style="position:relative;">
                    <table align="center" width="166" border="0" style="position:absolute;">

Open in new window


Also the background property for the table cell is invalid, it might work but it has been deprecated and the document wouldn't validate the doctype you have specified, I would suggest validating your page in the future at http://validator.w3.org/ and fixing any errors you might have.

I have corrected some few errors and validated the document, valid code attached below.

Cheers
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Front_Page_template.png</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        td img
        {
            display: block;
        }
    </style>
    <!--Fireworks CS3 Dreamweaver CS3 target.  Created Mon Nov 22 16:46:12 GMT-0500 (Eastern Standard Time) 2010-->
    <link href="style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        <!-- body
        {
            background-image: url(background.jpg);
            background-repeat: repeat-x;
        }
        -->
        </style>

    <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

    <link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#ffffff">
    <div id="Background">
        <table width="960" border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
                <td colspan="2">
                    <img src="header.png" alt="" width="960" height="176" />
                </td>
            </tr>
            <tr>
                <td width="167" height="600" align="center" valign="top" style="background:url(menu_bar.png);position:absolute">
                    <table align="center" width="166" border="0" style="position:absolute;">
                        <tr>
                            <td>
                                <ul id="MenuBar1" class="MenuBarVertical">
                                    <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
                                        <ul>
                                            <li><a href="#">Item 1.1</a></li>
                                            <li><a href="#">Item 1.2</a></li>
                                            <li><a href="#">Item 1.3</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#">Item 2</a></li>
                                    <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
                                        <ul>
                                            <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
                                                <ul>
                                                    <li><a href="#">Item 3.1.1</a></li>
                                                    <li><a href="#">Item 3.1.2</a></li>
                                                </ul>
                                            </li>
                                            <li><a href="#">Item 3.2</a></li>
                                            <li><a href="#">Item 3.3</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#">Item 4</a></li>
                                </ul>
                                <br />
                            </td>
                        </tr>
                    </table>
                </td>
                <td width="789" bgcolor="#FFFFFF">
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <img src="footer.png" alt="" width="960" height="23" />
                </td>
            </tr>
        </table>
    </div>

    <script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
    </script>

</body>
</html>

Open in new window

0
 
techsathishCommented:
Hidrhamel69,

Use align="left" for table

<td width="167" height="600" align="center" background="menu_bar.png" vAlign="top">
       <table width="166" align="left" border="0">


0
 
drhamel69Author Commented:
That fixes menu but yellow box is still pushed out to left in IE
0
 
drhamel69Author Commented:
This actually wasnt the solution but I gained enough insite from him that I just started a table-less design using CSS
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.