Question

On this page: http://friendsconnect.org/mainbar.php I am trying to acuratly align the button with equal space from the picture to the sides of the browser.

I can do it well with Chrome but the other browsers (damn IE) display it slightly off. And, of course if I make a change in one browser it affects the others.

Here is the more specific code:

<div style="text-align: right; width: 100%; padding: 0px 0px 0px 0px;">
    <table style="height: 35px; float: right;"><tr><td style="vertical-align: middle;">
        <div style="text-align: right;"><strong><?php print($user_full_name); ?> (<?php print($user_username); ?>)<br/></strong></div>
        </td><td style="vertical-align: middle;">
        <div style="text-align: right; padding: 0px 5px 0px 5px;float: right;"><img style="float: right; width: 25px; height: 25px" src="<?php print($user_current_propic); ?>&h=25&w=25&zc=1"></div>
        </td><td style="text-align: middle"><div style="margin-top: 1px;"><button id="options">Settings</button><button id="select">Settings</button></div></td></tr></table>
    </div>

And of course a pastie for good measure: http://pastie.org/private/fpnhyc94ekeezdscko5ihw.

Answer 1

To answer your question specifically:

CSS:

/* Get the whole thing on the right side. */
.mainbar {
    float: right;
}
/* Each direct child element should be block, so that <img>s don't have a
space below them, and things like <span> elements act consistently, etc. The
line-height will vertically align text. Floating acts similar in most
modern browsers. */
.mainbar > * {
    display: block;
    float: left;
    margin: 5px 10px 5px 0;
    line-height: 25px;
}
/* I did not re-create your button, but it should be CSS-based. */
.mainbar-button {
    height: 25px;
    width: 100px;
    border: 1px solid #333;
}

HTML:

<div class="mainbar">
    <span>Pete Allport (pcallport)</span>
    <img src="./FriendsConnect   My dashboard_files/create_user_image.php" />
    <div class="mainbar-button">Settings</div>
</div>

And there is no jQuery involved the spacing of your layout; jQuery is a JavaScript wrapper, and will always be between <script></script>.

In case you’re interested in best practices

• Tables are for tabular data, and even then dt, dl, and dd tags are more semantic. You should start learning about CSS layouts.

• Inline CSS should be avoided as much as possible, try using more class and id attributes.

• <script></script> should be placed at the very bottom of your page, so that it doesn’t load until after your DOM structure has visually compiled for your user (perceptually faster loading times).

• Notice in my example all the shorthand, e.g. 3 digit hex codes for color, and margin: north east south west values, etc.

I’d suggest a few tools, in case you don’t have them already

• Chrome: Use the built-in inspector, it’s awesome!
• Firefox: Firebug
• IE (God forbid): Firebug lite

Happy coding!