IE style problem

[Lanmind]

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.

 

[Els]

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.

 

[Kiran Makam]

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]

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

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

Kiran Makam

 

[Els]

Form is a block-level element (http://htmlhelp.com/reference/html40/
block.html), and block-level elements put a new line before them.

block-level elements do not "put a new line before them".
If that were true, setting the top margin to 0 would not make a
difference.

Also, please quote the relevant part of the message you are replying
to. http://safalra.com/special/googlegroupsreply/

 

[Andy]

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

 

[Lanmind]

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.

 

[Els]

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/...64-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.