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: http://www.rhjunior.com/Forum/Themes/bloggy102/images/topnavactive.png the relevant CSS:
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
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: http://theperson10.hnation.org/images/Scraps/Picture%201a.png
Firefox 3.5.2 with suggested adjustment: http://theperson10.hnation.org/images/Scraps/Picture%202a.png
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?
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.
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:
http://www.rhjunior.com/Forum/Themes/bloggy102/images/topnavactive.png
the relevant CSS:
The intended effect is like this:
http://theperson10.hnation.org/images/Scraps/Picture%202.png (as rendered by Firefox)
However, Safari 4 renders it like this:
http://theperson10.hnation.org/images/Scraps/Picture%201.png
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.
#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;
}
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:
http://theperson10.hnation.org/images/Scraps/Picture%201a.png
Firefox 3.5.2 with suggested adjustment:
http://theperson10.hnation.org/images/Scraps/Picture%202a.png
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
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.
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.
#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:
#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
oh, and that website seems to do the job perfectly. Thanks!