~ryanlowe/blog: Found an IE Bug?

Found an IE Bug?

As I posted earlier, I was having a problem with Microsoft Internet Explorer 6 rendering this site. Here's the low-down on it and why it may be an Internet Explorer bug.

I got suspicious about how IE rendered the site when I completely right-scrolled over and the page was exactly filled with the blog entries (ie. the menu on the left was hidden). So I took a look at corresponding part of the default MoveableType 2.63 stylesheet:

#content { position:absolute; background:#FFF; margin-right:20px; margin-left:225px; margin-bottom:20px; border:1px solid #FFF; }

and margin-left caught my eye. If the <div> is using position:absolute; the stylesheet should use left to specify how far left to go from the top-left corner of the page. IE just assumed that it had 100% of the width of the page to render <div id="content"> and then bumped it over 225 pixels, making the page too wide.

The other browsers changed the <div>'s width to compensate and fit the page. IE should do the same thing because the <div>'s width isn't specified. It's acting like the <div>'s width is set at 100%. I changed the stylesheet to use left instead and now all of the browsers work.

So we can fault MoveableType for using the incorrect CSS attribute(s) but is this a bug in Internet Explorer 6 as well? If so how do I report it? I'm on Feedster now ... maybe someone is listening anyway. ;)

Posted at April 22, 2003 at 12:13 PM EST
Last updated April 22, 2003 at 12:13 PM EST

Comments

It's not horiz scrolling anymore, thank goodness....but, and I don't know if anyone else is getting this...but when I scroll too quick, some of your text goes blury or missing. It's strange. I have to scroll so it goes off the page and then back down and it appears. Maybe it's just my comp? I've never noticed it before though.

» Posted by: itsy at April 22, 2003 12:53 PM

Please tell me these things earlier so I can fix it. :) I don't use Internet Explorer 6 regularly so I had no idea.

Yes, I have the same problem with Internet Explorer 6. It isn't rendering the page very nicely, probably because of the use of <div>'s and absolute positioning. May I suggest Mozilla? :)

» Posted by: ryan at April 22, 2003 12:59 PM

I'm getting some weird stuff too with the default MovableType setup. When I ported my Blog to MovableType on my local computer, wheneveer I clicked on the comments to open the comments windows, the text like "Remember personal info?" was not visible. I had to drag my mouse across the comments windows for it to be visible, then click off. Then the text is visible.

I noticed this in the default MovableType setting on my blog, as well as yours right as soon as you changed the style.

As well, in some blogs, like Itsy's, I can't hightlight the text going from left to right. It like automatically highlights it all!! It's really weird.

This is all been in IE 6.0.

» Posted by: roy at April 22, 2003 03:52 PM

Oh, and yes, I did notice the Horizontal scrolling in IE...I just though you already knew! Btw, another thing, when I'm reading your blog, As I scroll down the page, the text that appears is like it's been chopped in half. Only the top part appears. I usually just highlight it to see the text, then click off and it's normal.

Again, this is only in IE.

I usually test my Blog with Mozilla's Composer and I view it in IE, Mozilla, Opera, and Links :-) I never forget the Linux and BSD people! hehehe

» Posted by: roy at April 22, 2003 03:58 PM

Sorry man! Same story from me. I thought that you knew about the weird side scroll thing in IE 6. (and now I am getting the weird text thing too...)

» Posted by: JimboJones at April 22, 2003 10:59 PM

How do you make the red stuff in your comments... did you edit the stylesheet or just do a ?

» Posted by: andrew at April 24, 2003 10:46 AM

yeah, so comments eat the html stuff... did you do a pre tag setting the color to red?

» Posted by: andrew at April 24, 2003 10:47 AM

I set the <tt> tag to appear red. See the style sheet for how I did it:

http://www.ryanlowe.ca/blog/styles-site.css

» Posted by: ryan at April 24, 2003 06:10 PM

You could save some bytes by eliminating the leading whitespace in your stylesheet.

» Posted by: Phillip at April 26, 2003 11:08 PM

Just so you don't have to figure out on your own how to fix this, since it seems nobody has actually posted the fix here, just do the following.

Replace " margin-left:225px;"
with " left:225px;"

and it'll render fine in IE.

» Posted by: gene at October 17, 2003 03:37 PM

Good point, Gene. I hadn't made it explicit.

» Posted by: Ryan at October 17, 2003 09:09 PM

Just add DISPLAY:INLINE to fix the doubled size.

» Posted by: Pedro Saddi at December 2, 2004 05:56 AM