MSIE 6 widths

[Brian]

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/

[Els]

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]

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 -

[Brian]

Els wrote:

Brian wrote:

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.

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/

[Els]

Brian wrote:

Els wrote:

Brian wrote:

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

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 -

[Brian]

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/

[Els]

Brian wrote:

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.

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]

Els wrote:

Brian wrote:

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.

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

[Brian]

Els wrote:

Els wrote:

Brian wrote:

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

That just reverses the problem.

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.

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/

[Els]

Brian wrote:

Els wrote:

Els wrote:

Brian wrote:

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

That just reverses the problem.

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.

Let me take that back. Bad thinking.

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