Margin IE7 und Firefox unterschiedlich

torkel · #1 (**permalink**) 02.02.2009, 12:57

Hallo

ich habe ein kleines Problem mit CSS, evtl kann mir hier jemand helfen.

Die Darstellung im IE7 und Firefox ist unterschiedlich => siehe Anhang.

Dafür verwende ich folgendes CSS:

Code:

Code:

#top_menu ul { 
     margin-top: 0; 
     margin-left: 0; 
     margin-bottom: 0; 
     list-style: none; 
}

Im IE7 wird dann das Menü immer ganz nach Links gemacht und im Firefox ist es ein paar Pixel nach rechts verschoben. Wie es eigentlich sein sollte, aber im IE7 wird es erst nach rechts geschoben, wenn ich bei margin-left: z.b 30px eingebe.

kann mir da jemand behilflich sein?

Grüsse

Synoxis · #2 (**permalink**) 02.02.2009, 13:05

Du müsstest schon mehr als nur einen Teil deines Codes posten.

torkel · #3 (**permalink**) 02.02.2009, 13:09

Code:

<div id="top">
   <div id="top_menu">         
       <div class="moduletable_menu">
           <ul class="menu">
                 <li id="current" class="active item1"><a href="http://xxxdomainxxx/site2/"><span>Startseite</span></a></li>
                 <li class="item2"><a href="/site2/index.php?option=com_chronocontact&amp;Itemid=2"><span>Kontakt</span></a></li>
                 <li class="item3"><a href="/site2/index.php?option=com_contact&amp;view=contact&amp;Itemid=3"><span>Kontaktformular</span></a></li>
           </ul>
      </div>
  </div>
</div>

Code:

#top_menu {
	float: left;
	margin: 88px 0 0 0 ;
	width: 100%;
	border: solid 1px;
}

#top_menu ul {
	margin-top: 0;
	margin-left: 0;
	margin-bottom: 0;
	list-style: none;
}

#top_menu li {
	float: left;
/*	margin: 0 6px;*/
	padding: 0;
	height: 39px; 
	border-right: solid 1px;
		border: dotted 1px;
/*	background: url(../images/menu_li.jpg) center right no-repeat;*/
}

#top_menu li:hover {

}

#top_menu li a#active_menu-nav {
	color: #C3D859;
}

#top_menu li a {
	font-family: Verdana, sans-serif;
	font-size: 12px;
	float: left;
	display: block;
	line-height: 37px;
	padding: 0 15px;
	color: #FFF;
	text-decoration: none;
	font-weight: normal;
/*	background: url(../images/menu_li_a.jpg) center left no-repeat;*/
}

In4matiker · #4 (**permalink**) 02.02.2009, 13:14

evtl hilft noch die zusätzliche Angabe

Code:

list-style-position: inside;

oder

Code:

list-style-position: outside;

damit der Abstand verschwindet bzw bei beiden Browsern identisch ist.

Alternativ auch noch der Versuch dass Du den

Code:

list-style: none; list-style-position: outside;

beim li schreibst und nicht beim ul.

Elchi3 · #5 (**permalink**) 02.02.2009, 13:19

Jep, oder immer die margins und paddings nullen.
Somit vergisst man auch nichts:

Code:

* { margin: 0; padding: 0;}

torkel · #6 (**permalink**) 02.02.2009, 13:25

Zitat:

Zitat von Elchi3

Jep, oder immer die margins und paddings nullen.
Somit vergisst man auch nichts:

Code:

* { margin: 0; padding: 0;}

Das war es genau, ich hatte den padding: 0; nicht und deshalb gab es den Unterschied... funktioniert nun einwandfrei.

Danke für die schnelle Hilfe!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Frage zu horizontalen Linien	marvin1989	CSS	3	29.12.2009 23:35
Untermenü im IE	nici	CSS	10	22.06.2009 21:19
Darsrtellungsproblem im Firefox und IE6 IE7 klappt	cyberoner1	CSS	1	10.03.2009 10:01
[Abstand zwischen zwei DIV] und [overflow] in Firefox und IE unterschiedlich	sailscape	CSS	7	11.10.2008 03:28
IE und Firefox Darstellung unterschiedlich	muhkuh22	CSS	1	16.03.2008 15:36