Results 1 to 5 of 5

Thread: [RESOLVED] How to make a div become inline-block?

  1. #1
    Join Date
    Mar 2008

    resolved [RESOLVED] How to make a div become inline-block?

    I want to use javascript to add all the formatting to the div. It works in Firefox but not in other browsers. IE and Chrome keep linebreaks around the div for some reason. What am I doing wrong?
    HTML Code:
    	text on left.
    	<a href='#'><div id='icon'></div></a>
    	text on right.
    		var o=document.getElementById('icon');
    		o.style.width = '44px';
    		o.style.height = '44px';
    		o.style.display = 'inline-block';
    		o.style.backgroundColor = '#888';
    Also if I remove the anchor it works in Chrome for some reason.

  2. #2
    Join Date
    Sep 2008
    Akron, OH
    Some browsers render extra margin and padding on elements by default. Using a CSS reset should help eliminate cases like this.

    I'm going to guess if you add some CSS to your anchor, it should correct it.

    <a href='#' style="display: block;"><div id='icon'></div></a>
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  3. #3
    Join Date
    Mar 2008
    Nope, didn't do anything.
    I just want to change a div from block to inline-block, but Chrome and IE don't seem to support something this simple?

  4. #4
    Join Date
    Jul 2003
    The City of Roses
    The HTML spec doesn't actually allow DIV elements inside A elements, so my guess is that you'll never get predicable behavior across browsers. You'll probably need to change that DIV to a SPAN.

  5. #5
    Join Date
    Mar 2008
    Wow I didn't know that. I've been using divs inside anchors all over the place for years. I'll use spans, thanks

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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