IE7 inline elements 2

ca8msm · Dec 10, 2007

Why doesn't IE7 wrap the inline elements down to the next line, and what would be a suggested workaround (maybe floating instead)?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
  #container {width:300px;}
  h2 {display:inline;padding:5px;}
</style>
<title>Title</title>
</head>

<body>

<div id="container">
	<h2>Test</h2>
	<h2>Test</h2>
	<h2>Test</h2>
	<h2>Test</h2>
	<h2>Test</h2>
	<h2>Test</h2>
	<h2>Test</h2>
	<h2>Test</h2>
	<h2>Test</h2>
	<h2>Test</h2>
	<h2>Test</h2>
	<h2>Test</h2>
	<h2>Test</h2>
	<h2>Test</h2>
	<h2>Test</h2>
	<h2>Test</h2>
	<h2>Test</h2>
	<h2>Test</h2>
	<h2>Test</h2>
	<h2>Test</h2>
	<h2>Test</h2>
	<h2>Test</h2>
	<h2>Test</h2>
	<h2>Test</h2>
	<h2>Test</h2>
</div>

</body>
</html>

-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]

traingamer · Dec 10, 2007

...(maybe floating instead)?

Maybe add float (rather than instead).

Code:

...
  h2 {display: inline; padding:5px; float:left;}
...

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

ca8msm · Dec 10, 2007

Yes, I could add a float, I was just curious as to why it happened (is Firefox correct in it's assumption that they should wrap?) and what you all thought was the best workaround?

-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]

Vragabond · Dec 10, 2007

AFAIK, they do not wrap because of the padding. IE believes that by adding padding the elements should no longer wrap. I have no idea why that is. On the other hand, you have a lot of white-space between the tags, so I would expect them to wrap. Have you tried it with a native inline element as well, such as span, strong or similar?

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

ca8msm · Dec 10, 2007

Hmmm, even if I remove the padding, IE7 doesn't wrap them? Using a native inline element does produce the correct layout I wanted and in my specific case, a span tag should be just as relevant, so I may go with that approach or the float method suggested earlier.

Thanks for the responses.

-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

IE7 inline elements 2

ca8msm

Programmer

traingamer

Programmer

ca8msm

Programmer

Vragabond

Programmer

ca8msm

Programmer

Similar threads

Part and Inventory Search

Sponsor