Solved

Why is Internet Explorer screwing up my css?

Posted on 2010-11-22
4
446 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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Suggested Solutions

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

746 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

10 Experts available now in Live!

Get 1:1 Help Now