zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Margin auf LI verschiebt komplettes UL im Firefox

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.09.2007, 11:23
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.10.2006
Beiträge: 55
Dwarf befindet sich auf einem aufstrebenden Ast
Standard Margin auf LI verschiebt komplettes UL im Firefox

Hallo Forum,


folgendes Problem ist mir so ähnlich schon öfter aufgekommen und ich würde gerne wissen, was da genau passiert bzw. was genau ich da eigentlich falsch mache.



Ich habe eine Liste. Per CSS definiere ich den li's einen top Margin um die Listeneinträge weiter voneinander zu trennen. Im Firefox verschiebt sich neben den li's nun auch die komplette ul, als hätte ich diesem Element ebenfalls einen top-margin gegeben. Warum reagiert der FF hier so und wie kann ich das umgehen ... ?


Online HTML: margin

Screenshot IE: http://www.djdwarf.de/raver/margin_ie.gif (IE 6)
Screenshot FF: http://www.djdwarf.de/raver/margin_ff.gif (FF 1.5)



Quellcode:

PHP-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 strict//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<
html>
<
head>
    <
title>margin</title>
        <
meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <
style type="text/css">
    <!--
html{
    
overflow-y:scroll;
}
body{
    
margin:0;
    
padding:0;
    
background:#CC0000;
    
font:11px VerdanaArialHelveticasans-serif;
    
color:#000;
}
img{
    
border:none;
}
ul{
    
margin:0;
    
padding:0;
    list-
style-type:none;
}
li{
    
margin:0;
    
padding:0;
}
#container{
    
position:relative;
    
margin:0 auto;
    
width:907px;
}
#head{
    
margin:0;
    
padding:0;
    
position:relative;
    
height:100px;
    
background:#FFF;
}
/* ------------- SERVICE NAVIGATION ------------- */
#service_box{
    
position:absolute;
    
top:0;
    
right:0;
    
height:90px;
    
width:678px;
}
#service_navigation{
    
position:absolute;
    
top:20px;
    
right:110px;
}
#service_navigation li{
    
position:relative;
    
float:left;
    
height:20px;
    
overflow:show;
    
padding:0 0 0 12px;
    
color:#C00;
}
#service_navigation a{
    
color:#000;
    
text-decoration:none;
}
#service_navigation a:hover{
    
color:#A00;
}
#service_navigation li span{
    
margin:0 0 0 12px;
}
/* ------------- MAIN NAVIGATION ------------- */
#main_navigation{
    
position:relative;
    
margin:14px 0 0 0;
    
padding:0;
    
height:20px;
}
#main_navigation li{
    
float:left;
    
height:20px;
    
width:204px;
    
background:#333;
}
#main_navigation li.active{
    
background:#CCC;
}
#main_navigation li a{
    
display:block;
    
height:20px;
    
width:204px;
    
text-decoration:none;
}
#main_navigation li span{
    
position:relative;
    
top:2px;
    
left:10px;
    
font:bold 12px HelveticaVerdanaArialsans-serif;
    
color:#FFF;    
}
#main_navigation li.active span{
    
color:#900;    
}
/* ------------- CONTENTBOX ------------- */
#content_box{
    
position:relative;
    
margin:0;
    
padding:0;
    
background:#FFF;
}
/* ------------- BREADCRUMB ------------- */
#breadcrumb{
    
padding:5px 0 5px 210px;
    
font-size:10px;
}
#breadcrumb a{
    
color:#000;
    
text-decoration:none;
}
/* ------------- NAVIGATION ------------- */
#navigation{
    
height:255px;
    
width:204px;
    
background:#CCC;
}
#navigation li{
    
margin:40px 0 0 12px/* sobald die li einen top Margin bekommt, verzieht sich die gesamte ul*/
}
#navigation li a{
    
padding:0 0 0 10px;
    
background:url(../images/navi_arrow.gifno-repeat left;
    
color:#000;
    
text-decoration:none;
}
    -->
    </
style>
</
head>

<
body>
    <
div id="container">
        <
div id="head">
            <
div id="service_box">
                <
ul id="service_navigation">
                        <
li><a href="">Kontakt</a><span>|</span></li>
                        <
li><a href="">Impressum</a><span>|</span></li>
                        <
li><a href="">AGB</a><span>|</span></li>
                        <
li><a href="">Sitemap</a><span>|</span></li>
                </
ul>
            </
div>
        </
div>
        <
ul id="main_navigation">
            <
li class="active"><span>Kat 1</span></li>
            <
li><a href=""><span>Kat 2</span> </a></li>
            <
li><a href=""><span>Kat 3</span> </a></li>
            <
li><a href=""><span>Kat 4</span> </a></li>
        </
ul>
        <
div id="content_box">
            <
div id="breadcrumb"Sie befinden sich hier >> <a href="">123</a></div>
            <
ul id="navigation">
                <
li><a href=""><span>Navigation 1</span> </a></li>
                <
li><a href=""><span>Navigation 2</span> </a></li>
                <
li><a href=""><span>Navigation 3</span> </a></li>
                <
li><a href=""><span>Navigation 4</span> </a></li>
            </
ul>
        </
div>
    </
div>

</
body>
</
html




Bin für jeden Ratschlag dankbar.

Gruß,
Sascha
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.09.2007, 11:31
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Suchfunktion: "Collapsing Margins"
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.09.2007, 12:31
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.10.2006
Beiträge: 55
Dwarf befindet sich auf einem aufstrebenden Ast
Standard

Ah, danke! Mit Padding gehts dann nun also. Hab nur noch nicht ganz durchblick warum dieser Fehler genau ensteht. Werd mir das nochmal genauer anschauen.

Danke!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Tabelle verschiebt Layout im IE7 alex_fost CSS 2 02.05.2011 01:05
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 17:53
rätselhafter Leerraum zwischen Content und Footer im IE jhonnybravo CSS 5 04.03.2010 12:47
Float-Reihenfolge? wolf1985 CSS 0 21.08.2008 02:35
Probleme mit IE6 marthe CSS 22 24.09.2007 18:07


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:50 Uhr.