Thread: CSS FORM Layout

    #1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    Marina Del Rey, CA
    Posts
    6
    Rep Power
    0

    Post CSS FORM Layout, spaces in IE


    I'm having trouble positioning my form elements how I want them. The following code shows correctly in Mozilla but in IE, there are spaces around the form elements. How can I get rid of all the spacing?
    PHP Code:
    <form>
        <
    div style="border:1px solid;width:200px;height:20px;"></div>
        <
    div style="float:left;border:1px solid;width:100px;height:20px;"></div>
        <
    div><input style="border:1px solid;width:100px;height:20px;" /></div>
        <
    div style="float:left;border:1px solid;width:100px;height:20px;"></div>
        <
    div><input style="border:1px solid;width:100px;height:20px;" /></div>
        <
    input type="submit" style="font-size:12px;border:1px solid;width:200px;height:20px;" />
    </
    form
    Take a look at this comparision image:


    Thank you!

    By the way, I've also tried using a table and was still unable to get rid of all the spacing.
    Last edited by chili-mac; December 8th, 2003 at 03:59 AM.
  2. #2
  3. No Profile Picture
    Texan at Heart
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Castle Rock, CO
    Posts
    316
    Rep Power
    20
    Try adding something like:
    PHP Code:
    margin:0px
    to see if that solves your problem.
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    Marina Del Rey, CA
    Posts
    6
    Rep Power
    0

    Unhappy


    Thanks, I have tried that. It doesn't help.

    Anyone else have an idea?
  6. #4
  7. Retired
    Devshed Supreme Being (6500+ posts)

    Join Date
    Feb 2002
    Location
    Finland
    Posts
    9,143
    Rep Power
    2493
    This may be a stupid idea, but have your tried removing whitespace?:

    PHP Code:
    <form>

        <
    div style="border:1px solid;width:200px;height:20px;"></div>
        <
    div style="float:left;border:1px solid;width:100px;height:20px;"></div><div><input style="border:1px solid;width:100px;height:20px;" /></div>
        <
    div style="float:left;border:1px solid;width:100px;height:20px;"></div><div><input style="border:1px solid;width:100px;height:20px;" /></div>
        <
    input type="submit" style="font-size:12px;border:1px solid;width:200px;height:20px;" />

    </
    form
    Or having the second part of each line relative to the first?

    Cheers,
    Jamie

    >_ skiFFie ? | Twitter

    __________________

    Let the might of your compassion arise to bring a quick end
    to the flowing stream of the blood and tears .....
    Please hear my anguished words of truth.

    __________________
  8. #5
  9. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    Marina Del Rey, CA
    Posts
    6
    Rep Power
    0
    Well, I have seen that fix problems in the past, but doesn't do anything for this.

    Thanks for the ideas...anyone else?
  10. #6
  11. HTML/CSS/Photoshop maven
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    CA
    Posts
    184
    Rep Power
    12
    Hey, it was a stupid question!

    You have two unformatted <div> tags in there surrounding your <input> tags. Move the style to the <div> tags and see what it does.
  12. #7
  13. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    Marina Del Rey, CA
    Posts
    6
    Rep Power
    0
    Well that does seem like an obvious answer that would work, but theoretically the div should conform to it's contents...right? Anyway, in practice it doesn't work either. I'm really starting to think this is impossible to do, but I know I'm missing something. I've even taken out the input tags an still get the same layout. I've tried just about everything.

    If anyone can post a solution, I'd be very grateful.

    Thanks for the replies.
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2000
    Posts
    162
    Rep Power
    0

    Try this


    Use a table, but keep the FORM tag outside of the TD tags. For some blasted reason, the FORM tag adds some kind of linebreak which messes up some vertical formatting. The trick is that keeping the code outside of the TD tags to define a cell's contents removes that irritating linebreak.
  16. #9
  17. st0nEd c0deR
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Manchester, England
    Posts
    202
    Rep Power
    14

    !


    Hey

    Most bowsers, although compliant with css and css2 etc, will rnder the same page using the same css in a different way, something to do with counting the pixels if memory serves.

    Sounds like what you need is a script to detect the browser version and adjust the css automatically!

    E.G.

    <-- Begin JavaScript -->
    function OpMoz() {

    // Detect the browser name
    browsername=navigator.appName;
    if (browsername.indexOf("Netscape")!=-1) {browsername="NS"}
    else
    {if (browsername.indexOf("Microsoft")!=-1) {browsername="MSIE"}
    else
    if (browsername.indexOf("Opera")!=-1) {browsername="opera"}
    else {browsername="N/A"}};

    // Detect the version
    browserversion="0";
    if (navigator.appVersion.indexOf("2.")!=-1) {browserversion="2"};
    if (navigator.appVersion.indexOf("3.")!=-1) {browserversion="3"};
    if (navigator.appVersion.indexOf("4.")!=-1) {browserversion="4"};
    if (navigator.appVersion.indexOf("5.")!=-1) {browserversion="5"};
    if (navigator.appVersion.indexOf("6.")!=-1) {browserversion="6"};

    // Detect and add code to the header part of the
    // XHTML document.

    if (browsername=="NS") {document.write("<style>#right \{position: absolute;right: 0px;top: 80px;width: 300px;background-color: #EEE;border: 1px solid #CCCCCC;\}<\/style>")};
    if (browsername=="MSIE"){
    if (browserversion<4){document.write("Update your Browser Please.")}
    else {document.write("")}}
    if (browsername=="opera") {document.write("<style>#right \{position: absolute;right: 8px;top: 89px;width: 300px;background-color: #EEE;border: 1px solid #CCCCCC;\}<\/style>")}
    if (browsername=="N/A") {document.write("")};

    }
    <-- End JavaScript -->



    just mess about with the code, so the css properties are controlledby this script once the browser has been detected!

    script source: http://www.risingdragon.org.uk

    Hope this helps!
    MostDef
    All is not what it seems, and it seems that this is not all!
    POISON - the answer to all of lifes little problems

IMN logo majestic logo threadwatch logo seochat tools logo