General Community > HTML/CSS

Menu Images are vertical?! (only on Chrome)

(1/1)

gmbhneo:
Hey,

i got the Problem, that my Menu Bar Images are vertical on Google Chrome. With FF or IE its working nice.

Demopage: http://hma.epicimage.ws

CSS:

#topcat {
  background-attachment:initial;
  background-clip:initial;
  background-color:initial;
  background-image:url(http://hma.epicimage.ws/Themes/HMA2/images/nav_bg.jpg);
  background-origin:initial;
  background-position:initial initial;
  background-repeat:repeat no-repeat;
  border-bottom-color:#222222;
  border-bottom-style:solid;
  border-bottom-width:3px;
  border-top-color:#222222;
  border-top-style:solid;
  border-top-width:5px;
  height:27px;
  padding-bottom:7px;
  padding-left:0;
  padding-right:0;
  padding-top:0;
}

gmbhneo:
Is there no one who could help me with that?!

MrPhil:
I see a lot of strange CSS, that may be confusing Chrome:

--- Code: ---#nav li { }

#nav li { float: left; padding: 0px; }

#nav li a, #nav li a:link, #nav li a:visited { }

#nav li a:hover, #nav li a:active { }

#nav li li { }

#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #b7dcf7;
width: 150px;
float: none;
margin: 0px;
line-height: 30px;
border-bottom: 1px solid #292A5A;
border-right: 1px solid #292A5A;
padding: 0px 15px;
}
#nav li li a:hover, #nav li li a:active {
background: #9fd3fa;
color: #292A5A;
line-height: 30px;
margin: 0px;
padding: 0px 15px;
}

#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}

#nav li ul a { width: 140px; }

#nav li ul a:hover, #nav li ul a:active { }

#nav li ul ul { margin: -32px 0 0 171px; }

#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; }

#nav li:hover, #nav li.sfhover { position: static; }

#nav ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px 0px;
}
 ....
#topcat {
height: 27px;
background: url(../images/nav_bg.jpg) repeat-x ;
padding: 0px 0px 7px 0px;
border-bottom:3px solid #222222;
border-top:5px solid #222222;
}

#topcat ul { list-style: none; margin: 0; padding:  0; }

#topcat ul li{
float: center;
color: #fff;
}

#topcat ul li a {
font-size: 10px;
color: #fff;
}

#topcat ul li a:hover {  }

--- End code ---
to be applied to

--- Code: ---<div id="topcat">
<ul id="nav">

<li>
<a href="http://hma.epicimage.ws/index.php?PHPSESSID=590lrbrfvnlbdko0rdriv0lsm5&amp;">
<img align="absMiddle" src="http://hma.epicimage.ws/Themes/HMA2/images/menu/uebersicht.jpg" alt="Home"/>&nbsp;
</a>

</li>
...
--- End code ---
There's only one level of <li> inside of the <ul>, so you can get rid of all the li li stuff. Ditto for ul ul entries. There may be some conflict between having both #nav and then #topcat entries -- I would suggest going with one or the other, but not both. I see no hierarchy #nav li ul, so why is that in there? Try cleaning up your CSS and seeing what happens.

Navigation

[0] Message Index