Darstellungsproblem im Firefox

dErFeLe · #1 (**permalink**) 17.09.2007, 13:15

Hallo @all!

Bin derzeit dabei ein template für joomla zu erstellen und habe dort ein darstellungsproblem im firefox.

wenn das menü an der seite länger als der verfügbare bereich wird, soll ich der "content" container in die länge ziehen, dies klappt allerdings nur im ie (getestet mit version 7). bei erweiterung des contents klappt das alles wunderbar.

Die Adresse unter der das problem zu betrachten ist ist Sickheadinsane - Hauptseite, dort lässt sich ja auch mit "firebug" der code betrachten ansonsten hier nochmal der code:

Zitat:

<!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" lang="<?php echo _LANGUAGE; ?>" xml:lang="<?php echo _LANGUAGE; ?>">
<head>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php if ($my->id) { initEditor(); } ?>
<?php mosShowHead(); ?>
<script type="text/javascript"> </script>

<link href="templates/<?php echo $cur_template; ?>/css/template_css.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
<?php mosLoadModules('banner');?>
<div id="banner" ><?php mosLoadModules('top');?></div>
<div id="content"><div id="content2"><div id="content3">
<div id="menu"><?php mosLoadModules('left');?><?php mosLoadModules('right');?></div>
<div id="main"><?php mosLoadModules('user1');?><?php mosMainBody();?><?php mosLoadModules('user2');?></div>
<div style="clear:both"></div></div></div></div>
<div id="bottom"><?php mosLoadModules('bottom');?></div>
<div id="footer"><?php include_once( $mosConfig_absolute_path .'/includes/footer.php' );?></div>
</div>
</body>
</html>

Zitat:

body {
background-image:url(../images/acorn.gif);
font-size: 11px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
padding:0px;
margin:0px;
}

h1 {font-size:16px;color:#638CB2; margin-bottom:0px;text-shadow:#FFFFFF 2px;}
h2 {font-size:15px;color:#000000;}
h3 {font-size:14px;color:#000000;}

a:link, a:visited, a:active, a:hover{
text-decoration:none;
font-weight:bold;
color:#5F8AAF;
font-size:11px;
}

a:active, a:hover{
text-decoration:none;
color:#FE8B1F;
}

#aussenlinks{
float: left;
}

#aussenrechts{
float: right;
}

#container {
width:813px;
margin-left: auto;
margin-right: auto;
}

#banner {
height:101px;
background-image:url(../images/top.png);background-repeat:no-repeat;
background-color:#564F4F;
}

#content {
width: 813px;
min-height:355px;
position:relative; top:0px; left:0px; z-index:1;
background-image:url(../images/main2.png);background-repeat:repeat-y;background-color:#564F4F;
}

#content2 {
width: 813px;
min-height:355px;
position:relative; top:0px; left:0px; z-index:2;
background-image:url(../images/main1.png);background-repeat:no-repeat;
}

#content3 {
width: 813px;
min-height:355px;
position:relative; top:0px; left:0px; z-index:3;
background-image:url(../images/main3.png);background-repeat:no-repeat;background-position:0px bottom;
}

#menu {
width:124px;
float: right;
}

#main{
padding-left:105px;
padding-right:199px;
}

#bottom {
height:100px;
background-image: url(../images/bottom.png);background-repeat:no-repeat;
background-color:#564F4F;
}

#footer {
height:28px;
background-image: url(../images/footer.png);background-repeat:no-repeat;
}

/*Module*/
table.moduletable {
width:100%;
text-align:left;
font-family:Verdana;
font-size:11px;
margin-bottom: 10px; /*Abstand zwischen den Modulen 10px*/
padding-left:1px; /*Abstand zum Rahmen*/
padding-right:1px;
}

table.moduletable th { /*Modulberschrift*/
text-align:left;
font-family:Verdana;
font-size:13px;
color:#FFFFFF;
}

table.moduletable td { /*Modultext, nicht Content*/
text-align:left;
font-size:11px;
font-family:Verdana;
}

/*Content*/
td { /*Contenttext, nicht Modul*/
font-family:Verdana;
font-size:11px;
}

th {
font-family:Verdana;
font-size:11px;
}

p {
font-family:Verdana;
font-size:11px;
}

