✔ Probleme mit Div + CSS

Status
Nicht offen für weitere Antworten.
A

AlexMineiro

Grünschnabel
Hi,

komme leider nicht mehr weiter und zwar gibts es 2 Probleme

Der Header ist in 3 Div Container verteilt mit jeweils einem bg-bild aber ie zeigt nen abstand an. Das zweite Problem ist das ich mit 1px height div machen will und ie will das auch ned annehmen hoffe einer kann meine 2 probleme lösen. CSS und HTML sind valid :(

HTML
Code: 
<body>

  <!-- Header Anfang -->
  <div class="header">
    <div id="header-links" style="background-image:url(Bilder/header_left.gif);"></div>
    <div id="header-rechts" style="background-image:url(Bilder/header_right.gif);"></div>
    <div id="header-mitte" style="background-image:url(Bilder/header_middle.gif);"></div>
  </div>
  <!-- Header Ende -->
  
  <!-- Navigation Anfang -->
  <div class="navigation">
    <div id="navi-links">
		<div class="weisse-linie" style="background-color:#ffffff;"></div>
     	<div id="navi-mitte" style="background-color:#15304e;padding-left:8px;line-height:23px; color:#ffffff;">News | Baseball Links | Kontakt | G&auml;stebuch | Bannertausch | Partnerseiten | Disclaimer</div>
		<div class="weisse-linie" style="background-color:#ffffff;"></div>
	</div>
    <div id="navi-rechts" style="background-image:url(Bilder/dj_bottom.gif);"></div>
  </div>
  <!-- Navigation Ende -->
  
  <!-- Livescore Anfang -->
  <div class="livescore">
  	<div id="livescore-links" style="background-image:url(Bilder/livescore_bg.gif);">
		<div id="zeit" style="color:#15304e;"><?echo "".date("d.m.Y")." - ".date("H:i")." Uhr";?></div>
		<div id="live" style="color:#15304e; text-align:center"><u>Aktuelle Livescores</u>&nbsp;&nbsp;&nbsp;+++&nbsp;&nbsp;New York Yankees - San Diego Padres 15:3&nbsp;&nbsp;&nbsp;+++&nbsp;&nbsp;New York Mets - Chicaco Cubs 1:3&nbsp;&nbsp;&nbsp;+++&nbsp;&nbsp;</div>
	</div>
	<div id="livescore-rechts" style="background-color:#ffffff;"></div>
	<div id="livescore-mitte" style="background-color:#15304e;"></div>
  </div>
  <!-- Livescore Ende -->
  
  <!-- Menue+Content Anfang -->

  <!-- Menue+Content Ende -->
  
</body>

CSS
Code: 
body {
	background-image:url(Bilder/background.gif);
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight:bold;
	}	
.header {
	width:900px;
	height:123px;
	}
#header-links {
	float:left;
	width:300px;
	height:123px;
	}
#header-rechts {
	float:right;
	width:300px;
	height:123px;
	}
#header-mitte {
	height:123px;
	}
.navigation {
	width:900px;
	height:26px;
	}
#navi-links {
	float:left;
	width:834px;
	height:26px;
	}	
#navi-rechts {
	float:right;
	width:66px;
	height:26px;
	}
.weisse-linie {
	width:834px;
	height:1px;
	}
#navi-mitte {
	width:826px;
	height:24px;
	}
.livescore {
	width:900px;
	height:20px;
	}
#livescore-links {
	float:left;
	width:898px;
	height:20px;
	}
#livescore-rechts {
	float:right;
	width:1px;
	height:20px;
	}
#livescore-mitte {
	height:20px;
	}
#zeit {
	float:left;
	width:150px;
	padding-left:8px;
	line-height:20px;
	font-size:10px;
		}
#live {
	float:right;
	width:732px;
	padding-right:8px;
	line-height:20px;
	font-size:10px;
	}

Bild wie das aussieht gibts hier: http://img1.myimg.de/fehler932.gif

Ich danke schonmal im vorraus :)
 
Erweiter mal das Stylesheet mit folgenden Angaben:

Code: 
#header-links {
float:left;
width:300px;
height:123px;
margin-right: 0 !important;
margin-right: -3px; /* Für IE */
}
#header-rechts {
float:right;
width:300px;
height:123px;
margin-left: 0 !important;
margin-left: -3px; /* Für IE */
}

.weisse-linie {
width:834px;
height:1px;
font-size: 0;
}
 
ok

Header Problem ist gelöst

#header-links {
float:left;
width:300px;
height:123px;
margin-right:0;
margin-right: -3px; /* Für IE */
}
#header-rechts {
float:right;
width:300px;
height:123px;
margin-left: 0;
margin-left: -3px; /* Für IE */
Zum Vergrößern anklicken....

Leider ist das Problem mit dem 1px height nicht ganz gelöst .. es ist zwar dünner geworden aber immer noch ned 1px hoch :(

siehe http://img1.myimg.de/fehler28bb.gif
 
Zuletzt bearbeitet:
Okay..., der IE benötigt noch zusätzlich line-height:1px und ein erzwungenes Leerzeichen &nbsp; in dem Element:

Code: 
.weisse-linie {
        width:834px;
        height:1px;
        line-height:1px;
        font-size: 0;
        }
HTML: 
<div class="weisse-linie" style="background-color:#ffffff;">&nbsp;</div>
 
hi,

mit dem &nbsp; hats auch ned funktioniert jedoch mit paar google versuchen hab ich nun das problem mit "overflow:hidden" gelöst. Danke dir für die Mühe :)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück