Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 14.03.2011, 14:38
RaphaelWerz RaphaelWerz ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.03.2011
Beiträge: 2
RaphaelWerz befindet sich auf einem aufstrebenden Ast
Ausrufezeichen Weite meines Divs zieht in Google Chrome nicht

Hallo liebe Forenmitglieder

Ich habe ein kleines Problem in Google Chrome.

Und zwar will ich, auf meiner Seite auf der rechten Seite eine kleine section einbauen, welche beim darüberfahren sich öffnet und Bilder von Socialcommunitis anzeigt und beim verlassen der section sich wieder schliesst.

dies hab ich ich nun in kleinen Testseite realisiert und beim Browser-Kompatibilitätstest ist mir aufgefallen das es die "geschlossene" section im google chrome falsch darstellt.

wäre extrem froh, wenn Ihr mir hier weiterhelfen könntet warum dies so ist.

für ein Erfolgreiches helfen hab ich hier noch die SourceCodes meines kleinen Test's:

HTML File:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<link href="css/styles.css" rel="stylesheet" media="screen" type="text/css">
<script src="js/jQuery.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
</head>
<body id="body" class="home">
<div id="share">
<div id="collapse">
S<br>
H<br>
A<br>
R<br>
E
</div>
<div id="share-collection">
<ul>
<li><img src="images/facebook.png" id="test"></img></li>
<li><img src="images/twitter.png"></img></li>
<li><img src="images/myspace.png"></img></li>
</ul>
</div>
</div>
</body>
</html>


CSS File, welches sich im Ordner: "CSS" befindet:
* { margin: 0; padding: 0; border: 0; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #666; line-height: 1.6em; }

/**tag's**/
li { list-style: none; padding-left: 14px; background-repeat: no-repeat; background-position: 0 0.25em; }

/** share section**/
#share {height: 110px; width: auto; overflow: hidden; position: fixed; right: 0; top: 42%; background-image: url("../images/bg_share.png");}
#collapse {height: 100px; width: 30px; overflow: hidden; float: left; text-align: center; margin: 5px 0px;color: white;}
#share-collection {height: 100px; width: 0px; overflow: hidden; float: left; color: black; margin: 5px 0px;}
#share-collection li {margin: 4px 0px;}

und zum schluss noch das js file welches sich im Ordner: "js" befindet
( function($) {
$(function(){
$('#share').hover(function(){
$('#share-collection',this).animate({
width:'50px'}, {
duration:200,
queue:false
});
},function(){
$('#share-collection',this).animate({
width:'0'}, {
duration:200,
queue:false
});
});
$('#test').click(function(){
window.open('http://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.clavisit.com&t=HTML% 20Open%20Link%20in%20New%20Window&src=sp','popUpWi ndow','height=300,width=600,left=50,top=50,resizab le=yes,scrollbars=1,toolbar=no,menubar=no,location =no,directories=no,status=no');
});
});

})(jQuery);
Mit Zitat antworten
Sponsored Links