Div positie compleet verkeerd in IE7

[ZaPPZion]

Hallo allemaal,

Ik ben een tijdje bezig geweest met een website ontwikkelen voor de vader van een vriend van mij. Ik heb vanaf het begin alles getest in zowel IE als FF als Chrome, maar ben vergeten dat ik op die pc al IE8 had staan. Nu ziet de website er in IE7 echt niet uit, de menubalk staat ineens bijna in het midden van het scherm. Ik heb geen idee waar dit aan ligt, ik heb de lijstjes met compatibility issues tussen de twee versies bekeken, maar kon niet vinden welke issue ik mee te maken heb. Zou er iemand even naar willen kijken en me een zetje in de juiste richting willen geven?
Website: http://www.wbm.nl

Mvg,
Bart

[Verwijderd]

Controleer je CSS eens.

Zonder inzichtelijke broncode kan niemand je helpen.

Edit: Als je aan het leren bent voor HTML is het wel raadzaam o.a de style in een .css bestand te verwerken, en deze per pagina te linken.

Wat betreft de alignment, controleer even de div die verantwoordelijk is en zoek naar een fix daarvoor.

[ Voor 61% gewijzigd door Verwijderd op 20-08-2010 19:09 ]

[ZaPPZion]

Mijn css en alles is valid, daar zou het niet aan moeten liggen.
Ik heb normaal gesproken ook de style stuff wel in een .css file, maar vind het vaak makkelijker om het in 1 file te houden zodat je het gemakkelijker kunt vinden (kwestie van gewenning denk ik).
Ik heb geprobeerd de div te verplaatsen door bijvoorbeeld de margin-left te verlagen (of zelfs negatief maken), maar dit heeft geen effect. Ik kan nog geen fix vinden voor de div.

[Verwijderd]

Er is voldoende te vinden over margin & padding. Zie ook http://www.htmlwijzer.nl/...argin-padding-met-css.php , http://htmldog.com/guides/cssbeginner/margins/ en Google

Ik denk dat daar ongetwijfeld vast wel iets over staat. Anders zou je een fix moeten schrijven die voor IE7 een custom CSS gebruikt.

[ZaPPZion]

Ik ben wel bekend met margins en padding, dat is het probleem niet, ik kan er gewoon niet achter komen waarom de balk daar heen springt. Als ik dat zou weten, was ik een heel eind verder. Alle andere browsers (IE8+, FF, Chrome, Safari en talloze anderen) doen het goed, alleen IE7 dus niet (IE6 support ik niet, dat is te zwaar verouderd).

EDIT: verder gekeken naar positioning, ik heb besloten met wat dirty hacks de balk aan de linkerkant absolute positioned te maken (alleen in IE7-) en daarmee een aantal andere eigenschappen ook aan te passen. Dit topic kan dus op slot

[ Voor 26% gewijzigd door ZaPPZion op 20-08-2010 20:03 ]

[Verwijderd]

Ik raad je wel aan om de boel nog eens na te kijken, want een lay-out die zo simpel is als deze zou gewoon zonder dirty hacks moeten kunnen werken, zelfs in IE 6.

[Cartman!]

Mijn css en alles is valid, daar zou het niet aan moeten liggen.

Valid zegt niks over of het ook logisch is en het zal tonen op je scherm zoals jij wilt.

Ik heb normaal gesproken ook de style stuff wel in een .css file, maar vind het vaak makkelijker om het in 1 file te houden zodat je het gemakkelijker kunt vinden (kwestie van gewenning denk ik).

Leer jezelf maar aan om het in 1 file te doen, als je nog eens iets wilt wijzigen wat over meerdere pagina's zit dan kun je het in alle fils wijzigen ipv. in je stylesheet. Bovendien is het gewoon netjes om je opmaak van je stylesheet te scheiden.

Ik heb geprobeerd de div te verplaatsen door bijvoorbeeld de margin-left te verlagen (of zelfs negatief maken), maar dit heeft geen effect. Ik kan nog geen fix vinden voor de div.

Ik ben wel bekend met margins en padding, dat is het probleem niet, ik kan er gewoon niet achter komen waarom de balk daar heen springt.

Dat spreekt elkaar dan flink tegen, een beetje rommelen ermee betekent dat je dus niet begrijpt wat je aan het doen bent.

ik heb besloten met wat dirty hacks de balk aan de linkerkant absolute positioned te maken (alleen in IE7-) en daarmee een aantal andere eigenschappen ook aan te passen.

Zonde, nu weet je nog niet hoe het moet...

Dit topic kan dus op slot

Omdat je je antwoord hebt? Zo werkt het niet op GoT...

[ZaPPZion]

Cartman! schreef op vrijdag 20 augustus 2010 @ 21:01:
Zonde, nu weet je nog niet hoe het moet...

Omdat je je antwoord hebt? Zo werkt het niet op GoT...

Ik weet prima hoe het moet, alleen de mensen die ooit IE6 en IE7 hebben gemaakt wisten niet hoe ze met een standaard om moesten gaan, daarom ging het mis.

