Why does this work?

[Dane D.]

I am building a rough layout of a website design and made this [url]http://www.starkcoohio.com/html/stark_intersection.html[/URL]. The CSS is here http://www.starkcoohio.com/stark_intersection.css
It validates both html and CSS but I don't understand why the navigation links work.

I don't know how I did this, it seemed logical at the time when I wrote the html and CSS. Could someone explain why the navigation works after looking at the codes, thanks.

 

[elppa]

The links work fine in my browser. If you a referring to the “flash” of grey behind each link — then here is what is happening:
[1] When you hover over a link the image specified for the :hover rule hasn't been loaded by the browser. It will only load this when needed.
[2] You see the grey background (which is your background image on the body) until the image loads.

One way of fixing it is to make the normal image (e.g. "why_stark_normal") the background image for the parent of each anchor element (a <div>, in your case). Then put the hover image (e.g. "why_stark_hover") on just the anchor element. That way the hover image loads on top of the normal image and you don't see the grey flash. You actually need to do a bit more because your anchors are positioned absolutely, but I won't ruin all the fun.

Another way of fixing it is to use sprites for the navigation. This tutorial was posted to another thread. I haven't followed it this specific tutorial, but I have used the same technique plenty of times before.

PS: Don't get confused with validation. Just because it validate it doesn't mean it does what you want. It's the same thing with code just because all the syntax is right doesn't mean that there aren't logic errors.

 

[Dane D.]

I'm wondering why a <div> can act as a link, I should of been more clear. As for the positioned absolutely, I understand this method and like it better than float. At least for me, it makes sense, the float method seems like a lot of extra BS just to position stuff. Besides from my reading IE doesn't like float and causes many problems. Wrong or right?

 

[elppa]

I'm wondering why a <div> can act as a link, I should of been more clear. As for the positioned absolutely, I understand this method and like it better than float. At least for me, it makes sense, the float method seems like a lot of extra BS just to position stuff. Besides from my reading IE doesn't like float and causes many problems. Wrong or right?

The point I was making about position: absolute is that as soon as you apply this to an element its parent will no longer expand to fill its contents. And that's a problem if you intend to include a background image, because you need the parent element to have some physical dimensions.

IE 8 and 9 have excellent support for floats. IE 7 is also pretty much flawless when handling floats. I pretty much disagree with you on floats. Absolute positioning works ok if you know how big everything is going to be and exactly how much space all the text will take up. If you are doing a 2 column layout with floats you can easily clear both column to include a footer or new section. If you do the same with absolute position you have know way of clearing, so you must know in advance exactly how high to make the columns in order to avoid them overlapping the footer.

The exact solution you go with will often by project dependent and often you will use a mix floats, relative, absolute and in some cases fixed positioning.

 

[manueld]

I'm wondering why a <div> can act as a link, I should of been more clear. As for the positioned absolutely, I understand this method and like it better than float. At least for me, it makes sense, the float method seems like a lot of extra BS just to position stuff. Besides from my reading IE doesn't like float and causes many problems. Wrong or right?

Actually the div isn't the link. The div is just the container. If you look at your CSS:

#main-nav-whystark a:link {
position: absolute;
display: block;
left: 0px;
top: 285px;
width: 261px;
height: 38px;
background: url(images/why_stark_normal_261px_38px.jpg);
}

The a property turned into a block element and given a background and height/width property. Hope that helps. As in regards to structure, it's better to make your navigation into an unordered list then you wouldn't need to wrap it in a div.