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

**curtay** · 05-23-2011 04:18 PM

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:

<html>
<body>
	text on left.
	<a href='#'><div id='icon'></div></a>
	text on right.
	
	<script>
		var o=document.getElementById('icon');
		o.style.width = '44px';
		o.style.height = '44px';
		o.style.display = 'inline-block';
		o.style.backgroundColor = '#888';
	</script>
</body>
</html>

Also if I remove the anchor it works in Chrome for some reason.

**cbVision** · 05-23-2011 04:53 PM

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.

Code:

<a href='#' style="display: block;"><div id='icon'></div></a>

**curtay** · 05-23-2011 05:39 PM

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?

**Jeff Mott** · 05-23-2011 05:43 PM

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.

**curtay** · 05-23-2011 05:58 PM

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: [RESOLVED] How to make a div become inline-block?

Thread Tools

Display

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

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions