mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 23:28 Benutzername: Passwort: Auto-Login

Thema: divs im ie6 sind untereinander trotz float:left -.- vom 13.08.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> divs im ie6 sind untereinander trotz float:left -.-
Seite: 1, 2  Weiter
Autor Nachricht
denise2302
Threadersteller

Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 34
Geschlecht: Weiblich
Verfasst Mi 13.08.2008 14:58
Titel

divs im ie6 sind untereinander trotz float:left -.-

Antworten mit Zitat Zum Seitenanfang

Hallo ihr lieben!

Ja, ich habe mal wieder ein Menü-Problem.

Und zwar soll das Menü horizontal sein, das tut es auch im ie7 und ff... nur der ie6 macht natürlich wieder Probleme. Zum einen liegen die divs untereinander und zum anderen habe ich die höhe meiner links vergrößert, damit das dropdown menü erreicht werden kann. Aber der ie6 zeigt die höhe dann auch an -.- erstmal zum ersten problem..

so sieht es aus:



hier mein css:
Code:

/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/final_drop.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */

.menu { height: 25px; font-size: 10pt; z-index:1000; float:left; }
/* hack to correct IE5.5 faulty box model */
* html .menu {width:500px; w\idth:500px;}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul { padding: 0; margin: 0; list-style-type:none; }
.menu ul ul {width: 144px;}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li { position:relative; display: block;}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {width: 144px; w\idth:144px; overflow:hidden; }

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited { display: block; height: 20px; width: 139px; background: #3879bd; text-align:left; text-decoration: none; font-size: 8pt; color: #ffffff; padding: 8px 0 0 5px; border-bottom: #ffffff 1px solid; border-right: #ffffff 1px solid; }
/* style the second level hover */
.menu ul ul a.drop:hover {display: block; height: 20px; width: 139px; background: #80b2e7; text-align:left; text-decoration: none; font-size: 8pt; color: #ffffff; padding: 8px 0 0 5px; border-bottom: #ffffff 1px solid; border-right: #ffffff 1px solid; }
.menu ul ul :hover > a.drop { display: block; height: 20px; width: 139px; background: #80b2e7; text-align:left; text-decoration: none; font-size: 8pt; color: #ffffff; padding: 8px 0 0 5px;border-bottom: #ffffff 1px solid; border-right: #ffffff 1px solid; }
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:#3879bd;}
/* style the third level hover */
.menu ul ul ul a:hover {background: #80b2e7;}


/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul { visibility: hidden; position: absolute; height: 0; top: 34px; left: 0; width: 144px; }
/* another hack for IE5.5 */
* html .menu ul ul { top:30px; t\op:31px; }

/* position the third level flyout menu */
.menu ul ul ul{ left:145px; top:0; }

/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left { left:-130px; }

/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited { background:#3879bd; color:#000; padding:0 5px 10px 0; width:128px; }
/* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited { width:150px; w\idth: 128px; }

/* style the top level hover */
.menu a {  display: block; text-align: center; height: 50px; line-height: 25px; width: 80px; text-decoration: none; font-size: 10pt; color: #0079a4; border: none; }
.menu a:hover, .menu ul ul a:hover { display: block; text-decoration: none; background: #ffffff;}
.menu :hover > a, .menu ul ul :hover > a { display: block; background: #ffffff; }

.menu ul ul a.navi:link { display: block; height: 20px; width: 139px; background: #3879bd; text-decoration: none; text-align:left; font-size: 8pt; color: #ffffff; padding: 8px 0 0 5px; border-bottom: #FFFFFF 1px solid; }
.menu ul ul a.navi:active { display: block; height: 20px; width: 139px; background: #3879bd; text-decoration: none; text-align:left; font-size: 8pt; color: #ffffff; padding: 8px 0 0 5px; border-bottom: #FFFFFF 1px solid; }
.menu ul ul a.navi:visited { display: block; height: 20px; width: 139px; background: #3879bd; text-decoration: none; text-align:left; font-size: 8pt; color: #ffffff; padding: 8px 0 0 5px; border-bottom: #FFFFFF 1px solid; }
.menu ul ul a.navi:hover { display: block; height: 20px; width: 139px; background: #80b2e7; text-decoration: none; text-align:left; font-size: 8pt; color: #ffffff; padding: 8px 0 0 5px; border-bottom: #FFFFFF 1px solid; }

.menu ul ul a.navi2:link { display: block; height: 20px; width: 200px; background: #3879bd; text-align:left; text-decoration: none; font-size: 8pt; color: #ffffff; padding: 8px 0 0 5px; border-bottom: #FFFFFF 1px solid; }
.menu ul ul a.navi2:active { display: block; height: 20px; width: 200px; background: #3879bd; text-align:left; text-decoration: none; font-size: 8pt; color: #ffffff; padding: 8px 0 0 5px; border-bottom: #FFFFFF 1px solid; }
.menu ul ul a.navi2:visited { display: block; height: 20px; width: 200px; background: #3879bd; text-align:left; text-decoration: none; font-size: 8pt; color: #ffffff; padding: 8px 0 0 5px; border-bottom: #FFFFFF 1px solid; }
.menu ul ul a.navi2:hover { display: block; height: 20px; width: 200px; background: #80b2e7; text-align:left; text-decoration: none; font-size: 8pt; color: #ffffff; padding: 8px 0 0 5px; border-bottom: #FFFFFF 1px solid; }

.menu ul ul a.navi_2zeilen:link { display: block; height: 32px; width: 200px; background: #3879bd; text-align:left; text-decoration: none; font-size: 8pt; color: #ffffff; padding: 8px 0 0 5px; border-bottom: #FFFFFF 1px solid; }
.menu ul ul a.navi_2zeilen:active { display: block; height: 32px; width: 200px; background: #3879bd; text-align:left; text-decoration: none; font-size: 8pt; color: #ffffff; padding: 8px 0 0 5px; border-bottom: #FFFFFF 1px solid; }
.menu ul ul a.navi_2zeilen:visited { display: block; height: 32px; width: 200px; background: #3879bd; text-align:left; text-decoration: none; font-size: 8pt; color: #ffffff; padding: 8px 0 0 5px; border-bottom: #FFFFFF 1px solid; }
.menu ul ul a.navi_2zeilen:hover { display: block; height: 32px; width: 200px; background: #80b2e7; text-align:left; text-decoration: none; font-size: 8pt; color: #ffffff; padding: 8px 0 0 5px; border-bottom: #FFFFFF 1px solid; }

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul, .menu ul a:hover ul{ visibility: visible; }
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{ visibility:hidden; }
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ visibility:visible; }


und menü html:
Code:

<div class="menu">
<ul>
<li><a href="#">Agentur<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
   <ul>
      <li><a class="navi" href="agt_profil.php">Profil</a></li>
       <li><a class="navi" href="agt_team.php">Team</a></li>
       <li><a class="navi" href="agt_spektrum.php">Spektrum</a></li>
       <li><a class="navi" href="agt_broschuere.php">Imagebrosch&uuml;re</a></li>
   </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li></ul></div><div class="menu">
<ul>
<li><a  href="#">Referenzen<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
   <ul>
      <li><a class="navi" href="ref_referenzkunden.php">Referenzkunden</a></li>
       <li><a class="navi" href="ref_showroom.php">Showroom</a></li>
   </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

</ul>
</div><div class="menu">
<ul>
<li><a href="#">Portfolio<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
   <ul>
      <li><a class="navi" href="port_leistung.php">Leistung</a></li>
       <li><a class="navi" href="port_cd.php">Corporate Design</a></li>
       <li><a class="navi" href="port_print.php">Printmedien</a></li>
       <li><a class="navi" href="port_neuemedien.php">Neue Medien</a></li>
        <li><a class="navi" href="#" onclick="MyWindow=window.open('http://x01_151.lux01.de/','MyWindow','toolbar=no,location=no,directories=no,status=yes,menubar=no,scrollbars=yes,resizable=yes,width=750,height=500'); return false;">Werbeartikel</a></li>
        <li><a class="navi" href="port_sonst.php">Sonstiges</a></li>
   </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li></ul></div>


Aufgrund, dass es sonst mein ganzes Design verhaut wenn ich float auf das ul anwende, liegt jeder Punkt in einem Div nebeneinander. Und soweit klappt das ja auch im ie7 und ff. Bloß der ie6 macht da nicht mit...

kann mir da jemand helfen? ich such nun echt schon seit Stunden rum, und finde aber nix womit ich das Problem lösen könnte...

LG Denise
  View user's profile Private Nachricht senden
choise

Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht: Männlich
Verfasst Mi 13.08.2008 15:07
Titel

Antworten mit Zitat Zum Seitenanfang

hatte ich auch mal,.. ein float left im ul hat abhilfe geschaffen. eigentlich völliger schwachsinn, aber es ging.
wie siehts dabei dir aus ?

Code:

.menu ul { padding: 0; margin: 0; list-style-type:none; float:left; }
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
denise2302
Threadersteller

Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 34
Geschlecht: Weiblich
Verfasst Mi 13.08.2008 15:14
Titel

Antworten mit Zitat Zum Seitenanfang

das bringt gar nichts, weil die einzelnzen punkte ja in divs getrennt sind, weil, wie gesagt, das mir sonst mein ganzes design verhaut, weil da auch noch tabellen mit drin sind und die werden dann gefloatet wenn sich das menü ausklappt wenn ich im ul ein float drin habe... deswegen ist das ja so ein bisschen kompliziert gemacht... im prinzip wirkt sich das float nicht auf die divs aus.. das is das komische, es liegen ja 3 menu-divs nebeneinander....
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Mi 13.08.2008 15:39
Titel

Antworten mit Zitat Zum Seitenanfang

evtl berechnet er den nötigen platz im ie6 anders.
und es nicht der platz da um die gefloateten element nebeneinander darzustellen.

dieses problem taucht bei mir öfter auf, wobei ich deinen source jetzt nicht angesehen habe.
  View user's profile Private Nachricht senden
denise2302
Threadersteller

Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 34
Geschlecht: Weiblich
Verfasst Mi 13.08.2008 15:48
Titel

Antworten mit Zitat Zum Seitenanfang

kann ich mir jetzt auch nicht vorstellen, also meiner meinung nach hat der genug platz die nebeneinander zu machen... der div ist ja 500px breit und die es sind nur 3 menüpunkte... mhm nagut und der div ist ja 3mal da...
gut vll liegt es daran, ich habe aber den code jetz erstmal wieder umgestellt, das heißt, nur eine liste mit listenpunkten, wo aber im ff das problem auftaucht, dass die tabelle verdrängt wird...

kann man der tabelle irgendeinen befehl geben, dass sie das float nicht beachten soll? also ich weiß auch nich.. ist irgendwie alles bissl komisch... weiß da jemand was, sonst versuch ich die andere variante nochmal, die sagt mir aber halt allerdings auch nicht richtig zu...
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Mi 13.08.2008 16:10
Titel

Antworten mit Zitat Zum Seitenanfang

gib doch deiner tabelle

Code:

table {
  clear:left;
}


oder verstehe ich dich falsch?
  View user's profile Private Nachricht senden
denise2302
Threadersteller

Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 34
Geschlecht: Weiblich
Verfasst Mi 13.08.2008 16:19
Titel

Antworten mit Zitat Zum Seitenanfang

mhm muss ich mal probieren. ich habe rausgefunden, dass es daran lag, dass a tag des menüs in die seite "reingeragt" hat, bedeutet, die menü-zeile ist 25px, das a-tag war aber auf 50px gestellt, somit hat es die tabelle dadruch verdrängt. allerdings hab ich nun das Problem, dass ich das Dropdown Menü nicht mehr erreiche, weil es ja dadurch nicht mehr mit dem a-tag verbunden ist, und sobald ich drüber fahren will verschwindet es wieder, was kann ich dagegen tun?


edit: jaa genau mit clear left ist die tabelle wieder richtig! Nun habe ich aber das Problem, dass der ie6 die 50px des menüs nimmt, gibt es dafür eine lösung? weil das a-tag müsste ja schon im prinzip so lang sein, dass ich den versteckten div erreiche, wenn du versteht, wie ich das meine... also egal wie ich es mache,jedes mal ein anderes problem... * Ich geb auf... *


Zuletzt bearbeitet von denise2302 am Mi 13.08.2008 16:21, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 13.08.2008 16:42
Titel

Antworten mit Zitat Zum Seitenanfang

Kannst du das mal online verfügbar machen?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen [CSS-Design] Lücke zwischen 2 DIVS trotz float:left
CSS-float 2 buttons untereinander stellen!
Div Float Left Problem
Frage zu float & clear:left
5 divboxen mit float left nebeneinander?
float:left höhe anpassen
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.