Darstellung im FireFox

html.de-Forum HTML, XHTML & CSS
1

Hallo,
Meine Angefangene Website
Blog lukiB
wird im FireFox nicht so angezeigt wie ich es gerne hätte, im IE ist aber alles Richtig. Die seite ist Valide, und ich kann den Fehler nicht finden,
also erstens soll kein Abstand zwischen dem #navi und dem #header div sein. Und zweitens rutschen die Links bei Firefiox in dem #navi div in die mitte…
Könnt ihr mir helfen ?

Mfg lukiB

2

ich denke schon, dass man dir helfen wird, aber du muss erst mal den entsprechenden code posten.

[code]

[/code]sagen nicht viel darüber, was da schief gegangen ist. ausser dass ein div auf und wieder zu, (header) nichts bewirken wird und eigentlich unnötig ist.
3

ich denk wenn du header left floatest und navi auch, dann sollte es auch im FF funzen.

gecleart hast ja schon, nur musst du der class=„clear“ auch im css ein .clear{clear:both;}

nav li brauchst aber nicht zu floaten.

und was sind das für ganze border 0px in deinem CSS

4

Ok danke schonmal, ich habe alles gemacht aber es ist immernoch das gleiche problehm…
hier mal mein HTML Code :

[code]

Blog lukiB 
<ul>

  <li>
  
   <a href="home.htm">Home</a>
    <a href="home.htm">Grafiken</a>
    <a href="home.htm">Gimp</a>



  
  </li>
  
</ul>

[/code]Und der CSS code: [code]

body {
background-color:#222222;
font : normal 74% arial , Sans-Serif;

}

#site {
width:600px;
height:500px;
border:0px white dotted;
margin: 0 auto;
margin-top:100px;
border:1px #333333 solid;
}

#header {
width:600px;
height:151px;
background-image: url(images/header55_1.png);

}

#navi {

width:600px;
height:20px;
background-image: url(images/navibg.png);
background-repeat: no-repeat;
background-color:none;

}

#navi ul { list-style:none; }
#navi li { float : left;
margin-left : 103px;
margin-bottom : 0; }

#navi li a:link , #navi li a:visited {

font-family: arial , sans serif ;
font-size:13px;
color:white;
float:left;
margin-left:40px;
padding-left:3px;
padding-right:3px;
padding-top:1px;
height:19px;
font-weight:bold;

background-color:none;
text-decoration:none;

}

#navi li a:hover , #navi li a:active {

text-decoration:none;
background-image: url(images/navibgblue.png);

background-repeat: repeat-x;
}

.clear{clear:both;}

[/code]OK das Problehm mit den Abständen zwischen den divs habe ich gelöst, ganz einfach mit: ul { margin:0px; }Aber die verweise haben immernoch einen automatischen abstand zum Linken Rand (im FF) obwohl ich das nicht eingestellt habe.
Link : Blog lukiB

Naja habs jetzt anders gelöst, aber anke nochmal Für eure Hilfe…

Mfg lukiB

5

Hallo,

erstmal sind Deine Menüs semantischer Unfug.
Du machst zwar eine Liste, richtig, aber alle Menüpunkte sind in einem Listenelement. Das macht keinen Sinn. Setze jeden Link in ein eigenes Listenelement.

Und der Abstand ist auch logisch, denn Du hast nirgendwo angegeben, wie groß der Abstand Deiner Listenelemente nach links sein soll, daher ziehen die Default-Werte des Browsers, und bei Listenelementen sind margin/padding für IE/FF/OP jeweils unterschiedlich.
Setze also margin/padding-left für die Listenelemente auf 0 oder was Dir behagt, dann geht das schon!

Gruß,
-Efchen

6

nu siehts ja ganz anders aus;)

Aber Efchens Rat, deine Liste, respektive deine Navis zu überarbeiten hast ja ignoriert.
Desweiteren hast noch immer dinge wie

border:0px white dotted;und

background-color:none;das ist doppelt gemoppelt

[code]#navi ul {
list-style-image: none;
list-style-type: none;

}[/code]wenn du keinen type hast musst image nicht mehr extra auf none setzen

#navi li { margin-left : 0px; margin-bottom : 0; }hier wär ne entscheidung gut, 0 oder 0px, macht den code sauberer, sowas könntest übrigens ganz weglassen wenn du deine margins und paddings im BODY auf 0 setzt, dann musst nur da welche einfügen wo du sie brauchst.
macht den code kürzer.

<div id="verwbox"></div>kannst übrigens ganz rausschmeißen, ist völlig überflüssig.

warum hast deine nav jetzt eigentlich in den header gepackt? weil du dein altes Problem nicht lösen konntest?
Gib nicht so schnell auf, immer step by step, dann lernst du einfach am meisten.
Immerhin hast du einen der größten Vorteile überhaupt… du bist 16, hast also noch ein „relativ“ freies Hirn ohne die ganzen unnützen Altlasten die wir alten säcke mit uns rumschleppen;)

gruß
csstester

7

Hallo,
Danke für eure Antworten,
@effchen
So ich habe jetzt erstmal die Menüpunkte jeweils in ein eigenes

  • gesetzt… und auch deine restlichen anweisungen befolgt,
    und siehe da es hat funktioniert =)
    das padding-left:0px; hats ausgemacht…

    Danke nochmal für eure Hilfe =)
    Habe nun auch den Code gesäubtert und so…

    Mfg lukiB