Welcome to WebmasterWorld Guest from 54.144.48.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)



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 Jul 22, 2012 (gmt 0)

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



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 Jul 22, 2012 (gmt 0)

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



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month