PDA

View Full Version : Background Image Not Showing

revul
18th May 06, 02:52 PM
Hey all - first post here and I'm excited to share/receive knowledge from an ALL CSS forum...

On to the issue - currently I'm styling a navigation with an unordered list, where each item is replaced with a background image and the text is removed from view. I think this is causing my background image of the div the navigation is contained in to NOT show up, because technically there isn't anything inside it to display.

Just to clarify in case I'm not making sense:
- navigation container has a background image applied to it
- navigation list items have text removed from view with CSS, and also have a background image applied
- navigation container background image isn't showing up (I think because of utilizing background images on the list items)

Has anyone else encountered a problem like this, or have a suggestion on solving?
Jbilsten
18th May 06, 02:56 PM
I have some guesses, but I'll need an example to confirm them. Can you provide us with a link to your code?
revul
18th May 06, 04:25 PM
Ahh yes that would help huh? Sorry...

Here you go. (http://www.revul.com/yarrow/)
Jbilsten
19th May 06, 03:55 PM
(darnit, I've typed out a response 3 times and messed myself up by hitting tab and backspace while trying to indent text in the message box. Here goes try number 4 with a little less explanation this time hehe)

I went ahead and cleaned up the CSS and fixed most of the bugs if you want to take a look at what I did the link is here (http://lostangel.net/test.htm)

You'll have to copy the code out obviously but the issues I changed that should be noted are here:
# Changed doctype to strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> to battle quirks mode.

# added img rendering as block to negate extra carriage return added by IE 6 after your rotator

# added height: 24px to your navigation to show background image

# removed all width/height declarations from navigation and created a new li a entry to store them in since there was repeating code.

# changed width's to match on all elements (606px)

That should get you back on your way :) I didn't fix everything but I tried to get you back on track so you can continue your layout in a familiar fashion.
Jbilsten
19th May 06, 03:57 PM
Here's a great link (http://www.quirksmode.org/css/quirksmode.html) to explain the img { display:block; } quirks mode.
revul
20th May 06, 09:10 PM
Thank you! I appreciate you taking the time to help me out with this.

You mentioned you didn't fix everything, would you mind sharing what else I could clean up with this if you have time? I'm interested to know what else can be improved on for this project as well as for future reference.

Thanks again!