Page 1 of 1

really really wierd IE rendering bug.

Posted: Sat Oct 09, 2004 10:56 am
by Daisy Cutter
Check this out in IE:
http://kafene.org/url/blog.php

it's my blog which is valid (as of now, and i know that doesnt garuntee compatibility but its a good way of getting it)...

if you open it in IE, the first post has no border at the top and is black for about 1/3 the way down. all other posts display just fine and the page displays right in konqueror, firefox and opera so i dont care. if you middle click and drag around a little with the white circle/arrow thing, it actually starts erasing/drawing on the divs! how BADLY coded can a browser get!?!!

also missing in IE are a dotted underline for my blog title, and the title is also oversized (i used an em within an em which should make it proportional to the first em, but ie treats it like it's not inside any other, and it cant used "dotted" in CSS).

Posted: Sat Oct 09, 2004 2:58 pm
by no_memories
all other posts display just fine and the page displays right in konqueror, firefox and opera so i dont care.
AS much as I dislike I.E. too, it is 80%+ of your audience.

Code: Select all

#main{
position:relative;
width:70%;left:0;
margin-left:25%;
top:20px;
}
A better cross browser way might look like - assuming you have a fixed width structure: one <div> or the other must be defined as a fixed width to get the other to expand and contract properly.

Code: Select all

#main&#123;
width: auto; /* the auto value allows the margin rule to take over */
Margin: 20px auto 0 350px; /* the 350px is how far left this <div> would be and the auto allows the margin to auto adjust itself from the right. the 20px is your top margin, no top rule is needed. */
&#125;
Each preceding div would need to correspond with the margin values from hence forth. This is a very common misconception when it comes to CSS, the margin rule and how it works.

This is the beginning of your problems, the CSS is as bad as it gets. I.E. is quirky to begin with but using a %value with a margin rule is bad.

Your <h> shouldn't use EM values either. uugg. In short, this needs to be done properly to cross browser correctly.

This problem could be solved, but it would involve changing the basic CSS structure of the blog itself; basically from the ground up on the front end side. I'm guessing it uses a template system and whoever made it didn't really understand CSS all that well to make it cross browser compatible.

If you really want to make it right, you can either redo the template or get someone who knows how.

Posted: Sun Oct 10, 2004 9:33 am
by Daisy Cutter
no_memories wrote:
all other posts display just fine and the page displays right in konqueror, firefox and opera so i dont care.
AS much as I dislike I.E. too, it is 80%+ of your audience.

Code: Select all

#main&#123;
position:relative;
width:70%;left:0;
margin-left:25%;
top:20px;
&#125;
A better cross browser way might look like - assuming you have a fixed width structure: one <div> or the other must be defined as a fixed width to get the other to expand and contract properly.

Code: Select all

#main&#123;
width: auto; /* the auto value allows the margin rule to take over */
Margin: 20px auto 0 350px; /* the 350px is how far left this <div> would be and the auto allows the margin to auto adjust itself from the right. the 20px is your top margin, no top rule is needed. */
&#125;
Each preceding div would need to correspond with the margin values from hence forth. This is a very common misconception when it comes to CSS, the margin rule and how it works.

This is the beginning of your problems, the CSS is as bad as it gets. I.E. is quirky to begin with but using a %value with a margin rule is bad.

Your <h> shouldn't use EM values either. uugg. In short, this needs to be done properly to cross browser correctly.

This problem could be solved, but it would involve changing the basic CSS structure of the blog itself; basically from the ground up on the front end side. I'm guessing it uses a template system and whoever made it didn't really understand CSS all that well to make it cross browser compatible.

If you really want to make it right, you can either redo the template or get someone who knows how.
actually opera (myself :P) is 50% of my audience. The page displays decently (just for some reason the right color doesn't kick in until about halfway through the first div, I'm assuming IE renders 2 divs as overlapping) ... I wrote the template for the blog from scratch anyways... IE gets a fair warning in the upper left corner of the page and that's it. If they can live with some minor rendering bugs, then they can disable the warning. I linked to browsehappy and a google search about IE in the warning.

To be fair if I were a web designer designing for a client, my page would work just fine in other browsers, and I'd probably have spent more than an hour learning CSS. CSS took me an hour to learn, HTML a few days and XHTML about 2 days.

OH BY THE WAY:

I must give you credit, simply changing main to width auto and adding a right margin of 10% fixed the IE bug. Strange little bug it was. Thanks a bunch!

Posted: Sun Oct 10, 2004 1:11 pm
by no_memories
Sticks foot into mouth <---

Well, I was assuming you weren't in northern Europe, which I'm guessing you are since Opera is 50% of your readers. And yes, Opera 7 screams just as Mozilla and KDE do when it comes to standards.

But when it comes to CSS, it may take only a little time to learn, but like the game of chess, it takes some time to master, especially when delving into complex sites.

Glad that little margin thing helped however. :arrow: onto the next CSS question :P

edited: I.E. doesn't show the border: dotted rule; only dashed and solid I'm pretty sure. Let's give Microsoft a standing ovation for dragging the Internet down as NS4 did a few years ago by not advancing their browser any further - making us wait until their next OS comes out. Or we could all flood their filthy rich ambassadors with e-mails asking them, please fix your browser bugs for the betterment of the Internet, lol, like they would even open such e-mails, let alone read them.

Posted: Sun Oct 10, 2004 2:12 pm
by Roja
no_memories wrote:I.E. doesn't show the border: dotted rule; only dashed and solid I'm pretty sure. Let's give Microsoft a standing ovation for dragging the Internet down as NS4 did a few years ago by not advancing their browser any further - making us wait until their next OS comes out. Or we could all flood their filthy rich ambassadors with e-mails asking them, please fix your browser bugs for the betterment of the Internet, lol, like they would even open such e-mails, let alone read them.
A combination of three things will push things along:

- Design to standards always, and if you end up with a MINOR/workable bug in IE, put a special note at the top of the page for IE users explaining why - this will encourage users to try alternatives.

- More market share has to slip to the alternative browsers - OEM's (Dell, HP), online services (Earthlink), and other people putting together software packages will speed this process, as Apple did by making Safari.

- Whenever you encounter sites that dont work properly in alternative browsers, notify the alternative browsers via bug reports (Mozilla, Konq, and Safari all have "evangalism" as a bug target), and notify the site that they won't get your business unless they support alternatives to a convicted monopolist, or at least support standards - this will encourage businesses to make the change as well.

Microsoft is huge, and since the current US administration was unwilling to break their stranglehold on computing, we as a computing society have to do it step-by-step, piece-by-piece, through grassroutes campaigns.

Posted: Sun Oct 10, 2004 4:08 pm
by no_memories
Roja - iam100% with you on your statements!! 8)

Posted: Sun Oct 10, 2004 4:21 pm
by patrikG
Roja wrote:Microsoft is huge, and since the current US administration was unwilling to break their stranglehold on computing, we as a computing society have to do it step-by-step, piece-by-piece, through grassroutes campaigns.
One such initiative is http://www.spreadfirefox.com/ :)

Posted: Sun Oct 10, 2004 4:27 pm
by mudkicker
patrikG wrote:
Roja wrote:Microsoft is huge, and since the current US administration was unwilling to break their stranglehold on computing, we as a computing society have to do it step-by-step, piece-by-piece, through grassroutes campaigns.
One such initiative is http://www.spreadfirefox.com/ :)
wow :lol: got a link in my sig after that :)

http://www.spreadfirefox.com/?q=affiliates&id=21251&t=1
:D :D :D[/url]