...

View Full Version : Inline DIV



cssretard
07-18-2007, 04:04 PM
Viewing the following code in both IE and Firefox, you will see a difference. FF adds space between the black and green borders, to the top. In fact, all of the content nested inside the outer DIV seems to be pushed down a couple of pixels. Can anyone tell me, which set of style rules will make these element appear in FF as they do in IE? I want the div to be correctly inline with the text flow, not pushed down. Please help, I'm about to put this stuff in a table but would rather avoid it if possible.

Text before...<div id="Div1" style="display: inline; border: solid 1px Green;
margin: 0px; padding: 0px;"><input name="TextBox1" type="text" id="Text1" style="margin: 0px! important; border: solid 1px Black;
vertical-align: middle;"></input><button type="button" style="margin: 0px; border: solid 1px Black; border-left: 0px none;
padding: 0px; background-color: #D4D0C8; background-image: url(images/drop_down_arrow.gif);
background-position: center; background-repeat: no-repeat; width: 18px; height: 20px;
vertical-align: middle;" onclick="
this.style.height = document.getElementById('TextBox1').offsetHeight + 'px';
document.getElementById('TextBox1').style.marginTop = '-50px;'"></button></div>...text after.

ahallicks
07-18-2007, 04:09 PM
For a start you don't close an input in that way, it's a self closing tag so you need /> at the end to close it properly (in XHTML, HTML just > will do) and second, are you sure you don't want the second one to be and <input type="button" />???

cssretard
07-18-2007, 05:09 PM
For a start you don't close an input in that way, it's a self closing tag so you need /> at the end to close it properly (in XHTML, HTML just > will do)

I know, I know. I changed it just to see if it had an impact. The textbox will render as a node without CDATA (<input .../>).


and second, are you sure you don't want the second one to be and <input type="button" />???

No. In order to get the button to render with the correct background color, image, positioning, etc. in Safari2, I have to use a button element that closes with </button>. Either way, changing that tag doesn't solve this problem.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum