[CSS] Wel mooi in IE, niet in FireFox.

[Alex)]

Ik ben een nieuwe layout aan het ontwikkelen voor de schoolsite die ik beheer,
maar ik loop tegen een probleem aan. De header ziet er prima uit in IE (5 en 6), maar niet in FireFox. Ik kan er geen oplossing voor vinden.

Dit is het probleem:


Het moet zijn:

De hele layout staat hier: http://nw6.alex-web.nl/athene
De bewuste CSS voor de header:

Cascading Stylesheet:

/* De header opmaken */
#header {
    background-color:#1F5D6E;
    width:100%;
    height:79px;
}
/* Het logo plaatsen */
#header #left   {
    padding:2px;
    float:left;
    width:175px;
    height:75px;
    
}
#header #left a {
    text-decoration: none;
}
#header #left a img {
    width:175px;
    height:75px;
    border-style:none;
}

#header #right  {
    background-image:url(../afbeeldingen/athene/fotobalk.jpg);
    height:100%;
    float:right;
    
    
}
#header #right #content {
    width:100%;
    height:100%;
}
#header #right #content #fotobalktrans  {
    background-color:#1F5D6E;
    background-image:url(../afbeeldingen/athene/fotobalktrans.jpg);
    height:79px;
    width:101px;
    float:left;
    z-index:100;
}
#header #right #content #logincel   {
    float:right;
    padding:3px;
    color:#185D6B;
}
#header #right #content #logincel #box  {
    height:65px;
    width:240px;
    padding-right:5px;
    padding-top:5px;
    padding-bottom:5px;
    background-color:#BDD7C6;
    font-size:7.5pt;
    padding:2px;
    border-width:1px;
    border-style:solid;
    border-color:#000000;
    float:right;
}
#header #right #content #logincel #box #formulierlinks {
    float:left;
    /*width:100px;
    height:38px;*/
}
#header #right #content #logincel #box #formulierrechts {
    float:right;
    /*width:140px;
    height:38px;*/
}

#header #right #content #logincel #box #linksblok {
    width:240px;
}
#header #right #content #logincel #box #linksblok a {
    color: #185D6B;
    text-decoration:none;
}
#header #right #content #logincel #box #linksblok a:hover   {
    color: #185D6B;
    text-decoration:underline;
}
#header #right #content #logincel #box #formulierlinks input    {
    font-family: Verdana, Tahoma, Trebuchet MS, MS Sans Serif, Times New Roman;
    font-size:7.5pt;
    
}
#header #right #content #logincel #box #submit {
    width:71px;
    height:19px;
}

Het menu werkt wel naar behoren, overigens.

Wat ik al heb geprobeerd:

• display:inline, geen verschil
• position:absolute, pagina ziet er niet meer uit, en geen goed effect

Verder weet ik echt geen oplossing, hoewel ik goed heb gezocht. Kunnen jullie me helpen?

[ Voor 3% gewijzigd door Alex) op 24-03-2005 18:17 . Reden: Thumbnail geplaatst ]

[Rowanov]

Het blokje #fotobalktrans is te breed en duwt #logincel een regel naar beneden. Waarschijnlijk gewoon alle margins, paddings en borders op 0 gooien.

[Verwijderd]

Je kunt het jezelf natuurlijk zo moeilijk maken als je wilt. Ik zie:

• Een achtergrondplaatje (weinig kleuren dus .gif)
• Een of ander inlogformuliertje aan de rechterkant
• Een menu structuurtje

Ik bedenk dat ik ongeveer de volgende HTML ga gebruiken:

HTML:

<div id="header">
   <form>
      <!-- labels, velden, toelichting -->
   </form>
   <map>
      <ul>
         <!-- list items met linkjes en submenu's -->
      </ul>
   </map>
</div>

De header div krijgt het achtergrondplaatje, het formuliertje krijgt en border en een achtergrondkleurtje en float een beetje aan de rechterkant. Menutje eronder is gewoon een inline lijstje (clear: both;)

Een kwestie van weinig troep toevoegen. No offense, maar naar jouw code ga ik verder niet kijken. (een h2 als titel voor een menu?)

[Alex)]

Ik heb het script voor dat menu niet zelf gemaakt, maar gevonden op een tutorialsite, daar stond iets over <h2>, vandaar.

En er zitten 3 afbeeldingen in de header, het logo, een fotobalkje, en een overgang van het logo naar het fotobalkje.

[Verwijderd]

Alex schreef op donderdag 24 maart 2005 @ 18:38:
En er zitten 3 afbeeldingen in de header, het logo, een fotobalkje, en een overgang van het logo naar het fotobalkje.

Daarover verschillen we dan van mening. Ik zie één geheel. Waarom zou je het willen opsplitsen in 3 stukken?

[Alex)]

Nou, op verschillende resoluties loopt de fotobalk door, en om dan ook het logo en het verloop te herhalen, dat is niet erg mooi.

Overigens, #fotobalktrans heeft een width van 101px, hoe kan hij dan #logincel omlaagdrukken?

[Rowanov]

Zoals ik al zei door margin en padding en dergelijke. Ik heb alleen geen zin om dat hier lokaal te proberen omdat ik met dan eerst door een enorme kluwe code heen moet worstelen. Ik heb de Firefox webdeveloper toolbar gebruikt en dan "outline blocks" gebruikt om te kijken wat er aan de hand was.

[Alex)]

Die toolbar helpt zeker ja, hier kan ik iets mee, thx voor de tip