By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,652 Members | 1,358 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,652 IT Pros & Developers. It's quick & easy.

MSIE 6 widths

P: n/a
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/
Jul 20 '05 #1
Share this Question
Share on Google+
17 Replies


P: n/a
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 vo. O resto imperfeito.
- Renato Russo -
Now playing: Ugly Kid Joe - Cats In The Cradle
Jul 20 '05 #2

P: n/a
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 vo. O resto imperfeito.
- Renato Russo -
Jul 20 '05 #3

P: n/a
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/
Jul 20 '05 #4

P: n/a
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 vo. O resto imperfeito.
- Renato Russo -
Jul 20 '05 #5

P: n/a
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/
Jul 20 '05 #6

P: n/a
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 vo. O resto imperfeito.
- Renato Russo -
Now playing: Duran Duran - A View To A Kill
Jul 20 '05 #7

P: n/a
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 vo. O resto imperfeito.
- Renato Russo -
Now playing: Cesaria Evora - Regresso
Jul 20 '05 #8

P: n/a
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/
Jul 20 '05 #9

P: n/a
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 vo. O resto imperfeito.
- Renato Russo -
Now playing: Cliff Richard - Streets Of London
Jul 20 '05 #10

P: n/a
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.
Nevertheless, it can work :-)
Not in Firefox. Sorry!
http://locusmeus.com/temp/briantest.html


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

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.) I'll take a stab
at what you've started tomorrow.

--
Best, Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/
Jul 20 '05 #11

P: n/a
Els
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 vo. O resto imperfeito.
- Renato Russo -
Jul 20 '05 #12

P: n/a
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.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/
Jul 20 '05 #13

P: n/a
Els
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 vo. O resto imperfeito.
- Renato Russo -
Now playing: Don McLean - American Pie
Jul 20 '05 #14

P: n/a
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.

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


Add:
body {font-size:100%}

The bug that causes weird em font scaling at different View->Text Size
settings also messes up widths set in em units. ;)

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Jul 20 '05 #15

P: n/a
kchayka wrote:
Brian wrote:
http://www.tsmchughs.com/ in MSIE at "larger" font size.
The content gets pushed behind the navigation, which has
position: absolute.


Add:
body {font-size:100%}

The bug that causes weird em font scaling at different View->Text
Size settings also messes up widths set in em units. ;)


(a) I probably should have thought of that, but it never occurred to
me. I suppose it's because I set font-sizes for other elements in em
units, so I thought I had dodged that bug.

(b) Did you just know this, or did you test it and figure it out?

(c) You're my hero! :-)

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/
Jul 20 '05 #16

P: n/a
Brian wrote:
kchayka wrote:
The bug that causes weird em font scaling at different View->Text
Size settings also messes up widths set in em units. ;)
(b) Did you just know this, or did you test it and figure it out?


I ran into this myself some time ago. Since the problem involved em
units, font-size:100% seemed like a logical thing to try. Happily, it
worked.
(c) You're my hero! :-)


groovy :-)

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Jul 20 '05 #17

P: n/a
kchayka / 2004-07-21 06:40:
Brian wrote:
kchayka wrote:
The bug that causes weird em font scaling at different View->Text
Size settings also messes up widths set in em units. ;)
[ a hint to set body text size to 100% ]

(b) Did you just know this, or did you test it and figure it out?


I ran into this myself some time ago. Since the problem involved em
units, font-size:100% seemed like a logical thing to try. Happily, it
worked.


It's worth noting that body { font-size: 100% } should do nothing
(body should already have normal font size!) but still it fixes many
relational font size bugs in MSIE/win32. Using body { font-size:
1.0em }, which is *the same thing* by definition, doesn't work.
Things you just need to know to be able to live with MSIE/win32.

Another nice trick is to add
* html .float { height: 1px; }
in case you have floated elements that seem to behave incorrectly.
Just add above rule and class="float" to a broken element. Note that
the asterisk (*) at the start of the selector is important: that
hides the rule from *correctly* behaving browsers.

A nice site to check is http://www.positioniseverything.net/ -- it
has most often encountered CSS positioning bugs clearly explained
and also provides fixes for those!

--
Mikko
Jul 20 '05 #18

This discussion thread is closed

Replies have been disabled for this discussion.