CSS on IE vs Mozilla/Firefox.

admin

Administrator
Staff member
Alright.. someone please help me. Someone explain why IE can't show a "position: absolute;" item, if its embedded in a div? Basically, I'm trying to build this site using all CSS, and no tables. So, I have a box, and I'm trying to align some icons at the top on the far right, and some text on the very bottom at the far right. In mozilla/firefox, the following code works...


.somebox .alignsomewhere {
position: absolute;
bottom: 3px;
right: 3px;
}

In Mozilla/Firefox, that would give me a bottom/right aligned area. In IE, it will align to the right/bottom of the entire window.

How do I fix this, and why does IE suck so incredibly bad?Your snippet of script is not enough to see what is going wrong.
Give a working example.Just go to

I removed the link so it wouldn't get indexed.

Its a prototype of the site I'm developing.

Open it in Firefox, then in IE. Notice how the icons next to the date in IE align ALL the way to the right. Also notice that in IE the "Comments () | Post a Comment | Forums" links don't show up.

Thanks.It's not a pretty solution, but once you start using hacks (#contentbox), you will need more hacks to fix problems.

Remove padding-bottom: 25px; from .articlebox.
Ghange the following:
.articlebox h4 span {
position: absolute;
top: 0px;
right: 3px;
margin-right:0 !important;margin-right:195px;
margin-top:0 !important;margin-top:5px;
}
.articlebox .comments {
position: absolute !important; position: relative;
padding-top:25px;
font-size: 75%;
font-weight: bold;
bottom: 5px;
}

Tested in Mozilla 1.6 and IE 6
Basically uses the !important rule to change the css for IE but not for Moz.
You need to fix the validation errors in the xhtml.
The images within a h4 are semantically incorrect.

Don't go blaming the browser if you have been using hacks!Cool, that worked. Thanks for the help.
I wasn't familiar with the !important command.
 
Back
Top