Solved

Why is Internet Explorer screwing up my css?

Posted on 2010-11-22
4
450 Views
Last Modified: 2013-11-19
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
0
Comment
Question by:drhamel69
  • 2
4 Comments
 
LVL 7

Expert Comment

by:techsathish
ID: 34194010
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
 
LVL 2

Author Comment

by:drhamel69
ID: 34194071
That fixes menu but yellow box is still pushed out to left in IE
0
 
LVL 22

Accepted Solution

by:
remorina earned 500 total points
ID: 34194085
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
 
LVL 2

Author Closing Comment

by:drhamel69
ID: 34194282
This actually wasnt the solution but I gained enough insite from him that I just started a table-less design using CSS
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

930 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now