DIV CSS Problem mit IE

R

ric

Angesehenes Mitglied
Hallo zusammen

bin gerade eine layoutvorlage am erstellen und baue jetzt
seit x stunden am selben layer gerüst rum. kann mir einer
erklären wo der fehler liegt ?

bitte weder bilder noch schrift etc. beachten, es dient lediglich
der kontrolle.

mein problem.
div #header und div #nav werden im IE ca. 2px zu hoch angezeigt.

firefox, netscape, opera machen eine korrekte darstellung.
man erkennt es im IE gut an der grün bzw. orangeeingefärbten flächen.

iregndwie muss ich diese pixel im IE raushaben. auf css ohne tabellen verzichte
ich auf keinen fall. wenn jemand helfen kann ? VIELEN DANK im voraus.

Beislspielsite: Test Seite

Am besten mal mit IE und Netscape betrachten. Thanks.

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> <head>
<title>vorlage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">

body {
background-color: #000000;
font-size: 12px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#FFFFFF;
padding:0px;
margin:0px;
}

#header{
width: 800px;
background-color: #00CC33;
margin: 0px;
padding: 0px;
clear: both;
height: 130px;
}

#center{
position: absolute;
top: 50%;
left: 50%;
height: 1px;
width: 1px;
}

#center2{
position: absolute;
top: -300px;
left: -400px;
height: 600px;
width: 800px;
}

#content{
height: 600px;
width: 800px;
}

#inhalt {
width: 518px;
margin: 0px;
padding: 0px;
float: right;
background-color: #990000;
height: 401px;
}

#links {
left: 0px;
width: 282px;
margin: 0px;
padding: 0px;
float: left;
background-color: #003366;
height: 401px;
}

#footer {
left: 0px;
width: 800px;
background-color: #333333;
margin: 0px;
padding: 0px;
clear: both;
height: 25px;
}

#header p{
padding: 0px;
}

p {
padding: 6px;
margin: 0px;
}

#nav {
width: 800px;
min-width: 800px;
background-color: #FF9900;
margin: 0px;
padding: 0px;
clear: both;
height: 44px;
}


</style>
</head>

<body>
<div id="center">
<div id="center2">
<div id="header">
<img src="images/top-trio-eden.jpg" width="800" height="130">
</div>

<div id="nav">
<img src="images/the_very_very_very_best_og.gif" width="282" height="44">
</div>

<div id="links">
gdhdgdgh
</div>

<div id="inhalt">
<p><b>content</b> <br>
oieujfvjdisfjv odofg odog sdofjgods oigjiodsfjigo dfhgdsfhghdsfhog hdfhg iodfhg
iodfhg odsfh ghdsh g
oieujfvjdisfjv odofg odog sdofjgods oigjiodsfjigo dfhgdsfhghdsfhog hdfhg

</p>
</div>

<div id="footer">
<p><strong>Created by OO Tech GmbH</strong></p>
</div>
</div>
</div>

</body>
</html>




grüsse ric
 
CODE #center{
position: absolute;
top: 50%;
left: 50%;
height: 0px;
width: 0px;
}



bei dier steht da
height: 1px;
width: 1px;

setz das mal auf null
 
@lanza thanks !!

vielen dank, leider löst dass das problem nicht.
dieser div wird eh auf 800 x 600 gespreizt, habe es
aber natürlich versucht.

egal ob ich den auf 0 pixel oder auf 10 oder 50 setz. immer
genau das selbe resultat.

weitere ideen ?
würde mich freuen.


 
bei inhalt und links steht dan ebenfalls noch

height: 401px;

mal auf 400 gehen
 
thx

aber die 401 ergebeb sich aus:

Gesamthöhe: 600 px
- #header 130 px
- #nav 44 px
- #footer 25 px

= #inhalt # links 401 px

PS: habe es mit 400 probiert... funzt leider nid.

mir die haare ausreiss.... smile

grüsse ric
 
fragen wier mal so welchen IE hatt er den den ältere Ausgaben von IE haben Probleme mit css


oder gib mal bei deinen Bildern noch border="0"
 
Version 6.0.2999 SP2

PS: Border 0 bei den images.

WOW habe ich gedacht... dass ist es. leider war's nicht sooooooooo
 
Ich hätte leider noch eine Möglichkeit.
Du bekommst es nicht so im IE hin, wie du es willst.
Der IE kennt einfach einige Befehle nicht und deshabl stellt er es falsch da.
Da kann man nichts machen.

Der "neue" IE kennt 2 verscheidene Moden.
In dem einen kennt er die neuen richtigen CSS Befehle.
Du bekommst den IE in den Quirly Modus indem du im <head> Bereich den W3c.org Tag machst.
 
dan habe ich im Moment auch keinen Plan mehr
ab IE 6 gibts eigentlich keine Probleme

ich hätte ja nun fast darum gewetet das es am bild border liegt

aber nochn versuch mach die größenangabe vom bild 1 px kleiner und border 0
 
Die Lösung des Problems ist ganz einfach, aber auch extrem idiotisch...

Bei den img-Tags muss es folgendermaßen aussehen:
QUOTE <div id="header">
<img src="images/top-trio-eden.jpg" width="800" height="130"></div>

<div id="nav">
<img src="images/the_very_very_very_best_og.gif" width="282" height="44"></div>


Also das abschließende div-Tag ohne Zeilenumbruch direkt hinter dem img-Tag,
 
CODE

<body>
<div id="center">
<div id="center2">
<div id="header">
<img src="images/top-trio-eden.jpg" width="800" height="130">
</div>

<div id="nav">
<img src="images/the_very_very_very_best_og.gif" width="282" height="44">
</div>



noch ne andere Bilvariante brobiers mal so


CODE

<body>
<div id="center">
<div id="center2">
<div id="header">
<img src="images/top-trio-eden.jpg" style="float:right;width:800px; height:80px;margin-top:0px;">
</div>

<div id="nav">
<img src="images/the_very_very_very_best_og.gif" style="float:right;width:282px; height:44px;margin-top:0px;">
</div>



 
SMILE die idiotenlösung ??? versteh ich nicht, aber

FUNKTIONIERT

DANKE Euch....

@Mike ........das löste das Problem...

CODE

<div id="header">
<img src="images/top-trio-eden.jpg" width="800" height="130"></div>

<div id="nav">
<img src="images/the_very_very_very_best_og.gif" width="282" height="44"></div>




DANKE, grüsse Euch
Ric
 
Sie müssen sich einloggen oder registrieren, um hier antworten zu können.
Zurück
Oben