[CSS] IE probleem floats

[imp4ct]

Wel 'k ik zit met een probleem, waarschijnlijk zowel voor FF als IE, maar in Firefox toont hij het probleem totaal niet.

Nu goed, even uitleggen als je via deze link op de site gaat via IE dan zie je rechts een tekst. Nu de tekst komt volledig in het vak, maar vanonder komen nog 4 letters onderaan ineens weer te staan, die er natuurlijk niet horen te staan. In Firefox is dit dus niet het geval.

Nu weet ik ergens dat het iets te maken heeft met de spacer tussen het linker en middle frame, de lijn ertussen dus, deze heeft ook een float en met een float heb je dus geen hoogte ofzo, maar hoe kan ik dit dan oplossen en hoe kan in tegelijk zorgen dat m'n spacer lijn automatisch verlengt samen met de frames.

Nog eens: link naar de site

[Blaise]

Het is een bug in IE6. Hier staat beschreven wat de bug veroorzaakt en hoe je deze kan oplossen: http://www.positionisever...lorer/dup-characters.html

[imp4ct]

Blaise schreef op zaterdag 21 juli 2007 @ 00:55:
Het is een bug in IE6. Hier staat beschreven wat de bug veroorzaakt en hoe je deze kan oplossen: http://www.positionisever...lorer/dup-characters.html

Did the trick met de comments, even niet verder gekeken. To fast to furious , thanks ga het nu niet meer vergeten!

[ Voor 28% gewijzigd door imp4ct op 21-07-2007 01:36 ]

[BtM909]

PositionIsEverything is sowieso een site om in de gaten te houden (oftewel doorlezen) als je bugs in IE6 tegenkomt

[imp4ct]

BtM909 schreef op zaterdag 21 juli 2007 @ 01:43:
PositionIsEverything is sowieso een site om in de gaten te houden (oftewel doorlezen) als je bugs in IE6 tegenkomt

Will keep it in mind.

[Heikanu]

imp4ct, pas eerst de site aan en zorg dat je geen wachtwoord nodig hebt om de website te bekijken!

[imp4ct]

Heikanu schreef op zaterdag 21 juli 2007 @ 23:17:
imp4ct, pas eerst de site aan en zorg dat je geen wachtwoord nodig hebt om de website te bekijken!

Erm, jah je hebt een punt.
Nu het probleem "was" dus opgelost, maar natuurlijk komt het dus nog eens opduiken, maar vermits ik dus alles al heb toegepast zoals in het artikel staat ben ik een beetje ten einde raad.

Helemaal onderaan bij de laatste knop krijg ik weer zo'n soort "overflow".

URL : http://www.telenethulp.net --> in IE bekijken

[Blaise]

Kan je niet gewoon die comments weglaten? Zo belangrijk zijn ze niet, en met je identing is het ook al vrij duidelijk wat wat is.

Eventueel kan je dan ook wat andere elementen dan div's gebruiken, dat bevordert ook de leesbaarheid van de structuur. Voor het logo kan je een header gebruiken (<h1>), voor het profieltje een definition list (<dl>, <dt>, <dd>), en voor het menu een unordered list (<ul>, <li>) of een definition list. Dat betekent dat je wat default styles moet resetten, maar dat kan makkelijk met

Cascading Stylesheet:

* {
   margin  :0;
   padding :0
}

[Fatamorgana]

code:

<a href="/mail/" onmouseover="hoverIn('b6');" onmouseout="hoverOut('b6');">
  <div id="b6" class="frm_l_button">
    <img class="img6" src="images/cms/bt6.gif" width="38" height="38" alt="bava" title="button avatar">
    <div class="frm_l_button_info">
      <div class="t3">MAIL</div>
      <p class="t4">verzend mails of PM's naar gebruikers</p>
    </div>
  </div>
</a><br>

Zie het eind van de code, zet die BR er neer en je probleem is weg.

Altijd als ik dit probleem heb moet ik net voor 'het probleem' achter een tag de BR tag zetten en weg probleem.

[imp4ct]

Fatamorgana schreef op zondag 22 juli 2007 @ 18:52:

code:

