CODEWITHSUNDEEP
phphtmlcssinternet-explorerbrowser
john smith
john smith

Reputation: 85

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;
}

Upvotes: 0

Views: 100

Answers (3)

Michas
Michas

Reputation: 9468

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;}

Upvotes: 0

Chris Love
Chris Love

Reputation: 3893

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.

Upvotes: 0

ops
ops

Reputation: 2049

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

Upvotes: 2

Related Questions