28.03.2008, 18: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 Geändert von hemfrie (26.03.2012 um 08:33 Uhr) Grund: link geändert 
|
| Sponsored Links |
|
28.03.2008, 18:32
|
||||
|
||||
|
Der Hack nennt sich: Gewohnheiten umstellen!
In den FAQ: http://xhtmlforum.de/40267-faq-h-ufi...ragen-und.html unter Entwicklungsumgebung erfährst du auch wieso.  2. Hack: Dokument validieren: HTML: The W3C Markup Validation Service CSS: http://jigsaw.w3.org/css-validator/ Dein HTML-Dokument enthält 73 Fehler und dein CSS-Dokument auch noch vier.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen! Foren-FAQ
|
| Sponsored Links |
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Css wall hack !! | seryog16 | Offtopic | 6 | 11.08.2009 22:15 |
| IE 6 erkennt seine CSS Datei nicht | Perelina | (X)HTML | 4 | 07.08.2009 19:56 |
| Eric Meyer's CSS | Petty | Ressourcen | 0 | 21.11.2005 09:18 |
| CSS Hack gesucht, wo nur der FX drauf anspringt | Pablo | CSS | 1 | 17.10.2005 18:00 |
| Mozilla ignoriert externes css | DarkWanderer | CSS | 9 | 22.09.2005 12:39 |
Linear-Darstellung
