5

I'm working on some boxes where I'm forced to using the following css on a div in order to make it look right:

display:table;

It works fine in Firefox + Internet Explorer, but I just noticed that it adds a 1px border/margin/padding in webkit browsers (Safari / Chrome), which moves the box a bit... How can I get rid of this?

I've uploaded a picture example of how it's rendered:

http://imageshack.us/photo/my-images/854/examplez.jpg/

Is there a "simple way" of determining in the stylesheet whether you are using a webkit browser or not? Because then I could just add a "margin-left:-1px".. I know there is a way of determining the browsertype in jQuery, but I think it's kind of overkill for this..

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
  • I had some problems with display:table. Have you tried display: block? –  Sep 30 '11 at 14:17
  • display:block doesn't center the box vertically, which is why I need to use display:table :/ –  Sep 30 '11 at 14:19
  • Checkout this link: http://d-graff.de/fricca/center.html –  Sep 30 '11 at 14:21
  • yes in css3 you can write the different css properties of the webkit-browsers (check css3 manual).By the way how it's appearing in firefox and IE. – Punit Sep 30 '11 at 14:21
  • Better link: http://blog.themeforest.net/tutorials/vertical-centering-with-css/ –  Sep 30 '11 at 14:22
  • 1
    -webkit-margin-start: -1px <---- This did the trick for me.. –  Sep 30 '11 at 15:41

0 Answers0