nicht angemeldet
Firefox ignoriert height Angabe in % bei Bildern
Hi,
ich entwerfe gerade meine erste Webseite mit CSS und bisher ging das ganze auch ganz gut.
Nun wollte ich in einem DIV ein Bild mittels <img> einbetten. Die Bildhöhe sollte 95% sein, die Breite sollte sich dann ja automatisch berechnen.
Das ganze funktioniert bei mir im IE7 und Opera prima, nur im Firefox wird die Höhenangabe einfach ignoriert und das Bild in der vollen Auflösung dargestellt.
Unter
könnt Ihr es einfach mal selbst mit den beiden Browsern anschauen.
Das ist der Code der Seite
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Magie - Freude am Staunen . Escamoteur Tom Bennett</title>
<link href="stilvorlage800.css" rel="stylesheet" type="text/css" />
<script src="screensize.js" type="text/javascript">
</script>
</head>
<body>
<div id="wrapper">
<div id="hintergrund_links"></div> <!-- Ende div id="hintergrund_links" -->
<div id="inhalt"> <!-- Anfang Container Mittelflügel-->
<div id="oben">
<a id="impressum" href="impressum.htm">Impressum</a>
<div id="fotosundzitate">
<div id="zitatSpalte">
<!-- #BeginEditable "fotosundzitate" -->
<!-- #EndEditable -->
</div>
<div id="bildSpalte">
<div id="bildBox_oben">
<img id="bild_oben" src="bilder/index/IMG_2317.jpg" alt="Bild Tom Bennet mit Salz">
</div>
</div>
</div>
</div> <!-- oben -->
<div id="linkleiste">
<div id="magie_escamoteur"><!-- Anfang Seitentitel: liegt im Linkcontainer & wird von dort aus nach oben verlagert -> damit Bild von Schrift überlagert werden kann -->
</div>
</div> <!-- Linkleiste -->
<div id="unten">
</div>
</div>
<div id="hintergrund_rechts"> </div> <!-- Ende div id="hintergrund_rechts" -->
</div> <!-- Ende wrapper -->
<script src="correctTopOfWrapper.js" type="text/javascript" ></script>
</body>
</html>
Und das das CSS
@charset "utf-8";
/* CSS Document */
*{
margin:0;padding: 0;border:0;
}
body
{
background-color:#000000;
color:#FFFFFF;
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size:8pt;
line-height:130%;
margin:0;
height:100%;
top:0;
}
#wrapper
{
background-color: transparent;
padding: 0;
border: 0;
margin: 0px 0 0 -616px;
position:absolute;
top: 0;
left: 50%;
width: 1232px;
height: 700px;
}
table /*alle Tabellen: ohne Rand, ohne Zellzwischenraum*/
{
border-collapse:collapse;
border-spacing:0;
}
td {
vertical-align:top;
}
img
{
border:0;
}
/*Grobstrukur: Flügel (Schein) --> Inhalt GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG: */
#inhalt /*Container Mittelflügel*/
{
border:0;
background-color:#4f1e1d;
background-image:url(bilder/verlauf_800h.jpg); background-repeat: repeat-x;
left:104px;top:0px;
width: 1024px; height:700px;
display:block;
text-align:left;
position:absolute;
}
#hintergrund_links /* Linker Flügel "Lampe" */
{
background-image:url(bilder/hintergrund_links800.jpg); background-repeat:no-repeat;
left:0;top:0;
width:104px; height:700px;
margin-left:0;
display: block;
position:absolute;
border:0;
}
#hintergrund_rechts /* Rechter Flügel "Lampe" */
{
background-image:url(bilder/hintergrund_rechts800.jpg); background-repeat:no-repeat;
left:1128px;top:0;
width:104px; height:700px;
display: block;
position:absolute;
border:0;
}
#oben, #unten, #linkleiste
{
width:100%;
display:block;
}
#oben
{
height:385px;
border:0;
}
#linkleiste
{
height:62px; /*50*/
border:0;
background-image:url(bilder/linie_768.gif); background-repeat:repeat-x;
overflow:hidden;
}
#unten
{
border:0;
height: 200px;
overflow:auto;
}
a:link#impressum, a:visited#impressum, a:focus#impressum, a:active#impressum { color:#7D7D7D;} /*inaktiv grau*/
a:hover#impressum { color:#fef000;} /*aktiv gelb*/
#impressum
{
display:block; text-align:right; border:0; padding-right:28px; height:20px; overflow:hidden;
padding-top:4px;
top:0;
right:0;
z-index:2;
position:absolute;
} /*immer*/
#fotosundzitate, #galerie /*Box für alle Inhalte (außer Impressum) oben*/
{
width:100%;
height:385px;
display:block;
/*margin-top:-20px; = Höhe des Impressums, auf -20, damit Impressum das Foto überlagern kann*/
}
#zitatSpalte
{
display:block;
border:0;
width:33.33%;
height:100%;
position:relative;
float:left;
}
#bildSpalte
{
display:block;
border:0;
width:66.66%;
height:100%;
float:left;
}
#bildbox_oben
{
display:block;
width:683px; height:385px;
text-align:center;
overflow:hidden;
position:static;
right:0;
}
#bild_oben
{
right:0;
height:95%;
width:auto
}
/*MAGIE - FREUDE AM STAUNEN .... Escamoteur Tom Bennett:*/
#magie_escamoteur /*Box für beide*/
{
width:100%;
height:25px;
margin-top:-25px;
font-family: Georgia; text-transform:uppercase; letter-spacing:1pt; text-decoration:none; font-style:normal;
color:#fef000;
}
/*Grobstrukur: im Inhalt oben, Mitte, unten*/
Gruß
Thomas
-
Hi,
Das ganze funktioniert bei mir im IE7 und Opera prima, nur im Firefox wird die Höhenangabe einfach ignoriert
nein, sie wird absolut korrekt zu height:auto berechnet, weil das Elternelement height:auto besitzt.
Das ist der Code der Seite
Bitte poste nie wieder eine derartige Code-Masse.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Ok, hat sich gerade geklärt, die ID im CSS war falsch geschrieben. Danke trotzdem, hat mich auf die richtige Spur gebracht.
Das ist der Code der Seite
Bitte poste nie wieder eine derartige Code-Masse.
Sorry, werd ich nicht wieder machen.
-