White Knight needed

...for firefox/IE positioning issue

[mcjohnson]

Friends,

I have an issue that I would appreciate some help with.

I am importing some news content from a third-party product. I am using a DIV to contain the content, and I want the content to sit on the right side of the page, starting at 560px and floating out as far as the right side of the screen,

My content on the index page looks like this:

<div id=articles><?php import.content.here.php?></div>

In firefox, everything was working great, but in IE, the content was shooting past the right border and out into neverland.

This is my firefox CSS:

#articles {
margin:65px 10px 0 560px;
}

So, I created a second style sheet for IE only and altered the CSS for that div to this:

#articles {
width: 100%;
margin:65px 10px 0 560px;
}
THAT solved problem no. 1, so the content now remained contained within the right border, and was scalable along with the right edge. However, what happened was that NOW, the content is hugging the top of the screen instead of starting 65Px down.

If I removed the width 100% in the IE style sheet, my top is correct but the content floods past right edge. If I add it, I cant get the content down where it belongs.

Am I missing anything? Any hints or tips would be great.

Thanks,

Pat

[4hero]

Hi mcjohnson,

It seems you missed some "" from the <div id=..

I don't know too much about php, but for including I use:

<?php include ("path/to/file.php");?>

try this:

#articles {
margin:65px 10px 0 560px;
background:#ccc;
}

<div id="articles"><?php include ("path/to/file.php");?></div>

I tested this in both firefox and IE and all is well.

good luck!

[crosswalker21]

Sometimes, the absence of a doctype tag can make IE render different than FF. Try putting one in if you don't have one already. One other thing I noticed: instead of

margin:65px 10px 0 560px; 

you might try

margin:65px 10px 0px 560px;
or
margin:65px 10px 0% 560px;

I'm not entirely up on my CSS DOM but I think not specifying units might be part of the problem.

[londrum]

you could try and position it absolutely

position:absolute; top:65px; left:560px; width:whatever_you_want

but don't put any padding or margins on the container, or IE will push it too far out because of the faulty box model.
put the padding on the elements inside the container instead.

[doodlebee]

just for the record...

margin:65px 10px 0px 560px;
or
margin:65px 10px 0% 560px;

I'm not entirely up on my CSS DOM but I think not specifying units might be part of the problem.

You don't need an attribute for "0". You *can*, but it's not a requirement.

However, you *can't* (well, you can, but it's bad bad bad) mix your types like you have - meaning...

margin:65px 10px 0% 560px;

Will not validate because of the % in there. If you feel you *must* put in something after the "0", make it px - you shouldn't mix %, em, px and stuff - they should all be the same.

But again, when it's "0" in question, nothing is necessary afterwards. You *can*, but it's not necessary - because 0 em is the same as 0% or 0px. It's just "0".

[londrum]

...and it saves a couple of bytes too. which is always good