Absolute Positioning: Backgrounds and Browsers

I've put together a basic page while trying to figure out "Absolute Positioning". For some reason the background [red] of the "navlist" DIV is offset when viewed through a Mozilla browser.

Any ideas on how to correct this?

 

You need to add "display: block" to your anchors inside navlist:

#navlist a {
display: block;
...

J.D.

 

Thanks J.D. for taking a look. I added the code you suggested however it change the navigation from horizontal to vertical in IE. Any ideas?

 

IE has a bug with block-level anchors. Adding explicit width in pixels should fix it.

J.D.

 

Thanks again J.D., it seems like one issue dissappears and another raises its ugly head.

Now the background for the "navlist" DIV doesn't show up in Firefox. Any ideas?

 

I don't have time to look at the source. Try changing the height of the element in question. Floats are not the kind of content that makes div's grow, so you will need to set the height explicitly (otherwise the containing element collapses, which what seems to be happening on your page).

Also, keep in mind that if you have any inline elements (i.e. with display other than block), they ignore the height property altogether and expect line-height to be used instead.

J.D.

 

J.D., your the best. That fixed it. Thank You!

You wouldn't happen to know how to "center" a DIV that is using "Absolute Positioning" would you?

 

This looks great in every browser except Opera. For some reason the text looks stretched. Is this something normal for Opera or did I goof up the code?

 

Looks like it's text size. You can try letter-spacing or just decrease font size.

J.D.

 

By controlling the font properties [size, spacing] I can get this to work but then it wouldn't look good in the other browsers. This is the only browser I've tested that gives this result.

Any ideas?

 

Getting file-not-found. Anyway, give it a try, it may look Ok if all browsers stick with the spacing you specified (that is, if Opera uses different default letter spacing, setting it explicitly should fix your problem)

J.D.

 

Sorry, you must have been on during the time I was messing with the page.

After looking at the page in Opera more than just the navigation looks off. I believe I've been very explicit in terms of defining elements but for some reason that page isn't displaying properly with Opera.

Krud!

 

If you set explicitly font family and size for #navlist a, both FF and Opera will display the menu in a similar way. As far as I can see, the rest of the page seems to be very close in both browsers.

J.D.

 

I've done that but the problem hasn't gone away. I'm wondering if it's a browser issue? I'm new to CSS but I'm pretty sure the code is correct.

 

I did try changing font size and family and it fixed the problem (i.e. menu wrapping to the next line in Opera).

J.D.

 

I changed the font from Sans-serif to Arial and it corrected the menu wrapping problem.

I really appreciate all of your time and efforts. Thank You Again!