| dalmidog |
28.03.2008 17:15 |
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"> </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 |
