CSS werkt niet goed in IE, wel in safari/firefox

[AAC]

Ik ben bezig met een concept voor een site en gebruik XHTML 1.0 en CSS. Alles ging prima in safari (mac), firefox (mac/win) en IE (win) tot ik de 'nieuwsboxjes' rechts naast de hoofdtekst wilde zetten. Safari en Firefox laten dat goed zien maar IE6win niet. Ik heb van alles geprobeerd maar ik kom er niet uit...

het gaat om deze site: http://dam01586.speed.planet.nl/dekenaatconcept/index.php en de stylesheet staat hier.

het gaat om dit stukje css (denk ik):

code:

.page {
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0px;
    padding: 0px;
    width: 910px;
    border-bottom: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    background-color: #FFFFFF;
    background-image:  url("images/pageback.gif");
    background-repeat: no-repeat;
    background-position: bottom right;
}
.maincontent {
    float: left;
    width: 400px;
    margin: 100px 0px 15px 290px;
    color: #2A2A2A;
    font: 12px 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;
}
.maincontent h3 {
    font-size: 15px;
    font-weight: bold;
    color: #CF7C2F;
}
.newsposition {
    margin: 105px 0px 0px 723px;
}
.newsbox {
    background-color: #f5f5f5;
    padding: 3px;
    border: 1px solid #CCCCCC;
    border-right: none;
    margin: 0px 0px 15px 0px;
    color: #CF7C2F;
    width: 180px;
    font: 10px 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;
}

newsposition en maincontent zitten allebei in die page class, en die page class moet dus ook even groot worden als de grootste van die twee. iedere newsbox zit onder elkaar in de newsposition class, die aan de rechterkant van de page class moet komen. (rechts naast maincontent dus)

[bolleh]

je moet die page div een position: relative; geven ipv absolute;

dan zou die gewoon zo groot moeten worden als de content.
zowiezo heeft het in dit geval imho geen nut om hem een absolute mee te geven aangezien je hem toch top: 0px en left: 0px positioneert

[AAC]

als ik dat doe gaat het egt nog veel ernstiger mis

voorbeeld: http://dam01586.speed.planet.nl/dekenaat_relative/index.php

[bolleh]

dat komt omdat je je pagina imho vanaf het begin af aan verkeerd heb opgebouwd

je page div met de "content" is absolute met daarin een aantal floats.
daaronder in je html code komt al je menu code, maar op je pagina is vanaf linksboven het menu het eerste wat er te zien is.

verder zie ik ook geen reden waarom je dat menu niet in je page div kan zetten. dan maak je gewoon 3 kolommen aan, 1 voor je menu, 1 voor je content en 1 voor je nieuws blokken. vele malen meer scalable dan dit. die 3 kolommen kun je dan gewoon float: left; meegeven en dan zal je page div met position: relative; ook gewoon meeschalen.

een logische html structuur is imho vaak het makkelijkst in combinatie met een simpele layout opbouw


je geeft een aantal divs nu ook vreselijk grote margins mee die het in het verdere opbouwen niet overzichtelijker maken die in een 3 kolommen layout gewoonweg niet nodig zijn. tis dus ook makkelijker voor jezelf

[ Voor 16% gewijzigd door bolleh op 12-06-2005 20:21 ]

[AAC]

ok thnx ik ga ff proberen om het in een beetje logischere volgorde te zetten, ik werkte vroeger altijd met tables dus ben nog niet zo erg goed in css had al een beetje het idee dat er iets niet helemaal klopte in mn opbouw maargoed..

[AAC]

ok ik heb het nu even snel in de goeie volgorde gezet en IE pakt het nu prima, maar... inderdaad firefox en safari niet meer. In FF en safari wordt die page div niet meer meegestretched met de maincontent en het nieuws.

Nieuwe link: http://dam01586.speed.planet.nl/dekenaat/

edit:
het werkt nu wel...

[ Voor 21% gewijzigd door AAC op 12-06-2005 21:09 ]

[bolleh]

netjes, tip verder nog:
die topbar en logo div kun je gewoon een image van maken op de volgende manier:

HTML:

[img]"images/topbar.gif"[/img]

Cascading Stylesheet:

#topbar
{
    position: absolute;
    left: 270px;
    width: 625px;
    height: 100px;
    border: 0;
}

voor dit soort dingen heb je immers geen divs nodig

verder kun je voor dingen die je maar 1 keer gebruikt op je pagina, zoals "topbar" net zo goed een id van maken in plaats van een class. het is het beste om eigenlijk gewoon id's te gebruiken en echt dingen die je vaker gebruikt als class te definieren.

let wel dat je voor in je css dan een # gebruik ipv een .