sarah Posted March 22, 2009 Report Share Posted March 22, 2009 This works fine in the usual browsers and looks nice. But is there anyway to fix it for IE6? I need it to work, because even though the rest of the world seems to have upgraded to IE7 lots of Portuguese and Brazilians seem to stick to the infernal IE6. If there is no way I will have to say goodbye to it and find something more plain and simple. Home Quem Somos Mosaicos Galeria Novidades Cursos Como Aderir Links div#navbar {background-color: #3e5f61; height: 44px; width: 875px; margin:0; padding: 0; } ul#navlist {list-style: none; margin: 1px; } a.button {background: transparent url('buttona.png') no-repeat scroll top right; color: #444; display: inline; float: left; font: normal 15px verdana, arial, sans-serif; height: 38px; margin-top: 3px; margin-right: 6px; padding-right: 18px; /* sliding doors padding */ text-decoration: none; } a.button span { background: transparent url('buttonspan.png') no-repeat; display: inline; line-height: 38px; padding: 10px 0 10px 18px; } ul#navlist a:hover {background-image: url(buttonahover.png);} ul#navlist a:hover span {background-image: url(buttonspanhover.png);} ul#navlist a:active span {padding:5px 0 3px 18px;} Quote Link to comment Share on other sites More sharing options...
jlhaslip Posted March 22, 2009 Report Share Posted March 22, 2009 Well, since png's fail in IE6, start with an image format that IE6 understands. Png is not one of them. Do you need opacity or transparency in the image? Can you use a gif or jpg instead? Quote Link to comment Share on other sites More sharing options...
sarah Posted March 22, 2009 Author Report Share Posted March 22, 2009 Well, the png would be the smallest of the problems that IE6 has with it, and I can change these, I think they are not essential. The positioning issues are more difficult - the buttons appear on the proper place horizontally, but each of them occupies an own line, if that explanation is more or less understandable. And that is the point I could not fix so far... Quote Link to comment Share on other sites More sharing options...
Wickham Posted March 22, 2009 Report Share Posted March 22, 2009 (edited) the buttons appear on the proper place horizontally, but each of them occupies an own line, if that explanation is more or less understandable. That's the key! Add this to the css:- ul#navlist li { float: left; } I've tested it. Edit: Firefox was OK with your code but IE7 put each item on a separate line, but spaced out as if they were horizontal. We've met that problem before. Display: inline is not enough. Edited March 22, 2009 by Wickham Quote Link to comment Share on other sites More sharing options...
sarah Posted March 22, 2009 Author Report Share Posted March 22, 2009 Thank you all so much! Everything in place, gif-images, buttons in line and you saved me from big headache of rethinking all my design. I am really happy now!! Greetings, Sarah 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.