float wird ignoriert? nach änderung Dokumenttypdeklaration ! - Seite 2

cgdesign · #11 (**permalink**) 07.07.2008, 12:27

Zeige noch mal deinen HTML- und CSS-Code. Bei mir geht es nämlich im IE6.

caja13 · #12 (**permalink**) 07.07.2008, 12:40

So hier nochmal mein geänderter Code(Bild1 heißt jetzt übrigens #bild_re)
Hoffe Du hast eine Idee!

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="styles/style.css" type="text/css" media="screen">
		<script language="JavaScript" type="text/javascript">
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
   var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
   if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</script>
</head>

<body onLoad="MM_preloadImages('img/akademie_aktiv.jpg','img/seminare_aktiv.jpg','img/inhouse_aktiv.jpg','img/vision_aktiv.jpg','img/anmeldung_aktiv.jpg','img/kontakt_aktiv.jpg'),'img/galerie_aktiv.gif');">
<!-- alles weiss -->
<div id="divAll">
	<!-- impressum -->
	<div id="impressum">
	<!-- link --><a href="#">impressum</a><!-- link ende -->
	</div>
	<!-- ende impressum -->
	<!-- div header -->
	<div id="header"><img src="img/logo_gross.jpg" width=461 height=172 border=0 alt="logo"><img src="img/slogan.jpg" width=288 height=172 border=0 alt="slogan"></div>
	<!-- ende header -->
	<!-- div navi -->
	<div id="navi"><a href="index.html" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('home','','img/home_aktiv.jpg',1);"><img name="home" src="img/home_aktiv.jpg" width=107 height=40 border=0 alt=""></a><a href="akademie.html" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('akademie','','img/akademie_aktiv.jpg',1);"><img name="akademie" src="img/akademie.jpg" width=107 height=40 border=0 alt=""></a><a href="seminare.html" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('seminare','','img/seminare_aktiv.jpg',1);"><img name="seminare" src="img/seminare.jpg" width=107 height=40 border=0 alt=""></a><a href="inhouse.html" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('inhouse','','img/inhouse_aktiv.jpg',1);"><img name="inhouse" src="img/inhouse.jpg" width=107 height=40 border=0 alt=""></a><a href="anmeldung.html" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('anmeldung','','img/anmeldung_aktiv.jpg',1);"><img name="anmeldung" src="img/anmeldung.jpg" width=107 height=40 border=0 alt=""></a><a href="kontakt.html" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('kontakt','','img/kontakt_aktiv.jpg',1);"><img name="kontakt" src="img/kontakt.jpg" width=107 height=40 border=0 alt=""></a><img src="img/reserve.jpg" width=107 height=40 border=0 alt=""></div>
	<!-- ende navi -->
	<!-- div inhalt links -->
	<div id="inhalt-links-aussen">
		<h1>Herzlich Willkommen!</h1>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<div id="bild_re"><img src="img/team_1.jpg" width=184 height=114 border=0 alt="teamwork"></div>
		<p><img src="img/u_schrift.gif" width=200 height=60 border=0 alt="Unterschrift"></p>
	</div>
	<!-- inhalt rechts -->
	<div id="box1_re">
		<div id="box2_re">
			<div id="box3_re"><img src="img/bildlogo.jpg" width=102 height=63 border=0 alt"Logo"><p></p>
			</div>
		</div>
	</div>
	<!--ende  inhalt rechts -->
	<!-- footer -->
	<div id="footer"></div>
	<!-- ende footer -->

Code:

body{
background-color: #DAD7CE;
margin: 0;
text-align: center;
}
div{
background-color: #fff;
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #808080;
text-align: left;
padding: 0;
}
#divAll{
width: 799px;
height: auto!important;
min-height: 100%;
margin: 40px auto 0 auto;
vertical-align: top;
overflow: hidden;
}
#impressum{
position: relative;
margin-top: 10px;
left: 25px;
width: 749px;
height: 15px;
padding: 0;
text-align: right;
}
#impressum a:link, #impressum a:active, #impressum a:visited{
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #808080;
text-decoration: none;
}
#impressum a:hover{
color: #2C1D29;
}
#header{
position: relative;
margin-top: 0px;
left:25px;
width: 749px;
height: 172px;
background-color:#f6f6ef;
}
#navi{
position: relative;
margin-top: 0px;
left: 25px;
width: 749px;
height: 40px;
}
#inhalt-links-aussen{
position: relative;
width: 425px;
min-height: 331px;
height: auto;
_height: 331px;
margin-bottom: 55px;
top: 15px;
left: 25px;
float: left;
padding: 0 0 0 2px;
border: 1px solid #dadada;
}
#box1_re{
position: relative;
width: 287px;
min-height: 331px;
height: auto;
_height: 331px;
float: right;
right: 25px;
top: 15px;
padding: 6px 0 0 0;
background-image: url(../img/box_t.gif);
background-repeat: no-repeat;
background-position: top;
}
#box2_re{
padding: 0 0 6px 0;
margin-bottom: 55px;
background-image: url(../img/box_b.gif);
background-repeat: no-repeat;
background-position: bottom;
}
#box3_re{
min-height: 319px;
height: auto;
_height: 319px;
padding-left: 15px;
padding-right: 15px;
padding-top: 9px;
padding-bottom: 9px;
border-right: 1px solid #dadada;
border-left: 1px solid #dadada;
}
#box3_re img{
float: right;
margin-left: 10px;
}
#footer{
position: relative;
bottom: 25px;
left: 25px;
width: 749px;
height: 40px;
clear: both;
background-image: url(../img/footer_bg.jpg);
background-repeat: no-repeat;
}
#bild_re{
position: relative;
width:100%;
margin-top: 20px;
text-align: right;
}
#bild_re img{
float: right;
}
h1{
font-family: Verdana, Arial, sans-serif;
font-size: 18px;
color: #646464;
margin: 10px 0 10px 0;
}
p{
margin-top: 0;
margin-bottom: 10px;
}

cgdesign · #13 (**permalink**) 07.07.2008, 12:47

Ganz einfach:

#bild_re{
position: relative;
width:100%;
margin-top: 20px;
text-align: right;
}

Du hast da immer noch width:100%; drin stehen... Wie soll denn da das Bild daneben rutschen, wenn das DIV die ganze Breite einnimmt? Das position: relative brauchst du auch nicht.

caja13 · #14 (**permalink**) 07.07.2008, 13:00

Supi!!!!
Vielen vielen Dank!!!
Jetzt wo du es sagst ist es ja ganz logisch...!
Habe gerade erst angefangen mit Programmieren, da fehlt mir noch einiges, aber ich lerne fleissig dazu.
DANKE!!!!!!!!

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Float-Problem?	mischaef	CSS	33	20.10.2010 16:20
text-align wird bei float von FF ignoriert?	burnersk	CSS	9	08.06.2008 09:25
Mozilla zeigt DIV zu oft an	cracki	CSS	6	09.03.2008 15:22
IE zeigt gewisse Texte nicht an	zitronenbaum	CSS	2	16.01.2008 15:25
Testcase: float, overflow: hidden; und alte Geckos...	heiko_rs	CSS	0	19.11.2007 21:26