Floatende Box @ tutorials.de: Tutorials, Forum & Hilfe

buddha · 20.08.07 09:15

Hallo,
Ich habe 2 floatende Boxen mit left, im FF wird dies richtig dargestellt, im IE hingegen wird die Border vom Container mit herumgelegt und wenn man mit der Maus darüberfährt zieht es den ganzem Rahmen auseinander. Was müsste man am Quellcode ändern damit es wie im FF aussieht?

HTML-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=iso-8859-1" />
<title>testfloat</title>
<style type="text/css">
#container {width: 35%;	border:#776655 solid 1px;	margin: 40px auto auto auto;	background-color:#FFFFFF;}
#box a {	margin-left:100px;	color:#ffffff;	text-align:center;	background: #99CCCC;	font:bold 16px verdana, sans-serif;	text-decoration:none;	display:block;	width:165px;	padding:10px 12px 10px 10px;	border:1px solid #776655;	float: left;	margin-right: -70px;}
#box a:hover {color:black;background: #999999;}
#box a span {display:none;}
#box a:hover span {	display:block;	width:155px;color:black;background:#ffffff;	font:normal 16px courier, sans-serif;	border:1px solid #006600;	margin-top:10px;padding:5px;}
</style>
</head>
<body>
<div id="container" >
  <div id="box">
    <div><a href="http://1.de" target="_blank">1<span><img src="bilder/1.jpg" alt="1" /></span></a></div>
    <div><a href="http://11.de" target="_blank">11<span><img src="bilder/11.jpg" alt="11" /></span></a></div>
  </div>
</div>
</body>
</html>

Maik · 20.08.07 10:07

Hi!

Ich habe 2 floatende Boxen mit left, im FF wird dies richtig dargestellt, im IE hingegen wird die Border vom Container mit herumgelegt

In diesem Fall macht wohl der IE ausnahmsweise mal alles richtig, denn dass es im Firefox so dargestellt wird, liegt zum einen daran, dass die Floatumgebung zum Abschluss nicht "gecleart" wird, und somit der Inhalt der floatenden Elemente den unteren Rand des Elternelements überlappt, zum zweiten an der Kombination der relativen Breitenangaben "35%" für das Elternelement mit den fixen Angaben für die Kinderelemente.

Hier mal zwei Schnappschüsse, wie es derzeit im Firefox um den Rahmen bestellt ist:

(1280*1024px)

(1024*768px)

Wie du siehst, floaten die Boxen auf dem zweiten Bild überhaupt nicht mehr - das tritt nämlich dann ein, wenn das Browserfenster kleiner skaliert wird.

Im IE hingegen werden die Boxen zunächst mal untereinander dargestellt, da sich hier der "Double-Margin-Bug" bei margin-left:100px bemerkbar macht, und die erste Box vom linken Rand des DIVs #container 200px entfernt ist.

buddha · 23.08.07 23:04

Hallo,
Habe es jetzt auch bemerkt mit dem "verschieben". Sinn der Sache ist der das beim hover Effekt pro Box ein Bild(100px x100px) erscheinen soll, was auch geht aber halt nur mit der springenden Border im IE.
Gruß

Maik · 24.08.07 07:24

Hi,

den "springenden" Rahmen kannst du nur umgehen, indem das span-Element mit einer absoluten Positionierung aus dem normalen Textfluss genommen wird, denn ansonsten dehnt es die umschliessende Box #container aus, wenn es eingeblendet wird.

buddha · 25.08.07 13:12

Hallo,
Ich habe das span-element absolut positioniert da ist die "springende " Border weg. Im FF wir d alles richtig angezeigt, im IE hingegen sind die Bilder jetzt nach rechts versetzt. Habe diese dann positioniert dann passt es zwar im IE, im FF sind diese dann rechts versetzt.
Gruß

Maik · 25.08.07 13:17

Hi,

schau dir mal das hier an:

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=iso-8859-1" />
<title>testfloat</title>
<style type="text/css">
#container {
width: 60%;
border:#776655 solid 1px;
margin: 40px auto auto auto;
background-color:#FFFFFF;
}
 
