Thema: CSS Hack
Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 28.03.2008, 18:15
dalmidog dalmidog ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.10.2007
Beiträge: 7
dalmidog befindet sich auf einem aufstrebenden Ast
Beitrag CSS Hack

Hallo Leute

Ich habe ein Problem bei einem CSS.

D.h. beim IE 7 scheint alles in Ordnung zu sein aber wenn ich die Seite im Firefox 2.0 anschaue, habe ich zwischen dem "galleryContainer" und "Content" eine Lücke. Ich habe denn Hintergrund mal Grau gemacht so dass man die Lüke sieht.

Dann wollte ich noch fragen ob der "body" so stimmt.

Gibt es hierfür ein CSS Hack, so dass es dann gleich ausschaut wie beim IE 7und könnt Ihr mir dabei helfen? Vielen Dank

Die Seite könnt ihr auch anschauen unter: ADI WEBSITE


und hier noch der CSS und html CODE:

Code:
@charset "utf-8";

body {
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: auto;
	background-color: #666666;
}

#container {
	width: 980px;
	\width: 1000px;
	w\idth: 980px;
	border: 1px solid rgb(63, 70, 65);
	margin-left: auto;
	margin-right: auto;
	padding: 0px;
	height: 580px;
	margin-top: 0px;
	margin-bottom: 0px;
}

#banner {
	padding: 0px;
	margin-bottom: ;
	background-color: rgb(1, 0, 5);
	background-image: url(../img/header.png);
	height: 90px;
}

#navimg {
	padding: 0px;
	background-color: rgb(1, 0, 5);
	height: 54px;
}

#content {
	padding: 0px;
	background-color: rgb(1, 0, 5);
	height: 437px;
	clear: both;
}

#footer {
	clear: both;
	padding: 5px;
	margin-top: ;
			
	background-color: rgb(213, 219, 225);
}


/*Slideshow*/

	#previewPane{
	border:1px solid rgb(63, 70, 65);
	margin-bottom:20px;
	text-align:center;
	vertical-align:middle;
	padding-top:20px;
	position:relative;
	/* CSS HACK */
		height: 388px;	/* IE 5.x */
	height/* */:/**/376px;	/* Other browsers */
	height: /**/376px;
	width: 660px;
	margin-left: 160px;
	margin-top: 20px;
	margin-right: 160px;
				
	}
	#previewPane img{
	line-height:400px;
	}
	#previewPane #largeImageCaption{	/* CSS styling of image caption below large image */
		font-style:italic;
		text-align:center;
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;	/* Font to use */
		font-size:0.9em;
	}
	#galleryContainer{
	height:102px;	/* Height of the images + 2 */
	border:0px solid rgb(63, 70, 65);
	position:relative;
	overflow:hidden;
	padding:1px;
	/* CSS HACK */
		height: 104px;	/* IE 5.x - Added 2 pixels for border left and right */
	height/* */:/**/102px;	/* Other browsers */
	height: /**/52px;
	margin-left: 80px;
	margin-right: 80px;
				
	}
	#arrow_left{
	position:absolute;
	left:0px;
	z-index:10;
	background-color: rgb(1, 0, 5);
	padding:1px;
	}
	#arrow_right{
	position:absolute;
	right:0px;
	z-index:10;
	background-color: rgb(1, 0, 5);
	padding:1px;
	}
	#theImages{
	position:absolute;
	height:50px;
	left:20px;
	width:100000px;
		
	}
	#theImages #slideEnd{
		float:left;
	}
	#theImages img{
	float:left;
	padding:1px;
	filter: alpha(opacity=50);
	opacity: 0.5;
	cursor:pointer;
	border:0px;
	}

	#waitMessage{
		display:none;
		position:absolute;
		left:200px;
		top:150px;
		background-color:#FFF;
		border:3px double #000;
		padding:4px;
		color:#555;
		font-size:0.9em;
		font-family:arial;	
	}
	
	#theImages .imageCaption{
		display:none;
	}


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=utf-8" />
<title>Unbenanntes Dokument</title>
<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="js/image-slideshow.js">
   	/***********************************************************************************************
	
	Copyright (c) 2005 - Alf Magne Kalleland post@dhtmlgoodies.com
	
	UPDATE LOG:
	
	March, 10th, 2006 : Added support for a message while large image is loading
	
	Get this and other scripts at www.dhtmlgoodies.com
	
	You can use this script freely as long as this copyright message is kept intact.
	
	***********************************************************************************************/ 
 
	
	</script>
