Firefox zeigt <div>-Button jedes zweite mal falsch.

[Rookai]

Hallo Leute,

ich habe eine Internetseite erstellt, in der ich 3 <div>'s mit Linkfunktion benutzen möchte. Wenn die Maus über einem der <div>'s ist, soll sich sein Hintergrund färben. Jeder der <div>'s enthält weitere <div>'s mit je einem Bild und Text.
Das kuriose ist, im IE 7 läuft es stets problemlos, im FF 2 hingegen zerlegt er bei zirka jedem 2ten Aufbau der Seite der ersten der <div>'s in seine Bestandteile.

Der Source lautet:

<div id="button_box" style="padding-left:4px;">
        <a href="ich.html" id="button">
            <div>&nbsp
            <img border="0" src="GFX/user.gif"/>
            <div id="text">Profil</div>
            </div>
        </a>
        <a href="arbeit.php" id="button">
        <div>&nbsp
            <img border="0" src="GFX/work.gif" />
            <div id="text">Mein Job</div>
        
        </div></a>
        <a href="impressum.html" id="button">
            <div>&nbsp
            <img border="0" src="GFX/reg.gif" />
            <div id="text">Impressum</div>
        </div>
        </a>
    
    </div>

und das CSS:

a:link, a:visited, a:hover, a:active
{
 text-Decoration: none;
 color:#000000;
}

#button_box a, #button_box_top a
{
background-color:#94B3FC;

}

#button_box a:hover,#button_box_top a:hover
{
background-color:#adb9d8;

}

#button_box {

height:90px;

margin-bottom:30px;
        
}

#button {
border-top:1px solid #C0C0C0;
padding-top:5px;
padding-bottom:5px;
text-align:center;
vertical-align:middle;
font-size: 18px;
margin-left:10px;
margin-bottom:10px;
float:left;
width:230px;

color:#666666;
    
}

#text {
padding-top:5px;
    
}

Eventuell weiß jemand weiter. Ich danke jetzt schon vielmals! ;Jump

 

[csstester]

hol erstmal dein blockelemente aus den inlineelementen raus, das geht doch nicht;)

und was fürn divsüppchen da wieder gekocht wurde, machs mal ganz einfach mit html und es wird gehen

 

[Rookai]

Hmm HTML^^

Also ich möchte einen Button kreieren aus Image und Text, wenn die muas drüber ist soll sich das färben. Wie mach ich das denn noch anders? Lg Tut mir leid dass ich so schlecht bin :(

 

[csstester]

Also ich möchte einen Button kreieren aus Image und Text, wenn die muas drüber ist soll sich das färben. Wie mach ich das denn noch anders? Lg Tut mir leid dass ich so schlecht bin :(

das muß dir nicht leid tun, zumindest dann nicht wenn du vorhast daran etwas zu ändern;)

sieh dich mal hier um wenn dir um Navigationsleisten mit css geht.

Ansonsten kann ich dir nur raten sieh dich im netz und hier einfach mal etwas um und lern Html und CSS, ist eigentlich ganz leicht, nur halt ausm ärmel schütteln geht auch nicht.

gruß
csstester

 

[stachelbeer]

Dein Menü wird wohl eher in diese Richtung strukturiert sein:

<ul id="menu">
  <li>
    <a href="#1">
      <img src="GFX/user.gif" alt="" />
      <span>Profil</span>
    </a>
  </li>
  <li>
    <a href="#2">
      <img src="GFX/work.gif" alt="" />
      <span>Mein Job</span>
    </a>
  </li>
  <li>
    <a href="#3">
      <img src="GFX/reg.gif" alt="" />
      <span>Impressum</span>
    </a>
  </li>
</ul>

Id dürfen immer nur einmal vorkommen. Das Alt-Atribut ist zwingend. Die Bilder sollten den Rahmen mit CSS formatiert bekommen:

a img  {
  border:0;
}

Die Listenpunkte kriegst Du mit

#menu {
  list-style-type:none;
}

weg.

Leider hast Du keine Informationen gegeben, wie das ganze aussehen soll, deswegen kann ich keine weiteren Vorschläge machen.