After reviewing the CSS and Html I believe the noticeable pixel shifting is due to resizing the text for the current page. In the CSS you change the font-weight to bold which makes the text larger than the padding allows. If you allow for this text size differential in all the tabs, then they will stay consistently positioned across all pages and the pixel shifting will be gone. As it is now the tabs move left or right depending on the text-size of the current page, hence the pixel shifts with the inline defferences.
#navigation span <<<<< I wouldn't use span in the list to position text. It's probably better to pad the the <li>
{
display: inline;
padding-left: 10px;
padding-right: 10px;
}
#navigation a.current
{
background-color: #CCF;
padding-bottom: 2px;
font-weight: bold; <<<<< if you drop this and keep all the text the same size it won't shift,
you can calculate all padding to accommodate bold text, or you can just use an underline.
}
Leo
On Thursday, April 1, 2004, at 11:18 AM, Leo J. O'Campo wrote:
Chris
I have coded it all myself, and i think it looks great...
Now - im just having a problem with the text, being a little too low, its nearly sitting on the bottom border:
I'm sorry to say that it isn't working well on the Mac side. Safari isn't too bad but the tabs do seem to jump a few pixel positions from page to page. It's annoying to see. The worse of it is from that browser (Hmm bet you can guess) from $Microsoft. IE5.2 Mac is flashing all over the place with every click.
Leo
***************************************************** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help *****************************************************
*****************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*****************************************************
