[CSS]Geen backgrounds in Firefox

[Katarn]

Ik zit al een tijdje met een probleem op m'n site. In Internet Explorer werkt alles prima, echter in Firefox verdwijnen mijn knoppen. Nu ben ik helaas geen expert in HTML / CSS, waardoor ik zelf dus maar weinig andere mogelijkheden zie. Ik heb weleens wat zitten experimenteren, maar ik ben er nooit uitgekomen.

De knoppen zijn opgemaakt via een ID-selector:

code:

   <tr id="menub">
    <td colspan="2" align="center" valign="top" height="5%">
     <a href="index.php">Start</a>&nbsp;

In de stylesheet staat de volgende vermelding onder dit ID:

code:

#menub a {
text-align: center;
background-image: url('images\button.gif');
width: 120px;
height: 30px;
padding-top: 3px;
vertical-align: middle;
color: rgb(0,0,0);
text-decoration: none;
}
#menub a:hover {
background-image: url('images\button2.gif');
}
#menub a:active {
background-image: url('images\button3.gif');
}

De site is hier te vinden.

In Firefox zie je de tekst gewoon staan, de background verdwijnt alleen.

Ik heb ook eens geprobeerd zelf een knop te fabriceren, maar van Photoshoppen bak ik niet veel. Deze optie vervalt dus echt. Voor alle andere opties sta ik wel open

[Verwijderd]

code:

#menub a:hover {
background-image: url('images/button2.gif');
}
#menub a:active {
background-image: url('images/button3.gif');
}

Op het interweb gebruiken we de forward slash.

[Katarn]

Dankje, klein foutje. Maar IE blijkt het toch te slikken met een backslash, want het heeft altijd zo gewerkt.
Helaas is dit alleen niet de oplossing voor Firefox.

[Verwijderd]

Katarn schreef op maandag 11 juli 2005 @ 13:31:
Dankje, klein foutje. Maar IE blijkt het toch te slikken met een backslash, want het heeft altijd zo gewerkt.
Helaas is dit alleen niet de oplossing voor Firefox.

Dat IE het slikt wil niet zeggen dat het goed is.

[Katarn]

Mee eens, was meer een verbazing dat het al die tijd toch gewerkt heeft.
Maar heb je enig idee hoe ik dit werkende krijg in Firefox?

[crisp]

display:block

[Katarn]

Ik heb een poging gedaan, maar ik kom er helaas nog niet uit.

In de stylesheet heb ik gezet:

code:

.blokweergave { display: block; text-align: center; background-image: url('images/button.gif'); width: 120px; height: 30px; padding-top: 3px; vertical-align: middle; color: rgb(0,0,0); text-decoration: none; }

Vervolgens in de header:

code:

   <tr>
    <td colspan="2" align="center" valign="top" height="5%">
     <a href="index.php" class="blokweergave">Start</a>&nbsp;
     <a href="nieuws.php" class="blokweergave">Nieuws</a>&nbsp;
     <a href="vereniging.php" class="blokweergave">Vereniging</a>&nbsp;
     <a href="teams.php" class="blokweergave">Teams</a>&nbsp;
     <a href="links.php" class="blokweergave">Links</a>&nbsp;
     <a href="reglement.php" class="blokweergave">Reglement</a>&nbsp;
    </td>
   </tr>

Het eerste probleem wat zich voordeed was dat alle knoppen onder elkaar kwamen te staan, in plaats van naast elkaar.
En daarnaast werd de tekst op de knoppen anders van kleur, de kleur van hyperlinks. Nadat je er op klikte veranderde de kleur dus weer. De knoppen zelf kreeg ik niet zoals ze nu zijn. Ik zag de standaard gele knop, en kreeg hem bij mouseover niet aangepast.

edit:
Ik dacht alles naar het oude terug te hebben verandert, alleen nu zie ik opeens wel een stukje knop in Firefox. Hij is alleen nog niet de juiste grootte. Zou dit eventueel te verhelpen zijn door de knoppen in een tabel te plaatsen?

[ Voor 23% gewijzigd door Katarn op 12-07-2005 09:21 ]

[crisp]

Naast elkaar zetten kan je mbv floats regelen. Je kan alleen dimensies, achtergrond e.d. op een element toepassen als het (inline-)block is (althans, in standards-compliant browsers).
Een tabel is sowieso niet aan te raden; voor dit soort opsommingen kan je beter een list gebruiken.

[Verwijderd]

Die class attributen zijn vrij onnodig, maar ook niet erg slim qua naam, neem eens een kijkje op deze pagina > http://www.w3.org/QA/Tips/goodclassnames

