• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Darstellung im FireFox

Status
Für weitere Antworten geschlossen.
L

lukiB

Mitglied
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
 
Werbung:
ich denke schon, dass man dir helfen wird, aber du muss erst mal den entsprechenden code posten.

Code: 
<div id="header">
 </div>
 
  <div id="navi">
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.
 
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
 
Werbung:
Ok danke schonmal, ich habe alles gemacht aber es ist immernoch das gleiche problehm...
hier mal mein HTML Code :
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <title>Blog lukiB</title>
 <meta name="generator" content="HTML Studio">
 <link rel="stylesheet" type="text/css" media="screen" href="style.css">
 </head>
 <body>

 <div id="site">

 <div id="header">
 </div>
 
  <div id="navi">

    <ul>

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



      
      </li>
      
    </ul>

  </div>




</div>

<br class="clear">

 </body>
</html>
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;}
OK das Problehm mit den Abständen zwischen den divs habe ich gelöst, ganz einfach mit:
Code: 
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
 
Zuletzt bearbeitet:
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
 
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
Code: 
  border:0px white dotted;
und
Code: 
background-color:none;
das ist doppelt gemoppelt
Code: 
#navi ul {
    list-style-image: none;
    list-style-type: none;
    
}
wenn du keinen type hast musst image nicht mehr extra auf none setzen

Code: 
#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.

Code: 
<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
 
Werbung:
Hallo,
Danke für eure Antworten,
@effchen
So ich habe jetzt erstmal die Menüpunkte jeweils in ein eigenes <li></li> 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
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben