[CSS] margin-right IE gaat fout + klein andere css probleem

[Verwijderd]

Tweakers,

Deze twee problemen zijn een voortvloeisel uit dit topic [rml][ CSS] Ronde hoeken maken om DIV's met CSS[/rml]
Ik open een nieuw topic omdat de twee problemen die nu optreden in principe niets te maken hebben met dat eerdere topic.

Het eerste probleem is dat de rechtermargin van een content div in IE fout wordt weergegeven en in FireFox goed. Het gaat om de volgende site http://www.termaten.nl/elburgfood.nl/index-nl.php

Theoretisch zou de rechtermargin gelijk moeten zijn aan de linker, namelijk 220px (het menu/product preview en nieuws blok zijn even groot, nl 130px). Als ik 220 opgeef als rechtermargin dan doet FireFox het goed, Ie niet. Dit heeft volgens mij te maken met verschillende interpretaties van het box-model, maar ik heb geen flauw idee hoe ik dit moet oplossen. Is hier een css-hack voor?

Het tweede probleem is de h2 header bij de menu/product/nieuws div. Deze wordt soms wel goed weergegeven in IE 6.0, maar meestal niet. Beweeg maar eens over de items in het menu, dan zul je zien wat ik bedoel. FireFox doet het wederom goed.
De h2 header krijgt een background-image mee die ervoor zorgt dat de header een oranje achtergrondkleur krijgt met afgeronde hoeken. Ook van dit probleem heb ik geen flauw idee waar het ligt, soms doet IE (6.0) het namelijk wel goed.

Ik heb al van alles geprobeert, maar omdat ik niet precies de oorzaak weet kan ik ook niet gericht een oplossing bedenken.

[PhysicsRules]

Met

code:

box-sizing: border-box;
-moz-box-sizing: border-box;

kun je ervoor zorgen dat zowel IE als FF hetzelfde box-gedrag hebben. Effectief zorgt dit ervoor dat FF hetzelfde werkt als IE, en daardoor hoef je maar één ontwerp te maken.

[Verwijderd]

Moet je de twee regels css dan bij elke div plaatsen, of ergens anders? Heb ze nu bij de div's geplaatst maar ik merk geen verschil..

edit: zag in een ander topic staan dat dit gewoon bovenin de css moet. Heeft geen effect helaas. Ik heb de site nu zo ingesteld dat IE de rechtermargin goed doet en FireFox fout.

Het probleem met de h2 header blijft ook nog steeds in IE 6.0. Mss weet Crisp een oplossing?

[ Voor 53% gewijzigd door Verwijderd op 22-09-2004 19:53 ]

[Verwijderd]

het kan ook zo:

code:

margin-right: 250px !important;margin-right:150px;

maar dat is eigenlijk niet echt handig.

[ Voor 9% gewijzigd door Verwijderd op 22-09-2004 19:57 ]

[Verwijderd]

Waarom is dat niet echt handig? Omdat het een hack is voor IE, of juist een hack voor FireFox?

[Verwijderd]

Weet er niemand hoe deze problemen opgelost kunnen worden? Die css regels voor de box-sizing werken dus niet en die andere ook niet. Er moet toch wel een hack voor zijn?

[Verwijderd]

Verwijderd schreef op 22 september 2004 @ 19:58:
Waarom is dat niet echt handig? Omdat het een hack is voor IE, of juist een hack voor FireFox?

het is niet echt handig omdat je bij elke div of watdanook, die hack moet toevoegen.
wat werkt er niet aan deze methode? je kan tog doen wat je wilt, je kan alles appart instellen voor firefox en dergelijke en voor msIE.

Verwijderd schreef op 23 september 2004 @ 19:30:
Weet er niemand hoe deze problemen opgelost kunnen worden? Die css regels voor de box-sizing werken dus niet en die andere ook niet. Er moet toch wel een hack voor zijn?

probeer het eens zo:

code:

* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}

en als dat niet goed werkt kan je het ook zo proberen:

code:

* {
box-sizing: content-box;
-moz-box-sizing: content-box;
}

meer oplossingen ken ik op dit moment niet

dexus

[faabman]

De link doet het op dit moment niet, dus ik kan net checken of het aan eventuele floats ligt...

