✔ Hintergrund zieht im FF nicht mit

kiesha · 16. September 2007

Hi,

ich bin zur Zeit dabei meine erste Website in Joomla! zu erstellen. Soweit klappt alles ganz gut bloß leider schaffe ich es einfach nicht, dass der Firefox die Hintergrundbilder auf die komplette Größe der DIV's zieht. Betroffen sind die Hintergründe im #maincontent und #navileft. Im IE klappt es wunderbar.

Hier einmal mein PHP Quelltext:

PHP:

<table class="bgtable" width="1000" align="center">
<tr>
	<td width="*"></td>
	<td width="940" align="center">
		<div id="header">
		</div>
		
		<div id="wrappertop">
		</div>
		
		<div id="wrappermid">
				<div id="navileft">
						<div id="navboxtop">
						
						</div>
						<div id="navboxmid">
						<?php mosLoadModules ( 'left', -1); ?>
						</div>
						
						<div id="navboxbot">
						</div>					
						
						<div id="navboxtop2">
						
						</div>
						<div id="navboxmid">
						<?php mosLoadModules ( 'left2', -1); ?>
						</div>
						
						<div id="navboxbot">
						</div>
						<div id="clearright">&nbsp;</div>	
				</div>
				
				<div id="maincontent">
						<div id="mctop">
						</div>
						
						<div id="mcmid">
							<div id="content">
								<?php mosMainBody(); ?>
							</div>
							
							<div id="clearall">
							&nbsp;
							</div>	
						</div>
						
						<div id="mcbot">
						</div>
						<div id="clearleft">
						&nbsp;
						</div>
				</div>
				
		</div>
		<div id="clearboth">
		&nbsp;
		</div>
		<div id="wrapperbot">
		
		</div>
	
	</td>
	<td width="*"></td>
</tr>
</table>

und der CSS Code

Code:

/* CSS Document */

/* LAYER 1 - Body and Background Table ************
____________________________________________________________________*/

BODY	{
	margin: 0px;
	background-color: #000000;
	color: #cccccc;
	font-family: eurostile, arial, helvetica;
	}

.bgtable	{
	background-image: url(../images/bg/pagebg.jpg);
	text-align: center;
	border: 0px;
	padding: 0px;
	height: auto;
	}

/* LAYER 2 - Header, Wrapper Styles with first layer of graphics
_______________________________________________________________________/*
#header	{
                width: 940px;
	height: 200px;
	background-image: url(../images/header.jpg);
	background-repeat: no-repeat;
	}


#wrappertop              {
		width: 940px;
		height: 20px;	
		background-image: url(../images/bg/wrapperbgtop.jpg);
		background-repeat: repeat-x;
		}

#wrappermid	{
		width: 940px;
		min-height: 500px;	
		background-image: url(../images/bg/wrapperbgmid.jpg);
		background-repeat: repeat-y;
		}

#wrapperbot	{
		width: 940px;
		height: 50px;	
		background-image: url(../images/bg/wrapperbgbot.jpg);
		background-repeat: repeat-x;
		}

/* LAYER 3 - Navigation Left with Background -  Maincontent Structur for Background Images
_______________________________________________________________________*/

#navileft	{
	margin-left: 40px;
	width: 185px;
	float: left;
	height: auto;
	padding-top: 0px;
	margin-bottom: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	text-align: left;
	}

#maincontent	{
		background-image: url(../images/bg/maincontbg.jpg);
		background-repeat: repeat-y;
		width: 675px;
		height: auto;
		overflow: visible;
		float: left;
		padding-left: 0px;
		padding-top: 0px;
		padding-right: 0px;
		padding-bottom: 0px;
		text-align: left;
		min-height: 500px;
		}

/* LAYER 4 - Main Content Background - Where mcmid (main content middle) encloses content = mosmainbody *******
Navbox set where navigation background is set - navboxmid = holds navigation
_____________________________________________________________________*/

