donrtowery Posted January 14, 2009 Report Share Posted January 14, 2009 I'm trying to add a gradient background image to my navigation menu but I cant get it to work. Where should I add this and am I using the correct syntax? If someone can help me get the root of the menu squared, I think I can handle the rest. /* Root = Vertical, Secondary = Vertical */ ul#navmenu, ul#navmenu li, ul#navmenu ul { margin: 0; border: 0 none; padding: 0; width: 160px; /*For KHTML*/ list-style: none; } ul#navmenu li { display: block !important; /*For GOOD browsers*/ display: inline; /*For IE*/ float:left; position: relative; } /* Root Menu */ ul#navmenu a { border: 1px solid #FFF; border-right-color: #CCC; border-bottom-color: #CCC; padding: 0 6px; display: block; background: grey url(bg1.gif) top left repeat-x; color: #666; font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif; text-decoration: none; height: auto !important; height: 100%; /*For IE*/ } /* Root Menu Hover Persistence */ ul#navmenu a:hover, ul#navmenu li:hover a, ul#navmenu li.iehover a { background: #CCC; color: #FFF; } /* 2nd Menu */ ul#navmenu li:hover li a, ul#navmenu li.iehover li a { background: #EEE; color: #666; } /* 2nd Menu Hover Persistence */ ul#navmenu li:hover li a:hover, ul#navmenu li:hover li:hover a, ul#navmenu li.iehover li a:hover, ul#navmenu li.iehover li.iehover a { background: #CCC; color: #FFF; } /* 3rd Menu */ ul#navmenu li:hover li:hover li a, ul#navmenu li.iehover li.iehover li a { background: #EEE; color: #666; } /* 3rd Menu Hover Persistence */ ul#navmenu li:hover li:hover li a:hover, ul#navmenu li:hover li:hover li:hover a, ul#navmenu li.iehover li.iehover li a:hover, ul#navmenu li.iehover li.iehover li.iehover a { background: #CCC; color: #FFF; } /* 4th Menu */ ul#navmenu li:hover li:hover li:hover li a, ul#navmenu li.iehover li.iehover li.iehover li a { background: #EEE; color: #666; } /* 4th Menu Hover */ ul#navmenu li:hover li:hover li:hover li a:hover, ul#navmenu li.iehover li.iehover li.iehover li a:hover { background: #CCC; color: #FFF; } ul#navmenu ul, ul#navmenu ul ul, ul#navmenu ul ul ul { display: none; position: absolute; top: 0; left: 160px; } /* Do Not Move - Must Come Before display:block for Gecko */ ul#navmenu li:hover ul ul, ul#navmenu li:hover ul ul ul, ul#navmenu li.iehover ul ul, ul#navmenu li.iehover ul ul ul { display: none; } ul#navmenu li:hover ul, ul#navmenu ul li:hover ul, ul#navmenu ul ul li:hover ul, ul#navmenu li.iehover ul, ul#navmenu ul li.iehover ul, ul#navmenu ul ul li.iehover ul { display: block; } Quote Link to comment Share on other sites More sharing options...
virtual Posted January 14, 2009 Report Share Posted January 14, 2009 Are all your files in the same folder, or do you have a different folder for images and CSS? Your path to the image may not be correct. Quote Link to comment Share on other sites More sharing options...
donrtowery Posted January 14, 2009 Author Report Share Posted January 14, 2009 yes, that particular image is in the same directory as the html and css file. I wish it was that easy :/ Quote Link to comment Share on other sites More sharing options...
Wickham Posted January 14, 2009 Report Share Posted January 14, 2009 (edited) Edit: read the bottom paragraphs. [Add the background to the li tag, not the "a" tag:- ul#navmenu li { background: red; display: block !important; /*For GOOD browsers*/ display: inline; /*For IE*/ float:left; position: relative; } /* Root Menu */ ul#navmenu a { border: 1px solid #FFF; border-right-color: #CCC; border-bottom-color: #CCC; padding: 0 6px; display: block; background: grey url(bg1.gif) top left repeat-x ; color: #666; font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif; text-decoration: none; height: auto !important; height: 100%; /*For IE*/ } As you can see I've added a red background but left the "a" tag as it was and with a simple html markup (as I don't have your markup) the li tags turned red.] Edit:- on further testing I found that in IE7 my red color showed (and light gray on hover) but in Firefox the grey shows normally (instead of red) and then light gray on hover. This suggests that my red color on the li tag should not be required as the grey is showing in Firefox where it is coded in the same style as the gradient image, so there seems to be a problem with the codes for IE7. In Firefox the gradient image should show if you have the correct path and will replace the grey color. I tried a background-image of mine and it showed in Firefox but not in IE7. THE ANSWER: Edit grey to gray; Firefox recognises the alternative spelling grey but IE7 does not. I never knew that because grey is supposed to be a correct alternative. When IE7 fails to recognise grey it blocks the image in the style. Edited January 14, 2009 by Wickham Quote Link to comment Share on other sites More sharing options...
donrtowery Posted January 15, 2009 Author Report Share Posted January 15, 2009 I've tried everything I can think of and this is as close as I've managed to get. I can get the gradient image to appear directly in the middle of the button and no where else. I cannot get the image to repeat for some reason. You can view it here. All the CSS is in the head of the html, so you can see what i've done with a simple "View Source". http://www.geocities.com/slanderizer1/example.html Quote Link to comment Share on other sites More sharing options...
falkencreative Posted January 15, 2009 Report Share Posted January 15, 2009 If you look at your actual image... http://www.geocities.com/slanderizer1/bg1.gif You'll notice that it includes a large area of white around it. Remove that large white border -- the only bit you need is the gradient. That's (at least one) of the reasons you are having so much trouble, and definitely the reason why it won't repeat. Fix that, and then we can look at the problem again. Quote Link to comment Share on other sites More sharing options...
donrtowery Posted January 15, 2009 Author Report Share Posted January 15, 2009 *bangs head on desk* omg im retarded thank you...I cant believe I missed that Quote Link to comment Share on other sites More sharing options...
falkencreative Posted January 15, 2009 Report Share Posted January 15, 2009 I should also mention... once you make that graphic change, modify the line where you set the background gradient: background:url('bg1.gif') 90% 50% repeat-x gray; to this: background:url('bg1.gif') 0 0 repeat-x gray; and then tweak to your liking. The old positioning 90% 50% will only work because your image had a big white border. Remove the border, and you'll have to adjust the positioning. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.