Welcome to WebmasterWorld Guest from 54.205.140.252

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Coding Issue in IE Browser 9 and below

     
2:35 pm on Jul 10, 2012 (gmt 0)

New User

joined:July 10, 2012
posts: 1
votes: 0


Having trouble with this code. It works on all browsers EXCEPT Internet Explorer versions 9 & below. Works on 10. Go figure.

Any assistance is greatly appreciated...

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

<html>

<head>
<style>

div#content1 {
margin:0 18%;
}
#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
margin:0px;
list-style:none;
padding:0px 2px 2px 0px;
background-color:#333333;
background-repeat:repeat;
border-color:#cccccc #111111 #111111 #cccccc;
border-width:1px;
border-style:solid;
margin-left: auto;
margin-right: auto;
width: 100%;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
display:block;
zoom:1;
float: left;
}
ul.pureCssMenu ul{
width:163.8px;
}
ul.pureCssMenu li{
display:block;
margin:2px 0px 0px 2px;
font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
display:block;
vertical-align:middle;
background-color:#333333;
border-width:1px;
border-color:#333333;
border-style:solid;
text-align:left;
text-decoration:none;
padding:2px 10px 2px 10px;
_padding-left:10;
font:normal 12px Trebuchet MS,Tahoma;
color: #cccccc;
text-decoration:none;
cursor:default;
}
ul.pureCssMenu span{
overflow:hidden;
}
ul.pureCssMenu li {
float:left;
}
ul.pureCssMenu ul li {
float:none;
}
ul.pureCssMenu ul a {
text-align:left;
white-space:nowrap;
}
ul.pureCssMenu li.sep{
text-align:left;
padding:0px;
line-height:0;
height:100%;
}
ul.pureCssMenu li.sep span{
float:none;padding-right:0;
width:3px;
height:100%;
display:inline-block;
background-color:#cccccc #111111 #111111 #cccccc;background-image:none;}
ul.pureCssMenu ul li.sep span{
width:100%;
height:3px;
}
ul.pureCssMenu li:hover{
position:relative;
}
ul.pureCssMenu li:hover>a{
background-color:#78480A;
border-color:#377D9F;
border-style:solid;
font:normal 12px Trebuchet MS, Tahoma;
color: #FFFFFF;
text-decoration:none;
}
ul.pureCssMenu li a:hover{
position:relative;
background-color:#78480A;
border-color:#377D9F;
border-style:solid;
font:normal 12px Trebuchet MS, Tahoma;
color: #FFFFFF;
text-decoration:none;
}
ul.pureCssMenu li.dis a {
color: #666 !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:2px;width:16px;
height:16px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul{display:block}
ul.pureCssMenu span{
display:block;
background-image:url(./images/arr_white.gif);
background-position:right center;
background-repeat: no-repeat;
padding-right:12px;}
ul.pureCssMenu li:hover>a>span{background-image:url(./images/arrv_white.gif);
}
ul.pureCssMenu a:hover span{_background-image:url(./images/arrv_white.gif)}
ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_white.gif)}
</style>
</head>

<body style="width:800px">
<center><img src="http://www.example.com/images/gsalogo_full.jpg" height="150" width ="150"><br>
<ul class="pureCssMenu pureCssMenum">
<div id="content1">
<li class="pureCssMenui"><a class="pureCssMenui" href="http://www.example.com/index.html" target="_top">Home</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Solutions</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="http://www.example.com/solutions/reservations.html" target="_top">Reservations</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://www.example.com/solutions/tickets.html" target="_top">Ticket Sales</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://www.example.com/solutions/activity.html" target="_top">Sales</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://www.example.com/solutions/motorcoach.html" target="_top">Tours</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://www.example.com/blog/" target="_blank">Blog</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://www.example.com/partners.html" target="_top">Our Partners</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>About Us</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="http://www.example.com/aboutus/mission.html" target="_top">Our Mission</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://www.example.com/aboutus/whoweare.html" target="_top">Who We Are</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://www.example.com/aboutus/news.html" target="_top">Newsroom</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://www.example.com/faq.html" target="_top">FAQ</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://www.example.com/contact.html" target="_top">Contact Us</a></li>
</div>
</ul>
</center>
<br>
<center>

</center>
</body>
</html>


It doesn't center in IE and the dropdowns dont work in IE.

[edited by: alt131 at 1:00 pm (utc) on Jul 15, 2012]
[edit reason] Thread Tidy - Examplifying [/edit]

7:11 pm on July 22, 2012 (gmt 0)

Moderator

WebmasterWorld Administrator ergophobe is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 25, 2002
posts:8370
votes: 178


Hi sdaneski,

Welcome to Webmasterworld!

That's a lot of code - someone might work on it, but generally you can't expect someone to do all that work for free. Check out the forum guidelines on posting code as detailed in the charter: [webmasterworld.com...]

The main thing you need to do is boil this down to a test case: the minimum amount of code necessary to demonstrate the problem. So you have font rules and things like that in your code.

Make a live page and load it in your browser and just start deleting code until the problem goes away or until you have the minimum code to show the dropdown that's having problems.

If the problem has goes away at some point, you've found your problem. If it doesn't post just the code necessary to display the problem dropdown and maybe someone will help with that.
7:53 pm on July 22, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13258
votes: 362


At a cursory glance you've got at least three separate items (< or first child; min-/max-height; center) that are known not to work in MSIE <= some number. So you may well have more than one unrelated problem.