• Locked
No replies
Fri, 2009-03-27 15:37
aigarinsh
Offline
Regular
Last seen: 11 years 30 weeks ago
Timezone: GMT+2
Joined: 2004-09-13
Posts: 34
Points: 2

Is this IE bug or what? I'm already sick and tired with IE6 and more and more not implementing fixes for it, but seems like IE7 is only just a bit better. Haven't tested on IE8. Try this: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
 
<html>
 
<head>
<title>IE7 bug</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
#menu
{
	width:700px;
	background:red;
}
 
.menitem
{
	float:left;
	padding:0 10px;
	background:green;
}
 
.menitem a
{
	display:block;
	text-align:center;
	text-transform:uppercase;
	text-decoration:none;
	font-size:12px;
	font-weight:bold;
	background:yellow;
}
.menitem a {color:#808080;}
.menitem a:hover {color:#5e5e5e;}
 
.menmark
{
	width:17px;
	height:11px;
	margin:7px auto 0 auto;
	background:cyan;
}
 
#menu2 .menmark
{
	margin:0;
}
</style>
</head>
 
<body>
 
<div id="menu">
	<div class="menitem"><a href="#">Lorem ipsum</a><div class="menmark"></div></div>
	<div class="menitem"><a href="#">Lorem ipsum</a><div class="menmark"></div></div>
	<div class="menitem"><a href="#">Lorem ipsum</a><div class="menmark"></div></div>
	<div class="menitem"><a href="#">Lorem ipsum</a><div class="menmark"></div></div>
</div>
 
<br><br><br><br><br><br>
 
<div id="menu2">
	<div class="menitem"><a href="#">Lorem ipsum</a><div class="menmark"></div></div>
	<div class="menitem"><a href="#">Lorem ipsum</a><div class="menmark"></div></div>
	<div class="menitem"><a href="#">Lorem ipsum</a><div class="menmark"></div></div>
	<div class="menitem"><a href="#">Lorem ipsum</a><div class="menmark"></div></div>
</div>
 
</body>
 
</html>

Or you can see it here: http://www.martinanams.lv/forumpics/ie7.html

As you can see IE7 takes into account margin:auto for .menmark and streches the whole .menitem
If I remove that margin:auto as you can see the second example, all is fine. I could create table there, but still may be there are any Fixes? Ideas?

Top
Tags: