Death to Internet Explorer... again, aka I need help getting CSS to work in IE7 [Archive]

View Full Version : Death to Internet Explorer... again, aka I need help getting CSS to work in IE7

thomasp

23 Aug 2008, 19:20

The person I'm designing a website for (see previous threads :p) has started sending me content for the site, so I can finally get on with changing it! Anyway, I've been trying to get a nice rollover menu (submenu pops out on mouseover) for the navigation bar, similar to this one: http://css.maxdesign.com.au/listamatic2/vertical11.htm - but as I'm sure you can guess from the title of this thread, it's not working as intended in IE7 (screw IE6, that'll be too much hassle :p), it works fine in Safari 3, Firefox 3, Camino and Opera (Opera's a little weird, but it still works)

Basically, I'm being told by the site's owner, who unfortunately uses IE7, that the pop-down menu isn't appearing. The entire CSS and HTML code is included below, with a few things cut out so you lot can't go emailing them and saying how incompetent their website designer is :p Basically what seems to happen in IE7 is that the main menu options get shifted over to the left, partly outside the blue frame (bar the "Site Map", which is not part of the main list), and the submenus quite stubbornly refuse to appear. None of this occurs in proper web browsers. Also, IE adds too much line spacing.

I've had to pad the main paragraphs out a bit in case you wish to see how that renders on your own computer, since the layout seems to get screwed up with very short paragraphs - hope there's enough Lorem Ipsum in there!

Thanks :D

HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>

<link rel="stylesheet" href="styles.css" type="text/css">

<title>Welcome to the site</title>

</head>

<body>


<div id="wrapper">
<a name="#top">


<div id="logo">
<img src="images/logo.png" alt="logo">
</div>



<div id="greenbanner">
<img src="images/green_banner.png" width="900px" height="35px" alt="Green banner">
</div>



<div id="container">


<div id="navbox">
<p class="navheader">Navigation</p>

<ul id="navlist">

<li><span class="navboxtextactive">Home</span></li>

<li id="active"><a href="pages/company.html" id="current">Our Company</a>


<ul id="subnavlist">
<li id="subactive"><a href="pages/company/ethos.html" id="subcurrent">Ethos & Values</a></li>
<li id="subactive"><a href="pages/company/code_of_conduct.html" id="subcurrent">Code of Conduct</a></li>
<li id="subactive"><a href="pages/company/terms.html" id="subcurrent">Terms & Conditions</a></li>
</ul>
</li>


<li id="active"><a href="pages/portfolio.html">Training & Development Portfolio</a>


<ul id="subnavlist">
<li id="subactive"><a href="pages/portfolio/schools_student.html" id="subcurrent">Schools/colleges - student focused</a></li>
<li id="subactive"><a href="pages/portfolio/schools_general.html" id="subcurrent">Schools/colleges - general</a></li>
<li id="subactive"><a href="pages/portfolio/business_industry.html" id="subcurrent">Business/Industry</a></li>
<li id="subactive"><a href="pages/portfolio/consultancy_services.html" id="subcurrent">Consultancy Services</a></li>
</ul>
</li>


<li><a href="pages/programmes.html">New Programmes for 2008/09</a></li>

<li id="active"><a href="pages/resources.html">Resource Library</a>


<ul id="subnavlist">
<li id="subactive"><a href="pages/resources/tips.html" id="subcurrent">Top Tips</a></li>
<li id="subactive"><a href="pages/resources/factsheets.html" id="subcurrent">Factsheets</a></li>
<li id="subactive"><a href="pages/resources/useful_sites.html" id="subcurrent">Useful Websites</a></li>
<li id="subactive"><a href="pages/resources/newsletters.html" id="subcurrent">Newsletter Library</a></li>
</ul>
</li>


<li><a href="pages/contact.html">Contact Us</a></li>
</ul>

<p class="navboxtext">
<a href="pages/sitemap.html">Site Map</a></p>
</div>