<a href="/mail/" onmouseover="hoverIn('b6');" onmouseout="hoverOut('b6');">
  <div id="b6" class="frm_l_button">
    <img class="img6" src="images/cms/bt6.gif" width="38" height="38" alt="bava" title="button avatar">
    <div class="frm_l_button_info">
      <div class="t3">MAIL</div>
      <p class="t4">verzend mails of PM's naar gebruikers</p>
    </div>
  </div>
</a><br>

Zie het eind van de code, zet die BR er neer en je probleem is weg.

Altijd als ik dit probleem heb moet ik net voor 'het probleem' achter een tag de BR tag zetten en weg probleem.

Hmm, die <br> was me niet opgevallen, moet ik idd eens op letten. 't Is dat Zend via een sneltoets soms zelf een <br> zonder dat je er echt op let. Thx in ieder geval

Blaise schreef op zondag 22 juli 2007 @ 18:36:
Kan je niet gewoon die comments weglaten? Zo belangrijk zijn ze niet, en met je identing is het ook al vrij duidelijk wat wat is.

Eventueel kan je dan ook wat andere elementen dan div's gebruiken, dat bevordert ook de leesbaarheid van de structuur. Voor het logo kan je een header gebruiken (<h1>), voor het profieltje een definition list (<dl>, <dt>, <dd>), en voor het menu een unordered list (<ul>, <li>) of een definition list. Dat betekent dat je wat default styles moet resetten, maar dat kan makkelijk met

Cascading Stylesheet:

* {
   margin  :0;
   padding :0
}

I have to give it to you... ge zijt ne ferme. Heb eventjes je aanpassingen doorgevoerd die je hier had opgesomd en huppa ineens werkt het dus. Thx! Had eigenlijk <dl>, <dt>, enz... nog nooit gebruikt <ul> en <li> wel maar 'k dacht dat het echt serieus problemen ging geven, maar blijkbaar dus niet.

Thanks!!!

[ Voor 30% gewijzigd door imp4ct op 22-07-2007 19:11 ]

[Fatamorgana]

Hmm, die <br> was me niet opgevallen, moet ik idd eens op letten. 't Is dat Zend via een sneltoets soms zelf een <br> zonder dat je er echt op let. Thx in ieder geval

Voor de duidelijkheid, die BR had ik er neergezet om het probleem op te lossen. Die BR stond er origineel dus niet in.

Hoe het precies komt weet ik niet, maar als ik problemen heb in IE dat content herhaald wordt dan moet ik vlak voor die 'error' ergens een extra BR achter zetten en weg is het probleem.

[imp4ct]

Fatamorgana schreef op maandag 23 juli 2007 @ 15:35:
[...]

Voor de duidelijkheid, die BR had ik er neergezet om het probleem op te lossen. Die BR stond er origineel dus niet in.

Hoe het precies komt weet ik niet, maar als ik problemen heb in IE dat content herhaald wordt dan moet ik vlak voor die 'error' ergens een extra BR achter zetten en weg is het probleem.

Ahzo! Ok, misverstand weg . Neen, deze keer heb'k het dus echt kunnen oplossen door gewoon de aanpassingen door te voeren, werken met dl - dt - dd en ul - li op de plaatsen waar het dus kon en dat heeft blijkbaar z'n werk gedaan, raar maar waar.

[crisp]

Blaise schreef op zondag 22 juli 2007 @ 18:36:
Dat betekent dat je wat default styles moet resetten, maar dat kan makkelijk met

Cascading Stylesheet:

* {
   margin  :0;
   padding :0
}

bad practice...

Je kan beter enkel voor die elementen waarvoor je het nodig hebt de margins en/of paddings resetten; de universal selector daarvoor gebruiken kan voor onverwachte effecten zorgen, met name bij bijvoorbeeld form elementen.

[Blaise]

Ik heb nog geen problemen met form elementen gehad door de margin en padding te resetten, ik test op Windows en Mac OSX in alle moderne browsers.

Ben je niet in de war met het resetten van de border met de universal selector? Want dat levert soms wel problemen op.

[ Voor 8% gewijzigd door Blaise op 24-07-2007 17:25 ]

[Boelie-Boelie]

Eric Meyer schrijft:

quote: http://meyerweb.com/eric/...07/04/18/reset-reasoning/

[I]t (using the universal selector; B.) does unfortunately mean that all elements will have their padding and margin zeroed, including form elements like textareas and text inputs. In some browsers, these styles will be ignored. In others, there will be no apparent effect. Still others might have the look of their inputs altered. Unfortunately, there’s just no way to know, and it’s an area where things are likely to change quite a bit over the next few years.

So that’s why I don’t want to use the universal selector, but instead explicitly list out elements to be reset. In this way, I don’t have to worry about munging form elements.

[Blaise]

@Boelie-Boelie: Eric Meyer heeft een reset style waarbij hij ook borders reset.

Het resetten van alleen de margin en padding voor alle elementen, inclusief form elementen, heeft bij mij nog nooit een probleem opgeleverd.

[ Voor 25% gewijzigd door Blaise op 24-07-2007 20:30 ]

[imp4ct]

crisp schreef op maandag 23 juli 2007 @ 22:41:
[...]

bad practice...

Je kan beter enkel voor die elementen waarvoor je het nodig hebt de margins en/of paddings resetten; de universal selector daarvoor gebruiken kan voor onverwachte effecten zorgen, met name bij bijvoorbeeld form elementen.

'k Heb dit voorbeeld nu ook wel niet gebruikt, ik doe het ook eigenlijk op de manier hoe Crisp het voorstelt, maar jah... als het op zo'n korte manier zou kunnen en het geeft geen problemen, mja dan is het op zich wel handig.

Hoe dan de elementen er gaan uitzien wanneer je dit doet, gho.. 'k weet niet meestal geef ik die elementen toch via een class een eigen opmaak terug, dus jah...

Maar 'k denk dat dit voor iedereen gewoon verschillend is en als het geen probs is.. kan't alleen ma nuttig zijn en code-besparend.

[Boelie-Boelie]

Blaise schreef op dinsdag 24 juli 2007 @ 20:27:
Het resetten van alleen de margin en padding voor alle elementen, inclusief form elementen, heeft bij mij nog nooit een probleem opgeleverd.

Ik heb die problemen ook nooit gehad (ik gebruik die hack niet ), maar ik kwam zojuist per toeval een artikel tegen dat aangeeft wat er zoal mis zou kunnen gaan:

quote: http://www.search-this.com/2007/03/12/no-margin-for-error/

First of all, certain form elements are affected by this global reset and do not behave as per their normal defaults. The input button in Mozilla will lose its "depressed when clicked effect" and will not show any action when clicked other than submitting the form, of course. IE and Opera do not suffer from this problem and it is not really a major issue but any loss of visual clues can be a detriment to accessibility.

You may think that you can simply re-instate the margin and padding to regain the depressed effect in Mozilla but alas this is not so. Once you have removed the padding then that changes the elements behavior and it cannot be restored even by adding more padding.
[..]
There is also an issue with select/option drop down lists in Mozilla and Opera.
[..]
Another perceived drawback, of which there has been a lot of discussion, is whether the global reset method could have speed implications on the browsers rendering of the page.
[..]
The final drawback of using the global reset method is that it is like taking a hammer to your layout when a screwdriver would have been better.

De onzekerheid of het wel of niet fout kan gaan is voor mij persoonlijk iig reden genoeg om het niet te gebruiken, maar ik snap wel dat het handig kan zijn.

[crisp]

Op mozilla.org heeft ook een keer een artikel erover gestaan welke ook inging op eventuele performance penalties als gevolg van het gebruik van de universal selector, ik zal eens kijken of ik die terug kan vinden...

Eric Meyer's reset is al een behoorlijke verbetering, maar is imo nog steeds een hamer ipv een schroevendraaier. De universal selector is in dat opzicht meer een moker

[ Voor 6% gewijzigd door crisp op 29-07-2007 17:17 ]

[Blaise]

edit: Boelie-Boelie's reactie over het hoofd gezien. Samen met performance verlies is dat voor mij reden genoeg om de universal selector voor margin en padding te droppen. Bedankt voor jullie reacties!

Jammer, want het was erg handig.

[ Voor 113% gewijzigd door Blaise op 30-07-2007 18:11 ]