I.E. heeft namelijk een probleem met floats... FF googlen naar "3px bug Internet Explorer"

Zelf pas ik nooit het boxmodel aan, als je i.e. in "standard" mode gooit door je DocType op de eerste regel te zetten dan is het gedrag van i.e. behoorlijk voorspelbaar...

[crisp]

Als het om een float gaat met margin dan verdubbelt IE de margin in de richting van de float; een oplossing hiervoor is om de float een display:inline mee te geven - raar maar waar

Ter illustratie:

div met float:left, margin-left:100px - deze box is zelf ook 100px breed

hetzelfde maar nu met display:inline op de floating div

[ Voor 77% gewijzigd door crisp op 24-09-2004 21:53 ]

[Verwijderd]

En het maakt geen fluit uit, want 'float' zorgt ervoor dat het DIV element toch 'display:block' blijft houden.

[crisp]

Verwijderd schreef op 24 september 2004 @ 22:12:
En het maakt geen fluit uit, want 'float' zorgt ervoor dat het DIV element toch 'display:block' blijft houden.

dat klopt; andere UA's negeren de display gewoonweg

[T-MOB]

crisp schreef op 24 september 2004 @ 21:44:
Als het om een float gaat met margin dan verdubbelt IE de margin in de richting van de float; een oplossing hiervoor is om de float een display:inline mee te geven - raar maar waar

Nice ...
Ik gaf altijd _margin-floatrichting: 1/2 waarde; mee. Display: inline; lijkt me een betere omzeiling. Scheelt rekenen enzo (plus dat het ook werkt met oneven marges)

[Verwijderd]

Crisp/Anne:
Toch werkt het op de een of andere manier nog niet. Ik heb nu de volgende css code bij de #content div:

code:

#content {
    position: absolute;
    float: left;
    display: inline;
    top: 90px;
    left: 220px;
    right: 220px; 
    }

Die float: left; heb ik toegevoegd, zat er eerst niet in.

Wat doe ik hier nu fout, ik zie door de bomen het bos niet meer zo onderhand.. Weten jullie mss ook nog waarom die h2 headers soms wel en soms ook niet weergegeven worden?

[Verwijderd]

Somebody? Crisp, help me please...

[T-MOB]

Wat je nu gedaan hebt heeft niet zoveel zin... Crisp geeft een oplossing voor het geval dat je floats zou gebruiken. Dat deed je niet, dus de oplossing werkt inderdaad niet.

Je probleem heeft ook niets te maken met box-modelverschillen: Aangezien je problemen hebt met een element dat je margin noch padding noch een breedte hebt meegegeven. Perssonlijk vind ik het overigens ook nog een vrij ranzig om het box-model aan te passen.

code:

-moz-box-sizing

werkt immers alleen in Mozilla en bijv niet in Opera of Konquerer. CSS hacks zijn prima, maar IMO moet je die alleen gebruiken om browsers die niet aan de standaard conformeren de goede richting in te duwen....

Meer ontopic
Het probleem lijkt te worden veroorzaakt doordat IE en Moz een verschillende kijk hebben op wat de "right" inhoudt. Voor Mozilla is het de rechterkant van de viewport, voor IE is het maar net waar ie zin in heeft. En das lastig!
Volgens mij is de enige manier om dit op te lossen Javascript... hoe vies het ook moge zijn. Voor IE doe je dan zoiets als:

code:

if (navigator.appName == "Microsoft Internet Explorer") 
 { 
  function ieWidth() 
  {
  var width=document.body.clientWidth - 220 - 220;
    /* dus schermbreedte min "right" en "left" */

  document.getElementById('content').style.width = width + 'px';
    /* pas de breedte toe op de content div */
  }
 window.onresize=ieMinWidth;
 window.onload=ieMinWidth;
 /* zorg dat de breedte wordt gezet bij het laden
     én bij het resizen van de pagina */
 }

[ Voor 3% gewijzigd door T-MOB op 29-09-2004 19:51 . Reden: layout ]

[Verwijderd]

Het is in principe nu opgelost, zie http://80.60.182.91 (heb de site nu op mijn eigen pc gehosts). Zeer veel dank aan T-Mob voor de duidelijke uitleg en het script. Toch vind ik dit niet de meest optimale oplossing, je ziet bijvoorbeeld dat de content-div resized. Maar het werkt in elk geval. Als iemand een betere oplossing weet dan hou ik me aanbevolen.

