✔ Floatende Box

Status
Nicht offen für weitere Antworten.
B

buddha

Erfahrenes Mitglied
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: 
<!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>
 
Hi!
Ich habe 2 floatende Boxen mit left, im FF wird dies richtig dargestellt, im IE hingegen wird die Border vom Container mit herumgelegt
Zum Vergrößern anklicken....
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:

ff_v1.jpg (1280*1024px)

ff_v2.jpg (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.
 
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ß
 
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.
 
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ß
 
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>
 
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ß
 
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: 
<!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>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück