nicht angemeldet
Box wird "falsch" dargestellt im Firefox
MudGuardHallo.
Bei meinem Code wird die #textbox im Firefox falsch dargestellt. Sie schiebt ganz nach oben hinter die #bannerbox. Im IE wirds richtig dargestellt. Leider hab ich auch nach langem suchen noch immer nichts gefunden.
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<link href="kendl.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="mainbox">
<div id="logobox"></div>
<div id="bannerbox"></div>
<div id="navigationbox1"></div>
<div id="navigationbox2"></div>
<div id="navigationbox3"></div>
<div id="textbox"></div>
<div id="contactbox"></div>
</div>
</body>
</html>
CSS Datei:
body {margin:0; padding:0;}
.text {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #000;
}
.texthover {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #000;
font-weight: bold;
}
.H1menu {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
color: #FFF;
font-weight: bold;
}
-
Hallo Pez,
ich fürchte da musst du schon den kompletten HTML / CSS Code zeigen, da dir sonst niemand helfen kann.
Die in deiner CSS Datei definierten Klassen kommen in deinem HTML Code nicht vor, die in deinem HTML Code geschriebenen Elemente kommen in deinem CSS Code nicht vor.
MfG,
McKentire
-
komisch hatte eigentlich alles eingefügt - egal
body {margin:0; padding:0;}
.text {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #000;
}.texthover {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #000;
font-weight: bold;
}.H1menu {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
color: #FFF;
font-weight: bold;
}.linkmenu {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #FFF;
font-weight: bold;
}.linkbody {
font-family: Arial, Helvetica, sans-serif;
font-size: 0,8em;
color: #000;
font-style: bold;
}#mainbox {
width: 64em;
height: 48em;
background-color: #FFF;
}#logobox {
width: 16em;
height: 6em;
background-image: url(logo.jpg);
background-repeat: no-repeat;
margin: 1em 0 1em 1em;
float: left;
display: inline;}
#bannerbox {
width: 45em;
height: 6em;
background-image: url(banner.jpg);
background-repeat: no-repeat;
margin: 1em 0 1em 1em;
float:left;}
#navigationbox1 {
width: 16em;
height: 10em;
background-image: url(box.jpg);
background-repeat: no-repeat;
border: 0em;
padding: 0em;
margin: 0em 1em 1em 1em;
float: left;
clear: both;
display: inline;
}#navigationbox2 {
width: 16em;
height: 10em;
background-image: url(box.jpg);
background-repeat: no-repeat;
border: 0em;
padding: 0em;
margin: 0em 1em 1em 1em;
float: left;
clear: both;
display: inline;
}#navigationbox3 {
width: 16em;
height: 10em;
background-image: url(box.jpg);
background-repeat: no-repeat;
border: 0em;
padding: 0em;
margin: 0em 1em 0em 1em;
float: left;
clear: both;
display: inline;
}#textbox {
width: 32em;
height: 32em;
background:yellow;
border: 0em;
padding: 0em;
margin: 0em 1em 1em 17em;
}-
#textbox {
width: 32em;
height: 32em;
background:yellow;
border: 0em;
padding: 0em;
margin: 0em 1em 1em 17em;
}Du möchtest doch einen vertikalen Abstand zum oberen Fensterrand, richtig?
Die Reihenfolge der margin-Attribute sieht folgendermaßen aus:
margin: top bottom left right;
Demnach hättest du als Abstand zum oberen Rand 0em. Kann mich auch irren, aber probier hier mal einen anderen Wert einzusetzen! ;)
MfG,
McKentire
-
Danke für Antwort.
Leider war es das aber nicht. Demnach würde ja dann die erst Navibox auch ganz oben stehen oder?
-
Hi,
margin: 0em 1em 1em 17em;
Du möchtest doch einen vertikalen Abstand zum oberen Fensterrand, richtig?Die Reihenfolge der margin-Attribute sieht folgendermaßen aus:
margin: top bottom left right;
Nein.
top right bottom left (oben beginnend im Uhrzeigersinn)
fehlende Werte werden vom gegenüberliegenden Rand ergänzt bzw. von top, wenn kein gegenüberliegender Rand definiert ist.cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
top right bottom left (oben beginnend im Uhrzeigersinn)
fehlende Werte werden vom gegenüberliegenden Rand ergänzt bzw. von top, wenn kein gegenüberliegender Rand definiert ist.In der Tat, sorry! :)
McKentire
-
Was trotzdem nicht das Problem löst. Wenn ich was bei top eingebe, dann bleibt die Box an selber Ort und Stelle, ABER sie schiebt sich samt logobox und bannerbox runter im Firefox. Im IE ist dann nur die textbox nach unten verschoben, was ja auch nicht richtig ist.
-
Hi,
Wenn ich was bei top eingebe, dann bleibt die Box an selber Ort und Stelle, ABER sie schiebt sich samt logobox und bannerbox runter im Firefox.
Sie bleibt, wo sie ist, während sie sich verschiebt?
Im IE ist dann nur die textbox nach unten verschoben,
Vermutlich weil der IE mit collapsing margins nicht richtig umgehen kann ...
was ja auch nicht richtig ist.
Genau, das ist falsch.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
ich habs jetzt einfach mal zur veranschaulichung hochgeladen:
http://pezbaer.pe.funpic.de/
css hab ich jetzt so verändert zum testen:
#textbox {
width: 32em;
height: 32em;
background:yellow;
border: 0em;
padding: 0em;
margin: 15em 1em 1em 17em;
} -
Vermutlich weil der IE mit collapsing margins nicht richtig umgehen kann ...
Dem schließe ich mich an. Als Faustregel solltest du im Zweifelsfall eher Firefox vertrauen, da er weniger tolerant gegenüber invalidem HTML ist als der IE, der so ziemlich jeden HTML Code gerade biegt.
Meiner Meinung nach solltest du die einzelnen div-Blöcke besser absolut positionieren, damit hast du volle Kontrolle und verrutschen können Sie auch nicht so schnell.
MfG,
McKentire
-
Hab jetzt den Versuch mal bei der Textbox gemacht:
#textbox {
width: 32em;
height: 32em;
background:yellow;
border: 0em;
padding: 0em;
margin: 5em 1em 1em 17em;
position: absolute;
}Firefox passt, IE rutscht sie jetzt ganz nach rechts irgendwo hin.
-
Hab jetzt den Versuch mal bei der Textbox gemacht:
#textbox {
width: 32em;
height: 32em;
background:yellow;
border: 0em;
padding: 0em;
margin: 5em 1em 1em 17em;
position: absolute;
}Firefox passt, IE rutscht sie jetzt ganz nach rechts irgendwo hin.
<body>
<div id="logobox"></div>
<div id="bannerbox"></div>
<div id="navigationbox1"></div>
<div id="navigationbox2"></div>
<div id="navigationbox3"></div>
<div id="textbox"></div>
<div id="contactbox"></div></body>
Ich würde den Hauptrahmen weglassen, alle Elemente absolut positionieren und per left und top Attribute passgenau positionieren. Der Haken ist, dass du natürlich das Layout noch einmal überarbeiten müsstest. ;)
MfG,
McKentire
-
Du meinst also die mainbox komplett weglassen und alle anderen genau positionieren
wenns dann funktioniert, nehm ich die arbeit gern auf mich, dass ich alles nochmal ändere; lieber gleich am anfang als nach stundenlanger arbeit
-
Du meinst also die mainbox komplett weglassen und alle anderen genau positionieren
wenns dann funktioniert, nehm ich die arbeit gern auf mich, dass ich alles nochmal ändere; lieber gleich am anfang als nach stundenlanger arbeit
Die absolute Positionierung funktioniert mit Sicherheit.
Am besten bzw. übersichtlichsten ist es wenn du alle Elemente mit top und left ausrichtest und mit width und height anpasstst.
MfG,
McKentire
-
Danke für die Tipps.
Dann mal ran an die Arbeit. :)
Ihr hört sicher wieder von mir. ;)-
Danke für die Tipps.
Dann mal ran an die Arbeit. :)
Ihr hört sicher wieder von mir. ;)Dessen bin ich mir sicher. ^^
Hoffentlich jedoch positives! :)MfG,
McKentire
-
-
-
-
-
-
Hallo McKentire,
Meiner Meinung nach solltest du die einzelnen div-Blöcke besser absolut positionieren, damit hast du volle Kontrolle und verrutschen können Sie auch nicht so schnell.
Meiner Meinung nach sollte man das "alles absolut positionieren" dringend sein lassen. Dadurch entstehen nämlich ziemlich zwangsläufig später Effekte wie sich überlappende Elemente oder abgeschnittene Texte.
Jonathan
-
-
-
-
-
-
-