This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Stylesheets > July 2004 > MSIE 6 widths
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
|
|
|
| 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 -
| |
| Brian 2004-07-15, 11:15 pm |
| 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
| |
| Brian 2004-07-15, 11:15 pm |
| 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
| |
| Brian 2004-07-15, 11:15 pm |
| Els wrote:
>
> 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/
| |
|
| Brian wrote:
> Els wrote:
>
>
> 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.
>
> Not in Firefox. Sorry!
Yep, I see your point. I was concentrating on short pages :S
>
> 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 -
| |
|
| 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/
| |
|
| Brian wrote:
> Els wrote:
>
>
> *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
| |
| kchayka 2004-07-20, 10:50 pm |
| 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.
| |
| Brian 2004-07-20, 11:14 pm |
| kchayka wrote:
> Brian wrote:
>
>
> 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/
| |
| kchayka 2004-07-21, 4:16 am |
| Brian wrote:
> kchayka wrote:
>
>
> (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.
| |
| Mikko Rantalainen 2004-07-21, 12:17 pm |
| kchayka / 2004-07-21 06:40:
> Brian wrote:
>
> 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
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|