#box a {
margin-left:100px !important;
margin-left:50px;
color:#ffffff;
text-align:center;
background: #99CCCC;
font:bold 16px verdana, sans-serif;
text-decoration:none;
display:block;
width:165px;
padding:10px 12px 10px 10px;
border:1px solid #776655;
float: left;
margin-right: -70px;
position:relative;
}
 
#box a:hover {
color:black;
background: #999999;
}
 
#box a span {
display:none;
}
 
#box a:hover span {
position:absolute;
left:0;
top:30px;
display:block;
width:155px;
color:black;
background:#ffffff;
font:normal 16px courier, sans-serif;
border:1px solid #006600;
margin-top:10px;
padding:5px;
}
 
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
 
.clearfix {display: inline-block;}
 
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
</style>
 
</head>
<body>
 
<div id="container" class="clearfix">
  <div id="box">
    <div><a href="http://1.de" target="_blank">1<span><img src="bilder/1.jpg" alt="1" /></span></a></div>
    <div><a href="http://11.de" target="_blank">11<span><img src="bilder/11.jpg" alt="11" /></span></a></div>
  </div>
</div>
 
</body>
</html>

buddha · 25.08.07 13:55

Hallo,
Danke für die schnelle Antwort, klappt auch.

Muß erstmal den Code ausklabustern.
Gruß

buddha · 27.08.07 12:14

Hallo,
Ich habe die 2.Box mit einem both:clear versehen, jetzt sind diese genau untereinander. Wenn man über die obere box fährt wird das Bild unter der zweiten Box angezeigt- sollte aber darüber liegen. Ich habe deshalb beide mit ein style:z-index ausgezeichnet allerdings ohne Erfolg. Wie bekomme ich die obere Box(beim mouse over) über die untere Box?
Gruß

Maik · 27.08.07 12:17

Hi,

zeig doch bitte mal die überarbeitete Fassung des Quelllcodes.

buddha · 27.08.07 12:26

Code :

#container {
width: 60%;
border:#776655 solid 1px;
margin: 40px auto auto auto;
background-color:#FFFFFF;
}
 
#box a {
margin-left:100px !important;
margin-left:50px;
color:#ffffff;
text-align:center;
background: #99CCCC;
font:bold 16px verdana, sans-serif;
text-decoration:none;
display:block;
width:165px;
padding:10px 12px 10px 10px;
border:1px solid #776655;
float: left;
margin-right: -70px;
position:relative;
}
 
#box a:hover {
color:black;
background: #999999;
}
 
#box a span {
display:none;
}
 
#box a:hover span {
position:absolute;
left:0;
top:30px;
display:block;
width:155px;
color:black;
background:#ffffff;
font:normal 16px courier, sans-serif;
border:1px solid #006600;
margin-top:10px;
padding:5px;
}
 
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
 
.clearfix {display: inline-block;}
.clear { clear:both; z-index:1;}
.style { z-index:10;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

HTML-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=iso-8859-1" />
<title>testfloat</title>
<body>
<div id="container" class="clearfix">
  <div id="box">
    <div class="style"><a href="http://1.de" target="_blank">1<span><img src="1.jpg" alt="1" /></span></a></div>
    <div class="clear"><a href="http://11.de" target="_blank">11<span><img src="11.jpg" alt="11" /></span></a></div>
  </div>
</div>
</body>

Maik · 27.08.07 12:32

z-index funktioniert nur in Verbindung mit der position-Eigenschaft:

Code :

1 2	.clear { [b]position:relative;[/b] clear:both; z-index:1;} .style { [b]position:relative;[/b] z-index:10;}

buddha · 27.08.07 12:53

Ja es geht- habe in einem einfachen Buch über Dreamweaver nachgelesen da stande nix in - nur in Verbindung mit Position, aber in der Bibel stehts

Danke

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

floatende divs, IE mit falscher Position

[CSS] IE6 rückt floatende Boxen zu weit ein - was tun?

E-Mail:

Abonnieren Abbestellen