Tell me more ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.
up vote 2 down vote favorite

i got a "register user to website" form on my site. It looks fine in all browsers except Opera and FF.. i tryed to show pics through html so you can see what I mean, but i cant without 10 posts, and i can only post one link, so..

here is the one pic and the explanation ->
http://img183.imageshack.us/img183/4903/45825110.jpg

notice the vertical spacing between the input boxes...

how do I make it look the same in all the browsers?

thanks in advance for the anwsers.. Andrej

btw: i did't use any css resets on my page..

share|improve this question
TIP: develop in Firefox first, then make fixes in other browsers. The odds are the only browser requiring fixing will be IE. – John Conde♦ Oct 9 '10 at 18:50
We're probably going to need to see some code to help you with this. – John Conde♦ Oct 9 '10 at 18:51

3 Answers

up vote 0 down vote accepted

Just tried it out in JSFiddle and it seems to work fine.

HTML:

<form>
    <fieldset>
        <input />
        <input />
        <input />
        <input />
        <input />

        <input id='kbr' />
        <label id='kbr_label' for='kbr'>Kbr:</label>

        <input />
        <input />
        <input />
        <input />
    </fieldset>
</form>​

CSS:

    fieldset {
        border: 1px dotted silver;
        padding: 1em;
        width: 10em;
    }

    input {
        display: block;
        float: right;
        margin-bottom: 0.5em;
        width: 100%;
    }

    #kbr {
        width: 50%;
    }

    #kbr_label {
        float: right;
    }

EDIT:

Version 2 in JSFiddle gets rid of the last input boxes bottom margin.

share|improve this answer
up vote 0 down vote

It's tough without seeing some code, but simple margin / padding issue like that across different browsers can often be remedied by using a browser reset in your css.

Here's an example, although if you do a google search you'll see that there are many others.

http://www.siolon.com/blog/browser-reset-css/

share|improve this answer
up vote 0 down vote

First, try using a strict doctype because it reduces cross-browser problems to almost none. At its most simplest you can put <!doctype html> as the very first thing on your page, before <html>.

Posting the HTML/CSS code would have been useful but it looks like you need to add a margin to the inputs. At its most basic adding margin: 2px 0 to your styles for those input should work a treat.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.