homepage Welcome to WebmasterWorld Guest from 54.227.89.236
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS Coding Issue in IE Browser 9 and below
sdaneski




msg:4474149
 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]

 

ergophobe




msg:4478021
 7:11 pm on Jul 22, 2012 (gmt 0)

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.

lucy24




msg:4478037
 7:53 pm on Jul 22, 2012 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved