CSS Hack für Safari und Mozilla gesucht

Beitrag von **workershop** » 08.11.2012, 09:51

Hi,

ich habe gerade das Problem, das eine vertikale Subnavigation, welche linksbündig mit der obenliegeneden Hauptnavigation abschliesen soll, in IE, Mozilla und Safari unterschiedlich angezeigt wird. Wichtig ist, das die Subnavigation links genau auf Höhe der Navigation liegt. Im IE funktioniert es. Im Mozilla liegt die Subnavigation ca. 2px zu weit links und im Safai liegt sie ca. 5px zu weit rechts. Hat jemand eine Idee? Der rechte Rand ist egal, weil die Subnavigation auf bestimmten Seiten unterschiedlich lang ist. Wichtig ist nur der linke Anfang. Ein Beispiel vom Safari ist hier: https://www.team-survival.de/demo.jpg

Hier ist mein Code:

Code: Alles auswählen

.menu&#123;clear&#58;both;float&#58;right;width&#58;auto;margin-top&#58;25px;&#125;
.nav&#123;
	float&#58;right;width&#58;auto;
&#125;
.nav ul&#123;
	float&#58;right;
	list-style&#58;none;padding&#58;0px;margin&#58;0px;
&#125;
.nav ul li&#123;float&#58;right;padding&#58;0px 0px 0px 27px;margin&#58;0px;font&#58;normal 14px 'OpenSans-Regular',arial;color&#58;#141215;&#125;
.nav ul li a&#123;color&#58;#141215;&#125;
.nav ul li a&#58;hover, .nav ul li a.active&#123;color&#58;#ff9900;&#125;

.submenu&#123;
	float&#58;right;width&#58;560px;list-style&#58;none;padding&#58;0px;margin&#58;17px 0px 0px 0px;
&#125;
.submenu li&#123;float&#58;left;padding&#58;0px 0px 0px 23px;padding&#58;0px 0px 0px 13px !importent;font&#58;normal 12px 'OpenSans-Regular',arial;color&#58;#141215;&#125;
.submenu li a&#123;color&#58;#141215;&#125;
.submenu li a&#58;hover, .submenu li a.active&#123;color&#58;#ff9900;&#125;

von **Anzeige von ABAKUS** »

Beitrag von **Melegrian** » 08.11.2012, 13:45

Das sieht ja nach Listen aus. Bin jetzt kein Fachmann, was CSS anbelangt, muss da auch ab und zu längere Zeit probieren, ehe etwas in unterschiedlichen Browsern hält. Bei meinen einzurückenden Listen habe ich es mir angewöhnt, diese in einen DIV-Bereich zu packen und richte dann seitlich nicht die Listen, sondern den oder die DIVs entsprechend aus.

Verstehe jetzt nicht, wozu das gut sein soll:

workershop hat geschrieben:padding:0px 0px 0px 23px;padding:0px 0px 0px 13px !importent;

Überschreibst Du damit nicht nur die ersten Werte und könntest die gleich weglassen?

Was ich jetzt auch nicht ganz nachvollziehen kann, dennoch durchaus richtig sein mag, ist, dass Du 3 x float:right und 1 x float:left verwendest. Wenn dann clear:both nicht richtig eingesetzt wird, so würde ich da auch nicht mehr durchblicken.

Beitrag von **Create** » 08.11.2012, 13:57

Probier mal die ganzen "float:right" auf "float:left" zu setzen, bis auf ".nav"
und
es heißt "important" nicht "importent"

von **Anzeige von ABAKUS** »

SEO Consulting bei ABAKUS Internet Marketing
Erfahrung seit 2002

persönliche Betreuung
individuelle Beratung
kompetente Umsetzung

Jetzt anfragen: 0511 / 300325-0.

Beitrag von **Melegrian** » 08.11.2012, 18:38

Jetzt musste ich das doch mal ausprobieren. Es geht zwar mit float:left wie mit display:inline für li, doch mit float bricht die zweite Liste nicht von selbst hinter der ersten Liste um. So scheint es erst einmal zu funktionieren:

Code: Alles auswählen

<!DOCTYPE html>
<html>

<head>
<title>Test</title>
<style type="text/css">
div.vorm &#123;float&#58;left; width&#58;400px; height&#58;200px; padding-right&#58;40px&#125;
ul.menu  &#123;list-style&#58;none&#125;
li.navi  &#123;display&#58;inline; padding-left&#58;33px&#125;
</style>
</head>

<body>
<div class="vorm">Platz für eine Grafik auf der linken Seite oder wofür auch immer...</div>
<div>
  <ul class="menu">
    <li class="navi">menu eins</li>
    <li class="navi">menu zwei</li>
    <li class="navi">menu drei</li>
    <li class="navi">menu vier</li>
  </ul>
  <ul class="menue">
    <li class="navi">navi eins</li>
    <li class="navi">navi zwei</li>
    <li class="navi">navi drei</li>
    <li class="navi">navi vier</li>
  </ul>
</div>
<p style="clear&#58;both">Text</p> 

</body>
</html>

Beitrag von **workershop** » 09.11.2012, 00:04

Danke Dir - werd es mal probieren