</head>
<body>
<div id="container">
		<div id="banner">&nbsp;</div>

<div id="navimg"><div id="galleryContainer">
		<div id="arrow_left"><img src="images/arrow_left.gif"></div>
		<div id="arrow_right"><img src="images/arrow_right.gif"></div>
		<div id="theImages">
				<!-- Thumbnails -->
				<a href="#" onclick="showPreview('images/image1_big.jpg','1');return false"><img src="images/image1.jpg"></a>		
				<a href="#" onclick="showPreview('images/image2_big.jpg','2');return false"><img src="images/image2.jpg"></a>		
				<a href="#" onclick="showPreview('images/image3_big.jpg','3');return false"><img src="images/image3.jpg"></a>		
				<a href="#" onclick="showPreview('images/image4_big.jpg','4');return false"><img src="images/image4.jpg"></a>		
				<a href="#" onclick="showPreview('images/image5_big.jpg','5');return false"><img src="images/image5.jpg"></a>		
				<a href="#" onclick="showPreview('images/image6_big.jpg','6');return false"><img src="images/image6.jpg"></a>		
				<a href="#" onclick="showPreview('images/image7_big.jpg','7');return false"><img src="images/image7.jpg"></a>		
				<a href="#" onclick="showPreview('images/image8_big.jpg','8');return false"><img src="images/image8.jpg"></a>
                <a href="#" onclick="showPreview('images/image8_big.jpg','9');return false"><img src="images/bild-leer.jpg"></a>
          		<a href="#" onclick="showPreview('images/image8_big.jpg','10');return false"><img src="images/bild-leer.jpg"></a>
          		<a href="#" onclick="showPreview('images/image8_big.jpg','11');return false"><img src="images/bild-leer.jpg"></a>
          		<a href="#" onclick="showPreview('images/image8_big.jpg','12');return false"><img src="images/bild-leer.jpg"></a>
          		<a href="#" onclick="showPreview('images/image8_big.jpg','13');return false"><img src="images/bild-leer.jpg"></a>
          		<a href="#" onclick="showPreview('images/image8_big.jpg','14');return false"><img src="images/bild-leer.jpg"></a>		
				<!-- End thumbnails -->
				
				<!-- Image captions -->	
				<div class="imageCaption">This is the caption of image number 1</div>
				<div class="imageCaption">This is the caption of image number 2</div>
				<div class="imageCaption">This is the caption of image number 3</div>
				<div class="imageCaption">This is the caption of image number 4</div>
				<div class="imageCaption">This is the caption of image number 5</div>
				<div class="imageCaption">This is the caption of image number 6</div>
				<div class="imageCaption">This is the caption of image number 7</div>
				<div class="imageCaption">This is the caption of image number 8</div>
                <div class="imageCaption">This is the caption of image number 9</div>
                <div class="imageCaption">This is the caption of image number 10</div>
                <div class="imageCaption">This is the caption of image number 11</div>
                <div class="imageCaption">This is the caption of image number 12</div>
                <div class="imageCaption">This is the caption of image number 13</div>
                <div class="imageCaption">This is the caption of image number 14</div>
				<!-- End image captions -->
				
				<div id="slideEnd"></div>
	  </div>
	</div>
</div>

	<div id="content">
    			<div id="previewPane">
		<img src="images/image1_big.jpg" width="580" height="350">
		<span id="waitMessage">Loading image. Please wait</span>
        <div id="largeImageCaption">This is the caption of image number 1</div>   
          </div>
           </div>
			</div>
</body>
</html>

Vielen Dank und Gruss
dalmidog

Geändert von hemfrie (26.03.2012 um 08:33 Uhr) Grund: link geändert
Mit Zitat antworten
Sponsored Links