Hey all, CSS menu problem..

[j22cal]

Hey all. I am not new to this site, but had to re-register. However, I was hoping someone could help me with a IE7 CSS issue that I am having?

 

On www.commentsandcapers.com my menu on the right it not centering in the containing element. Could one of you take a look at it and see if you could point out what it is. Of course, it looks fine in IE8 and Firefox.

 

http://www.commentsandcapers.com

 

Here is the menu code:

#rightLinks ul.topMenu {
text-align: center;
z-index: 20;
}


#rightLinks ul.topMenu li {
list-style-type: none;       
position: relative;
text-align: center;
}

#rightLinks ul.topMenu li > ul {
display: none;                         
font-size: 1.0em;                       
position: absolute;                    
right: 200px;                          
top: 2px;                              
z-index: 20; 
}                            

#rightLinks ul.topMenu ul.topMenu { 
display: block;
}

#rightLinks ul.topMenu li:hover > ul {
display: block;
}                                   

#rightLinks ul.topMenu li a {
background-image: url(../images/Cbutton.png);
background-repeat: no-repeat;
color: white;
display: block;
font-family: "Lucida Sans Unicode", Tahoma, Geneva, sans-serif;
height: 20px;
letter-spacing: 4px;
margin: 0 auto 3px auto;
text-align: center;
text-decoration: none;
width: 192px;
}

#rightLinks ul.topMenu ul {
background: #F2F2F2;
text-align: center;
width: 145px;
}

#rightLinks ul.topMenu li li a {
background-image: url(../images/CSubbutton.png);
font-family: "Lucida Sans Unicode", Tahoma, Geneva, sans-serif;
letter-spacing: 0px;
text-align: center;
width: 140px;
padding:0;
}

#rightLinks ul.topMenu li:hover > a { 
background-image: url(../images/Cbutton2.png);
background-repeat: no-repeat;
} 

#rightLinks ul.topMenu li li:hover > a { 
background-image: url(../images/CSubbutton2.png);
background-repeat: no-repeat;
color: #fff;
z-index: 20;
} 

[Wickham]

I first noticed that the large header image had dropped down below the right column in E7.

 

You have mixed % widths with px; #rightLinks is 200px wide and #header is 80% so in some resolutions they won't fit together; IE can't manage it while Firefox knows what you want.

 

I changed width: 200px; to 19% and IE7 is OK but it may have affected other things. (20% doesn't work).

 

It's OK at my 1024*768 resolution in IE7 but when I reduce the window size, it breaks again because the inner divs still have widths in px like 190px, so you will either have to make them all px or all % widths.

 

#rightLinks {

background: #F2F2F2;

float: right;

height: 100%;

margin: 0px 0px 60px 0;

padding: 5px;

position: relative;

width: 19%;/*200px;*/

z-index: 5;

}

 

#header {

background: url(images/colorRose.png);

background-repeat: no-repeat;

height: 350px;

margin-bottom: 10px;

position: relative;

width: 80%;

z-index: -1;

}

 

I haven't looked at the centering problem with the right column, get the widths sorted first.

Edited August 11, 2009 by Wickham

[j22cal]

Ok, thanks for looking at it. Actually, I did not even think about that being part of the centering problem, but it seemed to fix it. However, now that the menu is not a fixed size (I made the

a percentage of their containing element so that I could keep them centered, the drop down part of the menu is not consistent. Is there anyway to correct this?

 

Here is what I have, but it is not working:

 

#rightLinks ul.topMenu li > ul {      
display: none;                        
font-size: 1.0em;                       
position: absolute;                   
right: 119%;                         
top: 1%;                              

 

I changed this part to percentage as well, thinking that it might correct the problem, but it didn't work.

 

Thanks!

[j22cal]

take that back, the centering still is not working in IE7, although it is better.

[j22cal]

Well, i got it mostly working like I want it, except that the link images are a fixed size and they do not change size with the page. But I don't think that I can make them percentages and still keep the drop-down working consistently across pages sizes?

[astone7035]

I'm having a different problem with my CSS menu. It is a horizontal menu and I can't get it to go across the page it goes down the page. Any thoughts why this would do this?

[j22cal]

Are you using float: left (or right), and display: inline?

[astone7035]

Yes it was set to float: left and display: inline.

[astone7035]

Posting all of the CSS Code below:

 

.jqueryslidemenu{

font: bold 12px Verdana;

background: #FFFFFF;

width: 100%;

}

 

.jqueryslidemenu ul{

margin: 0;

padding: 0;

list-style-type: none;

}

 

/*Top level list items*/

.jqueryslidemenu ul li{

position: relative;

display: inline-block;

float: none;

}

 

/*Top level menu link items style*/

.jqueryslidemenu ul li a{

display: block;

background: #999999; /*background of tabs (default state)*/

color: white;

padding: 8px 10px;

border-right: 1px solid #778;

color: #990000;

text-decoration: none;

}

 

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/

display: block;

}

 

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{

color: white;

}

 

.jqueryslidemenu ul li a:hover{

background: #990000; /*tab link background during hover state*/

color: white;

}

 

/*1st sub level menu*/

.jqueryslidemenu ul li ul{

position: absolute;

left:0;

display: block;

visibility: hidden;

}

 

/*Sub level menu list items (undo style from Top level List Items)*/

.jqueryslidemenu ul li ul li{

display: list-item;

float: none;

}

 

/*All subsequent sub menu levels vertical offset after 1st level sub menu */

.jqueryslidemenu ul li ul li ul{

top: 0;

}

 

/* Sub level menu links style */

.jqueryslidemenu ul li ul li a{

font: normal 13px Verdana;

width: 200px; /*width of sub menus*/

padding: 5px;

margin: 0;

border-top-width: 0;

border-bottom: 1px solid gray;

}

 

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/

background: #FFFFFF;

color: silver;

}

 

/* ######### CSS classes applied to down and right arrow images ######### */

 

.downarrowclass{

position: absolute;

top: 12px;

right: 7px;

}

 

.rightarrowclass{

position: absolute;

top: 6px;

right: 5px;

}

 

Any help in telling me why this will not center across the page would greatly help. Thanks.