[JS/CSS] swfObject niet in FF zichtbaar/enkele CSS foutjes

[Av3ng3rtje]

Hallo,

Ik ben al een tijdje bezig om een website te bouwen naar de nieuwe webstandaarden conform CSS + XHTML. Ik ben iemand die voorheen alles met tabellen deed en de opmaak van tekst met CSS.

Dit is de website waar ik op het moment aan werk en problemen mee ondervind:

http://new.amccentre.nl

Nu heb een paar problemen ondervonden met een Javascript wat veel gebruikt wordt bij ontwikkelaars die flash in hun webapplicatie gebruiken. Ik gebruik het swfObject om flash bestanden in te laden, het werkt wel in IE, maar niet in FF. Zou dit komen omdat mijn div structuur zo genest is dat firefox het niet kan vinden ?

Ook ondervind problemen met het zongenaamde boxing model met CSS. Het komt soms voor dat bepaalde divs die genest zijn in parent divs niet binnen hun parent div blijven en de hele layout verzieken. Zoals hier te zien:

http://new.amccentre.nl/Default.aspx?site=kenniskring

Daar overschrijdt de menu container de footer.

http://new.amccentre.nl/Default.aspx?site=funfunctionweek

Hier overschrijdt de plaatjes container ook weer de content container.

Ik heb al wat dingetjes geprobeert zoals met overflow enzo , maar dat mocht niet baten.. moet ik mijn containers anders invullen of is dit correct? Ik heb ook al wat dingen geprobeerd met float.

Ik heb de hele site gebouwd in firefox, het grootste gedeelte werkt hier wel goed op de problemen met de menu's na, maar als ik hem in IE open ziet het er weer heel anders uit. Zijn hier nog goede oplossingen voor te vinden?

Ik hoop op een paar goede tips, want ik vind het bouwen van sites wel leuk op de oude manier met tabellen, maar ik kan nog niet goed mijn draai vinden met de CSS technieken die tegenwoordig wel een standaard is geworden

[Verwijderd]

Zonder hier een discussie te willen openbreken over wel of nietes.
Doe dit gerust met tabellen. Er zijn heel wat goede designers en developers die nog steeds met tabellen werken ipv div's, hier gaat al lang een discussie over, waar het werken met tabellen wordt afgedaan als achterhaald en bandbreedte killer door teveel code.
Als je er een klein beetje denkwerk in steekt en met externe stylesheets werkt is de code evenlang als je met tabellen werkt, en je hebt minder risico op de problemen waar je nu op stuit. Ik zeg NIET dat werken met div's slecht is... ik zeg enkel dat het even goed met tabellen kan.

Zolang je site cross-browser is, duidelijk, eenvoudig en snel genoeg laadt doet het er niet toe of je nu met tabellen werkt of met div's.

P.S. En dat er hier geen enkele durft zeggen dat tabellen enkel moeten gebruikt worden om gegevens weer te geven.
Voorbeeld: Scheerschuim gebruik je om je te scheren? Ja, maar ook om de rubber van je pingpongpallet meer grip te geven... Get the point?

[ Voor 14% gewijzigd door Verwijderd op 13-01-2007 20:25 ]

[crisp]

1 van de problemen wordt veroorzaakt door het feit dat je #hotTopics een vaste hoogte geeft. De rest wordt veroorzaakt door het feit dat je absolute positioning gebruikt waar dat niet nodig is.

Er zijn zat goede voorbeelden te vinden van een dergelijke opzet (header, 2 kolommen, footer) mbv CSS die in elke moderne (en IE) browser goed werken. Het advies om hiervoor toch maar een tabel te gemisbruiken is gewoonweg kortzichtig.

[Av3ng3rtje]

crisp schreef op zaterdag 13 januari 2007 @ 23:03:
1 van de problemen wordt veroorzaakt door het feit dat je #hotTopics een vaste hoogte geeft. De rest wordt veroorzaakt door het feit dat je absolute positioning gebruikt waar dat niet nodig is.

Er zijn zat goede voorbeelden te vinden van een dergelijke opzet (header, 2 kolommen, footer) mbv CSS die in elke moderne (en IE) browser goed werken. Het advies om hiervoor toch maar een tabel te gemisbruiken is gewoonweg kortzichtig.

Ik heb het al een keer eerder geprobeerd met float container, dit lukte wel aardig.. alleen dat de hele achtergrond niet doorliep, dat lukt nu wel in deze layout. Nu is mijn vraag of mijn boxmodel zo het nu is met de divs toereikend genoeg is voor het idee wat ik met de layout wil.

[Av3ng3rtje]

Het heeft een tijdje stil gelegen, door andere werkzaamheden, maar ik heb het weer opgepakt. Ik heb de layout nu goed werkend gekregen in firefox, alleen in IE zit ik met een heel vaag probleem. Ik heb geen idee wat ik verkeerd doe.

De achtergrond van #container loopt niet goed door en hij eindigt heel vaak op een rare onverklaarbare manier. Ook als je op het tabje "Kenniskring" drukt heeft het menu aan de linker kant problemen dat het overlapt wordt. Wanneer je op fun en function week klikt worden plaatje aan de rechterkant ook overlapt.

De screenshot is genomen met een Firefox plugin genaamd: IEtab, hiermee kun je een pagina bekijken, die door de IE engine wordt ge-renderd.



De structuur van me CSS

#wrapper
--#tabContainer
--#logoContainer
--#container
----#menu
----#content
------#images
----#footer

Nu heb ik op de screenshot de border van container op 2px solid red gezet, zoals je ziet eindigt de container op een of andere vage manier op meerdere plaatsen.

Dezelfde versie draait op

http://new.amccentre.nl

Voor de duidelijkheid: Op de versie van new.amccentre.nl heb ik de borders weer op normaal gezet zoals ze horen te zijn, maar het geeft hetzelfde effect.

Heeft iemand enig idee wat ik hier verkeerd doe, ik zelf heb al wat voorbeelden bekeken waar dit probleem niet in naar voren komt , of waar ik niet aan gedacht of dat het probleem daarmee in verbinding kan staan.

[ Voor 17% gewijzigd door Av3ng3rtje op 24-01-2007 21:34 ]

[crisp]

Waarschijnlijk een 'hasLayout' issue - IE wil nog wel eens de mist ingaan met rendering als bepaalde elementen geen opgegeven hoogte of breedte hebben.
Verder lijkt het er op dat je floats gebruikt maar deze niet cleared.