Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
Hi everyone
I've recently built a website for a friend of mine, and although it works the way I intended it to on Firefox, Safari and IE (on a Mac), IE 6 is not displaying the navigation list properly.
http://www.masondouglasmusic.com
Click here to view a screenshot of IE 6.
Click here to view a screenshot of the way it is supposed to look.
What could cause this? I've tried everything I can think of, including setting margin and padding to 0 on more things than I can imagine even having to bother with.
I'm fairly new to the web standards way of designing, and I really enjoy it, except for these moments.
I'll be more than happy to post code if that helps, but I just wanted to see if anyone has an immediate solution.
Thanks for any help you may be able to give,
Daniel -
-
CommentAuthorthumblewend
- CommentTimeJun 18th 2006
Hey, good effort on the site. Please forgive my next comment, just trying to help: you really should start by fixing your HTML and making it valid. You have errors that will cause you dramas trying to get the CSS to work reliably. Just one example is that you have the same id attribute on more than one element (the nav ul and the nav div).
Fix your HTML and it will make your life easier - and will also make helping you track down your bugs easier for us. Don't worry about the menu problem until then - it will be easy to fix. -
-
Try giving your #navlist li, #navlist a a fixed height (f.e. same height as your nav images). Add display: inline to your #navlist li; this will fix IE 5's 3px bug. (if you still want to support that browser that is)
Personally i'd suggest to use non-transparent GIF's or JPG's instead of your transparent PNG's, cause of the bad browser support for PNG's.
Good luck with this site, it's looking good. -
Set a fixed height for div id="navlist".. but before that.. change id="navlist" with something else because you have the same id on <ul>. It is not neccesary to have an id on <ul> Catch me on YM for other things.. because they are and I can't write them here... The are some changes to be made in your html/css file.
So my YM : seedee69 -
first off... why the s as the html instead of the word of the link 'home' and such?
You could use the this technique:
### THE HTML ###
<li id="home"><a href="http://www.masondouglasmusic.com"><span class="hide">home</span></a></li>
### THE CSS ###
#home{
background: url(../images/home.gif) top left no-repeat;
width: 16px;
height: 16px;
margin: 0; padding: 0; border: 0;
}
#home a, #home a:visited {
background: url(../images/home.gif) top left no-repeat;
width: 100%;
height: 100%;
display: block;
text-decoration: none;
margin: 0;
padding: 0;
border: 0;
}
#home a:hover {
background: url(../images/home.gif) top right no-repeat;
}
.hide {
display: none;
} -
You have all been extremely helpful. Thank you!
thumblewend - I completely agree with getting the html straightened out. When I started in Dreamweaver building it, I was on the right track, but the IE thing caused me to get out of control doing anything and everything I could to get it to work. Excuses excuses... :)
Jan Meeus - that did the trick! And good call on the transparent gifs. Thank you.
seedee - thanks for the heads up on the markup, and for the offering of chatting online to help me out. I may do that when I have a little more free time to really sit down and dive into it.
Daytonian - seemed a little easier just using the but when I get some time, I might try to play around with what you posted. Thank you for taking the time to do that. I really appreciate it.
1 to 6 of 6