CSS Internet Explorer Browser Differences

For some reason, in internet explorer, the words are indented much further than shown in Chrome or Safari. Is there a reason for this perhaps due to differences in CSS for the various browsers?

<div class="container">
<div class="centered">
<?php 

    echo "<a href='/LOGO'>LOGO</a>";
?>
</div>
</div>

//CSS

.centered
{
position:relative;
margin:0 auto;
width: 954px;   
}
.container
{
width:100%;
border-bottom: 1px solid gray;
font-size: 27px;
background: #4D94DB;
color: black;
    min-height: 37px;
}

Answers


Use this css reset in first line:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Reference Reset CSS


You also might want to add the following to the top of your reset code:

*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

}

Also you are using a container width of 100%. Make sure you have some sort of container element around that with some sort of fixed with unit; ie px, em, etc. Without that each browser will size the box based on the font. Each browser and platform will rendering font slightly different resulting in different widths.


It may be the problem with quirks mode. Do You have a proper doctype?

Add something like this to Your CSS to debug. There may be an forgotten element or something.

html { border: solid 1px black;}
body { border: solid 1px red;}
div  { border: solid 1px green;}

Need Your Help

How to place multiple icons for Google map markers in v3?

javascript google-maps

I'm trying to create a map similar to this (which is using v2 of the API). I want each marker on the map to consist of an image with a frame or background behind like so.

ruby on rails roo gem cannot load zip/zipfilesystem

ruby-on-rails ruby ruby-on-rails-3 nokogiri rubyzip

I am attempting to use the roo gem to process .xlsx spreadsheets that are uploaded by an outside party. I'm getting the following error: