0

A quick question about CSS, I have the following ugly code (CSS is in there in style tags temporarily, until I put it in the .css file as it should be):

<ol style="margin-left: 0; padding-left: 0; ">
    <li style="margin-left: 1em;"><spring:message code="message1"/></li>
    .....
</ol>

When I test this code in Firefox, I get the right alignment, but when I test it in IE (I am using 8 right now), it doesn't align the same way. To get it to look the same in IE, I need to use 

<li style="margin-left: 2em;">

which of course does not look good with Firefox.

Does anyone know why do IE and Firefox need a different value for margin?

Thanks a lot!

Diana Amza
  • 303
  • 1
  • 2
  • 12
  • 2
    IE 8 standards mode or IE 8 quirks mode? – Quentin Sep 05 '14 at 12:44
  • 1
    That's widely known as the box model bug: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug - Are using strict mode for your website? – Paul Sep 05 '14 at 12:45
  • The box model bug... You should use a specific stylesheet for IE8 to avoid this. – Siyah Sep 05 '14 at 12:45
  • 3
    @Siyah — Nonsense. You should use a standards mode triggering Doctype. – Quentin Sep 05 '14 at 12:46
  • I'd use a specific stylesheet to be sure of avoiding the problem. – Siyah Sep 05 '14 at 12:46
  • 1
    @Siyah — A standards mode triggering Doctype is sure to avoid the problem in everything newer then IE 5.5. – Quentin Sep 05 '14 at 12:47
  • Maybe you don’t even need a “different” value for `margin`, but just to simply equalize the possibly different default `paddings` as well. – CBroe Sep 05 '14 at 12:47
  • `list-style-position: outside !important;` to `ul` solved it for me once – Khaleel Sep 05 '14 at 12:50
  • @Quentin Thanks, that was good to know! I use standards mode now, IE8 and Chrome 36 work but not Firefox (I use 32). – Diana Amza Sep 05 '14 at 13:55
  • Why are u targeting IE 8 in the first place? It is really needed? Right now the latest IE version should be 11 and I think we are close for version 12 to be released. – Allan Sep 05 '14 at 15:30
  • That's the requirement that I've got, it should support IE 8 and higher. Wouldn't bother with IE8 otherwise. – Diana Amza Sep 06 '14 at 09:48

1 Answers1

0

Ok, if you want a CSS answer, you can use box-sizing. I came across this and I am pretty sure that you will get the same output. You just need to make the other browsers act the same as IE 8 and put in box-sizing: border-box;. w3schools.

andrew
  • 448
  • 7
  • 13