CSS Probleem (eigenlijk een IE probleem)

[StijnH]

Ik zoek hier nu toch al een 2tal maand naar, maar nog steeds geen oplossing gevonden.
De website werkt goed in FF, maar niet in IE.
Ik had mijn hoop op IE7 gezet, maar tevergeefs.
Hier een simpele afbeelding van wat ik wil

Redelijk duidelijk denk ik. De main (waar foto en tekst in staan) heeft een min-height.
Dus wanneer de tekst langer is dan de min-height, rekt deze uit.
--> Probleem #1 (werkt niet in IE)
(de pagina 'Verkiezingen' (zie link hieronder) heeft momenteel een apparte css instelling, fixed height, maar dit wil ik liever niet. Ook heb ik het probleem met de footer (hieronder) niet, want er is geen afbeelding, dus geen floating div nodig).

De footer moet onder de main komen. De foto en tekst zijn 2 floating div's. (neen ik gebruik geen tables).
In FF ziet dit er goed uit.
In IE gaat de footer zo naast de tekst gaan staan.
--> Probleem #2

Op de index staan nieuwsberichten.
Dit zijn telkens een foto, en een kort tekstje, ofwel 1 foto die de plaats van foto + tekst inneemt. Dit zijn ook weer floating div's. 2 naast elkaar, 2 onder elkaar.
De footer ziet er weer niet goed uit in IE.
--> Probleem #3

Voor de opdrachtgever was het geen probleem om IE6 gebruikers kennis te geven van IE7, zodat het probleem met transparent PNG's opgelost zou zijn.

De website hemzelve: http://www.vlaamsbelangroeselare.be/
Voor voorbeelden van de bovenstaande figuur, kijk bijvoorbeeld bij 'Regio Roeselare'.
Indien gewenst kan ik een 'lege pagina' (zonder foto en tekst) bezorgen.
De css staat in includes/main.css

Als je deze kunt oplossen, proficiat.
Misschien heb ik er al te lang op zitten zoeken, en ligt de oplossing voor de hand. Of misschien is het echt moeilijk op te lossen.

Ik hoef geen commentaar over de inhoud, dankuwel
En ik hoef ook geen tables


Nog een goede avond, en bedankt voor de hieropvolgende berichten. Nu ga ik mijn bed opzoeken

Groeten,
Stijn Herreman

[We Are Borg]

Probleem twee heeft met clearing te maken denk ik en voor je complete design: faux columns

(zonder naar code te kijken, dat wel)

[StijnH]

We Are Borg schreef op dinsdag 28 november 2006 @ 23:08:
Probleem twee heeft met clearing te maken denk ik en voor je complete design: faux columns

(zonder naar code te kijken, dat wel)

Ik heb deze avond al iets over faux columns gelezen, zal daar eens dieper in kijken

[Boelie-Boelie]

offtopic:
..zal het commentaar over de inhoud idd maar achterwege laten..

Wil je browserverschillen zoveel mogelijk vermijden, dan zou je er eerst een geschikt doctype boven moeten zetten. (Over het waarom.)

Om een footer onder floats te krijgen, moet je ff zoeken naar 'clearing floats'. Faux columns voor dit design.. Die snap ik even niet. Overigens zie ik dat je soms te veel float (is niet overal nodig, vooral niet bij divs die sowieso al de hele breedte van de parent innemen).

Wil je iets een min-height meegeven, kun je voor IE een IE-only stylesheet maken met 'height' erin (IE6 en lager zien height als min-height) en 'm tussen conditional comments zetten.

[ Voor 3% gewijzigd door Boelie-Boelie op 29-11-2006 00:34 ]

[StijnH]

Bedankt Boelie-Boelie.

En FF ziet "height" dan als een fixed height?

[daniëlpunt]

Ja dat klopt, en dat is ook zo volgens de CSS specificaties.:)

[StijnH]

Even een update hierover

Kben momenteel de CSS aan het herschrijven, en heb de problemen opgelost met iets wat ik onlangs gevonden heb: dynamische css.
Gewoon php vermengen met css.
Wat moet je daarvoor doen?

.htaccess

code:

AddType application/x-httpd-php .css

main.css (bovenaan)

code:

<?php
header("Content-Type: text/css");
?>

Dit is omdat html 4.0 en xhtml strict de css anders niet accepteren

Wat kun je dan doen?
Bijvoorbeeld

code:

<link rel="stylesheet" href="includes/main.css?achtergrond=secretariaat-pagina.png" type="text/css" media="screen" />

En in je css dan:

code:

#main {
min-height: 383px;
margin: 20px;
padding-bottom: 70px;
<?php
if(isset($_GET['achtergrond']))
{
?>
padding-left: 300px;
background-image: <?= "url(../images/".$_GET['achtergrond'].")" ?>;
background-repeat: no-repeat;
<?php
}
?>
}

Daarmee ben ik ook ineens verlost van een hoop floats
Hoop dat jullie er ook wat mee zijn

Website is btw compatibel gemaakt voor IE7, FF2 en Opera 9

[ Voor 4% gewijzigd door StijnH op 17-12-2006 18:20 ]

[Isnowiz]

Die wijziging in .htacess is als het goed is niet eens nodig...

[StijnH]

Toch wel, normaal gezien staat .css standaard niet in de php.ini