?
Solved

Why is Internet Explorer screwing up my css?

Posted on 2010-11-22
4
Medium Priority
?
480 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

801 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