Forum Moderators: not2easy
After sweating the past few hours to fix this bug, I'm giving up and asking you guys.
I have a parent DIV with a red border which contains some A-tags, which have been set to display: block and float: left.
The problem is that IE won't break correctly after the links, which makes it overflow the red border from it's parent.
The following code works in every other browser I test (Firefox 3, Safari 3, Opera 9.5), except for IE7.
Can you guys take a look at the following code and maybe help me out? Thanks a bunch!
Bram
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<style type="text/css">
#mainNavigation { border: 1px solid red; }
#mainNavigation a { display: block; float: left; color: black; padding: 4px 12px 4px 12px; }
.breakClear { clear: both; }
</style>
</head>
<body>
<div id="mainNavigation">
<a href="/1" class="">Link 1</a>
<a href="/2" class="">Link 2</a>
<a href="/3" class="">Link 3</a>
<a href="/4" class="">Link 4</a>
<br class="breakClear" />
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<style type="text/css">
#mainNavigation { border: 1px solid red; list-style: none;}
#mainNavigation li { display: inline;}
#mainNavigation li a {color: black; padding: 0 12px; height: 2em; line-height: 2em;}
</style>
</head>
<body>
<ul id="mainNavigation">
<li><a href="/1" class="">Link 1</a></li>
<li><a href="/2" class="">Link 2</a></li>
<li><a href="/3" class="">Link 3</a></li>
<li><a href="/4" class="">Link 4</a></li>
</ul>
</body>
</html>
[edited by: marcel at 12:50 pm (utc) on July 27, 2008]
@marcel: Thanks! That ís what I meant, but I have found easier solution:
Setting the links to display: inline-block and removing the float works like a charm!
Thanks anyway :)
I would still advise the use of a list though, as it is in effect a list of URLs you are displaying. Here is some more info:
[css.maxdesign.com.au...]
But then my question is: Why is IE such a pain in the ass?
Why is IE such a pain in the ass?
Is this a trick question or simply rhetorical? ;)
Marshall
