Abstand zwischen Divs

Status
Nicht offen für weitere Antworten.

thetrue

Mitglied
moin, habe ne Frage:
wovon kommt das? :
firefox: http://the-true.net/misc/b-f-a-j-t/ff.jpg
IE: http://the-true.net/misc/b-f-a-j-t/ie.jpg

in IE ist dieser schwarze Strich da, warum?

hier ist das zu bewundern: http://the-true.net/misc/b-f-a-j-t/style.html

hier der HTML Code:
HTML:
<body>
<div id="head">
	<div id="header_01"></div>
	<div id="header_02"></div>
</div>
<div id="navi">
	<div id="navi_top_bg">
		<div id="navi_top_left"></div>
		<div id="navi_top_right"></div>
	</div>
	<div id="navi_middle_bg">
		<div id="navi_middle_left"></div>
		<div id="navi_middle_right"></div>
	</div>
	<div id="navi_bottom"></div>
</div>
</body>
und css:
Code:
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #000000;
}
body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	color: #213150;
	font-weight: bold;
}
a:link {
	color: #333333;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #000000;
}
a:hover {
	text-decoration: underline;
	color: #999999;
}
a:active {
	text-decoration: none;
	color: #0033CC;
}
#head
{
	width: 792px;
	left:50%;
	right:50%;
	margin-left:auto;
	margin-right:auto;
}
#navi
{
	width: 792px;
	left:50%;
	right:50%;
	margin-left:auto;
	margin-right:auto;
}
#header_01
{
	width: 792px;
	height: 53px;	
	background-image:url(img/header_01.jpg);
	background-repeat:no-repeat;
}#header_02
{
	width: 792px;
	height: 154px;	
	background-image:url(img/header_02.jpg);
	background-repeat:no-repeat;
}
#navi_top_bg
{
	width:792px;
	height:12px;
	background-image:url(img/navi_top_bg.jpg);
	background-repeat:repeat-x;
}
#navi_top_left
{
	width:109px;
	height: 12px;
	float:left;
	background-image:url(img/navi_top_left.jpg);
	background-repeat:no-repeat;
}
#navi_top_right
{
	width:19px;
	height: 12px;
	float:right;
	background-image:url(img/navi_top_right.jpg);
	background-repeat:no-repeat;
}
#navi_middle_bg
{
	width:792px;
	height: 33px;
	background-image:url(img/navi_middle_bg.jpg);
	background-repeat:repeat-x;
}
#navi_middle_left
{
	width:109px;
	height: 33px;
	float:left;
	background-image:url(img/navi_middle_left.jpg);
	background-repeat:no-repeat;
}
#navi_middle_right
{
	width:19px;
	height: 33px;
	float:right;
	background-image:url(img/navi_middle_right.jpg);
	background-repeat:no-repeat;
}
#navi_bottom
{
	width: 792px;
	height: 18px;
	background-image:url(img/navi_bottom.jpg);
	background-repeat:no-repeat;
}
-->
</style>
 
Warum der IE an dieser Stelle im Layout eine 1-Pixel-Lücke aufreisst, kann ich auch nicht nachvollziehen.

Mit der folgenden Regel lässt sie sich aber schliessen:

Code:
#navi_middle_bg
{
        width:792px;
        height: 33px;
        background-image:url(img/navi_middle_bg.jpg);
        background-repeat:repeat-x;
        margin-top: 0 !important;
        margin-top: -1px;
}
 
ok, so gehts aber:
margin-bottom: 0 !important;
margin-bottom: -1px;

doch was bringt das !important?
 
Zuletzt bearbeitet:
Die !important-Regel sorgt in diesem Fall dafür, daß die nicht-IE-Browser (Firefox, Mozilla, usw.) die nachfolgende margin-Angabe ignorieren.
 
Status
Nicht offen für weitere Antworten.
Zurück