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:
the relevant CSS:
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:
Firefox 3.5.2 with suggested adjustment:
I’m going to try some tweaking of the suggested CSS, but i figured a progress report was in order
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?
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.