#mctop	{
	width: 650px;
	height: 26px;
	margin-left: 27px;
	background-image: url(../images/bg/mctop2.jpg);
	background-repeat: no-repeat;
	}

#mcmid	{
                width: 650px;
	height: auto;
	background-image: url(../images/bg/mcmid2.jpg);
	background-repeat: repeat-y;
	margin-left: 27px;
	text-align: center;
	position: relative;
	}

#mcbot	{
	width: 650px;
	height: 23px;
	background-image: url(../images/bg/mcbot2.jpg);
	background-repeat: no-repeat;
	margin-left: 27px;
	}

#content	{
	width: 650px;
	height: auto;
	float: left;
	padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	margin-left: 5px;
	text-align: left;
	}

#navboxtop	{
		background-image: url(../images/nav_mm2.jpg);
		background-repeat: no-repeat;
		height: 77px;
		}

#navboxtop2	{
		margin-top: 10px;
		background-image: url(../images/nav_om.jpg);
		background-repeat: no-repeat;
		height: 77px;
		}
						
#navboxmid	{
		background-image: url(../images/bg/navboxbgmid.jpg);
		background-repeat: repeat-y;
		height: auto;
		padding-left: 40px;
		overflow: hidden;
		}

#navboxbot	{
		background-image: url(../images/bg/navboxbgbot.jpg);
		background-repeat: no-repeat;
		height: 17px;
		}

/* Clears */

#clearall		{
		clear: both;
		height: 1px;
		width: 100%;	
		}

#clearboth		{
		clear: both;
		height: 1px;
		width: 100%;
		background-image: url(../images/bg/wrapperbgmid.jpg);
		background-repeat: repeat-y;
		}							

#clearleft		{
		clear: left;
		height: 1px;
		width: 100%;
		background-image: url(../images/bg/blackbg.jpg);
		background-repeat: repeat-y;
		}

#clearright		{
		clear: right;
		height: 1px;
		width: 100%;
		background-image: url(../images/bg/blackbg.jpg);
		background-repeat: repeat-y;
		}
						
*/ News Format Content in Joomla!*/
.news	{
	width: 590px;
	background-image: url(../images/bg/newsbg.jpg);
	padding-top: 10px;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
	border-top: 4px solid #404040;
	border-left: 4px solid #303030;
	border-right: 2px solid #8c8c8c;
	border-bottom: 2px solid #8c8c8c;
	}

Ich habe bereits mit sämtlichen clears versucht die Darstellung richtig hinzubekommen aber bin mit meinem Latein am Ende. Die Site ist bereits online aber noch in Bearbeitung:
http://www.hellsscourge.com

Die angezeigten CSS und PHP Codes sind von meiner lokalen Installation. Die Codes der online Site enthalten die Clear Tags nicht.

Ich hoffe ihr könnt mir weiterhelfen. Vielen Dank im Voraus.

Maik · 16. September 2007

Hi,

die Floatumgebung innerhalb des DIVs #wrappermid muss zum Abschluß noch "gecleart" werden, damit der Inhalt den unteren Elementrand nicht überlappt - siehe hierzu auch http://positioniseverything.net/easyclearing.html.

Code:

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Die Klasse .clearfix wird dann zusätzlich im DIV #wrappermid aufgerufen:

Code:

<div id="wrappermid" class="clearfix"> ... </div>

Zudem muss eine ID in einem Dokument eindeutig sein, und darf darin nicht mehrmals vergeben werden. Aus diesem Grund müssen die doppelt vorhandenen IDs #navboxmid und #navboxbot in Klassen umgewandelt werden.

kiesha · 17. September 2007

Es hat super geklappt. Danke vielmals für die schnelle Antwort und den zusätzlichen Tipps.

✔ Hintergrund zieht im FF nicht mit

kiesha

Grünschnabel

Maik

kiesha

Grünschnabel

Neue Beiträge