✔ Link klappt nicht im Firefox

Status
Nicht offen für weitere Antworten.
0

08154711

Erfahrenes Mitglied
Hallo,
Ich habe ein kleines Bild, das beim Anklicken darunter dann grösser erscheint. Beim IE bleibt das Bild :) beim FF ist es nur solange da, solange man die Maustaste gedrückt hält.:confused:
Hier der Code
Code: 
@charset "utf-8";
/* CSS Document */
#foto {
	position:relative;
	top:50px;
	left:-184px;
	width:75px;
	background-color:#fff;
}
#foto a.p1, #menu a.p1:visited {
	display:block;
	width:158px;
	height:118px;
	text-decoration:none;
	background: #000000;
	top:0;
	left:0;
	border:0;}
#foto a img {
	border:1px solid silver;}
#foto a.p1:link {
	text-decoration:none; 
	background-color:#8c97a3; 
	color:#000000;}
#foto a .large {
	display:block; 
	position:absolute; 
	width:0; 
	height:0; 
	border:0; 
	top:0; 
	left:0;}
#foto a.p1:active .large {
	display:block;
	position:absolute;
	top:250px;
	width:600px;
	height:450px;
	border:5px solid silver;
	margin-left: -430px;}
Danke
 
Hi,

das Verhalten vom Firefox ist da völlig regelkonform, denn die :active-Pseudoklasse gilt nunmal bei gedrückter Maustaste.

Ansonsten versuch es unter Hinzunahme der :focus-Pseudoklasse, wie sie z.B. Stu Nicholls in seiner Gallery einsetzt.
 
Hi
Habe mal den Quelltext analysiert aber sehe da nicht durch. Meines Wissens interpretiert der IE :focus = :active, wie interpretiert das dann der FF oder brauch man da einen Trick :confused:
Gruß
 
Dann hast du wohl das Stylesheet nicht richtig bzw. vollständig analysiert, denn der Autor verwendet beide Pseudoklassen, darum sprach ich auch gestern Abend von der "Hinzunahme" der :focus-Pseudoklasse.

Hier mal der relevante Auszug aus dem Quellcode:

Code: 
a.gallery:active, a.gallery:focus { }

a.gallery:active span, a.gallery:focus span { }

a.gallery:active span img, a.gallery:focus span img { }

Demnach müsste es bei dir so lauten:

Code: 
#foto a.p1:active .large, #foto a.p1:focus .large { }
 
Hi Maik,
Danke hat geklappt - jetzt ist aber folgendes Problem . Wenn das fenster aufgeht - kleine Auflösung - muss das Bild gescrollt werden, allerdings geht der Container nicht mehr über die gesamte Höhe obwohl
min-height:100%;
height:auto !important;
height:100%;
dazu kommt noch das bei einem click im viewport das Bild beim IE verschwindet und im FF nicht..
hier mal der gesamte Code
Code: 
@charset "utf-8";
/* CSS Document */

html, body {
	height:100%;
	margin:0;
}
body {
	margin:0;
	padding:0;
	height:100%;
	background-image:url(../img/background.gif);
	background-repeat:repeat;
}
#container {
	border-left:solid #fff 1px;
	border-right:solid #fff 1px;
	position:relative;
	margin:0 auto;
	width:964px;
	min-height:100%;
	height:auto !important;
	height:100%;
	background-image:url(../img/background-container.jpg);
	background-repeat: repeat-y;
}
.content {
	width:700px;
	border:#FFFF00 1px solid;
	margin-left:200px;
	margin-top:0;
}
.p {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	text-align:justify;
	color:#FFFFFF;
	margin:50px 50px 0 250px;
}
.navigation {
	float:left;
	width:180px;
	margin-top:20px;
}
.indexhaus {
	float:right;
	margin:50px 50px 15px 25px;
	border: 1px solid silver;
}
.imgmit, .imgchild, .imgimp, .imgbabysit, .imgmit .imgvor {
	margin:50px 50px 15px 25px;
	border: 1px solid silver;
	float: right;
	padding: 1px;
}
.underline {
	font-size: 14px;
	color: #FFCC00;
	font-weight: bold;
	text-decoration: underline;
}

.td1 {
	clear:both;
	margin-right:50px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#FFFFFF;
	text-align:center;
	margin-left:55px;
	border:#054362 inset 1px;
}
.tablecolor1 {
	background-color:#054362;
}
.tablecolor2 {
	background-color: #054370;
}
.titel {
	font-size: 12px;
	font-weight: bold;
	color: #FFCC00;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align: left;
	margin-left: 250px;
	margin-top: 50px;
}
.titelunderline {
	font-size: 13px;
	font-weight: bold;
	color: #FFCC00;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align: left;
	margin-left: 250px;
	margin-top: 50px;
	text-decoration: underline;
}
 
Zuletzt bearbeitet:
Kannst du mal einen Link zur Seite nennen, damit man sich das direkt und näher anschauen kann?
 
