niepożądany odstęp 1px w IE

saqio · Post autor: **saqio** » śr mar 21, 2007 12:07 pm

Mam mały problem z wersją xhtml strony. Ważne jest aby była w xhtml ale nie mogę pozbyć się pewnego błędu w IE. Oprawa graficzna strony jest warstwowa. Każda warstwa to oddzielny div, problem w tym że między dwoma takimi sąsiadującymi warstwami pojawia się niewiadomo skąd odstęp 1px. Oba div'y mają ustawione 0 dla margin i padding, pozbylem się zbędnych białych znaków między tymi div'ami i nic. Oczywiście błąd pojawia się tylko w IE.

Tu przedstawiam kod:

Kod: Zaznacz cały

<!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>
  <link rel="stylesheet" type="text/css" href="style.css" />
  <title></title>
</head>
<body>
  <div id="all">
    <img src="img/restauracja.gif" id="logo" />
    <div id="barTop"></div><div id="topBar"></div><div id="line"></div><div id="contentBox">

    </div><div id="line"></div><div id="menuBar">
      <ul id="menu">
        <li><a href="">Restauracja</a></li
        ><li><a href="">Menu</a></li
        ><li><a href="">Piwnica</a></li
        ><li><a href="">Imprezy</a></li
        ><li><a href="">Kontakt</a></li>
      </ul>
    </div><div id="barBottom"></div>
    <div id="imprezySub">
      <ul id="subMenu">
        <li><a href="">Wernisaże</a></li>
        <li><a href="">Koncerty</a></li>
      </ul>
    </div>
  </div>
</body>
</html>

i kod CSS:

Kod: Zaznacz cały

body {
 margin: 0;
 padding: 0;
 background: #28381c url('img/mbg.jpg');
 text-align: center;
 font-size: 0px; }

div {
 margin: 0;
 padding: 0;
 text-align: left; }

div#all {
 margin: 80px auto 0 auto;
 padding: 0;
 width: 755px;
 text-align: center; }

img#logo {
 width: 356px;
 height: 73px;
 border: 0;
 margin: 0 auto 10px auto; }

div#barTop {
 display: block;
 margin: 0;
 padding: 0;
 width: 755px;
 height: 7px;
 background: #28381c url('img/bartop.gif') no-repeat;
 font-size: 0; }

div#topBar {
 display: block;
 margin: 0;
 padding: 0;
 width: 755px;
 height: 18px;
 background: #28381c url('img/barbg.gif') repeat-y;
 font-size: 0; }

div#line {
 display: block;
 margin: 0;
 padding: 0;
 width: 755px;
 height: 1px;
 background: #28381c url('img/line.gif') no-repeat;
 font-size: 0; }

div#contentBox {
 display: block;
 margin: 0;
 padding: 0;
 width: 755px;
 height: 349px;
 background: #28381c url('img/cbg.gif') repeat-y;
 font-size: 0; }

div#menuBar {
 display: block;
 margin: 0;
 padding: 0;
 width: 755px;
 height: 29px;
 background: #28381c url('img/barbg.gif') repeat-y;
 font-size: 0;
 text-align: left; }

div#barBottom {
 display: block;
 margin: 0;
 padding: 0;
 width: 755px;
 height: 5px;
 background: #28381c url('img/barbottom.gif') no-repeat;
 font-size: 0; }

ul#menu {
 margin: 0;
 padding: 6px;}

ul#menu li {
 display: inline;
 margin: 0 20px;
 padding: 0; }

ul#menu li a{
 font-size: 11px;
 font-family: Verdana, Tahoma, sans-serif;
 text-decoration: none;
 color: #eae3c9; }

ul#menu li a:hover{
 font-size: 11px;
 font-family: Verdana, Tahoma, sans-serif;
 text-decoration: none;
 color: #e5c563; }


ul#subMenu {
 margin: 0;
 padding: 0;
 list-style: none; }

ul#subMenu li {
 margin: 0;
 padding: 0; }

ul#subMenu li a{
 display: block;
 width: 100px;
 height: 20px;
 margin: 0;
 padding: 4px 10px;
 font-size: 11px;
 font-family: Verdana, Tahoma, sans-serif;
 text-decoration: none;
 color: #eae3c9;
 background: #1a361d; }

ul#subMenu li a:hover{
 display: block;
 width: 100px;
 height: 20px;
 margin: 0;
 padding: 4px 10px;
 font-size: 11px;
 font-family: Verdana, Tahoma, sans-serif;
 text-decoration: none;
 color: #e5c563;
 background: #1a361d; }

div#imprezySub {
/* display: none; */
 position: relative;
 top: -91px;
 left: 275px;
 z-index: 100; }

Ktoś z was spotka się z tym błędem? Chodzi o odstępy między np. <div id="line"> a tym <div id="contentBox">

saqio · Post autor: **saqio** » wt kwie 03, 2007 7:49 pm

odpowiem sam sobie, moze komus się przyda...

IE ma dość dziwny bug, nie toleruje div-ów wysokości 1px, najmniejszy możliwy w IE to DIV wysokości 2px, gdy nadaje się wysokość 1px, IE wyrównuje sobie wolnym obszarem o wysokości 1px. Jaki jest na to sposób? Przerobić tak layout aby to ominąć

niepożądany odstęp 1px w IE

niepożądany odstęp 1px w IE

Re: niepożądany odstęp 1px w IE