Het topic kan op slot omdat ik mijn antwoord heb, dit is geen algemeen topic wat over een algemeen probleem gaat of een oplossing biedt voor een probleem wat veel mensen hebben. Bovendien is het geen nuttig topic mbt het leren van HTML en CSS, ik weet prima dat ik mijn css in een andere file moet plaatsen, dat ik dat niet doe is gewoon slordigheid van mijn kant, maar levert voor andere mensen niets op. Netjes werken is natuurlijk ontzetten belangrijk, maar elke keer dat ik dat doe met webdev, kom ik er weer achter dat er toch weer dirty hacks geplaatst moeten worden om een gewenst effect te bereiken. Dit ligt ongetwijfeld aan mijn kennis, maar het doet niet af aan het feit dat (front-end) webdev nu eenmaal niet erg netjes mogelijk is zonder enige vorm van hacks. Het gaat er bovendien in dit geval om dat de pagina werkt en er goed uit ziet. Als het nu een website zou zijn met 100.000 pageviews per dag en veel wisselende content, had ik het wel netter gemaakt, maar nu ging het om het snel developen, niet om het net developen. Prioriteiten stellen is een van de belangrijkste dingen, nu was de opdracht: "het moet snel een site zijn die er zo (insert handout/plaatje) uit ziet", wel, dat is gelukt.

[Cartman!]

ZaPPZion schreef op vrijdag 20 augustus 2010 @ 23:08:
[...]

Ik weet prima hoe het moet, alleen de mensen die ooit IE6 en IE7 hebben gemaakt wisten niet hoe ze met een standaard om moesten gaan, daarom ging het mis.

En het is aan jou als developer om daarmee om te kunnen gaan. Enig idee hoeveel mensen nog IE6 en IE7 gebruiken?

Het topic kan op slot omdat ik mijn antwoord heb, dit is geen algemeen topic wat over een algemeen probleem gaat of een oplossing biedt voor een probleem wat veel mensen hebben.

Tja, fout dus, zo werkt het hier niet want anders hadden we deze (naar mijn idee nuttige) discussie niet meer kunnen hebben.

Bovendien is het geen nuttig topic mbt het leren van HTML en CSS, ik weet prima dat ik mijn css in een andere file moet plaatsen, dat ik dat niet doe is gewoon slordigheid van mijn kant, maar levert voor andere mensen niets op.

Toch wel, een slechtere cachebare site.

Netjes werken is natuurlijk ontzetten belangrijk, maar elke keer dat ik dat doe met webdev, kom ik er weer achter dat er toch weer dirty hacks geplaatst moeten worden om een gewenst effect te bereiken. Dit ligt ongetwijfeld aan mijn kennis,

Gelukkig zeg je het zelf al, dat ligt aan jou.

maar het doet niet af aan het feit dat (front-end) webdev nu eenmaal niet erg netjes mogelijk is zonder enige vorm van hacks.

Zie vorige commentaar.

Het gaat er bovendien in dit geval om dat de pagina werkt en er goed uit ziet. Als het nu een website zou zijn met 100.000 pageviews per dag en veel wisselende content, had ik het wel netter gemaakt, maar nu ging het om het snel developen, niet om het net developen.

Tja, die combinatie is prima mogelijk, het is maar hoeveel moeite je daarvoor wilt doen.

Prioriteiten stellen is een van de belangrijkste dingen, nu was de opdracht: "het moet snel een site zijn die er zo (insert handout/plaatje) uit ziet", wel, dat is gelukt.

Nou, mooi voor je. Jammer dat je voor m'n gevoel geen enkele passie toont voor het vak. Of een site nu groot of klein is, je wilt toch voor het beste gaan? Iets waar je trots op kunt zijn. Een uitzondering voor een specifieke browser is echt geen schande maar het lijkt er nu op alsof je gewoon wat aanrommelt zonder echt te weten _waarom_ iets anders reageert in een bepaalde browser. Ik vind dat jammer. Je moet het commentaar verder ook niet opvatten als afstraffing want ik tik dit allemaal om je te wijzen op bepaalde zaken die ik al weet en hiermee hoop ik dat je te laten inzien


edit:
nog wat tips/opmerkingen nadat ik de site bekeken heb:

code:

font-family: 'Futura Md BT';

Ik heb dat font niet dus ik krijg een standaard fontje te zien, wist je dat?

En je geeft zelf aan dat je het inline-stylen handig vind omdat t sneller is voor je. Als je nu de background-kleur of een breedte van een element moet aanpassen, pas je het dan liever op 1 plek aan of op elke losse pagina apart?

Kijk eens naar de semantiek van een pagina, <span class='style6'>titel</span> zegt een screenreader of zoekmachine niks over de belangrijkheid van die titel, als je daarvoor een kop (h*) gebruikt dan heeft dat veel meer zin voor iedereen. Een menu maak je bijv. een lijst van (ol/ul) met list items (li). Is meteen een goed verkoopargument ook.

[ Voor 12% gewijzigd door Cartman! op 20-08-2010 23:40 ]

[ZaPPZion]

