473,560 Members | 2,959 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

MSIE 6 widths

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
17 1845
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
Jul 20 '05 #2
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 -
Jul 20 '05 #3
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
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 -
Jul 20 '05 #5
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
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
Jul 20 '05 #7
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
Jul 20 '05 #8
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
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
Jul 20 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
1776
by: Helge Moulding | last post by:
I'm composing pages that have the general format of a fat, short table right next to a skinny, long table, followed by a bunch of text. The text is supposed to start right under the fat, short table, and flow to the right margin below the skinny, long table. Example: fsfsfsfs slsl fsfsfsfs slsl slsl xxxxxxxx slsl xxxxxxxx slsl
3
2401
by: Stan Brown | last post by:
Standard advice -- even given here recently -- for hiding CSS from MSIE 4.x is to enclose the styles in @media { ... }. The same advice is given at . Unfortunately, it doesn't work with MSIE 4.72 (Win 98). That version quite happily reads the stylesheets and then mangles the presentation. It's really horrible -- even on a simple page like...
2
2557
by: Alex Bell | last post by:
width: 50%; /* ie5win fudge begins */ voice-family: "\"}\""; voice-family:inherit; width: 46%; I've seen this fragment several times in various layout examples. What does it mean, and why is it necessary? Regards, Alex
0
1750
by: Alex Bell | last post by:
Thanks to the people who helped me with centering a block of text in MSIE 5.5 in the site I am developing at http://www.members.iinet.net.au/~abell1/test/index.htm with city.css at http://www.members.iinet.net.au/~abell1/test/city.css. I think I have that under control now, though I won't be able to test it until Monday. But the...
0
2620
by: TJ Talluto | last post by:
<facts> I have a "month calendar" that always displays exactly 42 days... and alongside is a vertical box that displays the detail (form fields) of any particular select event that appears on the calendar, so that the event may be changed, or a new event may be created. monthname X X X X X X X form X X X X X X X form X X X X X X X form
3
1580
by: Gary Smith | last post by:
Aloha, I'm having a problem with floated divs in msie 6. I've created a demo page that illustrates the problem. (http://kvb.tsu.biz/test.html). On that page is a div wrapper with a green background. Inside the wrapper are two other divs one floated left (yellow) and the other one (red) should line up on the same line because there is a...
1
1985
by: ticmanis | last post by:
Hello, I'm having trouble getting MSIE 6.0 (running on XP SP2) to accept a cookie which works fine in both Firefox and wget. The web server is Boa 0.94.13 (a small embedded server) using PHP 4.3.10 for CGI. Even with the lowest security settings in MSIE there is no cookie acceptance, and no "Cookie:" HTTP header is being sent back by...
2
2172
by: Midsomer | last post by:
Hi. I have an Access database with a form containing 4 datasheets and I allow the user to change column widths. On closing the form, a routine is fired that saves each column width to an INI file. When the form is opened, the INI file is read and sets up the column widths for the user. Works well, but there is a slight delay on closing...
6
9913
Markus
by: Markus | last post by:
Ello. I'm trying to set the widths for my first three rows of cells and then have a bottom row with different cell widths. However, the first three rows take on the same widths as the bottom row. <table> <tr> <td width="80%"> ... </td> <td width="20%"> ... </td> </tr>
0
7632
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7552
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
8066
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
0
6191
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5458
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
5175
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3585
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
2047
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
0
877
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.