4 replies [Last post]
bkdark
Offline
Regular
Brooklyn
Last seen: 17 years 35 weeks ago
Brooklyn
Joined: 2004-03-29
Posts: 11
Points: 0

I'm having a problem with IE not wanting to render the Top Margin in this:

#boxleft{
float: left;
width: 400px;
height: 220px;
margin: 250px 0px 5px 5px;
padding: 1em;
border: 1px solid #333333;
}

Works great in all of the other Browsers. Here is the link to the page, view source to see all of the CSS. ( www.soulatomic.com/index_01.htm ) If anyone knows what's up with this and can help I'd really appreciate it.

I should also mention that I have yet to see this in IE 6 and have only seen the IE 5.2 for Mac.

Will

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Crap ass IE is screwing up some NICE CSS

Hi

It's difficult to see what you want it to look like.

IF you have a MAC, this site will give you free Windows screenshots:

www.danvine.com/iecapture

The page looks similar in Firefox 0.8 and IE6 (1024x768)

At the bottom of the page (mainly disappeared and not scroll down-to-able) is the tracks.jpg, of which I can see about the top 20%

The rest of the page looks OK, except for the diagonal opacity effect (IE can't render opacities) which looks horrible in IE.

Trevor

bkdark
Offline
Regular
Brooklyn
Last seen: 17 years 35 weeks ago
Brooklyn
Joined: 2004-03-29
Posts: 11
Points: 0

Crap ass IE is screwing up some NICE CSS

Okay I've solved the opacity problem, however IE is still having problems with the Margin Rule. For Mac 5.2 it ignores it all together,

for PC IE 5.5, 6.0 render the margin however force the Grey Frame further down then it should. Do you know why ths is happening?

Big John
Big John's picture
Offline
Enthusiast
Arizona
Last seen: 18 years 5 weeks ago
Arizona
Timezone: GMT-7
Joined: 2003-10-29
Posts: 94
Points: 0

Crap ass IE is screwing up some NICE CSS

Your floats #boxleft and #boxright are not able to fit
side by side in IE, so #boxright has to drop below.
I guess you want that to happen, but IE has a habit
of mangling the specs by enlarging a container to
hold all content. Thus the float does not protrude
below #frame as it should, but rather it extends
#frame down to enclose it, even tho #frame has
a set height.

So IE is once again causing headaches with this
violation that was meant to "help" coders to make
pages more easily. Probably some brain-dead M$
middle managers decided the W3C way was too
"complicated". Jerks.

Here's what you do. Unfloat #boxright, and give it a negative
bottom margin of about -450px to pull it down over the
#frame border. This causes three interesting problems.

One is that when you neg margin downward a div this way,
IE won't enlarge the body element, so part of #boxright will
be inaccessible. This can be fixed by adding a new div directly
before the end of the body, and giving it whatever height needed
to pull down the body edge. The footer might be made to do this.

Second, once you pull part of #boxright out of #frame, the part
that is outside will be invisible in IE, which is fixed by making
#boxright "relative".

Finally, since #boxright is now a normal non-floated element,
it will be overlain by the floated #boxleft, so to prevent this,
give #boxright 'clear: both;'. IE does not actually need this, but
that's because it is using its proprietary "float model", switched on
simply by the dimensions on #frame. Heck, what's one more
deliberate spec violation? At least it's not as bad as the 3px madness...

After all that, I still see some small spacing variations between
IE, Op7 and Moz, but some of that is padding related. Try playing
around with stuff and you may be able to reduce or eliminate
the variations.
HTH

http//www.positioniseverything.net/

bkdark
Offline
Regular
Brooklyn
Last seen: 17 years 35 weeks ago
Brooklyn
Joined: 2004-03-29
Posts: 11
Points: 0

Crap ass IE is screwing up some NICE CSS

Okay there seems to be some confussion here. I'm sorry for not making my question clear. I'm trying to have two items side by side (#boxleft and #boxright) contained inside the #frame element. It works!! However:

IE 5.2 for mac does not recognize the margin top rule for #boxleft, IE 5.5 and 6.0 recognize it but add extra space at the bottom forcing the the #Frame element to resize and extend further down the page.

If you look at the link above in Sfari it is exactly how it is suppose to look. Can this be done in IE? The above solution is not what I was looking for, although I do really appreacaite the help.