Shame on me for not testing my site http://www.tsmchughs.com/ in MSIE
at "larger" font size. I just did today, and found an unpleasant
result. The content gets pushed behind the navigation, which has
position: absolute.

There's a second problem which is merely cosmetic. The width of
headings in a secondary navigation are not taking the full width of
the containing block.

Here's a simplified test case, with both problems detailed.

http://www.tsmchughs.com/test/

valid HTML 4.01/strict; CSS checked, no errors found

Any help would be appreciated.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

Brian wrote:

> Shame on me for not testing my site
> http://www.tsmchughs.com/ in MSIE at "larger" font size. I
> just did today, and found an unpleasant result. The content
> gets pushed behind the navigation, which has position:
> absolute.
>
> There's a second problem which is merely cosmetic. The
> width of headings in a secondary navigation are not taking
> the full width of the containing block.
>
> Here's a simplified test case, with both problems detailed.
>
> http://www.tsmchughs.com/test/

The first problem:
To see what is happening, change the background-color of the
div#navigation. In IE the border (8em) doesn't scale with the
text. Widths, margins and paddings do, but borders
(apparently!) don't.
Solution: instead of border-left:8em, use margin-left:8em.
You'll have to set the colour of that navigation background
another way though, or else it will end at the bottom of the
viewport, and go up (leaving the html background visible) when
scrolling up.

Second problem:
The Li elements push the right side of the box further to the
right.
If you take out the padding of .5em on either side of the A
element inside the Li's, it's solved. But then there is no
indent.
For that you add
.pageNav LI{
text-indent:.5em;
}

--
Els                     http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Ugly Kid Joe - Cats In The Cradle

Els wrote:

> For that you add
> .pageNav LI{
>      text-indent:.5em;
> }

Which I just saw leaves the underlining to far to the left.
Alternative:
.pageNav LI{
padding: 0 .5em;
}

Which will leave the underlining where it should be, but won't
let the background-color on hover go to the left and right side
of the box.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Els wrote:
> Brian wrote:
> 
>
> The first problem: To see what is happening, change the
> background-color of the div#navigation.

I didn't need to change the color; I could see the different box
shapes at the bottom of the screen when I increased the text size.

> In IE the border (8em) doesn't scale with the text.

Yes, that's what I reported in an explanation on the test page.

> Widths, margins and paddings do, but borders (apparently!) don't.

So it seems.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

Brian wrote:

> Els wrote: 
>
> Yes, that's what I reported in an explanation on the test
> page.

I'm sorry, I didn't read the text on the test page. Just assumed
it was a repetition of what you wrote in the post.

So what you want is just to have the left green 'thing' go all
the way to the bottom, also after scrolling.

Just set the background-color of the body to green, and the
wrapper's to white.


--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Els wrote:
> So what you want is just to have the left green 'thing' go all
> the way to the bottom, also after scrolling.
>
> Just set the background-color of the body to green, and the
> wrapper's to white.

That just reverses the problem. Instead of white sliding under the
menu, I'll have green under the content on short pages. I think. I'll
play with that a bit and see which option is the lesser of two evils.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

Brian wrote:

> Els wrote: 
>
> That just reverses the problem. Instead of white sliding
> under the menu, I'll have green under the content on short
> pages.

That's what I thought first too, but you won't. Not if you set
the content div to 100% height as well as the body. That way the
page can never scroll to below the content.

--
Els                     http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Duran Duran - A View To A Kill

Els wrote:

> Brian wrote:
> 
>
> That's what I thought first too, but you won't. Not if you
> set the content div to 100% height as well as the body.
> That way the page can never scroll to below the content.

Let me take that back. Bad thinking.

--
Els                     http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Cesaria Evora - Regresso

Els wrote:

> Els wrote:
> 
>
> Let me take that back. Bad thinking.

Uh-huh. Never underestimate the power of MSIE/Win to lay waste to the
best laid plans.   ;-)

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

Brian wrote:

> Els wrote:
> 
>
> Uh-huh. Never underestimate the power of MSIE/Win to lay
> waste to the best laid plans.   ;-)

It must be really late. Hang on, it is. 2.30am where I am.
Nevertheless, it can work :-)

http://locusmeus.com/temp/briantest.html

Sorry that I needed to put a (white) border on the
div#wrapper, it eliminates a green margin between the div and
the body at the top, which I don't have the brain for at the
moment to figure out why.. :S
I've put the wrapper's height to 99%, which leaves a tiny
green rim at the bottom. Setting it to 100% however, gives a
scrollbar which is worse, I think.

--
Els                     http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Cliff Richard - Streets Of London