[CSS] Ruzie met divs in IE vs Firefox

[Wolf3D]

Nadat ik van alles geprobeerd heb, de structuur enkele keren heb aangepast geef ik het op en roep ik wat hulp van jullie in.

Ik probeer een website compleet in divs te bouwen. Tot nu toe ging het goed, maar nu loop ik tegen problemen aan waardoor de website niet meer goed wordt weergegeven in verschillende browsers.

Het lijkt me het makkelijkst om gewoon een linkje naar een voorbeeld te plaatsen. Ik heb de meeste content weggestript, zo ook de onbelangrijke CSS code.

Voorbeeld 1: http://www.renewolf.nl/temp/test1.html
Voorbeeld 2: http://www.renewolf.nl/temp/test2.html
Voorbeeld 2: http://www.renewolf.nl/temp/test3.html

Voorbeeld 1 werkt zowel als in IE7 als in Firefox niet goed. De box aan de rechterkant gaat buiten de 'container' waar ze in zitten.

Voorbeeld 2 werkt wel goed in IE7, maar niet in Firefox. De container rekt niet goed mee waardoor het misgaat met de schaduw. (Het helemaal naar rechts schuiven van de rechter box werkt in de originele code wel goed, dus daar let ik nu even niet op.)

Voorbeeld 3: Het probleem treedt alleen op als de rechterbox langer is dan de linker box. Zoals te zien werkt het derde voorbeeld wel goed in verschillende browsers.

Waar moet ik het zoeken?

[Janoz]

Ik probeer een website compleet in divs te bouwen.

Divs gebruiken is geen doel op zich. Als ik naar je htmlsource kijk dan is er nauwelijks winst geboekt tov het gebruiken van tabellen.

[Wolf3D]

Klopt, maar het is uiteindelijk beter dan het gebruik van tabellen voor opmaak.
In bovenstaande voorbeeld heb ik een groot deel van de code weggestript, waardoor er nu meer divs staan dan content zelf, maar dat is dus niet het geval in de complete site.

[alex3305]

Why in hell zet je het linkse blok in je HTML achter je rechtse blok? Misschien dat andersom doen?

Verder kan het wel eens helpen om heel je CSS (of in ieder geval een groot gedeelte) opnieuw te schrijven.

[ Voor 35% gewijzigd door alex3305 op 24-04-2008 13:07 ]

[TeeDee]

Zoals ik het nu zie ben je je table based rounded corner ding 1 op 1 aan het omzetten naar hetzelfde, alleen vervangen met <div>.

Kijk eens op: http://www.456bereastreet...css_teaser_box_revisited/

Wat betreft je probleempje: als je je 'rijtjes' in combinatie met de teaser box van hier boven opmaakt, vervolgens even goed kijken naar de manier waarop je floats cleart (hint hint!) moet je imo al een heel stuk verder kunnen komen.

[Wolf3D]

Alex3305 schreef op donderdag 24 april 2008 @ 13:06:
Why in hell zet je het linkse blok in je HTML achter je rechtse blok? Misschien dat andersom doen?

Verder kan het wel eens helpen om heel je CSS (of in ieder geval een groot gedeelte) opnieuw te schrijven.

Het stond eerst andersom, maar heb het ook op deze manier getest en blijkbaar nog niet teruggezet.
En CSS opnieuw schrijven? Ik ben bang dat ik het dan in de meeste gevallen op dezelfde manier zou doen. Kun je misschien iets concreter zijn. Wat pak ik verkeerd aan?

TeeDee schreef op donderdag 24 april 2008 @ 13:12:
Zoals ik het nu zie ben je je table based rounded corner ding 1 op 1 aan het omzetten naar hetzelfde, alleen vervangen met <div>.

Kijk eens op: http://www.456bereastreet...css_teaser_box_revisited/

Wat betreft je probleempje: als je je 'rijtjes' in combinatie met de teaser box van hier boven opmaakt, vervolgens even goed kijken naar de manier waarop je floats cleart (hint hint!) moet je imo al een heel stuk verder kunnen komen.

Dank je voor de link. Ik was ergens anders ook al iets dergelijks tegengekomen, maar vraag me af of het veel beter is. Ik loop altijd tegen situaties dat wat ik wil nèt iets anders is dan het voorbeeld. Ze hangen in het voorbeeld bijvoorbeeld een plaatje aan een h1-tag, welke ik in mijn situatie niet heb. Nou kan je er allemaal andere tags bij knutselen, maar dan lijkt het toch steeds meer op mijn manier met enkele divs.

Wat betreft het clearen van floats... daar moet ik inderdaad eens goed naar kijken!
Thanx!

[TeeDee]

Die h13 is niet verplicht natuurlijk. Dat kan <insert name> element zijn. Zolang je dat ook maar aanpast in de CSS. En dat je bovenal begrijpt hoe het in elkaar zit. Van klakkeloos iets overnemen leer je bijzonder weinig. Dus: duik in dat simpele stukje en pas het e.e.a. aan.

Belangrijkste: kijk eerst naar je content. Kijk of je daar elementen kan gebruiken. Zo niet, dan (hoewel 'ranzig') kan je extra elementen gebruiken. Wil je een nietszeggend element extra plaatsen: pak dan inderdaad een div of een span. (let op: een span is een inline element. Die heeft in principe geen height.)

[alex3305]

Wat ik met het bovenstaande bedoelde is eigenlijk naar je CSS kijken en bedenken waarom je iets invoegt en doet en niet denkt van "Zo moet het werken :)". Meestal doe ik dat namelijk niet bewust genoeg en krijg ik foutieve CSS.

[Da Weef]

Je specifieke probleem is vrij eenvoudig op te lossen met een wrapper om je 'rounded corner' -divs:
.

Cascading Stylesheet:

.wrap
{
  clear:both;
}

HTML:

<div class="wrap">
 <div class="rbbottomleft"><!-- empty --></div><div class="rbbottom"><!-- empty --></div><div class="rbbottomright"><!-- empty --></div>
</div>

Echter ga je veel meer problemen tegenkomen zoals je nu je positionering hebt geregeld. Dus eerder advies om nog eens goed naar je CSS en opbouw te kijken zou ik zeker niet in de wind slaan. Persoonlijk probeer ik altijd binnen een tag voor één type positionering te kiezen (bij voorkeur float), maar dat is persoonlijke smaak.

[MrSleeves]

Ik heb gemerkt dat IE en Firefox een verschillende interpretatie hebben voor het clear-statement.
Als ik het goed heb cleared IE alleen de div en de child-divs waarin gecleard wordt, terwijl FF cleart over de hele pagina, dus ook parent-divs.
Door deze interpretatie kan je clear goed gebruiken voor de footer.