<div id="main">
<p class="pagetitle">Welcome</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras quis orci. Etiam sem ligula, lacinia vel, consequat porta, viverra sed, metus. Suspendisse vestibulum pede sed diam. Curabitur ultricies venenatis metus. Mauris scelerisque ipsum hendrerit dui. Ut libero velit, congue vel, laoreet ac, euismod nec, turpis. Aenean mollis ipsum eget quam. Integer iaculis, augue eu rutrum rhoncus, odio nibh luctus urna, et dapibus metus urna nec dolor. Nunc vulputate dignissim nibh. Sed blandit. Etiam ante tortor, interdum vel, rhoncus eget, interdum ut, orci. Donec ut arcu a mauris dapibus consectetuer. Phasellus semper neque eu ipsum. Phasellus vitae mauris. Aenean dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi sit amet lectus. Praesent arcu. Nunc id turpis vel eros eleifend elementum.</p>

<p>Donec ultricies nulla id velit venenatis aliquam. Nam ut justo ac velit vestibulum tincidunt. Suspendisse mollis leo. Nam ultrices magna eget diam. Etiam velit risus, laoreet vel, lacinia id, commodo a, leo. Etiam molestie tempus enim. Integer dignissim bibendum metus. Maecenas ac risus non nunc egestas tempor. Mauris imperdiet tempus ligula. Etiam sit amet enim. Fusce metus nibh, aliquam eget, posuere quis, lacinia sit amet, sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec a urna eget est fermentum semper. Maecenas ultricies eros quis lorem.omes.</p>

<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi sapien sapien, convallis eget, posuere eget, tempor pellentesque, nisl. Praesent bibendum tincidunt nulla. Nulla nulla diam, condimentum sed, interdum at, consectetuer nec, leo. Sed eget ligula. Donec auctor. In hac habitasse platea dictumst. Vestibulum vel pede vel lectus imperdiet venenatis. In euismod tellus id enim. Suspendisse ante risus, ullamcorper vitae, congue sit amet, commodo nec, libero. Morbi libero. Mauris justo.</p>

<p>Praesent consectetuer laoreet sem. Morbi libero diam, consequat sit amet, mollis quis, dapibus nec, risus. Aliquam eu pede. Donec nunc dolor, luctus vel, consequat id, ultrices at, tellus. Etiam ac massa. Duis eros. Aenean id nunc nec sapien mollis iaculis. Maecenas vestibulum, sapien nec lacinia posuere, urna urna condimentum lacus, a interdum lorem orci non pede. Aenean blandit fermentum tortor. Donec tempor egestas orci. Sed rutrum velit. Pellentesque auctor dictum nisl. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus bibendum scelerisque nisl. Sed non massa.
</p>

<p>You can register to receive our newsletters and updates on forthcoming events via e-mail by clicking <a href="pages/contact.html">here.</a></p>


<p class="returntotop">
<br><br>
<a href="#top">Return to top</a>
</p>


</div>



</div>


</div>


<div id="copyright">
<p>
Copyright © 2008.
</p>
</div>


</body>

</html>

CSS code:

body
{
background-color:#D9E7FF;
margin:0px;
padding:0px;
text-align:center;
}

/* Main body "boxes" */
#wrapper
{
margin-top:50px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
text-align:left;
width: 900px;
background-color:white;
}

#logo
{
margin-top:5px;
margin-bottom:5px;
}

#greenbanner
{
margin-bottom:3px;
}

#container
{
background:#ffffff url('images/navbg.gif') top left repeat-y;
}

#navbox
{
float:left;
text-align:left;
width:205px;
height:auto;
margin-bottom:0px;
padding-left:20px;
padding-top:6px;
}

/* Main page text */
#main
{
text-align:left;
background-color:white;
width:610px;
height:auto;
padding-left:20px;
padding-right:45px;
padding-top:1px;
padding-bottom:20px;
margin-left:225px;
font-family:'Trebuchet MS', 'Arial';
color:black;
font-size:10pt;
}

/* Regularly-used fonts */
.pagetitle
{
font-family:'Trebuchet MS', 'Arial';
color:black;
font-weight:700;
font-size:18pt;
}

#copyright
{
font-family:'Trebuchet MS', 'Arial';
font-size:8pt;
color:black;
margin-top:0px;
margin-left:auto;
margin-right:auto;
text-align:left;
width:900px;
}

.returntotop
{
font-family:'Trebuchet MS', 'Arial';
font-size:8pt;
font-style:italic;
color:black;
}

/* Navbox fonts */
#navlist
{
list-style-type:none;
font-family:'Trebuchet MS', 'Arial';
color:white;
font-size:12pt;
font-weight:700;
margin-left:-40px;
}

