Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: Inline DIV

  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Inline DIV

    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.

  • #2
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    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" />???
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ahallicks View Post
    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 .../>).

    Quote Originally Posted by ahallicks View Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •