Re: MSIE 6 widths

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 -

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 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 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 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

Brian 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.

It must be really late. Hang on, it is. 2.30am where I am.

Go to bed, Els. Stop writing other people's code -- it's a
thankless task.

He he, I was sleeping when you wrote that :-)
But I don't write other people's code to be thanked, I learn
from it. It's the way I learned basically all I know about
CSS. It gives more angles to work from than just following
what I would have done with my own site.

Nevertheless, it can work :-)

Not in Firefox. Sorry!

Yep, I see your point. I was concentrating on short pages :S

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

Only the first page is black on white; when you scroll
down, it changes to black on green.

Too true :-(

Thanks for your efforts. But really, stop and go to bed.
I'm not even working on it right now. (I'm teaching myself
Perl.)

That's something I have still on the shelf too. Got the books.
Haven't opened them yet :-)

I'll take a stab at what you've started tomorrow.

Good luck, I've got other plans today, but I sure might try
again some other time too. If you don't get there first, that
is ;-) Be sure to mention the solution when you find one!

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

Brian wrote:

Els wrote:

I've got other plans today, but I sure might try
again some other time too. If you don't get there first,
that is ;-) Be sure to mention the solution when you find
one!

*If* I find one, you mean. ;-) Alas, I cannot. The thing
is, I'm sort of afraid to muck around with it now. I only
have IE 6 to test on, and IE 5/Win is quite a different
beast than IE 6. I might make the site better in 6 at the
expense of 5/Win users.

And actually I doubt there is an easy way to do it, if any.
In fact, I think it's the reason why I didn't put my own
navigation after the content in the HTML.
A compromise might be not minding if the white background of the
content doesn't go beyond the bottom of it in case of short
pages. I think. Just from memory though, didn't look at the code
again.

btw, you know you can run IE5 even if you have IE6?
I have 3, 4, 5.01 and 5.5. And 6.0.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Don McLean - American Pie