Problem with Sprite/Spry Navigation

[cjoltman]

This is my first time hand coding a website and working with sprites so I’ve run into a few issues. Please click the link below and navigate to the following pages to view the issue. I appreciate any help I can get!

Store page (and every car model page)
http://oltmandesign.com/web/marinelli/store.html
The side navigation is breaking when you scroll over the "Infiniti G35" option. I checked the W3 Validator, but it did not seem to address the issue. Is there something wrong in my code or do I need to add an additional styling element?

Pretty much every page…
http://oltmandesign.com/web/marinelli/index.html
On some of my links (easily seen in the top navigation) the dotted box that comes up when you click down on the link spans all the way to the left side of the website, which I find weird and quite distracting. This also happens in the side navigation on the pages I listed above. Is there anyway I can fix this little problem?

Again, I appreciate any help I can get!

Code for store page (You can probably get all the information from the HTML and CSS files below.)

Code:

• Home
• Store
• Multimedia
• Links
• Contact

• 350z
  • 03-06 350z
  • 07-08 350z
• 370z
• G35
  • 03-07 Coupe
  • 03-06 Sedan
  • 07-08 Sedan
• G37

Products

Store Coming Soon!

For now, please purchace our products through this link:
http://g35driver.com/forums/marketplace-29

• Home
• Store
• Multimedia
• Links
• Terms and Conditions
• Contact

Copyright © 2009 Marinelli Motorsports – All Rights Reserved • Created by: Oltman Design

CSS code

Code:

@charset “UTF-8”;
/* CSS Document */

.container {
width:828px;
margin:0 auto;
}
#topnavContainer {
float:right;
margin-top:40px;
}
ul#topnav {
width:418px;
height:12px;
margin:25px 0 0 0;
list-style:none;
}
ul#topnav li {
display:inline;
}
ul#topnav li a {
height:12px;
float:left;
text-indent:-9999px;
}
ul#topnav li#topnavHome a:hover {
background-position:0px -13px;
}
ul#topnav li#topnavStore a:hover {
background-position:-65px -13px;
}
ul#topnav li#topnavMedia a:hover {
background-position:-138px -13px;
}
ul#topnav li#topnavLinks a:hover {
background-position:-257px -13px;
}
ul#topnav li#topnavContact a:hover {
background-position:-330px -13px;
}
#sidenavContainer {
float:left;
margin-top:11px;
}
ul#sidenav {
height:200px;
list-style:none;
float:left;
}
ul#sidenav li a {
width:154px;
height:50px;
float:left;
border:.5px solid #9E9E9E;
margin-top:-1px;
margin-left:-40px;
text-indent:-9999px;
list-style:none;
}
ul#sidenav li#sidenav350z a {
width:154px;
background:url(images/sidebar.png) no-repeat 0px 0px;
}
ul#sidenav li#sidenav370z a {
width:154px;
background:url(images/sidebar.png) no-repeat 0px -50px;
}
ul#sidenav li#sidenavG35 a {
width:154px;
background:url(images/sidebar.png) no-repeat 0px -100px;
}
ul#sidenav li#sidenavG37 a {
width:154px;
background:url(images/sidebar.png) no-repeat 0px -150px;
}
ul#sidenav li#sidenav350z a:hover {
background-position:-156px -0px;
}
ul#sidenav li#sidenav370z a:hover {
background-position:-156px -50px;
}
ul#sidenav li#sidenavG35 a:hover {
background-position:-156px -100px;
}
ul#sidenav li#sidenavG37 a:hover {
background-position:-156px -150px;
}
ul#sidenav ul {
display:none;
}
ul#sidenav li:hover ul {
display:block;
}
ul#sidenav ul#inner li a {
width:100px;
height:24.5px;
list-style:none;
}
ul#sidenav ul#inner2 li a {
width:100px;
height:24.5px;
list-style:none;
}
ul#sidenav ul#inner {
position:relative;
margin-left:115px;
list-style:none;
}
ul#sidenav ul#inner2 {
position:relative;
margin-top:102px;
margin-left:115px;
list-style:none;
}
ul#sidenav ul#inner li#n0306 a {
width:100px;
background:url(images/sidebar2.png) no-repeat 0px 0px;
}
ul#sidenav ul#inner li#n0708 a {
width:100px;
background:url(images/sidebar2.png) no-repeat 0px -24.5px;
}
ul#sidenav ul#inner2 li#i0307 a {
width:100px;
background:url(images/sidebar2.png) no-repeat 0px -49px;
}
ul#sidenav ul#inner2 li#i0306 a {
width:100px;
background:url(images/sidebar2.png) no-repeat 0px -73.5px;
}
ul#sidenav ul#inner2 li#i0708 a {
width:100px;
background:url(images/sidebar2.png) no-repeat 0px -98px;
}
ul#sidenav ul#inner li#n0306 a:hover {
background-position:-100px 0px;
}
ul#sidenav ul#inner li#n0708 a:hover {
background-position:-100px -24.5px;
}
ul#sidenav ul#inner2 li#i0307 a:hover {
background-position:-100px -49px;
}
ul#sidenav ul#inner2 li#i0306 a:hover {
background-position:-100px -73.5px;
}
ul#sidenav ul#inner2 li#i0708 a:hover {
background-position:-100px -98px;
}
ul#bottomnav {
margin: 0 auto;
padding-bottom:3px;
list-style:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-align:center;
}
ul#bottomnav li {
display:inline;
padding-left:15px;
padding-right:15px;
border-left:1px dotted white;
}
ul#bottomnav li a {
color:#C21C27;
text-decoration:none;
}
ul#bottomnav li a:hover {
text-decoration:underline;
}
ul#bottomnav li#contact {
border-right:1px dotted white;
}
#copyright {
margin: 0 auto;
padding-left:40px;
color:#C21C27;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-align:center;
}

