CSS Dropdown menus and IE…urgent help.

  • Resolved markjbennettlp

    (@markjbennettlp)


    16 years, 4 months ago

    Alright,
    So I took a theme, stripped it down, and built it back up. What I have is
    http://johnnyruth.com.wedodns.com/index2.php/

    Never mind the links not working. I have an index.html construction page thrown up for now which is throwing off the links. The problem is, (surprise!) Internet Explorer not meshing well with my CSS dropdown menus. It works great in Firefox and fine in Safari, but oh no, not in IE.

    I am aware in my css that I have some doubles of properties (ie #nav ul and ul.nav). I thought about taking them out but it just works in 2 of the 3 browsers and it says it’s complaint…but if it makes it easier to debug, I’ll probably combine them to make the code cleaner (if I need too).

    So what I need is a solution to this without chopping up my code too much. I have it pretty lean and it’s compliant (minus a few warnings..), but I have no idea what do to. Can anyone help?
    Thanks

    CSS CODE BELOW
    ———————————-

    /*
Theme Name: JR1
Theme URI: http://www.johnnyruth.com.wedodns.com/index2.php/ (TEMP)
Description: /">This theme was modded from another theme for a light use, minimalistic style for small boutiques, shops and personal use.
Version: 0.9
Author: Mark Bennett
Author URI:

This theme was modified/designed by Mark Bennettt.
*/

body { font-family:Arial, Helvetica, sans-serif; font-size:12px; background:#ffffff; color:#666; }
#wrap { width:800px; margin:10px auto; padding:0; }
#banner { width: 800px; height: 50px; padding:0; background: url('images/jrlogo_header.gif') no-repeat top; background-position: right; margin: 15px 0px; }
a:hover { text-decoration:none; color:#000; border:none; }
#box { background:#fff; width:800px; table-layout:fixed; margin:0 auto; padding:0; }
#top { /* This is the colour of the background the whole length of the search box line (from left to right) */ /* background:#f1efe7; */ height:26px; line-height:26px; margin:0 auto; padding:0 5px; }
#header { background:#666666; /* This is the height of the grey banner box */ height:125px; line-height:26px; margin:5px auto; padding:0 5px; text-align: right }
#header h1.blogtitle { font-family:Arial, Helvetica, sans-serif, Serif; color:#fff; font-size:30px; text-transform:uppercase; margin:0; padding:20px 0 0; text-align: right }
#header h1.blogtitle a:hover { text-decoration:none; color:#fff; border:none; }
p.description { color:#fff; font-size:12pt; margin:0; padding:0; }
.entry { background:#fff; line-height:19px; text-align:justify; overflow:hidden; margin:5px auto; padding:0 5px; }
.entry h2 { font-family: Arial, Helvetica, sans-serif; font-size:14px;font-weight:700; }
.entry a:hover { text-decoration:none; color:#000000; border:none; }
#tophome { width:250px; float:left; text-align:left; margin:0; padding:0; }
#tops { width:150px; float:right; text-align:right; margin:0; padding:2px 0 0; }
#searchform { height:26px; line-height:26px; float:right; margin:0; padding:0; }
#searchform #s { font-size:8pt; width:120px; margin-right:2px; }
#searchform #submit { font-size:8pt; }
input#s { color:#666; border:1px solid #cbcbcb; background:#fcfcfc; }
.alignright { float:right; }
.alignleft { float:left; }
blockquote { padding-left:20px; border-left:5px solid #ddd; margin:15px 30px 0 10px; }
blockquote cite { display:block; margin:5px 0 0; }
.comments h3 { font-family: Arial, Helvetica, sans-serif; font-size:14px; font-weight:700; padding-top:10px; }
/* I'm not really sure about this line..It was from the last theme I modified by Bob. Sorry Bob : / */ /* .bobcomment :hover { background:#f8f8f3; } */
ol.commentlist { list-style:none; margin:0 0 1px; padding:0; }
ol.commentlist li { list-style:none; margin:0; padding:13px 13px 1px; }
ol.commentlist li.commenthead { list-style:none; margin:0; }
ol.commentlist li.commenthead h2 { margin:0; }
textarea { color:#666; width:80%; border:1px solid #cbcbcb; margin-bottom:0.6em; background:#fcfcfc; margin-top:2px; padding:3px; }
#footer { height:26px; line-height:26px; clear:both; margin:0 auto; padding:0 5px; }
a:link,a:active,a:visited { text-decoration:none; color:#000; border:none; }
a:hover { text-decoration:none; color: #000000; }
#header h1.blogtitle a:link,#header h1.blogtitle a:active,#header h1.blogtitle a:visited { text-decoration:none; color:#fff; border:none; }
/* This line for links effects the body links */ .entry a:link,.entry a:active,.entry a:visited { text-decoration:none; color:#000; border:none; }
.entry a:hover { text-decoration:none; color:#666; border:none; }
/* I'm not really sure about this line..It was from the last theme I modified by Bob */ /* .end,.bobcomment { border-bottom:1px #eeede0 solid; } */
input#url,input#author,input#email { color:#666; width:50%; border:1px solid #cbcbcb; margin-bottom:0.6em; background:#fcfcfc; margin-top:2px; padding:3px; }

#nav { height:26px; line-height:26px; /* This is the line below the links */ /* border-bottom:1px #ccc solid; */ margin:0 ; padding:0; margin-left: -20px; list-style: none;
background: #ffffff; }
ul.nav { height:22px; line-height:22px; float:left; list-style:none; font-size:12px; font-weight:400; /* This makes the Links in the navigation uppercase if turned on */
/*text-transform:uppercase; */ margin:0; padding:3px 0 0; }
ul.nav li { float:left !important; list-style-type:none; margin:0; padding:0; }
ul.nav li a,ul.nav li a:link,ul.nav li a:visited { color:#000; float:left; display:block; padding:0 5px; }
ul.nav li a:hover,ul.nav li a:active { background:#fff; color:#000; text-decoration:none; }
ul.nav li.current_page_item a { text-decoration:underline; color:#000; /* background:#fff; */ }
ul.nav li ul { float:left; margin:0; padding:0; }
.navigation { display:block; text-align:center; margin-top:10px; margin-bottom:10px; }

/*menu */

#nav ul {
margin: auto;
padding: 0;
height: 1em;
background: #ffffff;
}

#toolbar form {
margin: 0;
padding: 0.1em 2em 0.1em 0em;
height: 1em;
}

#toolbar input {
margin: 1px;
}

/* This one below is for the hover color on the menu links. The one below it is the color of just the normal menu links without hover */
#nav a:hover { color: #666; }

#nav a {
display: block;
color: #000;
background: #fff;
text-decoration: none;
padding: 0.1em 2em;
}

#nav li {
float: left;
padding: 0;
border: 1px solid #fff;
border-width: 1px 0;
}

/* This code below is for the drop menu section text */
#nav li ul {

position: absolute;
left: -999em;
height: auto;
width: 2em;
font-weight: normal;
margin: 25px; /* This one affects the vertical space it moves down from the parent link */
list-style: none;
}

#nav li li {
padding-right: 1em;
width: 13.4em;
border: 0px;
}

#nav li ul a {
width: 12em;
w\idth: 9em;
}

/* This one below is how far the sub menu of the sub menu comes off (how far horizontally from the left text) */
#nav li ul ul {
/* The below margin is written in CSS Shorthand. The first 0em is for vertical spacing, and the last one is for horiztonal */
margin: 0em 0 0 10em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
color:#000;
}

#nav li:hover, #nav li.sfhover {
color:#000;
}

/* end menu */
Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter markjbennettlp

    (@markjbennettlp)

    16 years, 4 months ago

    My apologies for the code not reading well.

    Adam Brown

    (@adamrbrown)

    16 years, 4 months ago

    IE won’t recognize the :hover pseudo element on anything other than an <a>, so it doesn’t act on things like this:

    #nav li:hover

    You’ll need a small amount of JS to make it work in IE. REad more here (skip to the part about “special browser friends” if you want):

    http://www.alistapart.com/articles/hybrid

    Thread Starter markjbennettlp

    (@markjbennettlp)

    16 years, 4 months ago

    Okay thanks,
    I skimmed through it and I’m going to read it carefully. Just to let you know, I do have some JS in my header.php, which is still not working properly.
    1) the drop menus are in the wrong spot (pushed to the right in IE)
    2) They disappear when I leave the menu completely (which is good) but when I continue my mouse over on another parent menu object, the sub-menu of the last mouse over stays up!

    <script language="javascript">

sfHover = function() {
	var sfEls = document.getElementById("nav").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>
    Thread Starter markjbennettlp

    (@markjbennettlp)

    16 years, 4 months ago

    Problem #2 (They disappear when I leave the menu completely (which is good) but when I continue my mouse over on another parent menu object, the sub-menu of the last mouse over stays up!)

    was solved by using a % value instead of an em value in my css.

    ————————————-

    /* This code below is for the drop menu section text */
#nav li ul {

            position: absolute;
            left:-1000%;
			height: auto;
            width: 2em;
            font-weight: normal;

            margin: 25px;  /* This one affects the vertical space it moves down from the parent link */
			list-style: none;
}

    —————————-

    Details found at http://css-class.com/test/bugs/ie/recalculatedoffsetbug.htm

    Adam Brown

    (@adamrbrown)

    16 years, 4 months ago

    Does this mean it’s resolved, or is there still a question that I’m missing?

    Thread Starter markjbennettlp

    (@markjbennettlp)

    16 years, 4 months ago

    Sorry,
    it is not resolved.
    the drop menus are in the wrong spot (pushed to the right in IE)
    If I add the margin to it, it looks fine in IE and lines up, but it also moves over the firefox and safari menu which was already fine (and now is in the wrong spot).

    #nav li ul a {
            width: 12em;
	   margin: 0 0 0 -10em;

    All I need is the ability to isolate the margin property and make it exclusive to IE only. I found a code to put in the header but it doesn’t work (see below):

    <!--[if lte IE 7]>
  <link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

    ———
    Above, I copied my css to a file called ie.css and had the margin tag on, but in my regular style.css I had it marked as a comment. so it still doesn’t work.

    I’ll just keep posting as I do find solutions since it may be helpful for someone else, or at least speed up the process.

    Adam Brown

    (@adamrbrown)

    16 years, 4 months ago

    I’m not great at this sort of thing, but here’s one hack to make IE see a piece of CSS:

    /* seen by all browsers */
#nav li ul a {
            width: 12em;
	   margin: 0 0 0 -10em;
}
/* seen by IE only (I think) */
* html #nav li ul a {
            width: 12em;
	   margin: 0 0 0 -10em;
}

    Hope that helps, but like I said, browser-specific hacks aren’t something I’ve got much experience with.

    Thread Starter markjbennettlp

    (@markjbennettlp)

    16 years, 4 months ago

    Thanks, I gave it a try but it didn’t work.
    At least it’s isolated to this. I don’t think it will be too hard to cook up an IE only bit of code from what’s out there. I’m just searching around now, but if anyone else has anything they think might work, please do post.

    Thanks

    Thread Starter markjbennettlp

    (@markjbennettlp)

    16 years, 4 months ago

    Solved!
    This was put in the ie.css:

    #nav li ul a {
            width: 12em;
			margin: 0 0 0 -10em;
}

#nav li ul ul {
/* The below margin is written in CSS Shorthand. The first 0em is for vertical spacing, and the last one is for horiztonal */
            margin: 0em 0 0 2em;
}

    —–

    And in the header I put in this code telling any Internet Explorer browser to go to this css file and read this particular info vs. the other style.css:

    <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="http://www.myaddresshere.com/ie.css" />
<![endif]-->

    ——
    I made sure to put in the exact address instead of just “ie.css”. Common sense usually, but we get lazy sometimes :p

    Anyways, thanks for the help.
    I hope this might be helpful to someone else!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘CSS Dropdown menus and IE…urgent help.’ is closed to new replies.