|
|||
float wird ignoriert? nach änderung Dokumenttypdeklaration !
Hallo,
bin neu hier und hoffe ihr könnt mir weiter helfen. Erst hatte ich das Problem, dass der IE 6 und auch 7 das Boxmodell wohl falsch interpretiert haben, denn das div #inhalt-links-aussen wurde im IE6 und 7 mit einer anderen Höhe dargestellt wie bei den anderen Browsern. Vorher Dokumenttypdeklaration: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> Über Änderung der Dokumenttypdeklaration hab ich nun erreicht, dass das Ergebnis bzgl der Höhe in allen Browsern gleich aussieht. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> Aber dafür ist nun mein Bild(#Bild1)nun trotz float:right in allen Browsern linksbündig ausgerichtet innerhalb des divs #inhalt-links-aussen. Ich find den fehler einfach nicht? Hoffe auf eure Hilfe! Wenn es eine andere Lösung, als mit der Dokumentdeklaration für die Unterschiedlichen Höhen gibt im IE 6 und 7, gerne! Hauptsache es funktioniert dann alles. Viele grüße Hier der Code: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <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>zzz.</p> <p>zzzp> <p>Investieren Sie dort, wo es Ihnen den meisten Nutzen bringt</p> <p></p> <div id="bild1"><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>zz .</p> </div> </div> </div> <!--ende inhalt rechts --> <!-- footer --> <div id="footer"></div> <!-- ende footer --> <!-- ende alles weiss --></div> </body> </html> 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-text{ position: relative; margin-top: 15px; left: 0px; float: left; width: 420px; height: auto; padding: 0; } .bild-text img{ float: left; margin-right: 10px; } .text-rechts{ position: relativ; margin-top: 15px; margin-left: 15px; width: 260px; height: auto; float: left; } .text-rechts img{ float: left; margin-right: 10px; } #bild1{ position: relative; width:100%; float: right; margin-top:20px; } .bild-text{ position: relative; float: left; padding: 0; } .bild-text img{ float: left; margin-right: 15px; } .text-rechts img{ float: left; margin-right: 15px; } h1{ font-family: Verdana, Arial, sans-serif; font-size: 18px; color: #646464; margin: 10px 0 10px 0; } p{ margin-top: 0; margin-bottom: 10px; } Geändert von caja13 (03.09.2008 um 13:12 Uhr) |
Sponsored Links |
|
|||
sorry meinte nicht den Text sondern das andere Bild(da es eine Unterschrift ist hab ich text gesagt).
Aber mit deinem Tipp #bild 1 img floaten, das wars! Jetzt funktioniert es so wie ich es möchte! Vielen lieben Dank!!!!! |
|
|||
Zu früh gefreut, im Internet Explorer geht es natürlich nicht. Das Bild ist zwar rechts, aber das andere Bild ist nun darunter
aber das andere Bild soll daneben und links ausgerichtet sein. Also meine Frage wie richtet man die Bilder nebeneinander aus das eine links, das andere rechts? |
|
|||
war leider krank, daher erst heute meine Rückmeldung. Genauso wie du es geschrieben hast hab ich es auch gemacht, funktioniert ja auch in allen Browsern außer im IE.
Hast du da noch eine Idee? |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Float-Problem? | mischaef | CSS | 33 | 20.10.2010 17:20 |
text-align wird bei float von FF ignoriert? | burnersk | CSS | 9 | 08.06.2008 10:25 |
Mozilla zeigt DIV zu oft an | cracki | CSS | 6 | 09.03.2008 16:22 |
IE zeigt gewisse Texte nicht an | zitronenbaum | CSS | 2 | 16.01.2008 16:25 |
Testcase: float, overflow: hidden; und alte Geckos... | heiko_rs | CSS | 0 | 19.11.2007 22:26 |