IE style problem

Discussion in 'HTML' started by Lanmind, Sep 10, 2008.

  1. Lanmind

    Lanmind Guest

    Hello all,

    I have an issue with IE below that I tried posting in a CSS group but
    it didn't post:

    On my page under the paragraph "Find a Marine Terminal, Dock, Wharf,
    Berth" there is a large gap like there is a <br />. The paragraph
    itself has only 0.1em set as a bottom margin and the form below it
    with text box has no margin at all.

    I'm not sure why this large gap is there in IE but I'd like to
    minimize it. It's not there in Mozilla or Chrome.

    Here is my page: http://dockhawk.com/default_test.html

    Here is the CSS: http://dockhawk.com/default_test.css

    Thank you for help.
     
    Lanmind, Sep 10, 2008
    #1
    1. Advertising

  2. Lanmind

    Els Guest

    Lanmind wrote:

    > I have an issue with IE


    [http://dockhawk.com/default_test.html]
    > On my page under the paragraph "Find a Marine Terminal, Dock, Wharf,
    > Berth" there is a large gap like there is a <br />. The paragraph
    > itself has only 0.1em set as a bottom margin and the form below it
    > with text box has no margin at all.


    You mean you didn't set any margins to the form. Can you try setting
    it explicitly?
    form{margin:0;}

    Every browser has its own default margins on elements - the only way
    to get them to be the same cross-browser, is to explicitly set them.

    --
    Els http://locusmeus.com/
     
    Els, Sep 10, 2008
    #2
    1. Advertising

  3. Lanmind

    Kiran Makam Guest

    Form is a block-level element (http://htmlhelp.com/reference/html40/
    block.html), and block-level elements put a new line before them. This
    could be the reason for the gap.

    Move your 'P' tag containing 'Terminal, Dock, Wharf, Berth' inside
    'Form' tag.

    Code:
    ----------
    <div id="mainsearch">
    <form method="get" action="currentphp.php"
    onsubmit="getMarks(this.action + '?name=' + escape(this.name.value));
    return false;">
    <p id="search_descript">
    Find a Marine Terminal, Dock, Wharf, Berth
    </p>
    <input name="name" value="" maxlength="256" size="50" type="text">
    <br>
    <input value="Dockhawk Search" type="submit">
    </form>
    </div>
    ---------------

    Kiran Makam
     
    Kiran Makam, Sep 10, 2008
    #3
  4. Lanmind

    Kiran Makam Guest

    Alternatively you can make the 'Form' inline by setting the display
    attribute.

    <form .... style="display: inline">
    ....
    </form>

    Kiran Makam
     
    Kiran Makam, Sep 10, 2008
    #4
  5. Lanmind

    Els Guest

    Els, Sep 10, 2008
    #5
  6. Lanmind

    Andy Guest

    "Lanmind" <> wrote in message
    news:...
    > Hello all,
    >
    > I have an issue with IE below that I tried posting in a CSS group but
    > it didn't post:
    >
    > On my page under the paragraph "Find a Marine Terminal, Dock, Wharf,
    > Berth" there is a large gap like there is a <br />. The paragraph
    > itself has only 0.1em set as a bottom margin and the form below it
    > with text box has no margin at all.
    >
    > I'm not sure why this large gap is there in IE but I'd like to
    > minimize it. It's not there in Mozilla or Chrome.
    >
    > Here is my page: http://dockhawk.com/default_test.html
    >
    > Here is the CSS: http://dockhawk.com/default_test.css
    >
    > Thank you for help.


    Hi,

    I saved the source, tried it locally in IE7 and then modified this bit of
    code...

    <div id="mainsearch">
    <form method="get" action="currentphp.php" onsubmit="getMarks(this.action +
    '?name=' + escape(this.name.value)); return false;">
    <div id= "search_descript">Find a Marine Terminal, Dock, Wharf, Berth</div>
    <input type="text" name="name" value="" maxLength=256 size=50 />
    <br />
    <input type="submit" value="Dockhawk Search" />
    </form>
    </div>

    .... it now works as you intended.


    Hope this helps

    Andy
     
    Andy, Sep 10, 2008
    #6
  7. Lanmind

    Lanmind Guest

    On Sep 10, 2:28 am, "Andy" <> wrote:
    > "Lanmind" <> wrote in message
    >
    > news:...
    >
    >
    >
    > > Hello all,

    >
    > > I have an issue with IE below that I tried posting in a CSS group but
    > > it didn't post:

    >
    > > On my page under the paragraph "Find a Marine Terminal, Dock, Wharf,
    > > Berth" there is a large gap like there is a <br />. The paragraph
    > > itself has only 0.1em set as a bottom margin and the form below it
    > > with text box has no margin at all.

    >
    > > I'm not sure why this large gap is there in IE but I'd like to
    > > minimize it. It's not there in Mozilla or Chrome.

    >
    > > Here is my page:http://dockhawk.com/default_test.html

    >
    > > Here is the CSS:http://dockhawk.com/default_test.css

    >
    > > Thank you for help.

    >
    > Hi,
    >
    > I saved the source, tried it locally in IE7 and then modified this bit of
    > code...
    >
    > <div id="mainsearch">
    > <form method="get" action="currentphp.php" onsubmit="getMarks(this.action +
    > '?name=' + escape(this.name.value)); return false;">
    > <div id= "search_descript">Find a Marine Terminal, Dock, Wharf, Berth</div>
    > <input type="text" name="name" value="" maxLength=256 size=50 />
    > <br />
    > <input type="submit" value="Dockhawk Search" />
    > </form>
    > </div>
    >
    > ... it now works as you intended.
    >
    > Hope this helps
    >
    > Andy


    Thanks everyone,

    Els I explicitly set the margins on the form and it worked : ) I
    didn't know browsers set their own margins for elements. In Firefox I
    could see there was no margin on the form using Firebug but I couldn't
    use it in IE.

    Are there other elements off the top of your head, you routinely need
    to set the margins for like this? Any recommendations on an IE
    debugger? I've only used Firebug and it's taken awhile to get used to.

    Thanks again everyone.
     
    Lanmind, Sep 10, 2008
    #7
  8. Lanmind

    Els Guest

    Lanmind wrote:

    > Els I explicitly set the margins on the form and it worked : ) I
    > didn't know browsers set their own margins for elements. In Firefox I
    > could see there was no margin on the form using Firebug but I couldn't
    > use it in IE.


    Yup, something I run into all the time. There is a developer toolbar
    for IE though, but I find it cumbersome compared to Firebug.

    > Are there other elements off the top of your head, you routinely need
    > to set the margins for like this? Any recommendations on an IE
    > debugger? I've only used Firebug and it's taken awhile to get used to.


    <http://www.microsoft.com/downloadS/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en>

    As for elements: UL and LI are quite different between different
    browsers too. Some people prefer to zero out everything, and call it a
    'reset stylesheet': http://meyerweb.com/eric/tools/css/reset/
    The idea is that that starts you off with all margins and paddings 0,
    (as well as some other useful settings that tend to differ), and then
    you specifically set them where needed, and then they're all the same
    in all browsers.

    --
    Els http://locusmeus.com/
     
    Els, Sep 10, 2008
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Rob Nicholson
    Replies:
    3
    Views:
    836
    Rob Nicholson
    May 28, 2005
  2. Replies:
    0
    Views:
    2,511
  3. Replies:
    1
    Views:
    813
    Bertilo Wennergren
    Nov 24, 2003
  4. Hardeep Rakhra
    Replies:
    8
    Views:
    661
    Hardeep Rakhra
    Jan 15, 2004
  5. Ken Varn
    Replies:
    0
    Views:
    530
    Ken Varn
    Apr 26, 2004
Loading...

Share This Page