Hallo,
Nein Link ist leider nicht möglich.Habe es anders gelöst,so das beim das beim überfahren das grosse Bild genau über dem Kleinen Bild liegt. Poste trotzdem mal den Code
HTML: 
<!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>Test</title>
<link href="../../css/layout.css" rel="stylesheet" type="text/css" />
<link href="../../css/navigation.css" rel="stylesheet" type="text/css" />
<link href="../../css/foto.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.Stil1 {
	font-size: 14px;
	font-weight: bold;
}
-->
</style>
</head>
<body>
<div align="right" id="container"><img src="../../img/plogo.gif" alt="logo" /><br />
  <div><img src="../../img/preiswerte-Wohnungen.gif" alt="img" /></div>
  <div class="menu">
    <ul>
      <li><a href="stolpen21.html">Stolpener Str. 21</a></li>
      <li><a href="stolpen23.html">Stolpener Str. 23</a></li>
      <li><a href="nieder23.html">Niederstr. 23</a></li>
      <li><a href="teich13.html">Teichstr. 13</a></li>
      <li><a href="hufeland11.html">Hufelandstr. 11</a></li>
      <li><a href="hufeland13.html">Hufelandstr. 13</a></li>
      <li><a href="hufeland19.html">Hufelandstr. 19</a></li>
      <li><a href="#">Alte Arnsdorfer Str. 1</a></li>
      <li><a href="stolpen18.html">Stolpener Str. 18</a></li>
      <li><a href="stolpen20.html">Stolpener Str. 20</a></li>
      <li><a href="stolpen22.html">Stolpener Str. 22</a></li>
      <li><a href="villawolmsdorf.html">Villa in Kleinwolmsdorf</a></li>
      <li><a href="../../index.html">Übersicht</a></li>
    </ul>
  </div>
  <div id="foto"> <a class="p1" href="#" title="thumbnail image"><img src="../img/altearnsdorfer.jpg" title="Thumbnail image" alt="Thumbnail image" /><span><img class="large"  src="../img/altearnsdorferbig.jpg" alt="imgbig" /></span></a> </div>
  <p class="titel">Alte Arnsdorfer Str. 1</p>
  <p class="pmiet"><span class="Stil1">Historisch wohnen - Kinder erwünscht</span> <br />
    <br />
    Teil eines ehemaligen Rittergutes mit 6 Wohneinheiten<br />
    <br />
    Freie Wohnungen: 1 <br />
  </p>
</div>
<!--end container -->
</body>
</html>
Code: 
@charset "utf-8";
/* CSS Document */
#foto {
	position:relative;
	top:50px;
	left:-164px;
	width:75px;
	background-color:#fff;
}
#foto a.p1, #menu a.p1:visited {
	display:block;
	width:160px;
	height:120px;
	text-decoration:none;
	top:0;
	left:0;
	border:0;
	background-color: #000000;
}
#foto a img {
	border:1px solid silver;}
#foto a.p1:link {
	text-decoration:none; 
	background-color:#8c97a3; 
	color:#000000;}
#foto a .large {
	display:block; 
	position:absolute; 
	width:0; 
	height:0; 
	border:0; 
	top:0; 
	left:0;}
#foto a.p1:active .large, #foto a.p1:focus .large {
	/*#foto a.p1:active .large {*/
	display:block;
	position:absolute;
	top:0px;
	/*top:150px;*/
	width:600px;
	height:450px;
	border:5px outset silver;
	margin-left: -450px;
	z-index: 100;
}
Das ist die Anweisung für fie foto.css
 
Hi,

der Grund für das "Abschneiden" des DIVs #container bei verkleinertem Browserfenster und vertikalen Scrollen der Seite ist der Umstand, dass das DIV #foto incl. seiner Kinderelemente aus dem normalen Textfluss herausgenommen wird, und somit zwischen ihm und seinem Elternelement #container keine "Beziehung" mehr besteht, was zur Folge hat, dass der/die Browser das Element nicht nach unten verlängern, wenn das große Bild im zu kleinen Viewport eingeblendet wird.

Du kannst dies ganz einfach überprüfen, indem du das DIV #foto vollständig rausnimmst oder es im Quellcode auskommentierst, und anschliessend das Browserfenster soweit verkleinerst, dass darin senkrecht geschrollt werden muss - und siehe da, der Rahmen des DIVs #container wird nun vom Browser nicht mehr beschnitten.

Dass der IE sich nicht wie seine Konkurrenten verhält, sollte eigentlich mittlerweile auch bis zu dir durchgedrungen sein. Er gibt nunmal den gesetzten Fokus eines Elements umgehend auf, wenn mit der Maus ein weiteres Mal in das Fenster geklickt wird. Bei der erwähnten Bilder-Galerie von Stu Nicholls bleibt sich der IE treu, und blendet das Grafikelement ebenfalls wieder aus, sobald die Maustaste erneut gedrückt wird.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück