[Solved] CSS Background Image Trouble

[theperson10]

I’m the admin for a forum at http://www.rhjunior.com/Forum/, and i’m the one primarily responsible for installing/managing themes and modifications.

One thing i find myself inevitably doing is fixing the themes, so that they behave as expected in all browsers

Here’s my latest problem:

the theme is called bloggy, it’s purpose to make the forum look and behave like a blog.
It uses semantic markup almost exclusively.

The navigation links across the top are a styled unordered list.
The ‘active’ list item is assigned the id "active", which sets a background image:
[img]http://www.rhjunior.com/Forum/Themes/bloggy102/images/topnavactive.png[/img]
the relevant CSS:

Code:

#topnav li#active
{
background: url(../images/topnavactive.png) no-repeat bottom center;
}

The intended effect is like this:
[img]http://theperson10.hnation.org/images/Scraps/Picture%202.png[/img] (as rendered by Firefox)

However, Safari 4 renders it like this:
[img]http://theperson10.hnation.org/images/Scraps/Picture%201.png[/img]

Here is the link you’ll need to see for yourself:
http://www.rhjunior.com/Forum/index.php?theme=10

One notable thing: Safari 4 renders it more correctly when the border property is set for the li’s. However, borders have an undesirable effect on the appearance

I have not tried it in other versions of safari.

[apostrophe]

How about this:

Code:

#topnav {
color:#FFFFFF;
font-family:tahoma,sans-serif;
font-size:95%;
letter-spacing:2px;
margin:32px 0 0 167px;
text-transform:uppercase;
}
#topnav li {
display:inline;
float:left;
margin:0 10px;
padding-bottom:10px;
}
#topnav li a {
color:#FFFFFF;
display:block;
}

[theperson10]

Both better, and worse.

The image now appears entirely below the text, but:
The image is still too high, having a gap of a few pixels between it and the bottom of the header area. (on firefox, the image now presents a little further up than before, making the apparent triangular indentation in the bottom of the header area larger, but it is within acceptable limits)
The entirety of the navigation strip is shifted to the right, far enough to push the last item (logout) onto the next line, where it is invisible and inaccessible This happens on both Firefox and Safari 4

Safari 4 with suggested adjustment:
[img]http://theperson10.hnation.org/images/Scraps/Picture%201a.png[/img]

Firefox 3.5.2 with suggested adjustment:
[img]http://theperson10.hnation.org/images/Scraps/Picture%202a.png[/img]

I’m going to try some tweaking of the suggested CSS, but i figured a progress report was in order

As before, the page is located at http://www.rhjunior.com/Forum/index.php?theme=10

[apostrophe]

Gimme a break. You’re looking at a different menu to me. :D
The one I am seeing only has 5 items:
* Home
* Search
* Calendar
* Login
* Register

If you want to center the whole menu then you must specify its width.

NB. I was only working with what you provided, if I was building the page I would have the "active" background on the link not the list item.

[theperson10]

Heh, yeah.

I’m trying to avoid modifying it as much as possible (i didn’t make it, after all). Changing what element gets the "active" background is non-trivial, requiring more than a little digging through template files.

Though, it looks like i may need to do that, in order to get everything centered.

Setting the top margin a little larger did push the menu down far enough for it to look more like it’s supposed to, and reducing the lefthand margin did fix the disappearing link.

It does seem, though, that Firefox and Safari measure differently, as the menu sits higher in safari than in firefox. Is this a known problem?

I don’t suppose you know of a more esoteric way of centering things?

EDIT:
Well, i’ve set a min and max width, but because the li’s are floating, they stretch the ul to it’s max. Guess i’ll need to do some poking around.

[apostrophe]

All you need to do to put the arrow on the link is change:

Code:

#topnav li#active {
background:transparent url(../images/topnavactive.png) no-repeat scroll center bottom;
}
#topnav li {
display:inline;
float:left;
margin:0 10px;
padding-bottom:10px;
}

to:

Code:

#topnav li#active a {
background:transparent url(../images/topnavactive.png) no-repeat scroll center bottom;
}
#topnav li {
display:inline;
float:left;
margin:0 10px;
}
#topnav li a {
color:#FFFFFF;
display:inline;
padding-bottom:8px;
}

And to center the menu you could try this http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

[theperson10]

Agh, you’re right. Why didn’t i think of that?

oh, and that website seems to do the job perfectly. Thanks!

[Author]

Posts