[AshtonSanders]

"cjoltman" wrote:

Store page (and every car model page)
The side navigation is breaking when you scroll over the "Infiniti G35" option.

This is because your sub menu is still "relative." So when it appears, it pushes it’s parrent <li> to become taller than it once was. This pushes everything below it down.

The solution is to make the "ul#sidenav ul#inner2" (line 109) position:absolute instead of relative. You aren’t using "top" or "left" anway, so it should be fine. (It works fine in FF3.5) Let me know how it goes in IE.

"cjoltman" wrote:

Pretty much every page…
http://oltmandesign.com/web/marinelli/index.html
On some of my links (easily seen in the top navigation) the dotted box that comes up when you click down on the link spans all the way to the left side of the website, which I find weird and quite distracting.

This is caused by your text replacement tactic:

text-indent:-9999px;

Another way of doing text replacement without negative text-indent requires some extra HTML, but it works:

1) Add a <span> inside any link that you want to get replaced:

Code:

Home

2) Add in your CSS:

Code:

#topnav a span {display:none}

You may also have to assign "width"s to these <a>… but I don’t remember for sure.

Hope that helps.

[cjoltman]

Ashton-

Those suggestions worked out great, thanks for taking the time to help me. The <a> tags didn’t end up needing to be assigned widths so it was a pretty quick and handy fix. I hadn’t used the <span> tag before, but I’ll definitely be implementing it into my code more often.

Is there an easy web source to check cross compatibility and switch easily between browsers? If you have any other good resources for beginner web designers that would be great!

Thanks again.

[AshtonSanders]

"cjoltman" wrote:

Those suggestions worked out great, thanks for taking the time to help me. The <a> tags didn’t end up needing to be assigned widths so it was a pretty quick and handy fix. I hadn’t used the <span> tag before, but I’ll definitely be implementing it into my code more often.

Sweet. You’re welcome.

"cjoltman" wrote:

Is there an easy web source to check cross compatibility and switch easily between browsers? If you have any other good resources for beginner web designers that would be great!

There are lots of programs out there like IETester, but I personally don’t trust them. I have a version of any browser possible on my computer. I have something called Multiple IE (which only works with IE7) that allows you to also install IE6. So I have IE7 and IE6. I installed IE8 on a separate computer…

That’s the best I’ve got to recommend there.

[AshtonSanders]

this is what you normally call "a few days late"

But here’s the solution to the lines going all the way accross teh page:

https://css-tricks.com/removing-the-dotted-outline/

Very complicated CSS right there. I can’t believe I forgot that.

[cjoltman]

Haha, not a problem! This is definitely a quick solution I can use from now on.

Thanks again.

[Author]

Posts