Ja, ik moet toegeven, ik ben er eigenlijk vol passie ingestort een paar jaar geleden, maar werd zo gestoord door dit soort kleine dingen en de oninzichtelijke manier waarop de browsers werken. Ik ben wat dat betreft meer een die-hard programmeur, ik wil meer door code kunnen steppen etc. Soms is een web-development echter een noodzakelijk iets, maar toch kan ik op de een of andere manier niet de passie vinden die ik voor bijvoorbeeld 3D game development kan vinden. Dus inderdaad, ik toon weinig passie voor dit vak, sorry daar voor, ik respecteer wel degelijk de moeite die er dag in dag uit aan besteed wordt, want het is zeker een mooi vak, alleen kan ik vaak de passie er voor niet vinden.

EDIT: font wordt op dit moment aangepast naar Verdana, dat was inderdaad een known-issue De content wordt niet door mij geschreven, dus die opsomming is inderdaad wat raar. Ik ga er echter binnenkort nog eens overheen om alles netjes en gestructureerd te maken met een css file en dergelijken. Dan zal ik ook die headers en opsommingen even fixen, dat is wel belangrijk inderdaad, SEO is wel belangrijk hier, zijn we op dit moment mee bezig, keywords, alt text, headers, titles, descriptions, keywords in text etc.

[ Voor 27% gewijzigd door ZaPPZion op 20-08-2010 23:49 ]

[Cartman!]

Dat is ieder geval eerlijk

Als die hard programmeur van 3D games zou ik echter wel verwachten dat je weet hoe je netjes werkt. Ik neem ieder geval aan dat je in je game ook niet dezelfde code 10 keer neerzet in verschillende files, daar maar je ook een losse klasse van bijv. En ook noem je daar je objecten niet object1 en object2 maar geef je dat een beschrijvende naam, toch? Zo moet je dat met CSS ook een beetje zien.

edit: succes!

[ZaPPZion]

Oh haha nee zeker niet
Die stijlnamen komen door de wysiwyg editor. Ik zal nog even aangeven als de website beter is, ik zal even alles netjes maken, dat had ik zowieso ook beloofd, zodat eventuele wijzigingen gemakkelijker zullen gaan
EDIT: zou je later nog wat tips kunnen geven als ik klaar ben met het refactoren van die dingen? ben wel benieuwd eigenlijk of ik weer nieuwe dingen kan leren (stiekem hou ik er wel van om af en toe even op mijn plaats gezet te worden wat betreft netheid en dergelijken)

[ Voor 36% gewijzigd door ZaPPZion op 20-08-2010 23:57 ]

[Cartman!]

Je mag me tegen die tijd best een DM sturen of je topic kicken, geen probleem

[ZaPPZion]

Ok het refactoren is klaar
Het ziet er naar mijn mening nu best netjes uit en het rendert in alle browsers goed (voor zover ik het heb kunnen zien).

[Cartman!]

Drukke dag voor mij vandaag maar even kort een paar opmerkingen:

HTML:

<span class="WBMHENGELO">WBM Hengelo</span><br />
<span class="BEGELEIDING">Begeleiding bij bedrijfsoverdracht</span>

Daar kun je beter koppen van maken:

HTML:

<h1>WBM Hengelo</h1>
<h2>Begeleiding bij bedrijfsoverdracht</h2>

HTML:

<div class="LeftBar">
    <div class="LeftBarTopEmptyBox"></div><br/>
    <a href="index.htm"><img src="images/Button-WBM-ingedrukt.gif" alt="home" class="button" style="margin-top:8px;"/></a>
    <a href="wij.html"><img src="images/Button-wij.gif" alt="wij" class="button" /></a>
    <a href="emotie.html"><img src="images/Button-emotie.gif" alt="emotie" class="button" /></a>

Voor een zoekmachine is nu niet duidelijk dat dit een opsomming is, maak er een lijstje van:

HTML:

<ul class="mainnav">
    <li><a href="home">Home</a></li>
    <li class="active"><a href="home">Wij</a></li>

HTML:

<div style="margin-left:20px;margin-top:-20px;width:65px;">

Inline styles zijn echt een no-no zoals we hadden uitgelegd En een stukje tekst kun je beter in een <p> zetten ipv. een <div>, een <div> zegt een screenreader of zoekmachine echt helemaal niets.

Succes

[ZaPPZion]

thanks
Die ene div is er inderdaad tussendoor geglipt, dat zal ik even fixen.

Die headers komen ook nog, alleen zat ik even met de standaard probleempjes, dat een H1 een extra witregel toepast. Als ik de lineheight op 0px zet, gaat dat in alle browsers goed, behalve in IE7, dan valt het er ook aan de bovenkant af. Daar moet ik dus nog even een oplossing voor zoeken.

De opsomming voor knoppen kan ook handig zijn inderdaad

EDIT: al met al weer wat geleerd

[ Voor 4% gewijzigd door ZaPPZion op 21-08-2010 10:42 ]

[Cartman!]

dat een H1 een extra witregel toepast.

Nee hoor, dat heet nu margin en padding

[MueR]

Zou je in het vervolg gewoon relevante code kunnen posten, of een uitgeklede testcase? Een complete site posten is wat vervelend werken, al is het maar omdat er zoveel irrelevante rotzooi op staat.