ansaurus

Question

CSS issue with IE

Answer 1

A:

We don't know what your #message markup looks like. Is it an H1 or H2 or something like that? If so, you may want to reset such container styles to have margin: 0 and padding: 0. Different browsers interpret those tag-soup elements in different ways.

Robusto 2010-03-08 20:45:30

My #message is a <div>.., it's in the question

Karem 2010-03-08 20:48:52

It wasn't in the question when I read it. You must have added it in your edit.

Robusto 2010-03-08 21:17:30

Answer 2

A:

internet explorer mostly has these errors when in quirksmode. do you have a valid doctype? use the w3c's validator:

http://validator.w3.org

edit:

please try to delete unneeded blanks and new-lines.

<div class="message2" id="message2" onclick="closeNotice2()" style="display: none">Yo, <b><? echo $pusername; ?></b> - <? echo $_SESSION["user_message"]; ?> <a class="close-notify" onclick="closeNotice2()">X</a></div>

henchman 2010-03-08 20:52:11

No errors in validator

Karem 2010-03-08 20:55:35

I tried this also, still nothing :(

Karem 2010-03-09 09:30:21

please show us the complete sourcecode for further elaboration

henchman 2010-03-09 10:49:19

complete sourcecode for what? all my php coding? but thats not relevant

Karem 2010-03-09 12:49:57

sorry - only the relevant html and css of course :-)

henchman 2010-03-09 12:54:00

well all should already be there, my friend..

Karem 2010-03-09 13:39:44

ehmm... like between doctype and </html> :-), including all styles

henchman 2010-03-09 13:56:16

Answer 3

A:

I second for the <! DOCTYPE at the first line of your HTML file. Without it, I get erratic behaviours between IE and FF.

Graveen 2010-03-08 21:10:53

this should be a comment

codedude 2010-03-22 16:14:25

Too bad Stack Overflow won't let you post comments below a certain reputation treshold.

janmoesen 2010-03-23 14:17:23

+1 because it annoys me when people downvote just because someone (with rep < 50) uses an answer as a comment.. :)

Stein G. Strindhaug 2010-03-24 13:11:31

Getting 100 rep is instant if you do the right stuff with your account...agree on the bad downvotes, also duplicate answers should NOT be downvoted just because they are duplicates - some do that just so their answers raise higher.

Mark Schultheiss 2010-03-24 14:02:07

Answer 4

+2 A:

Internet Explorer has a very nasty quirks mode which activates when your web page seems to disobey the W3C standards. In quirks mode, Internet Explorer tends to render things just a (big) bit different than other browsers (to keep compatibility with older websites which where written specifically for Internet Explorer's weird rendering engine). One way to let Internet Explorer think that your web page actually conforms to the standards is to insert a DOCTYPE as the very first line in each web page.

For an XHTML web page, the doctype could be:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

For a HTML 4.0 web page, it could be:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;

Virtlink 2010-03-08 21:38:38

wont work either, i already have this

Karem 2010-03-09 09:29:58

@Azzyh: which one?

Chris Lively 2010-03-23 18:42:01

Also you should use Strict mode, not transitional. There are still plenty of differences in browser implementations of the mentioned doctypes.

Chris Lively 2010-03-24 13:23:26

Answer 5

+2 A:

IE will not not respect your height by default if the content overflows the container. You can add overflow: hidden to make it work like FireFox.

There must be some other styles affecting this. For starters, you don't show us the styles that change the color of the text, and I suspect there is styling of the link.

Marc 2010-03-17 17:35:02

Answer 6

+5 A:

Did you try adding a line-height to your css?
Also a css reset might help with the default margin and padding.

Knu 2010-03-17 20:20:15

+1 for the CSS reset. That solves 90% of cross-browser CSS sizing issues.

Jacob 2010-03-24 00:59:06

+1 I agree with Jacob. This will generally solve most of your CSS issues.

blesh 2010-03-24 13:51:20

Answer 7

A:

Add "overflow:hidden;" just in case the content is stretching the div and remove any whitespace between the closing div tag here and the next element in your page. Browsers should really ignore whitespace in between elements, but in practice I have found that's not the case.

Bob Ralian 2010-03-19 15:38:12

Answer 8

A:

Try adding:

zoom: 1;

to the css. That will sometimes make IE force the element to hasLayout...

Chibu 2010-03-23 19:44:18

Answer 9

A:

Which version of IE you are using? IE6 and IE8 makes a big difference, yo. Also, without complete HTML / CSS source code and/or public URL this is difficult to resolve. I would try to track down the issue using IE's Developer Toolbar, which must be downloaded and installed manually for IE6/7.

jholster 2010-03-23 20:54:57

Answer 10

A:

i would try setting display:inline

Either set it on the div it self, of on the content of the div. You may need to wrap the content into another tag such as span.

But like many a person has said, you need to provide more. more code. more picutre. more information.

thecoshman 2010-03-24 13:48:14

Answer 11

A:

I have used this reset with success when having issues of this nature:

CSS reset discussion

Mark Schultheiss 2010-03-24 14:12:10

ansaurus

tags:

views:

answers:

CSS issue with IE

related questions