#navlist li
{
margin-bottom:6pt;
}

#subnavlist
{
list-style-type:none;
font-family:'Trebuchet MS', 'Arial';
color:white;
font-size:10pt;
font-weight:700;
margin-left:-25px;
}

#subnavlist li
{
margin-bottom:3pt;
}

#subnavlist li
{
margin-bottom: 2pt;
}

#active:hover li
{
display:block;
}

#active li
{
display:none;
}

#navbox A
{
text-decoration:none;
display:block;
}

#navbox A:link
{
color:white;
}

#navbox A:visited
{
color:#DEDEDE;
}

#navbox A:hover
{
color:black;
}

#navbox A:active
{
color:black;
}

.navboxtext
{
font-family:'Trebuchet MS', 'Arial';
color:white;
font-size:12pt;
font-weight:700;
}

.navboxtext A
{
text-decoration:none;
display:block;
}

.navboxtext A:link
{
color:white;
}

.navboxtext A:visited
{
color:#DEDEDE;
}

.navboxtext A:hover
{
color:black;
}

.navboxtext A:active
{
color:black;
}

.navheader
{
font-family:'Trebuchet MS', 'Arial';
color:white;
font-size:16pt;
font-weight:700;
}

.navboxtextactive
{
font-family:'Trebuchet MS', 'Arial';
color:black;
font-size:12pt;
font-weight:700;
}

.navboxtextactivesmall
{
font-family:'Trebuchet MS', 'Arial';
color:black;
font-size:10pt;
font-weight:700;
}

M3ntal

23 Aug 2008, 22:01

I'll take a look at it tomorrow. To get these things working in IE6 isn't too hard, google "csshover.htc".

SupSuper

24 Aug 2008, 01:50

The shift is because of your negative margins, IE doesn't like them at all. Btw, you have "#subnavlist li" defined twice. :p

thomasp

24 Aug 2008, 10:02

I'll take a look at it tomorrow. To get these things working in IE6 isn't too hard, google "csshover.htc".
Thanks, will have a look into that. Will it sort it for IE7 as well?
The shift is because of your negative margins, IE doesn't like them at all. Btw, you have "#subnavlist li" defined twice. :p

So I do... I wonder which one was the correct one :confused: - let's just assume the 2nd one is not needed for now :p The reason why I've shifted it to the left with negative margins is because Safari & FF seem to shift the lists to the right by a long way, so I tried to counteract that.

SomePerson

25 Aug 2008, 06:28

The reason why I've shifted it to the left with negative margins is because Safari & FF seem to shift the lists to the right by a long way, so I tried to counteract that.

If I understand your problem correctly, this might help: (it certainly saved MY rear end...) http://forum.team17.co.uk/showpost.php?p=614027&postcount=9

thomasp

25 Aug 2008, 11:37

If I understand your problem correctly, this might help: (it certainly saved MY rear end...) http://forum.team17.co.uk/showpost.php?p=614027&postcount=9
Hmmm, that seems to have shifted everything over too much to the right now, by putting padding-left:0px; in the top-level bullet list (and 15px in the next level down). This only seems to be the case in IE... will try to grab a screenshot off someone once I've had a go at that csshover thing.

thomasp

23 Sep 2008, 17:06

Right, I've finally got round to having a look at csshover.htc and it kind of doesn't work :p I'm now using a menu navigation system from here (and stole the code): http://sperling.com/examples/menuv/ As predicted, it works perfectly fine in Safari and Firefox, but doesn't work at all in IE7. I've even tried the newer version of the csshover.htc file I found on the web somewhere. And yes, the csshover.htc file is in the same directory as my stylesheet.

