CODEWITHSUNDEEP
htmlcssinternet-explorerfirefox
Derek Paring
Derek Paring

Reputation: 119

Displayed text in HTML is more left in IE than FireFox?

In IE, the 'title1' and 'title2' are aligned more to the left than they are in FireFox? Can anyone see from the below code, why this is? It's important I have them at exactly the same points because the next elements require for them to be align (so the user can make sense of the displayed information!)

<div class='container' style='width:100%; height: auto; padding:0;'>

<div class='title1' style='padding:0; float:left; width: 150px; margin-left: 270px;'>title1
</div>

<div class='title2' style='float:left; width: 150px;'>title2
</div>

</div>

Upvotes: 0

Views: 116

Answers (3)

mike
mike

Reputation: 1896

It the content TABULAR?

I ask because, though tables aren't to be used for layout of sites, if the data makes sense as a table, you should use tables.

You mentioned the content following wouldn't make sense without the alignment. A table might be your solution.

Upvotes: 0

Rob
Rob

Reputation: 15160

Are you using a doctype? Without one, you are in quirks mode and IE will not attempt to perform like all the other far more modern browsers.

Upvotes: 0

Oscar Godson
Oscar Godson

Reputation: 32716

IE's "box-model" is much different than that other browsers so it could be a number of things including just that IE's default padding, margins, etc are different.

I'd use some sort of CSS resets. This will most likely fix your problem. Most issues i have with that are fixed when i use CSS resets.

I'd suggest adding (from http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded):

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,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

If it still doesn't make it work it's probably something else on the page, and maybe give us more code to look at?

Upvotes: 1

Related Questions