CSS dubbele background-image in FF wel, IE weer niet

[Shockie]

Hallo,

Ik heb een probleem met mijn website. Ik wil mijn portfolio lay-out weer eens drastig veranderen en ik ben nu bezig met de html/css opbouw. Ik ben nog maar net bezig en het 1e probleem dient zit alweer aan. Het zit zo:

Mijn site bestaat uit een div_bg_top en een div container waar alles in komt te staan. In div bg_top staat een plaatje horizontaal loopend, het is een jpg omdat IE png niet ondersteunt en GIF dramatisch is in gradient alpha. de site werkt perfect in FF, de div bg_top zit netjes achter de div container en je ziet geen verkeerde loop. Echter in IE werkt het natuurlijk niet ( wnnr wel ;) ), Het lijkt erop dat de div bg_top niet goed gepositioneerd wordt, naast de div container.

Wat zou hier verkeerd aan zijn?

Linkje naar de temp-site:
Test Portfolio cross-browser probleem (http://www.shockie.nl/temporary/portfolio_3.0/index.html)

En als je de CSS niet kan vinden:
De CSS (http://www.shockie.nl/temporary/portfolio_3.0/style_1.css)

Alvast bedankt.

[Lorrens]

Probeer dit eens :

html {
width: 100%;
}
div#dv_top{
height: 120px;
width: 100%;
background:url('images/pf_bg_top.jpg') repeat-x;
z-index: 1;
position: absolute;
top: 0px;
left: 0px;
}


Zo positioneer je hem goed, nu wordt hij gewoon naar rechts geschoven volgens mij. Zou kunnen werken..

[Shockie]

Heel erg bedankt, hij loop'ed nu netjes, alleen de container staat in IE niet mooi gecentered maar dat is fine-tuning :D

[Lorrens]

ik keek nog even in je css.. wat is dit:
left: 12.5%;

right: 12.5%;

in je div#container?

[Shockie]

ja, hiermee center ik de container. Omdat de text-align center truck niet werkt op een absolute gepositioneerde div'jes, hiermee lukt het wel. Ook is het vreemd dat mijn unorderd list niet getoond wordt als ik hem op display: inline zet. Ik heb hem nu op display: table-cell gezet, nu wordt hij in FF goed gerendered maar in IE ziet hij dit niet.

De geupdate versie van de site staat op:
Website (http://www.shockie.nl/temporary/portfolio_3.0/)

de css:
CSS (http://www.shockie.nl/temporary/portfolio_3.0/style_1.css)

[Shockie]

Na een beetje surfen op het internet kwam ik erachter waarom de table-cell niet gerendered wordt in IE.

table-cell is een CSS property, en IE kan dat niet aan.

Nu rest nog, hoe kan ik dan de table-cell view in IE maken aangezien de inline al niet goed werkt?

[Lorrens]

sorry, ik heb hier dit weekend UREN mee zitten kloten, properties die hij niet kent in IE maar wel in FF, uiteindelijk hebben het allebei werkend gekregen in FF en in IE, zodat het er precies hetzelfde uitziet..
kan je laten zien wat je nu hebt, en waar je wilt komen?
dan moet ik je wel kunnen helpen denk ik :)

[Shockie]

Wat ik wil hebben is, hoe hij in FF eruit ziet. Alleen het tabbed menu'tje is het probleem bij mij lay-out. Wat ik eerst simpel dacht aan display: inline, werkt niet. En aangezien het mijn portfolio wordt en ik de code zo schoon mogelijk wilt houden, wil ik tables zoveel mogelijk vermijden ondanks dat het bijna lijkt op de laatste normale manier om de tabs naast elkaar te hebben.

De lay-out had ik zo in mijn gedachte:
JPG-concept (http://www.shockie.nl/temporary/portfolio_3.0/concept_version3.6.jpg)

Zoals je ziet lukt alles in html/css, behalve het menu'tje. :S

[Lorrens]

ahhh tabmenu van DynamicDrive!
Heel irritant aangezien die werkt met li's .. en niet met div's..
je hebt nog meer types.. kan je hem niet eens in tr zetten ipv table-cells, moet je maar een beetje proberen

[Shockie]

Ik heb de moed opgegeven om het menu'tje in een list te zetten, en heb ze zoals in je linkje ze in div'jes gemaakt. Ze werken nu voldoende alleen ziet mijn site in IE er heel vreemd uit. Het lijkt alsof hij mijn sidebar ( search, archives, enz. ) niet goed rendered. Als je naar beneden scrollt ziet hij opeens de borders en images wel, als je dan weer naar boven scrollt geeft hij ze weer niet weer. Ik heb dit probleem nog nooit gehad.

Ik maak trouwens niet gebruik van DynamicDrive, omdat ik alles zelf wilt bouwen en zonder javascript moet het ook kunnen, alleen moet IE mee werken.

Zowieso al bedankt Lorrens voor je hulp ;)

[Lorrens]

div#container

{

width: 762px;

height: 100%;

margin: 0 auto;

text-align: left;

position: absolute;

background-color: #FFF;

z-index: 2;

top: 0px;

bottom: 0px;

left: 12.5% !important;

left:25%;

right: 12.5% !important;

right:25%;

}

Je hebt hier 2 keer left en 2 keer right.. dan overschrijft hij hem..
http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fwww.shockie.nl%2Ftemporary%2Fport folio_3.0%2Findex.html
voor je css en
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.shockie.nl%2Ftemporary% 2Fportfolio_3.0%2Findex.html&charset=%28detect+automatically%29&doctype=Inline&ss=1&verbose=1
voor je html :)
kijk daar maar even, dan kom je er vast wel uit :)

[Shockie]

Die 2x left en 2x right maakt niks uit, want !important negeert IE, en FF pakt de tag waar !important ook instaat. Maar alsnog bedankt, IE wilt nog steeds niet echt werken, maar er zit voortgang in het proces :)