Hi everybody, Really i hate this stupid browser .. i really wonder why Microsoft still supporting it !! My problem is that the background image of " ul " .. doen't work with IE6 .. but works with FF & Opera. there's the code: #navigation { margin: 0px; clear: both; height: auto; width: auto; padding-top: 0px; padding-left: 0px; padding-bottom: 0px; padding-right: 0px; background-image:url(images/menubg.gif) repeat-x; width: 100%; font-size: 95%; margin: 0 auto; } #navigation ul { float: right; list-style: none; [COLOR="Blue"]background: url('images/menubg.gif')[/COLOR] repeat-x 0 50%; overflow: hidden; border: 0px solid #1f1f1f; } #navigation ul li { float: right; margin: 0px; padding: 0 2px 0 0; list-style: none; background: url(images/separator.gif) no-repeat 100% 50%; } #navigation ul li a { border-right:0px solid #101010; padding: 8px 13px 8px 13px; display: block; color: #FFFFFF; text-decoration: none; font: bold 15px Arial; letter-spacing:0px; background-image:url(images/menubg.gif); background-repeat:repeat-x; background-position:center; } #navigation ul li a:link, #navigation ul li a:visited { padding: 7px 10px; } #navigation ul li a:hover, #navigation ul li a:active { background-image:url(images/menubg_h.gif); background-repeat:repeat-x; background-position:top; color: #FFFFFF; border-right:0px solid #13222D; font: bold 15px Arial; text-decoration:none; } Code (markup): Kindly, help!
100%+no-repeat == no image. You pushed it over the width of the element, since it doesn't repeat, there's nothing to draw. background: url(images/separator.gif) no-repeat 100% 50%; That will NEVER draw a background - EVER. 100% from the left is the right side - you push the background over that far, it's outside the container. If it IS drawing in Opera/FF, then they are actually doing something wrong. Funny, since that's not even the image you claim to be having trouble with - which is odd since being the same background-image as the wrapping div, I'm wondering why you are even bothering to declare it a second time. Oh, and a few tip, AVOID using % with background-position, it's usually made of /FAIL/, some formatting would make it easier to debug and make you less likely to not notice mistakes, by the specification you have to state BOTH directions on background-position not just one, if it's 0px border, don't say border, and don't waste time repeating values on your hover state that already exist on your anchor declaration... and just as "not every ejaculation deserves a name" not ever element needs a DIV around it to be styled. Axe the DIV, change the ul to <ul id="navigation"> and you can nebfer that CSS down to something like this: #navigation { list-style:none; overflow:hidden; /* wrap floats */ width:100%; /* trip haslayout, wrap floats in IE clear: both; padding:0; margin:0; background:url(images/menubg.gif) center center repeat-x; } #navigation li { float:right; margin:0; padding:0 2px 0 0; background:url(images/separator.gif) center right no-repeat; } #navigation a { /* same float trips display block, actually using display:block trips staircase error in IE7 */ float:right; padding:7px 13px; color:#FFF; text-decoration:none; font:bold 15px/18px arial,helvetica,sans-serif; } #navigation a:active, #navigation a:focus, #navigation a:hover { background:url(images/menubg_h.gif) center center repeat-x; } Code (markup): Though to be honest, since you'd have a fixed height on your menu using PX fonts, (usually a no-no, but I look the other way when it's a menu with a image background) I would probably make that entire thing a single sliding doors image. Top 'row' gets the content of menubg.gif, bottom row left gets the hover state, bottom row right gets the 2px stripe of the separator. Given this looks like a menu it's unlikely you'd have any items wider than 256px, and while a 256x64 image might be a wee bit larger than your 3 separate gif files, I'm willing to bet the difference in handshakes would make it load faster, and you'd not have that awkward pause when you hover the first time while the image loads. CSS for that would be something like this: #navigation { list-style:none; overflow:hidden; /* wrap floats */ width:100%; /* trip haslayout, wrap floats in IE clear: both; padding:0; margin:0; background:url(images/menu.png) top left repeat-x; } #navigation li { float:right; margin:0; padding:0 2px 0 0; background:url(images/menu.png) bottom right no-repeat; } #navigation a { /* same float trips display block, actually using display:block trips staircase error in IE7 */ float:right; padding:7px 13px; color:#FFF; text-decoration:none; font:bold 15px/18px arial,helvetica,sans-serif; background:url(images/menu.png) top left no-repeat; } #navigation a:active, #navigation a:focus, #navigation a:hover { background-position:bottom left; } Code (markup): Of course, a nice little reset up top of your CSS would let you axe most of those margin:0; padding:0; declarations
Many thanks for ur great help, but really i'm sorry to say that it's failed ! i removed the DIV .. and followed your advice, but the menu appeared as a bulleted -without any backgrounds- list !
yes. I made the UL as: <ul id="navigation"> But also i wanna tell u that this List with the same codes & CSS .. i used them before in another script, and it worked 100% with IE & FF ! I don't know what's the problem here
Well, I'd have to see the whole page then... You have a demo copy up somewhere (If you don't want the general public to see it, feel free to PM me and I'll help if I can)
No problem with me to show it to public , This in the BODY section of header.php file of my Wordpress theme: <div id="wrapper"> <div id="container"> <div id="header"> <div id="navigation"> <ul> <li><a href="http://www.mysite.com/" title="">Home</a></li> <li><a href="http://www.mysite.com/forums" target="_blank" title="">Forum</a></li> <li><a href="http://www.mysite.com/games" target="_blank" title="">Games</a></li> <li><a href="http://www.mysite.com/videos" target="_blank" title="">Videos</a></li> <li><a href="http://www.mysite.com/contact" target="_blank" title="">Contact Us</a></li> </ul> </div> </div> </div> </div> Code (markup): and here's the CSS related codes: #wrapper { padding: 0px; height: auto; width: 99.5%; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; clear: both; } #container { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding: 0px; height: auto; width: 100%; clear: both; border: 2px solid #D5D5D5; } #header { padding: 0px; clear: both; height: auto; width: auto; margin: 0px; background-color: #FFFFFF; } #navigation { margin: 0px; clear: both; height: auto; width: auto; padding-top: 0px; padding-left: 0px; padding-bottom: 0px; padding-right: 0px; background-image:url(images/menubg.gif) repeat-x; width: 100%; font-size: 95%; margin: 0 auto; } #navigation ul { margin: 0px; clear: both; height: auto; width: auto; padding-top: 0px; padding-left: 0px; padding-bottom: 0px; padding-right: 0px; list-style: none; background: url('images/menubg.gif') repeat-x 0 50%; overflow: hidden; border: 0px solid #1f1f1f; } #navigation ul li { float: right; margin: 0px; padding: 0 2px 0 0; list-style: none; background: url(images/separator.gif) no-repeat 100% 50%; } #navigation ul li a { border-right:0px solid #101010; padding: 8px 13px 8px 13px; display: block; color: #FFFFFF; text-decoration: none; font: bold 15px Arial; letter-spacing:0px; background-image:url(images/menubg.gif); background-repeat:repeat-x; background-position:center; } #navigation ul li a:link, #navigation ul li a:visited { padding: 7px 10px; } #navigation ul li a:hover, #navigation ul li a:active { background-image:url(images/menubg_h.gif); background-repeat:repeat-x; background-position:top; color: #FFFFFF; border-right:0px solid #13222D; font: bold 15px Arial; text-decoration:none; } Code (markup):
list-style:none; is completely valid, it's just the condensed property version. his problems lie elsewhere. Crazy question, but elsewhere in the CSS are you declaring the formatting of UL differently? It could be a specificity issue - which is why I'd need to see the WHOLE page with the FULL content to diagnose, not some partial snippets.
Ok, first I'd neuter the markup down to: <div id="wrapper"> <div id="container"> <div id="header"> <ul id="navigation"> <li><a href="/">Home</a></li> <li><a href="/forums">Forum</a></li> <li><a href="/games">Games</a></li> <li><a href="/videos">Videos</a></li> <li><a href="/contact">Contact Us</a></li> </ul> </div> </div> </div> Code (markup): Since target was deprecated for a reason, there's no reason to be wasting bandwidth on that full URL asshattery (****ing turdpress man, what retards coded that ****?!? Just one of the many reasons I refuse to use it) and of course there's no point in having an empty title attribute (nor is there a reason to have a title attribute identical to the CDATA inside an anchor - again, what asylum did most wordpress skinners escape from?) Now, that's enough CSS that I'd put a reset on it - and you are declaring a bunch of properties that are the default behavior for what the elements are (not sure what you are hoping to accomplish with the height:auto for example) /* null margins and padding to give good cross-browser baseline */ html,body,address,blockquote,div, form,fieldset,caption, h1,h2,h3,h4,h5,h6, hr,ul,li,ol,ul, table,tr,td,th,p,img { margin:0; padding:0; } img,fieldset { border:none; } #wrapper { width: 99.5%; margin:0 auto; /* I'd assume you'd want that 99.5% centered?!? */ /* removed the clear, since that wrapper should be your first element, what is there to clear? */ } #container { width: 100%; border: 2px solid #D5D5D5; } #header { background:#FFF; } #navigation { list-style:none; overflow:hidden; /* wrap floats */ width:100%; /* trip haslayout, wrap floats in IE background:url(images/menu.png) top left repeat-x; } #navigation li { float:right; padding-right:2px; background:url(images/menu.png) bottom right no-repeat; } #navigation a { /* same float trips display block, actually using display:block trips staircase error in IE7 */ float:right; padding:7px 13px; color:#FFF; text-decoration:none; font:bold 15px/18px arial,helvetica,sans-serif; background:url(images/menu.png) top left no-repeat; } #navigation a:active, #navigation a:focus, #navigation a:hover { background-position:bottom left; } Code (markup): Barring any typo's that should do the trick... hang on, I'll test it here with some dummy content.
Oops - DOH width:100%; /* trip haslayout, wrap floats in IE should be width:100%; /* trip haslayout, wrap floats in IE */ or width:100%; // trip haslayout, wrap floats in IE (I prefer the wrapping because it's consistent with another programming language I use) My bad, typo.
Actually, see my previous post - I forgot to close a comment which is why those bits of styling were being ignored.
Ok.. now the backgroung image appeared, but without links "in IE" .. and with different style from original one! "in both IE & FF"