Het beste kan je je class attributen weglaten en descendant selectors gebruiken in je stylesheet, zie http://css.maxdesign.com..../selectors_descendant.htm

[ Voor 52% gewijzigd door Verwijderd op 12-07-2005 12:43 ]

[Mirrorshade]

Bij het maken van een menu is het handig de links in een ongeordene lijst zetten.

code:

<div id="menu">
<h4> Het menu</h4>
<ul>
    <li>[hier je link]</li>
    <li>[hier je link]</li>
    <li>[hier je link]</li>
</ul>
</div>

Dan zou ik met Css alles op zijn plaats zetten. Dus de <li> tags floart:let; doen.

kijk eens op deze site:
www.alistapart.com
www.w3schools.com

suc6!

[edit]
Ook even bijhorende Css voor je geschreven

code:

#menu {
    width:300px;
    height:30px;
    margin:0;
    padding: 0;
    display: block;
    }
    
#menu ul {
list-style: none;
margin: 0;
padding: 0;
display: block;
}
#menu li {
margin: 0;
padding: 0;
float: left;
display: block;
}

#menu h4{
display:none;
}

[ Voor 50% gewijzigd door Mirrorshade op 12-07-2005 14:34 . Reden: toevoeging ]

[Katarn]

Bedankt voor alle tips , het is me nu bijna gelukt.

Ik zit alleen nog met één probleem, een kleinigheidje, alleen kan ik het even niet vinden. De knoppen wil ik in het midden uitgelijnd hebben, terwijl ze nu links uitgelijnd staan. Ik heb dus alleen geen idee waar dat aan ligt.

Stylesheet:

code:

#menu {
margin: 0;
padding: 0;
}

#menu ul {
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
clear: left;
}

#menu ul li {
display: block;
float: left;
text-align: center;
padding: 0;
margin: 5px;
}

#menu ul li a {
background: url('images/button.gif');
width: 120px;
padding-top: 5px;
padding-bottom: 8px;
color: rgb(0,0,0);
text-decoration: none;
display: block;
text-align: center;
font-size: 14px;
font-family: verdana, arial, sans-serif;
}
#menu ul li a:hover {
background: url('images/button2.gif');
}

#menu ul li a:active    {
background: url('images/button3.gif');
}

Header:

code:

 <tr>
  <td colspan="2" align="center" valign="top" height="5%">
   <div id="menu">
    <ul>
     <li><a href="index.php">Start</a></li>
     <li><a href="nieuws.php">Nieuws</a></li>
     <li><a href="vereniging.php">Vereniging</a></li>
     <li><a href="teams.php">Teams</a></li>
     <li><a href="links.php">Links</a></li>
     <li><a href="reglement.php">Reglement</a></li>
    </ul>
    <ul>
     <li><a href="programma.php">Programma</a></li>
     <li><a href="uitslagen.php">Uitslagen</a></li>
     <li><a href="standen.php">Standen</a></li>
     <li><a href="foto.php">Foto&rsquo;s</a></li>
     <li><a href="gastenboek/guestbook.php">Gastenboek</a></li>
     <li><a href="forum/index.php">Forum</a></li>
    </ul>
   </div>
  </td>
 </tr>

Ik heb even een voorbeeldje online gezet van hoe het er nu uitziet: http://www.etc-hoogvliet.nl/index2.php

[Mirrorshade]

Als je in de DIV 'menu' dit zet :

width:800px;

dan verklein je de ruimte van menu, omdat je in de td align='center' hebt gezet, komt de verkleinde box in het midden te staan.

good luck!

[Verwijderd]

Die <div> lijkt me (net als de tabel waar alles in staat) onnodig. Je kan ook de <ul> een id="menu" geven natuurlijk.

[Mirrorshade]

In deze situatie zou je inderdaad de menu div weg kunnen laten en de ul tag er voor gebruiken.

Maar mocht er ooit nog een sub-menu bij komen of zo dan is het wel handig om alle links in een apparte box te hebben staan

[Katarn]

Bedankt, ben voor de oplossing van Mirrorshade gegaan.

Als je elke <ul> het id menu meegeeft, krijg ik fouten terug van de validator, aangezien je twee keer dezelfde id gebruikt. Het werkt wel, maar als ik het goed begrijp hoort het niet zo.

Maar het menu werkt nu prima, in zowel IE als Firefox.

[Daan]

Dan doe je niet <ul id='bla'> maar <ul class='bla'>
En dan in je CSS natuurlijk '.bla' i.p.v. '#bla'.