- This topic is empty.
-
AuthorPosts
-
November 13, 2008 at 7:45 pm #23583bullitt453Member
Trying my hand at a sprite menu system and am having some problems.
The test site so you can see what I am referring to:
http://mustangsofburlington.com/martin/ … issue.htmlIssues:
- The way it is coded currently causes Firefox to have a horizontal scroll bar. When I place overflow: hidden; on the ul#nav element, the scroll bar disappears…along with the menu[/*:m]
- IE6 is being, well, IE6. I can’t get the menu to work correctly at all. The hover states and current states do not work and the images don’t line up at all[/*:m][/list:u]
Current CSS code for the menu:
Code:ul#nav {
background:url(../images/menu.png);
position:relative;
top:115px;
left:443px;
z-index:15000;
font-size: 10px;
}
ul#nav li { float:left; list-style-type:none; z-index: 15000; }
ul#nav li a { height:56px; display:block; position:absolute; top:0; text-indent:-9999px; outline:none; }li#navHome a, li#navServices a, li#navGallery a, li#navContact a { background:url(../images/menu.png); }
li#navHome a { background-position:0 0; width:87px; left:0; }
li#navHome a:hover { background-position:0 -56px; }
li#navHome a.current { background-position:0 -112px; }li#navServices a { background-position:-87px 0; width:137px; left:87px; }
li#navServices a:hover { background-position:-87px -56px; }
li#navServices a.current { background-position:-87px -112px; }li#navGallery a { background-position:-224px 0; width:117px; left:224px; }
li#navGallery a:hover { background-position:-224px -56px; }
li#navGallery a.current { background-position:-224px -112px; }li#navContact a { background-position:-341px 0; width:116px; left:341px; }
li#navContact a:hover { background-position:-341px -56px; }
li#navContact a.current { background-position:-341px -112px; }The image itself:
[img]http://mustangsofburlington.com/martin/ver2/images/menu.png[/img]I have attached an image showing how it looks in Firefox 3.0.3, IE7, and IE6. What the attachment doesn’t show is the horizontal scroll bar in Firefox. In the example, Home is current and Gallery is in hover state.
So, is there anything sticking out to any of you that would be causing these issues? Any help you can provide and/or light you can shed would be immensely appreciated. Thanks in advance.
November 13, 2008 at 8:40 pm #51121chazzwickMemberget rid of
Code:left:443pxand replace it with
Code:margin-left:443px.
I think that should fix the horizontal scrollNovember 14, 2008 at 8:03 am #51206bullitt453MemberThanks chazzwick. Don’t know why I didn’t think of that myself.
So, now I just have that nasty IE6 issue to deal with. Anyone have any ideas? Thanks.
November 14, 2008 at 6:21 pm #51204bullitt453MemberThanks for the reply Doc. I was using a different iepngfix, but had just tried the one you posted right before I came here to check this post. lol. I read where the png fixes don’t play well with background-position, but the one you posted is supposed to work correctly when the javascript file is included. It worked, but then I ran into the problem where the links weren’t clickable. I tried a few different things and could never get it to work correctly.
So, I cut the image into several pngs and was just going to do a regular ol’ image swap on hover for IE6 only. But now I can’t even get the to work. This is the only thing I have left to complete for this template and it is really becoming frustrating. For the life of me, I can’t see why this won’t work. Any clues?
Code:November 15, 2008 at 7:16 am #51197smith1234MemberViele cheap Rolex replica versuchen, dieses schillernde Material ohne wirklich using das Perlmuttmaterial zu kopieren. Replik rolex Uhren, zwecks Kosten unten zu halten, häufig benutzen die echten Materialien nicht im Aufbau der Uhren.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.