CSS vendor prefixes for HTML Form

Question

I am developing a form for the 5 main browsers and want to know a little more about CSS vendor prefixes. The form looks different in firefox, i would usually move the div with top and left CSS but just want to tweak firefox. From what i have read -moz-margin-start: 10em; seems to be a way of moving the div but doesn't work. How do I move the div in only firefox using css?

I have a list of prefixes here http://peter.sh/experiments/vendor-prefixed-css-property-overview/ and use https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-margin-start as well.

p.s. i read that using Grunt stops the need for using CSS Vendor prefixes, is it worth setting up?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>title</title>

    <link rel="stylesheet" type="text/css" href="blueprint/blueprint/screen.css" />
    <link rel="stylesheet" type="text/css" href="blueprint/blueprint/src/typography.css" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <!--<link rel="stylesheet" type="text/css" href="blueprint/blueprint/ie.css" />-->
    <!--[if IE]>
    <link rel="stylesheet" href="blueprint/ie.css" type="text/css"
    media="screen, projection">
    <![endif]-->

</head>

<body>
    <div class="container showgrid">
                <h2><center>Research Request Form</center></h2>



                <div> 
                    <input type="text" class="span-4" id="listcode">

                </div>
                <div>
                    <input type="text" class="span-4" id="sourceCode">

                </div>
                <div>
                    <input type="text" class="span-7" id="division">

                </div>
                <div class="span-24" id="wrap2">

                    <input type="text" class="span-23" id="projectName">

                </div>
                <div class="span-4">
                    <div class="span-4" id="interestCodes">
                        <p>
                            <input class="span-4" id="interestCodes" style="" type="text" name="mm" size="16" value="" />
                        </p>
                        <p>
                            <input class="span-4" id="interestCodes" style="margin-top:-7.5px;" type="text" name="mm" size="16" value="" />
                        </p>
                        <p>
                            <input class="span-4" id="interestCodes"style="margin-top:-7.5px;" type="text" name="mm" size="16" value="" />
                        </p>
                        <p>
                            <input class="span-4" id="interestCodes"style="margin-top:-7.5px;" type="text" name="mm" size="16" value="" />
                        </p>
                        <p>
                            <input class="span-4" id="interestCodes"style="margin-top:-7.5px;" type="text" name="mm" size="16" value="" />
                            <p style="">&nbsp;Interest Codes</p>
                        </p>
                </div>
                <div>
                        <input class="span-18" id="listCodeAndName"style="" name="Text1" value="List code and Name:">
                </div>
                <div id="detailWrap">
                    <div id="details"> 
                    <p>Marketing Manager:  </p> 
                    <p>Marketing Director: </p> 
                    <p>Date Submitted:  </p> 
                    <p>Ideal Deadline: </p> 
                    <p>Quantity Submitted: </p> 
                  <p><input type="submit" name="submit" value="Send" /></p>                                                                 

                </div>

    </div>
</body>
</html>

body {
    background-color: #99FF99;
    font-family: verdana, sans-serif;
}
#listcode {
    height: 50px;
    margin-left: 22px;
}
.container {
    border:2px solid black;

}
#sourceCode {
    height: 50px;
    margin-left: 58px;
}
#division {
    height: 50px;
    float: right;
    margin-right:18px;
}
#wrap2 {

    display: block; 
    clear: both;

}
#projectName {
    height: 50px;
    margin: 20px 20px 20px 20px;

}
#interestCodes {
    margin-left: 10px;
}
#listCodeAndName{
    -moz-margin-end:10em;
    margin-left: 230px; 
    width: 688px;
    height: 160px;
    position: fixed;
    top: 224px;
    left: 146px;

}

It looks like you'd benefit from a [CSS Reset](http://www.css-reset.com/). — chazsolo, Feb 26 '15 at 14:08
Our website saw browser-specific rules as a good solution...first day it was the Operas...then the Firefoxes...before you knew it it was all-out war...a rule was added first for whichever browser that engineer liked the least. You can still go down that street today, and the rubble will look different depending on which rendering engine you look at it through...huge empty shells of CSS bombs that everyone around is too afraid to touch or remove, every step on the cracked bricks a crawl as it has to recalculate everything...madness. Utter madness. Yeah, don't use browser-specific CSS. — Katana314, Feb 26 '15 at 14:52
Thanks for the reply, where would be the best place to learn cross browser CSS coding? — Pete, Mar 06 '15 at 14:30
Here is a way to target just Firefox browsers which appears to work http://stackoverflow.com/questions/952861/targeting-only-firefox-with-css — Pete, Mar 06 '15 at 15:40

DNReNTi · Accepted Answer · 2015-02-26T14:29:21.727

1

If I get your problem right , then your div container is not exactly in the top-left corner. Its because the browser has its default css definitions, like 10px margin on the body element. You can easily solve the problem:

body {
    margin: 0;
}

Or you better start using CSS reset, normalize.css for example.

I hope it helps, and I dont went wrong way.

edited Feb 26 '15 at 14:29

answered Feb 26 '15 at 14:08

DNReNTi

521
4
18

CSS vendor prefixes for HTML Form

1 Answers1