[xhtml/css] valid maar werkt niet in firefox

[ZEN]

Hi there,

Weet niet 100% zeker of dit een topic nodig heeft en of dit de juiste plaat is, maar here goes:

Ik ben bezig de site van mijn vriendin een beetje aan te passen. Ik wou graag alles in valid xhtml en css, maar het moest zowel in firefox en IE er goed uit zien.

Dit is het probleem:
- de code is valid (xhtml en css)
- werkt in IE
- werkt niet in Firefox

de bovenste 2 van de linker rij plaatjes weigeren een link te zijn.

Ligt dit toevallig aan mijn Firefox? Doe ik iets heel erg fout? Iemang goede suggesties hoe dit aan te pakken?

EDIT:
de oplossing van crisp werkt, daarom oorspronkelijke link verwijderd. Even ter volledigheid hier de verkeerde code:

De foute code (html)

code:

  <div id='menu'>
    <span class='menu_row1'>
      <a href='index.php?fuseaction=Ik.main'>[img]'Images/button1.jpg'[/img]</a>
      <span class='menu_col2'>
        <a href='index.php?fuseaction=Fotos.main'>[img]'Images/button2.jpg'[/img]</a>
      </span>
    </span>
    <span class='menu_row2'>
      <a href='index.php?fuseaction=Guestbook.main'>[img]'Images/button6.jpg'[/img]</a>
      <span class='menu_col2'>
        <a href='index.php?fuseaction=Links.main'>[img]'Images/button3.jpg'[/img]</a>
      </span>
    </span>
    <span class='menu_row3'>
      <a href='index.php?fuseaction=Word.main'>[img]'Images/button4.jpg'[/img]</a>
      <span class='menu_col2'>
        [img]'Images/button5a.jpg'[/img]
      </span>
    </span>
  </div>

De foute code (opmaak.css)

code:

body {
  background  : Black;
  color       : Silver;
  font-family : Arial, Helvetica, sans-serif, Verdana, Geneva;
  font-size   : 9pt;
}

#workspace {
  
}

#menu {
  
}

#main {
  
}

span.menu_row1 {
}

span.menu_row2 {
}

span.menu_row3 {
}

span.menu_col2 {
}

IMG.actief {
  border: 1px solid #FF1493
}

IMG {
  border: 0px;
}

De foute code (layout.css)

code:

body {
  margin: 0;
  padding: 0;
}

#workspace {
  margin-left:150px;
  margin-top: 12%;
  height:500px;
  width:800px;
}

#menu {
  float:left;
  width:300px;
  height:500px;
}

#main {
  height:500px;
  width:500px;
  position:absolute;
  left:450px;
  overflow: auto;
  margin-left:5px;
}

span.menu_row1 {
  padding-left:25px;
  padding-top:50px;
  position:absolute;
}

span.menu_row2 {
  position:absolute;
  margin-left:25px;
  padding-top:200px;  
}

span.menu_row3 {
  position:absolute;
  margin-left:25px;
  padding-top:350px;
}

span.menu_col2 {
  position:absolute;
  margin-left:50px;
}

De onnodig lastige oplossing met span lijkt de boel in de war te sturen. Thnx voor de snelle suggesties!

[ Voor 68% gewijzigd door ZEN op 06-07-2004 23:05 ]

[crisp]

tsja, syntactisch is het misschien correct en zou het op een bugje in FireFox kunnen duiden, maar persoonlijk vind ik de code niet logisch.
Waarom gebruik je inline-elementen om blokken te vormen (je positioneerd ze ook nog eens absoluut)? En waarom probeer je met diezelfde elementen ook nog eens een soort tabel-structuur te bouwen terwijl dat niet noodzakelijk is? Je kan al die plaatjes ook gewoon binnen je menu-div mbv floats positioneren; als je zonodig een tabel-structuur wil hebben gebruik dan liever een echte table (hoewel hier niet voor bedoeld).

[bredend]

Er is steeds maar 1 link per <span>. Misschien heeft het daar iets mee te maken

(De CSS layout.css is het probleem. Als ik die leeghaal met de Web Developer Extension werkt het wel...)

[ Voor 43% gewijzigd door bredend op 06-07-2004 22:46 ]

[crisp]

Even losse pols:

HTML:

<div id="menu">
  <a href="index.php?fuseaction=Ik.main"><img src="Images/button1.jpg" alt="ik" /></a>
  <a href="index.php?fuseaction=Fotos.main"><img src="Images/button2.jpg" alt="fotos" /></a>
  <a href="index.php?fuseaction=Guestbook.main"><img src="Images/button6.jpg" alt="guestbook" /></a>
  <a href="index.php?fuseaction=Links.main"><img src="Images/button3.jpg" alt="links" /></a>
  <a href="index.php?fuseaction=Word.main"><img src="Images/button4.jpg" alt="ik" /></a>
  <img class="actief" src="Images/button5a.jpg" alt="weblog" />
</div>

Cascading Stylesheet:

#menu {
  float:left;
  width:300px;
  height:500px;
}
#menu a, #menu img.actief {
  display: block;
  float: left;
  margin: 25px;
  margin-right: 0px;
}
#menu a img {
  border: none;
}
#menu img.actief {
  border: 2px solid blue;
}

[ Voor 16% gewijzigd door crisp op 06-07-2004 22:54 ]

[Spruit_elf]

als ik je layout css file link tag weghaal dan doet ie het wel gewoon,
* Spruit_elf gaat ff uitzoeken wat het em doet


EDIT:
in dit stukje zit het probleem, als je dit weghaalt dan doet ie het wel gewoon
ik denk dat het ermee te maken heeft dat je spans een absolute positie geeft en daarin een a en img hebt zonder hoogte en breedte op te geven
kan je niet beter div gebruiken ipv span?

code:

span.menu_row1 {
  padding-left:25px;
  padding-top:50px;
  position:absolute;
}

span.menu_row2 {
  position:absolute;
  margin-left:25px;
  padding-top:200px;  
}

span.menu_row3 {
  position:absolute;
  margin-left:25px;
  padding-top:350px;
}

span.menu_col2 {
  position:absolute;
  margin-left:50px;
}

[ Voor 86% gewijzigd door Spruit_elf op 06-07-2004 22:56 ]

[ZEN]

Heel erg bedankt voor de reacties. Ik heb meteen ook even die extension geinstalleerd. Het ligt duidelijk aan die CSS ja, volgende keer niet al te veel vertrouwen op die validator.

Je hebt gelijk dat het een beetje vreemde constructie is geworden crisp. Was ergens mee begonnen en wou het halverwege toch anders, dan krijg je dit Ik ga nu even je suggestie proberen.

De site zoals in de originele post ga ik dus aanpassen. Mocht het niet werken, dan zet ik het weer terug in de oude staat.

Thnx!

De suggesties van crisp er in gezet. Werkt perfect. Klein beetje aangepast, zodat opmaak in opmaak.css staat en niet een blauw maar roze randje. Super gaaf. Het lijkt dus aan die span constructie te liggen. Als het kan, pas ik wel even de start post aan met daar in de foute code, ipv een link. Misschien nuttig voor anderen.

[ Voor 25% gewijzigd door ZEN op 06-07-2004 23:01 ]