Weet iemand nog hoe het komt dat het achtergrondplaatje, die de oranje achtergrond met afgeronde hoeken weergeeft, in de h2 header niet goed wordt weergegeven? De css code is:

code:

h2 {
    background-image: url(images/header.gif);
    background-position: top center;
    background-repeat: no-repeat;
    font: 13px verdana, helvetica, sans-serif;
    color: #FFFFFF;
    font-weight: bold;
    font-variant: small-caps;
    text-decoration: none;
    text-align: center;
    margin-top: -25px;
    margin-bottom: 10px;
    margin-right: -25px;
    margin-left: -20px;
    }

[Verwijderd]

Mensen,
De margin's gaan nu goed, alleen het probleem met de headers blijft bestaan. Heeft iemand een idee waarom IE (6.0) dit fout doet, en bijvoorbeeld FireFox niet? De site is te bekijken op http://80.60.182.91

[Verwijderd]

Weet niemand waardoor dit probleem met h2 headers veroorzaakt wordt?

[Verwijderd]

*Schopje*

[Rowanov]

Bedoel je dit probleem? :
De ene keer:

de andere keer:

[Verwijderd]

ja dat heb ik ook een keer gehad, kon het maar niet wegkrijgen,
heb toen uit noodoplossing de hele pagina overnieuw gemaakt .
dus het zou wel fijn zijn als iemand hier een oplossing voor zou hebben.

[crisp]

Vaak biedt het opgeven van een height of line-height in IE wel soelaas bij dit soort vage problemen...

[mullah]

een andere manier als je een CSS voor alleen internet explorer wilt doen is het volgende

code:

* html element {margin: xx;}

Omdat alle andere browsers deze regel niet snappen vanwege een ander implementatie van de DOM-tree ziet alleen MSIE dit. Daarmee is dit een javascript vrije hack... altijd handig.
Het omgekeerde kan ook, voor ale browsers behalve MSIE gebruik je dan

code:

html>body element {margin: xx;}

Het nadeel is dat je wel af en toe twee keer zoveel rules in je CSS hebt zitten.


Over je h2 headings
In je stylesheets heb je onder andere:

code:

    margin-top: -25px;
    margin-bottom: 10px;
    margin-right: -25px;
    margin-left: -20px;

Maar je geeft verder geen hoogte aan voor de h2..

zoals crisp al zei, het is dan handig om een line height aan te geven, en evenuteel ook een gewone height... nu weet msie niet wat ie ermee moet, omdat het element geen vastgestelde hoogte heeft, en zoals wel vaker gaat die dan wat improviseren.

[crisp]

mullah schreef op 07 oktober 2004 @ 23:58:
[...]
zoals crisp al zei, het is dan handig om een line height aan te geven, en evenuteel ook een gewone height... nu weet msie niet wat ie ermee moet, omdat het element geen vastgestelde hoogte heeft, en zoals wel vaker gaat die dan wat improviseren.

eea hangt samen met de interne hasLayout 'feature' van IE; iets wat dus in hun renderengine blijkbaar zit.
Dit is wel een goed overzicht van verschillende CSS bugs in IE: http://www.positioniseverything.net/explorer.html, en dit is wel een goede lowdown: http://www.positioniseverything.net/articles/hollyhack.html

[Verwijderd]

@ Crisp and Mullah:
Heb de opgegeven oplossingen geprobeerd, helaas zonder resultaat. Het opgeven van een height heeft geen zin, komt denk ik omdat de negative topmargins de height teniet doen. Crisp, die links die je gaf gaan duidelijk over IE's problemen met CSS, maar ik weet niet welke fout van IE mijn probleem dus daarmee kom ik er ook niet uit.

Ik ben zelf ook weer wat aan het proberen gegaan en ben op de goede weg, ware het niet dat ik weer tegen iets aanloop.

Korte uitleg van wat ik nu doe: De afgeronde hoeken worden gemaakt doordat er vier div's om de div met de inhoud staan. Elke van deze vier div's neemt een hoek voor zijn rekening door een achtergrondplaatje met een afgeronde hoek te plaatsen.

