Odd behavior: bad CSS or rendering glitch?

[beetle]

Look at the first blue tab [Home] on this page (http://www.peterbailey.net/clients/ludos.com/temp.htm) in IE. See how the upper-right corner image kinda moves around as the page is resized? What's up w/that? It's defined as the background

background: #1852BD url(images/r_corner_right.gif) no-repeat top right;

It's the same style as all the other tabs which don't show any problems (nor are there any problems at all in Mozilla). This reeks of "rendering glitch" to me, but I have to ask.

[Roy Sinclair]

I didn't see anything wrong at all (IE 6 SP1 - W2K) with IE but when I cross-checked with Moz (1.3) I noticed a lot of the tabs weren't even showing so there's something not quite right.

[beetle]

huh...odd. I see that now too. I checked it with Moz at home but it was fine (1.2 at home? don't remember)

:mad:

[Eskimo]

I get the odd rendering problem in IE6 SP2 XP.

Strange...mmm

[MotherNatrsSon]

I looked in NS & for MAC and it appears to be fine. In IE for MAC it is not so good. See attached screen shots.

MNS

[MotherNatrsSon]

Looks fine in Mozilla 1.3 on the MAC
Pic for NS 7

MNS

[Roy Sinclair]

There's more wrong in Moz 1.3 than just the navigation tabs, the text in the boxes in the right hand column is also acting strange.

[beetle]

my only concern is the tabs. everything else is not my responsibility.

[giz]

I can't validate your CSS as your XHTML has non-valid characters in it:
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.peterbailey.net%2Fclients%2Fludos.com%2Ftemp.htm&warning=1&profile=css2


Some required elements are also missing from your XHTML code. XHTML is a strict language:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.peterbailey.net%2Fclients%2Fludos.com%2Ftemp.htm&charset=%28detect+automatically%29&doctype=Inline&ss=1&sp=1&outline=1&verbose=1

[beetle]

Again - I'm only responsible for the CSS at the top. That's it.

I know XHTML is strict (http://www.peterbailey.net/)

Please stop trying to fix problems I don't want help with

[cssangel]

Here's the section of CSS that I changed and it seems to be working now.. (all additions in /* comments */) I took out the right border on the last "tab" while trying to find the wayward pixel.. but you should be able to uncomment it if you want..

it was the ul#nav1 li {margin-left: 1px ;} that did it although I added margin and padding ="0" in a few other places this always makes sure that IE defaults are overridden...

/* Nav Section 1 */
ul#nav1 {
position: relative;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 2px;
margin-bottom: 0px;
padding: 0; /* added */
list-style-type: none;
background-color: #FFF;
height: 1.6em;
}
ul#nav1 li {
position: relative;
top: -3px;
list-style-type: none;
display: inline;
padding: 0px;
margin: 0; /* added */
margin-left: 1px; /* added */
}

ul#nav1 a img.left {
position: absolute;
top: 0;
z-index: 20;
border: 0;
margin: 0; /* added */
padding: 0; /* added */
left: 0;
}

ul#nav1 a:link, ul#nav1 a:visited, ul#nav1 a:active {
position: relative;
font-weight: bold;
color: #FFF;
background: #1852BD url(images/r_corner_right.gif)
no-repeat top right ; /* line broken for post reasons only */
text-decoration: none;
padding: .2em 1em .3em 1em;
top: 6px;
border-bottom: none;
margin: 0; /* added */
}

ul#nav1 a#selected {
background-color: #C00;
}

ul#nav1 a:hover, ul#nav1 a:visited:hover,
ul#nav1 a:active:hover {
text-decoration: underline;
}

ul#nav1 a.last {
/* border-right: 2px solid #FFF; */
}

ca

[beetle]

thanks a heap, cssangel. I really needed another pair of eyes on this one.

Cheers!

[cssangel]

another pair of eyes are always welcome! ;)

[realisis]

beetle, don't know if this is relevant to you, but:

My monitor is 1024x768, but the max width of my browser window is ~955px wide (cuz I keep my windows desktop toolbar on the side) ...

At this width, your centered linkbar wraps down to the next line, even though there is still sufficient width to keep it all on one line(presently only the Newsletter link is wrapping) ... what's ugly though is that the wrapped link doesn't fully clear the first line of tabs... and the white edge corners on Newsletter are visible against the blue bg of the tab underneath it...

I can send you a screen shot if you have trouble duplicating...

[beetle]

No thanks - I've got it under control :D