Not only is the formatting screwed up (see below), but the menus don't pop out at all. The link colour changes on mouse hover, as it should, but the submenus don't pop out. The formatting issue is that IE7 only (doesn't happen on FF or Safari) puts the "Our Company" link right next to the "Home" text which is not a link and uses a <span> tag to format it accordingly within the <li>. It should obviously be on the next line.

As a side note, the CSS validates fine with the W3.org validator. The HTML is a bit weird when running it through a validator and I don't really understand what it's moaning about.

Anyway, here's the HTML code for the whole page:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="styles3.css" type="text/css">
<title>Welcome</title>







</head>

<body>


<div id="wrapper">
<a name="#top">


<div id="logo">
<img src="images/logo.png" alt="logo">
</div>



<div id="greenbanner">
<img src="images/green_banner.png" width="900px" height="35px" alt="Green banner">
</div>



<div id="container">


<div id="navbox">
<p class="navheader">Navigation</p>

<div id="menuv">

<ul>

<li><span class="navboxtextactive">Home</span></li>

<li><a href="pages/company.html" class="parent">Our Company</a>


<ul class="submenutext">
<li><a href="pages/company/ethos.html">Ethos & Values</a></li>
<li><a href="pages/company/code_of_conduct.html">Code of Conduct</a></li>
<li><a href="pages/company/terms.html">Terms & Conditions</a></li>
</ul>
</li>


<li><a href="pages/portfolio.html" class="parent">Training & Development Portfolio</a>


<ul class="submenutext">
<li><a href="pages/portfolio/schools_student.html" class="parent">Schools/colleges - student focused</a>


<ul class="submenutext">
<li><a href="???">Example</a></li>
<li><a href="???">Example 2</a></li>
</ul>
</li>


<li><a href="pages/portfolio/schools_general.html">Schools/colleges - general</a></li>
<li><a href="pages/portfolio/business_industry.html">Business/Industry</a></li>
<li><a href="pages/portfolio/consultancy_services.html">Consultancy Services</a></li>
</ul>
</li>


<li><a href="pages/programmes.html">New Programmes for 2008/09</a></li>

<li><a href="pages/resources.html" class="parent">Resource Library</a>


<ul class="submenutext">
<li><a href="pages/resources/tips.html">Top Tips</a></li>
<li><a href="pages/resources/factsheets.html">Factsheets</a></li>
<li><a href="pages/resources/useful_sites.html">Useful Websites</a></li>
<li><a href="pages/resources/newsletters.html">Newsletter Library</a></li>
</ul>
</li>


<li><a href="pages/contact.html">Contact Us</a></li>
</ul>
</div>
</div>




<div id="main">
<p class="pagetitle">Welcome</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam placerat. Curabitur nisl. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla pellentesque tellus nec lacus. Donec gravida ornare lectus. Donec ac nibh. Curabitur rhoncus purus et pede. In molestie rhoncus enim. Etiam rutrum ante facilisis tortor. Fusce posuere dui ac augue. Sed non augue ut diam tempus iaculis. Nam risus. Cras imperdiet. Duis massa urna, dignissim in, lobortis blandit, vulputate vel, leo. Quisque fringilla magna nec enim. Nullam ullamcorper, purus cursus molestie consequat, tortor magna tempor massa, sed ultricies diam orci nec augue. Fusce elit lectus, lacinia quis, elementum non, consectetuer in, dolor.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam placerat. Curabitur nisl. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla pellentesque tellus nec lacus. Donec gravida ornare lectus. Donec ac nibh. Curabitur rhoncus purus et pede. In molestie rhoncus enim. Etiam rutrum ante facilisis tortor. Fusce posuere dui ac augue. Sed non augue ut diam tempus iaculis. Nam risus. Cras imperdiet. Duis massa urna, dignissim in, lobortis blandit, vulputate vel, leo. Quisque fringilla magna nec enim. Nullam ullamcorper, purus cursus molestie consequat, tortor magna tempor massa, sed ultricies diam orci nec augue. Fusce elit lectus, lacinia quis, elementum non, consectetuer in, dolor.</p>


<p class="returntotop">
<br><br>
<a href="#top">Return to top</a>
</p>


</div>



</div>


</div>


<div id="copyright">
<p>
Copyright © 2008.
</p>
</div>


</body>

</html>

And the relevant CSS:

body
{
background-color:#D9E7FF;
margin:0px;
padding:0px;
text-align:center;
}

/* Main body "boxes" */
#wrapper
{
margin-top:50px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
text-align:left;
width: 900px;
background-color:white;
}

#logo
{
margin-top:5px;
margin-bottom:5px;
}

#greenbanner
{
margin-bottom:3px;
}

#container
{
background:#ffffff url('images/navbg.gif') top left repeat-y;
}

#navbox
{
float:left;
text-align:left;
width:205px;
height:auto;
margin-bottom:0px;
padding-left:20px;
padding-top:6px;
}

/* Main page text */
#main
{
text-align:left;
background-color:white;
width:610px;
height:auto;
padding-left:20px;
padding-right:45px;
padding-top:1px;
padding-bottom:20px;
margin-left:225px;
font-family:'Trebuchet MS', 'Arial';
color:black;
font-size:10pt;
}

/* Regularly-used fonts */
.pagetitle
{
font-family:'Trebuchet MS', 'Arial';
color:black;
font-weight:700;
font-size:18pt;
}

#copyright
{
font-family:'Trebuchet MS', 'Arial';
font-size:8pt;
color:black;
margin-top:0px;
margin-left:auto;
margin-right:auto;
text-align:left;
width:900px;
}

.returntotop
{
font-family:'Trebuchet MS', 'Arial';
font-size:8pt;
font-style:italic;
color:black;
}

.heading
{
font-family:'Trebuchet MS', 'Arial';
color:#5790EF;
font-size:12pt;
font-weight:700;
margin-top:24px;
}

.subheading
{
font-family:'Trebuchet MS', 'Arial';
color:black;
font-size:10pt;
font-weight:700;
margin-top:20px;
}

/* Navbox fonts */

/* CSS Popout menuv */

/* Fix IE. Hide from IE Mac \*/
* html #menuv ul li{float:left;height:1%;}
* html #menuv ul li a{height:1%;}
/* End */

#menuv-container
{
font-size:12pt;
font-weight:700;
position:relative;
top:-36px; /* for IE */
left:-20px;
}

html>body #menuv-container
{
top:0px; /* for everything else */
}

#menuv /* position, size, and font of menu */
{
position:relative;
top:0px;
left:0px;
z-index: 10;
width:200px; /* [1] width of menu item (i.e., box) */
text-align:left;
font-size:12pt;
font-weight:700;
font-family:'Calibri', 'Trebuchet MS', 'Arial';
}

#menuv a
{
width: 100%;
display:block;
padding-top: 0.2em; /* expands menu box vertically*/
padding-bottom: 0.2em;
white-space:normal;
}

#menuv a, #menuv a:visited /* all menus at rest */
{
color:white;
background-color:#528CCB;
text-decoration:none; /* removes underlines from links */
}

#menuv a.parent, #menuv a.parent:hover /* attaches parent-arrow on all parents */
{
background-image:url(images/arrow_nav.gif);
background-position:right center;
background-repeat:no-repeat;
}

#menuv a:hover /* all menus on mouse-over */
{
color:black;
}

#menuv li
{
list-style-type:none; /* removes bullets */
}

#menuv ul li
{
position:relative;
}

#menuv li ul
{
position: absolute;
top: 0;
left:200px; /* distance from left menu (this should be the same as width value in #menuv [1]) above */
display: none;
}

div#menuv ul, #menuv ul ul, div#menuv ul ul ul
{
margin:0px; /* keeps the menu parts together */
padding:0px;
width:200px; /* width of sub menus (this should be the same as width value in #menuv [1]) above */
}

div#menuv ul ul, div#menuv ul ul ul, div#menuv ul li:hover ul ul, div#menuv ul li:hover ul ul ul
{
display: none;
}

div#menuv ul li:hover ul, div#menuv ul ul li:hover ul, div#menuv ul ul ul li:hover ul
{
display: block;
}

.submenutext
{
font-family:'Trebuchet MS', 'Arial';
font-size:10pt;
font-weight:700;
}

.navboxtext
{
font-family:'Trebuchet MS', 'Arial';
color:white;
font-size:12pt;
font-weight:700;
}

.navboxtext A
{
text-decoration:none;
display:block;
}

.navboxtext A:link
{
color:white;
}

.navboxtext A:visited
{
color:#DEDEDE;
}

.navboxtext A:hover
{
color:black;
}

.navboxtext A:active
{
color:black;
}

.navheader
{
font-family:'Trebuchet MS', 'Arial';
color:white;
font-size:16pt;
font-weight:700;
}

.navboxtextactive
{
font-family:'Trebuchet MS', 'Arial';
color:black;
font-size:12pt;
font-weight:700;
}

.navboxtextactivesmall
{
font-family:'Trebuchet MS', 'Arial';
color:black;
font-size:10pt;
font-weight:700;
}

Is there anything glaringly obvious that's causing this not to work in IE7, or is it just physically impossible to get these menus to work?

Thanks for the help :D