A couple of niggly CSS problems

[xkratosx]

Temporary URL - http://www.respectlife.org.uk/

Not sure why, but I've had an absolute nightmare with this site, and have a few small problems:

1) The H1 isn't visible at all, I've tried messing around with h1 a { } etc and no luck.
2) The navigation isn't displaying correctly, I want it to have some padding either side of the listed items, and have a height of 24px to show the gradient background properly, but nope.

Plus in general I can't help but feel it's pretty poorly coded, like the content area is going to go wonky, or the shadowed left/right borders are going to go screwy. I also hate the footer, so any advice regarding those bits would be great too.

Thanks!

[junjun]

your h1 has this style, so no wonder it doesn't display, just remove the line:

text-indent:-999em;

Navigation looks fine apart from the empty LI's. remove those and it will be a little better.

[xkratosx]

Many thanks for the reply, it wasn't quite what I was after with the h1, but I've managed to work out the problem (I put repeat-none instead of no-repeat ; d'oh!) so huge thanks for the nudge in the right direction.

Ideally, I'd like for the navigation to look a bit like this - not sure how plausible it is though.

Thanks again

[xkratosx]

Sorry to bump this, but any ideas on getting the navigation to look like that please?

[marbly]

Try this for the navigation:

#navigation ul li {
display:inline;
list-style-type:none;
}
 
#navigation ul li a {
background:#EFE8CF url(img/nav_bg.jpg) repeat-x scroll 0% 0%;
border:1px solid #EEE6CA;
color:#990022;
display:block;
float:left;
margin:0pt 3px;
padding:5px 20px;
text-decoration:none;
}

There was no use in setting the li to have height when you set it to display inline (inline elements cant have height).

I have set the bg image to be 0px from the top because that makes more sense considering the bg color you chose beneath it. (Increase the text size and you'll see what Im talking about). Since Im mentioning it; if you increase the text size the navigation slips down behind the sidebar, you should consider fixing it, I have to go now maybe someone else will jump in with that

btw I only tested it in FX

[xkratosx]

Awesome, thank you so much for that, those tabs are looking a lot better now

Just a couple of quick questions:
1) Anyway to get it so it's nudged further to the right and away from the logo?
2) Is there any reason why the navigation is pushing the content area down so much in Firefox?

Cheers

[Paul O'B]

Hi,

1) just give it a left margin:

#navigation ul{margin:0 0 0 320px}

2) Because you have given it a 66px bottom margin! Remove the bottom margin and it should be ok.

    #navigation ul li a {
        background:#EFE8CF url(img/nav_bg.jpg) repeat-x  0 0;
        border:1px solid #EEE6CA;
        color:#990022;
        display:block;
        float:left;
        margin:66px 2px 0;
        padding:4px 16px;
        text-decoration:none;
        }

Your left and right shadow images would have been better as one image (i.e left and right bits in on wide image) that could be applied to the background of the main container in one go. This would clean up the html and make it more solid without those floats in the way.

[xkratosx]

That's perfect, thank you so much Paul!

Just curious, how would I go about doing that with the shadow images? Leave the body background as it is at the moment, and then have one (very large) image at the top, as the background for the container?

Edit: Nevermind, just done it, seems to work fine in IE6 and FF, thanks again Paul!

[Paul O'B]

Edit: Nevermind, just done it,

Glad you sorted it

Remember that for decoration images you don't really want them in the html at all so hiding them in the background of existing elements is ideal.

[xkratosx]

Yup definitely, glad to of got rid of those excess divs and markup, cheers Paul!