4 berichten aan het bekijken - 1 tot 4 (van in totaal 4)
  • Q:
    Bijdrager
    Mr.Mark

    IE6 gedraagt zich vreemd met DIV’s

    In de website van mijn bedrijf gebruik ik regelmatig een eigen manier om rechthoeken van ronde hoeken te voorzien. Echter wil dit problemen opleveren in IE6 en gebeurt dit ook met andere DIV’s in de website die voorzien zijn van een achtergrondkleur of -afbeelding.

    De code die ik gebruik om deze DIV te maken is doodsimpel:

    [code:1:b80d2db35e] <div class="roundcolWrap">
    <div class="top"><div class="topleft"></div></div>
    <div class="middle">
    — gezever —
    </div>
    <div class="bottom"><div class="bottomleft"></div></div>
    </div>[/code:1:b80d2db35e]

    De DIV’s hebben allemaal een eigen CSS class waardoor ik ze van een achtergrond en plaats voorzie:
    [code:1:b80d2db35e].roundcolWrap .topleft, .roundcolWrap .bottomleft {
    height: 7px; }
    .roundcolWrap .topleft {
    background: url(../images/bg_rndblcktopleft.gif) no-repeat left top; }
    .roundcolWrap .top {
    background: url(../images/bg_rndblcktopright.gif) no-repeat right top; }
    .roundcolWrap .bottomleft {
    background: url(../images/bg_rndblckbottomleft.gif) no-repeat left bottom; }
    .roundcolWrap .bottom {
    background: url(../images/bg_rndblckbottomright.gif) no-repeat right bottom;
    clear: both; }
    .roundcolWrap {
    background-color: #FDF5E8;
    margin-bottom: 5px;
    margin-top: 5px;
    border-width: 0 !important;
    padding: 0 !important; }
    .roundcolWrap div.middle {
    margin: 0;
    padding-left: 10px;
    padding-right: 10px; }[/code:1:b80d2db35e]

    En dit is het effect wat je dan krijgt in IE6:

    Ook heel vrreemd, als je er met een kladblok venster overheen gaat dan verandert de achtergrond ook nog eens. Een deel wordt dan niet getoond, maar beweeg je het kladblok venster er weer anders over heen verschijnt het weer.

    Heeft iemand dit wel eens eerder meegemaakt of ligt het hiero in China aan de Chinese tekens die Windows gewoon vern**ken?

    URL in kwestie: http://www.chinesesavvy.com/savvy/index_demo_01
    (middel column, tweede block heeft de ronde rechthoek met ‘verwijnende achtergrond’)

    Bijdrager
    Thomash

    Ik had een vergelijkbaar iets, de uitlijning van mijn site was in IE helemaal scheef. IE6 is voor zover ik weet héél gevoelig voor kleine type foutjes in DIVs, dat was bij mij in iedergeval het probleem. Firefox/Safari/Camino e.d. leesden er overheen terwijl IE gewoon een prutje ervan maakte..

    Ik weet dat dit niet echt helpt, maar zo ervaren ben ik namelijk niet =(

    Bijdrager
    klaus

    IE 6 heeft wel meer rare problemen met layers.

    Kijk eens even op http://www.positioniseverything.net/explorer.html
    Daar zal je uw probleem wel terugvinden (incl. oplossing)

    Bijdrager
    DarkRaverNL

    Ik heb pas geleden van mijn project ook alles in een nieuw jasje gestoken, en zelf een box model ontworpen, hier istie:

    De HTML:
    [code:1:d9e0aafddf]<!– Start Textblock content –>
    <div class="textblock_top_left"><div class="textblock_top_right"></div></div>
    <div class="textblock_content">
    Hier je rotzooi.
    </div>
    <div class="textblock_foot_left"><div class="textblock_foot_right"></div></div>
    <!– End Textblock content –>[/code:1:d9e0aafddf]

    De CSS:
    [code:1:d9e0aafddf]
    .textblock_top_left {
    margin-left: 9px;
    margin-right: 9px;
    padding-left: 5px;
    height: 5px;
    width: auto;
    background: #2E2E2E no-repeat bottom left url(/images/layout/corn_left_topbar.gif);
    }
    .textblock_top_right {
    height: 5px;
    width: auto;
    background: #2E2E2E no-repeat bottom right url(/images/layout/corn_right_topbar.gif);
    }
    .textblock_content {
    width: auto;
    margin-left: 9px;
    margin-right: 9px;
    padding: 6px;
    padding-bottom: 4px;
    color: #D1D1D1;
    font-size: 12px;
    background: #2E2E2E;
    text-align: left;
    }
    .textblock_foot_left {
    margin-left: 9px;
    margin-bottom: 14px;
    margin-right: 9px;
    padding-left: 5px;
    height: 5px;
    width: auto;
    background: #2E2E2E no-repeat bottom left url(/images/layout/corn_left_footbar.gif);
    }
    .textblock_foot_right {
    height: 5px;
    width: auto;
    background: #2E2E2E no-repeat bottom right url(/images/layout/corn_right_footbar.gif);
    }
    [/code:1:d9e0aafddf]

    Deze box kan je overal plaatsen, is 100% resizable, en je kan hem verbinden met andere box models ( check http://draat.net/index ) om er bijv een titel bar boven te zetten, of aan de boven/onderkant van iets te plakken, het enige min punt tot nu is een klein padding probleem met de top in IE, heb het nog niet opgelost:P

4 berichten aan het bekijken - 1 tot 4 (van in totaal 4)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.