Positioning in Firefox, Chrome, and Internet Explorer

[Ellie]

http://www.vengeance-rpg.com/v/ (log out if logged in)

There is an image and a button overlayed on the "new player" and "continue" parts of the background image.

In Chrome and IE 8, they line up perfectly.

In Firefox 3, there is a large gap between them pushing them out of where they are supposed to be.

Anybody know why? (View source?)

<div class="html" id="{CB}" style="font-family: monospace;"><ol><span style="color: #009900;">[url=http://december.com/html/4/element/div.html]<span style="color: #000000; font-weight: bold;"><div[/url] style="position: relative; left: 0px; top: -20px; width: 700px;"<span style="color: #000000; font-weight: bold;">>

    <span style="color: #009900;">[url=http://december.com/html/4/element/input.html]<span style="color: #000000; font-weight: bold;"><input[/url] type="hidden" name="redirect" value="index.php" /<span style="color: #000000; font-weight: bold;">>

    <span style="color: #009900;">[url=http://december.com/html/4/element/a.html]<span style="color: #000000; font-weight: bold;"><a[/url] href="http://vengeance-rpg.com/v/ucp.php?mode=register" class="button2_"<span style="color: #000000; font-weight: bold;">>

        <span style="color: #009900;">[url=http://december.com/html/4/element/img.html]<span style="color: #000000; font-weight: bold;"><img[/url] src="http://www.vengeance-rpg.com/v/images/items/14.png" style="margin-left: -295px; margin-top: 35px; border: 0;" width="130" height="30" /<span style="color: #000000; font-weight: bold;">>

    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></a>

    <span style="color: #009900;">[url=http://december.com/html/4/element/input.html]<span style="color: #000000; font-weight: bold;"><input[/url] type="submit" name="login" style="margin-top: -20px; width: 130px; height: 30px; border: 0; color: white; background-color: transparent;" width="130" height="30" value="." /<span style="color: #000000; font-weight: bold;">>

<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></div>

 

 

[gRaViJa]

Chrome and IE are way more forgiving than Firefox, that's the main reason. It's often because of relative positioning and/or floating. In theory Firefox is actually right while the other browers overlook the "error".

If i find the time later today, i'll have closer look at it

 

[Yeyinde]

After taking a look at the source elements and their computed styles and metrics, it appears to me that Firefox would be causing it. I can't remember exactly, but I think that Firefox likes to add some padding to images here and there, and your "New Player" image is flush right up against your submit button.
Perhaps you can crop the unneeded section of the image, and manually add the padding/margin in yourself there? I also hugely suggest that you install Firebug if you're using Firefox, and use Chrome's Developer Tools if you're using a Chromium based browser.

Chrome and IE are way more forgiving than Firefox

Technically, Chrome is one of the most standards compliant browsers out there, due to it using the Webkit rendering engine.

 

[gRaViJa]

After taking a look at the source elements and their computed styles and metrics, it appears to me that Firefox would be causing it. I can't remember exactly, but I think that Firefox likes to add some padding to images here and there, and your "New Player" image is flush right up against your submit button.
Perhaps you can crop the unneeded section of the image, and manually add the padding/margin in yourself there? I also hugely suggest that you install Firebug if you're using Firefox, and use Chrome's Developer Tools if you're using a Chromium based browser.

Chrome and IE are way more forgiving than Firefox

Technically, Chrome is one of the most standards compliant browsers out there, due to it using the Webkit rendering engine.

I didn't say Chrome isn't the most compliant browser Firefox is the most strict browser of all though, sometimes it's really irritating, like in this case.

And yes, definitly use Firebug/Developer Tools, it will find error's in seconds which would take hours to find manually.

 

[Ellie]

I finally got it to work - it was a <center> tag earlier on, which admittedly is deprecated in the HTML standard so I shouldn't have used it anyway. It STILL doesn't work in Firefox on a Mac:

Screenshot from Saltw/Gamingw

Although Drule there said "Just use a reset css before designing your site.".

I'll try and find one

 

[gRaViJa]

Oh yes, always use a reset.css! Here's one:

Spoiler

 

/* [url=http://meyerweb.com/eric/tools/css/reset/]http://meyerweb.com/eric/tools/css/reset/[/url] */

/* v1.0 | 20080212 */

 

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,

table, caption, tbody, tfoot, thead, tr, th, td {

    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;

}

blockquote:before, blockquote:after,

q:before, q:after {

    content: '';

    content: 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;

}

 

 

 

[Ellie]

Thanks. It's pushed a lot of things out of alignment but I'm guessing that's a good thing, as it shows I'd got it wrong to begin with.