Du befindest Dich im Archiv vom ABAKUS Online Marketing Forum. Hier kannst Du Dich für das Forum mit den aktuellen Beiträgen registrieren.

CSS Hack für Safari und Mozilla gesucht

Ajax, Hijax, Microformats, RDF, Markup, HTML, PHP, CSS, MySQL, htaccess, robots.txt, CGI, Java, Javascript usw.
Neues Thema Antworten
workershop
PostRank 8
PostRank 8
Beiträge: 697
Registriert: 19.11.2004, 19:08
Wohnort: Leipzig

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{clear:both;float:right;width:auto;margin-top:25px;}
.nav{
	float:right;width:auto;
}
.nav ul{
	float:right;
	list-style:none;padding:0px;margin:0px;
}
.nav ul li{float:right;padding:0px 0px 0px 27px;margin:0px;font:normal 14px 'OpenSans-Regular',arial;color:#141215;}
.nav ul li a{color:#141215;}
.nav ul li a:hover, .nav ul li a.active{color:#ff9900;}

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

Anzeige von ABAKUS

von Anzeige von ABAKUS »


Hochwertiger Linkaufbau bei ABAKUS:
  • Google-konformer Linkaufbau
  • nachhaltiges Ranking
  • Linkbuilding Angebote zu fairen Preisen
  • internationale Backlinks
Wir bieten Beratung und Umsetzung.
Jetzt anfragen: 0511 / 300325-0

Melegrian
PostRank 10
PostRank 10
Beiträge: 3170
Registriert: 30.01.2005, 12:36

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.

Create
PostRank 1
PostRank 1
Beiträge: 23
Registriert: 27.12.2011, 10:32

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"

Anzeige von ABAKUS

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.


Melegrian
PostRank 10
PostRank 10
Beiträge: 3170
Registriert: 30.01.2005, 12:36

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>

workershop
PostRank 8
PostRank 8
Beiträge: 697
Registriert: 19.11.2004, 19:08
Wohnort: Leipzig

Beitrag von workershop » 09.11.2012, 00:04

Danke Dir - werd es mal probieren :-)

Antworten
  • Vergleichbare Themen
    Antworten
    Zugriffe
    Letzter Beitrag