[SOLVED] IE help

mtylerb · November 11, 2008

Hey guys. I seem to be having a problem with my site not displaying correctly in IE. I only have access to IE7, but I'm going to assume the problem is apparent in all versions of IE. The site displays correctly in Firefox and Opera. The only CSS I have added is for a suckerfish implementation of the menus. That CSS is:

<style type="text/css">
#nav-m {
}
#nav-m ul {
float: left;
list-style: none;
line-height: 1.6em;
background: #f7f7f2;
border-bottom: 1px solid #EAEADA;
padding: 0;
border-top: 1px solid #EAEADA;
}
#nav-m a {
display: block;
font-size: 1.1em;
color: #554;
text-decoration: none;
padding: 8px 0 8px 5%;
width: 95%;
w\idth: 57%;
}
#nav-m a.daddy {
}
#nav-m li {
float: left;
padding: 5px 0px 5px 0px;
width: 100%;
border-bottom: 1px solid #CACABA;
}
#nav-m li ul {
position: absolute;
left: -999em;
height: auto;
width: 14.4em;
w\idth: 13.9em;
font-weight: normal;
border: 2px solid #CACABA;
margin: -3em 0 0 12em;
}
#nav-m li li {
padding-right: 1em;
width: 13em
}
#nav-m li ul a {
width: 13em;
w\idth: 9em;
}
#nav-m li ul ul {
margin: -3em 0 0 12em;
border: 2px solid #EAEADA;
}
#nav-m li:hover ul ul, #nav-m li:hover ul ul ul, #nav-m li.sfhover ul ul, #nav-m li.sfhover ul ul ul {
left: -999em;
}
#nav-m li:hover ul, #nav-m li li:hover ul, #nav-m li li li:hover ul, #nav-m li.sfhover ul, #nav-m li li.sfhover ul, #nav-m li li li.sfhover ul {
left: auto;
}
#nav-m li:hover, #nav-m li.sfhover {
background: #F0F0EB;
}
</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav-m").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script><title>Tyler's Site - Home Page</title>
<script src="/js/jquery.packed.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8"> 
    $(document).ready( function() { 
        $('a.external_link').click( function() { 
            window.open(this.href);  
            return false; 
        }); 
    }); 
</script>

After I put that in, it stopped working in IE, but I have no idea where to start looking. The page should be in the middle of the layout, but in IE, it's stuck to the left side.

Any ideas?

SuperBlue · November 11, 2008

You need to use margin: 0 auto; on the wrapper element, as well as remember to include a valid doctype to get IE7+ into standards mode.

Ealier versions of IE requires text-align: center; on the body, you will then need to reset this alignment on the wrapper for your page.

Its a common practice to have a wrapper for your intire page, since it enables you to better control other aspects of your layout as well, width, min-width and max-width.

I.e.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="eng">

  <head>
    <title>My first Website</title>
  </head>

  <body>
    <div id="Basement">
      <!--Content Goes Here-->
    </div>
  </body>

</html>

I asume that would be the div with the outer-container class in your markup.

Since the alignment is fine in firefox, i suspect that you simply need to remove the following line in your markup.

<!-- Bd Referrers Script http://frog.bebliuc.ro --><!-- Bd Statistics Script http://frog.bebliuc.ro -->

The first line should always hold the doctype, not some useless html comment. If you really need to keep the comment, you may want to move it futher down.

You could also simply use the older text-align trick for IE, but it would of cause be preffered to get IE into standards mode in any case. But you would still need the fix if you support older versions of IE.

mtylerb · November 11, 2008

I appreciate the help, that comment was from a plugin that I have installed in the Frog CMS running the site. As soon as I moved that further down into the head, IE snapped back to working.

Thanks again BlueBoden!

Sign In

[SOLVED] IE help

Recommended Posts

mtylerb

Link to comment

Share on other sites

SuperBlue

Link to comment

Share on other sites

mtylerb

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information