Solved

Why is Internet Explorer screwing up my css?

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

Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

Question has a verified solution.

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

What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL several years ago, it seemed like now was a good time to update it for object-oriented PHP.  This article does that, replacing as much as possible the pr…
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…
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…

717 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