.contentheading, .componentheading {
font-weight:bold;
font-family:Verdana;
font-size:12px;
color:#FE8B1F;
}

.small {
font-family:Verdana;
font-size:11px;
color:#888888;
}

.createdate {
font-family:Verdana;
font-size:11px;
color:#888888;
}

/*Navigationsmen*/
a.mainlevel:link, a.mainlevel:visited, a.mainlevel:hover {
display:block;
text-decoration:none;
font-weight:bold;
color:#5F8AAF;
font-size:11px;
}

a.mainlevel:active, a.mainlevel:hover, a.mainlevel:focus {
display:block;
background-color:#FE8B1F;
color:#FFFFFF;
font-size:11px;
text-decoration:none;
font-weight:bold;
}

a.sublevel:link, a.sublevel:visited, a.sublevel:hover {
display:block;
text-decoration:none;
font-weight:bold;
color:#5F8AAF;
font-size:11px;
}

a.sublevel:active, a.sublevel:hover, a.sublevel:focus {
display:block;
background-color:#FE8B1F;
color:#FFFFFF;
font-size:11px;
text-decoration:none;
font-weight:bold;
}

schonmal danke für die hoffentlich zahlreiche hilfe
MfG dErFeLe

fricca · #2 (**permalink**) 17.09.2007, 13:27

Es ist der IE, der's falsch macht.
Deinem Float fehlt noch das Clear. Lies bitte die Artikel unter FAQ Punkt 2.

dErFeLe · #3 (**permalink**) 17.09.2007, 15:23

danke für die schnelle hilfe, das (und auch die faq) habe ich wohl übersehen..

dadurch ergibt sich jetzt allerdings ein anderes problem, der "content" bereich erweitert sich immer noch nicht, also das menü sprengt im schlimmsten fall einfach den kompletten rahmen. dachte sowas hätte ich dadurch verhindert, dass ich den text und menü bereich ein einen extra div gepackt hätte.

habe den quelltext im ersten post auf den aktuellen stand gesetzt

fricca · #4 (**permalink**) 17.09.2007, 15:26

Das Clear muss innerhalb des Elements stattfinden, das das Float einschließen soll -- nicht danach und nicht am Element selbst. Das bringt genau gar nichts.
Schau dir den Artikel "Containing Floats" nochmal genau an.

dErFeLe · #5 (**permalink**) 17.09.2007, 15:59

sorry, aber irgendwie steige ich da nicht durch. habe die von dir vorschgeschlagenen seiten nochmal studiert, aber wenn ich "clear:both;" am ende des containers einfüge der das ganze umschließen soll (also content, content2, content3 oder auch nur einen von denen) passiert genau gar nichts.

also nochmal vereinfacht:
content, content2, content3 (ich weiss verwirrend benannt aber das war halt eine eintwicklung) beherbergen die container main (für den text) und menu (für das menü), der container menu fällt aber noch unten raus (auch wenn nicht mehr umbrochen wird) und ragt in den container bottom.

fricca · #6 (**permalink**) 17.09.2007, 16:07

Dein Element #bottom (als Clear-Element!) muss sich innerhalb von #container3 befinden, nicht außerhalb.
Lies den Artikel nochmal. Vollzieh die Codebeispiele nach.

dErFeLe · #7 (**permalink**) 17.09.2007, 16:57

so, habe es jetzt endlich hinbekommen, habe wie es auch auf der von dir vorgeschlagenen seite stand ein "<div style="clear:both"></div>" einfach direkt vor das ende des "content" containers gesetzt. habe halt irgendwie die wald vor lauter bäumen nicht gesehen und wollte das clear:both in eine der vorhandenen divs einfügen, aber das hat im endeffekt nur noch zu mehr problemen geführt...

danke für deine hilfe fricca

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Darstellungsproblem mit Radiobuttons und Checkboxen unter Firefox	winkler67	CSS	4	06.10.2008 09:50
Darstellungsproblem im Firefox	Tamlin	CSS	9	28.06.2006 18:02
Darstellungsproblem Safari vs. Firefox	tmconnect	CSS	5	23.06.2006 10:28
Darstellungsproblem IE + Firefox	timzim	CSS	1	16.11.2005 22:12
Darstellungsproblem in Firefox	scorpy	CSS	6	17.10.2005 13:53