[CSS] Links in div werken niet in Firefox - Softwareontwikkeling

vrijdag 29 februari 2008 14:19

Acties:

Verwijderd

Topicstarter

De website van een zomerkamp wordt door mij iets opgewaardeerd. Dat houdt vooral in dat frames vervangen worden door dividers en de opmaak zoveel mogelijk in de CSS staat en content in de html.
Te zien op: http://gjczomerkampen.nl/gjc1.0/

Daarbij was er echter een probleem met stukken tekst die in Internet Explorer wegvielen:

Afbeeldingslocatie: http://img3.freeimagehosting.net/uploads/a2e648fcf8.jpg

Wat in Firefox geen problemen opleverde:

Afbeeldingslocatie: http://img3.freeimagehosting.net/uploads/9a9b0aeee1.jpg

Dit probleem leek volgens Google nog veel vaker voor te komen en liet zich oplossen door het gebruik van position: relative; in de betreffende delen.
Hiermee is een nieuw probleem geboren: links die in Firefox in de linker kolom/divider niet meer werken. Dit is vooral goed te zien op de pagina "Leiding". Dit probleem heb ik met wat gegoogle en gezoek helaas niet op kunnen lossen.

De pagina is als volgt opgebouwd:

code:

<div class="container">
    <div class="bgheader"></div>
    <div class="header"><h1>GJC Zomerkampen</h1></div>

    <ul class="navigation">menu gebeuren</ul>
<div class="clear"></div>
    <div class="content">

        <div class="collumnleft">Linkerkolom met links</div>
        <div class="collumnright">Rechterkolom met inhoud</div>

    </div>
    <div class="shadow"></div>
</div>

Met de stukjes CSS van de betreffende delen:

code:

.collumnleft {
    float: left;
    max-width: 170px;
    padding: 10px 10px 5px 10px;
    font-size: 9pt;
}

/* for Internet Explorer */
/*\*/
* html .collumnleft {
    width: 190px;
}
/**/

.collumnright {
    position: relative;
    padding: 10px 5% 50px 190px;
    font-size: 9pt;
}

De rest van het stylesheet is hier te vinden: http://gjczomerkampen.nl/gjc1.0/style.css

Wat ook nog een probleempje is, is dat de inhoud van beide "kolommen" (links en rechts) niet op dezelfde hoogde starten.

Alvast bedankt voor jullie hulp.

vrijdag 29 februari 2008 15:43

Acties:

Blaise

Je kan voor collumnright ook een vaste breedte opgeven, daarmee vermijd je waarschijnlijk ook het probleem dat een deel van de inhoud wegvalt.

Ik zie dat je ook een box model fix hebt voor Internet Explorer op regel 8 van je CSS. Dat kan je beter oplossen met een stricte doctype (<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">), waardoor IE de standards box model gebruikt.

Tot slot: je geeft je font eenheden in pt. Dat is voor print, kan leiden tot rare resultaten in verschillende browsers en de grootte is afhankelijk van resolutie. Beter is het om eenheden te gebruiken die geschikt zijn voor het beeldscherm, zoals em, ex en px.

vrijdag 29 februari 2008 15:59

Acties:

Verwijderd

Topicstarter

Ik wil eigenlijk dat collumnright meeschaalt, waarmee een vaste breedte dus eigenlijk geen oplossing is.
De eenheden zal ik even aanpassen. Maar ik vrees dat hiermee de problemen mbt. niet werkende links niet opgelost zullen worden.

Ik ga er vannacht nog even naar kijken. Tot die tijd ben ik blij met alle reacties

/edit: "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">" werd al aangegeven bovenin het document.

[ Voor 17% gewijzigd door Verwijderd op 29-02-2008 16:00 ]

vrijdag 29 februari 2008 23:14

Acties:

Blaise

Ja, dat is een andere doctype dan die ik vermeldde

[ Voor 8% gewijzigd door Blaise op 29-02-2008 23:15 ]

zaterdag 1 maart 2008 11:13

Acties:

Verwijderd

Topicstarter

Sorry, je hebt inderdaad gelijk. Het aanpassen van de doctype levert me weer een aantal "problemen" en laat ik voor het gemak nog even zitten.

Bij collumnright wordt aangegeven dat deze zich over of onder collumnleft bevindt (padding: 10px 5% 50px 190px;). Daar zou in Firefox nog wel eens het probleem kunnen zitten met de niet-werkende links in de linker kolom.
Mogelijke oplossingen hiervoor zijn; z-index van de linker kolom verhogen, "left" gebruiken om de rechter kolom te positioneren. De z-index verhogen geeft geen merkbaar resultaat en het gebruik van left zorgt voor een volgend resultaat (met werkende links):

Afbeeldingslocatie: http://img3.freeimagehosting.net/uploads/f6eda4185e.jpg

Afbeeldingslocatie: http://img3.freeimagehosting.net/uploads/f10558cf70.png

Het is dus nog niet helemaal wat het zou moeten zijn

Heeft iemand een oplossing, tip of hint? Bedankt!

[ Voor 7% gewijzigd door Verwijderd op 01-03-2008 11:20 ]

zaterdag 1 maart 2008 15:27

Acties:

Blaise

Ik zou wel bij een stricte doctype blijven want dan gedraagt IE6 zich een stuk beter.

Voor een fluid 2-koloms structuur heb je een heleboel werkende voorbeelden die je zo kan overnemen. Bijvoorbeeld http://www.airyproductions.com/eaglehue.htm, http://www.alistapart.com/articles/negativemargins/, http://css.maxdesign.com.au/floatutorial/tutorial0815.htm etc.

zaterdag 1 maart 2008 15:42

Acties:

Verwijderd

Topicstarter

Ik moet eerlijk toegeven dat ik nooit zo op de doctype heb gelet, dat werd automagisch in mijn pagina gedropt door HomeSite. Het aanpassen van de doctype levert mij weer een hoop extra werk op en is misschien iets voor latere zorg

De voorbeelden die jij gaf hebben mij wel op het volgende gebracht; de aangegeven padding van de rechterkolom heb ik veranderd in een margin.
padding-left: 190px; is nu dus margin-left: 190px;
Hierdoor ligt de rechterkolom niet meer over de linker heen en doen de links het weer in Firefox.

Bedankt voor de hulp.

zaterdag 1 maart 2008 21:59

Acties:

Herko_ter_Horst

Ik weet niet uit m'n hoofd of je huidige doctype ervoor zorgt dat bepaalde browsers in "quirks" mode draaien. Als dat wel zo is, is het niet iets voor later, maar essentieel om een goed cross-browser resultaat te krijgen.

"Any sufficiently advanced technology is indistinguishable from magic."