Ik dacht het probleem met deze headers op te kunnen lossen door de oranje achtergrond met afgeronde hoeken mee te geven aan de topleft en topright div, i.p.v aan de h2 header.
Dit werkt ware het niet dat het achtergrondplaatjes slechts een pixel of drie hoog is, waardoor het er weer niet uitziet zoals ik zou willen. Ik heb al geprobeerd een height mee te geven aan de topleft/topright div's maar dat werkt niet, ook het spelen met de margin's van die div's geeft het plaatje niet volledig weer. Heeft iemand mss een idee hoe ik dit wel voor elkaar krijg?

De betreffende css/HTML staat hieronder:

code:

.topleft, .topright, {
    position: relative;
    }

.topleft {
    background: #ff9900 url(images/header.gif) top left no-repeat;
    }
    
.topright {
    background: #ff9900 url(images/header.gif) top right no-repeat;
    left: 5px;
    }

code:

<div id="productpreview">
 <div class="topleft">
  <div class="topright">

De site staat nog steeds onder http://80.60.182.91

De oude indeling waarbij ik het achtergrondplaatje meegaf aan de h2 header staat hier: http://www.termaten.nl/elburgfood.nl/index.html

P.s ik heb hoop echt dat iemand met een werkende suggestie/oplossing komt, want ik ben al erg lang bezig met dit kleine irritante probleem. Bedankt alvast

[crisp]

wellicht offtopic, maar om toch nog even te illustreren hoe buggy IE met CSS is: position:absolute;right:0px;

width:200px

right:0px

width:201px

right:0px

waarom krijg ik opeens bij de div van 201px width een randje rechts naast de absolute gepositioneerde div met right:0px? Antwoord: IE zuigt

Ik ben deze bug trouwens nog niet tegengekomen op de reguliere IE-CSS-BUG sites...

[ Voor 56% gewijzigd door crisp op 11-10-2004 02:10 ]

[Verwijderd]

Dat IE zuigt ben ik inmiddels ook wel achter gekomen. Ik heb bij deze site echt de moeite gedaan om alles volgens de standaarden te schrijven en toch loop je tegen dit soort dingen aan. Klote.

IE is wel verreweg de meest gebruikte browser, dus we zullen wel moeten zorgen dat de site eruit ziet zoals bedoelt in die brakkebrowser. Crisp (of anderen) heb jij geen idee hoe ik dit op kan lossen?

Edit: op de manier zoals ik het nu wil doen is het trouwens geen bug, ik krijg het nu gewoon niet voor elkaar. Voor de duidelijkheid..

[ Voor 16% gewijzigd door Verwijderd op 11-10-2004 02:19 ]

[Verwijderd]

Rowanov schreef op 07 oktober 2004 @ 22:47:
Bedoel je dit probleem? :
De ene keer:

de andere keer:

na het doorlezen van de site's die crisp gaf: http://www.positioniseverything.net/explorer/peekaboo.html
dat is volgensmij die bug.

[Verwijderd]

@ Dexus:
Ik weet niet zeker of dat dezelfde bug is. Lijkt er wel op, alleen het verschil is dat ik niet met een float werk en dat het bij mij om een header gaat en niet om een div. Desondanks heb ik de gegeven oplossingen geprobeer (vaste waarde height/line-height/width) maar ik krijg het niet voor elkaar. Het wordt er alleen maar meer een zooitje van.

[Verwijderd]

*Nog maar eens een subtiel shopje*

[Verwijderd]

Problem solved!

Na lang kloten is het probleem dan eindelijk opgelost. Oplossing: ik heb de plaatje aan de top-right en top-left div meegeven. Vervologens heb ik in deze div's als content een table met 1 rij en 1 cel van 7px hoog geplaatst. Hierdoor worden de plaatjes in beide div's weergegeven, alleen liggen ze dan niet op lijn. Ik heb ze op een lijn gekregen door de top-right div een negative margin-top mee te geven.

Ranzige oplossing, maar het werkt werkt in zowel IE 6.0 als in FireFox.

Zie http://80.60.182.91/index.html voor het mooie eindresultaat..

[ Voor 8% gewijzigd door Verwijderd op 12-10-2004 18:34 ]