zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Hack

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.03.2008, 18:15
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
  #2 (permalink)  
Alt 28.03.2008, 18:32
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.830
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:04 Uhr.