I'm having some difficulties getting a page to display consistently in Firefox (1.04) and IE (6.whatever).
I'm using CSS with an absolute position to put my main content to the right of a menu. Code from the CSS is below:

#content {
position: absolute;
top: 0;
margin-left: 15em;
wrap: on;
}

In Firefox, the text in the main document wraps as you'd expect, and no horizontal scroll-bar is evident. So far so good.

If IE, some of the text is off the screen and there is a horizontal scroll bar. The text still wraps, eventually, but it's as if the scroll bar was created to make the overall page width larger by the size of the left margin.

I've had a good look around various forums and FAQ's and haven't found anything that has an effect yet.

Any pointers would be greatly appreciated.

John.

_Aerospace_Eng_

08-24-2005, 02:22 AM

Why even use absolute positioning?
If you float your menu to the left and give your content enough left margin to clear the menu then you shouldn't need absolute positioning. What the heck is wrap:on? That isn't valid CSS.

JohnOAS

10-04-2005, 02:03 PM

Thanks for the reply. You're right about the wrap:on thing of course, it was some rubbish left over from some desparate attempts to get things working.

Regardless of the positioning model I use, the effect remains unchanged.

I've got a test page at:
http://home.exetel.com.au/oas/testmain.php
with a link to a version without the menu/css, without the CSS it's fine in both browsers, with it, the flaky behaviour is still present in IE.

I suspect it's to do with the margin-left shifting the starting point for the content division, but increasing the page width by the margin.

I'm not sure what you mean, but maybe it helps if you consider using a unique id. Navigation is defined twice.

Also your code could be much more compact. If you just put in #navigtion * { margin:0; padding: 0 } it would already take a few bytes.

Also, the headings and paragraph's, you're already saying you want it white in body. So there's no need to define them there anyway.

And I also have to nag about the <font>, "orange" is no valid value. #FFA500, or even better, #f90, is the right value.

OK, I see. The problem probably lies in the fact of absolute positioning. Float #navigation, give #content a margin-left of the width of the menu, and fix the 3px bug in IE (http://www.positioniseverything.net/explorer/threepxtest.html).

JohnOAS

10-05-2005, 01:19 AM

Thanks. I'm not sure what you mean by "navigation" being defined twice - arent't the repeats simply more specific cases?

At any rate, I've floated the navigation items as suggested but to no avail.

I've tried playing with the content position value, and found the following: