[html/css]internet explorer wil site niet goed weergeven

[DEiE]

hallo beste mensen,
ik ben bezig mijn site weer een makeover te geven, en heb met photoshop mooie randen gemaakt. in firefox werkt dit meteen, en van een vriend, die een mac gebruikt, heb ik gehoort dat de site in safari ook goed werkt. alleen in internet explorer ziet het er verschrikkelijk uit, randen die door elkaar staan enzo. ik vind het niets om mijn site, die toch al weinig bezoekers heeft, speciaal voor firefox te maken, dus probeer ik via jullie op een oplossing te komen. de testpagina staat hier: http://www.jessevanassen.nl/layouttest/ en voor het gemak heb ik alle bronbestanden hier opgeslagen: http://www.jessevanassen.nl/layouttest/layout.zip graag antwoord, zodat ik verder kan.

alvast bedankt,
Jesse

[sky-]

Ik heb geen Internet Explorer tot mijn beschikking, maar wat heb je al geprobeert ?

Ik zelf draai Opera, FireFox (in nood ) en Konquerer namelijk.

[We Are Borg]

Wat heb je zelf al geprobeerd, opgezocht, etc? En waarom werkte dit niet? Photoshop HTML output is gewoon bagger en dan kan je niet veel resultaat van verwachten. Er zijn op het internet tutorials te vinden om rounded corners te maken mbv HTML/CSS en die voorbeelden werken wel. Wil je met je eigen code graag verder, zal je toch even wat meer info moeten geven

Edit: hmm, aan het overmatige gebruik van div'jes te zien merk ik dat het geen photoshop output is qua html. In IE7 werkt het trouwens prima, dus je zal het waarschijnlijk over IE6 hebben.

Om een voorbeeld te geven om je op weg te helpen : klik

[ Voor 32% gewijzigd door We Are Borg op 22-11-2006 22:30 ]

[mithras]

Of je kiest voor een container met daarin drie elementen: top, content en bottom. Top bevat bovenlijn met hoekjes, content bevat 1px hoge achtergrond die je verticaal herhaalt en bottom bevat de onderste lijn met afondingen.
In je container centreer je alles dan en klaar is kees.

Je kan verwachten als je 10 (!) blokelementen hiervoor gebruikt het fout zal gaan. Verder zit je alles absoluut te positioneren, maar dat hoeft met de methode die ik gebruik niet. Door ze gewoon onder elkaar te laten vallen heb je geen last van de verschillen in positionering van verschillende engines. Het is ook dan een stuk beter voor de semantiek van je site:

HTML:

<div id="container">
  <div id="top"></div>
  <div id="content">Lorem Ipsum</div>
  <div id="footer"></div>
</div>

Cascading Stylesheet:

#container{
  margin: 0 auto 0 auto;
  width: 800px;
}
#top{
  width:100%;
  background: url(top.png);
  height: x px;
}
#top{
  width:100%;
  background: url(content.png);
  background-repeat: repeat-y;
}
#footer{
  width:100%;
  background: url(footer.png);
  height: x px;
}

[/alles-voor-doen]

offtopic:
Alleen de implementatie van paddings & margins in Fx vs IE is dan erg onhandig

[ Voor 14% gewijzigd door mithras op 22-11-2006 22:33 ]

[DEiE]

bedankt voor de snelle reacties. ik heb niet photoshop gebruikt om html te genereren, puur om de hoeken en de randen te maken en die te saven als *.gif. de stylesheet en de html heb ik zelf uitgetyped in dreamweaver. ik heb zo'n beetje alles al geprobeerd, maar mijn webdesign kennis is niet geweldig groot, en alles wat ik probeerde, werkte niet in IE. ik heb alle bestanden samengepakt in een ziparchiefje in mijn startpost, hier zitten de afbeeldingen en de stylesheet ook in.

In IE7 werkt het trouwens prima

blij dat te horen. ik kon dit niet testen, omdat ik geen legale windows draai en je dat nodig hebt voor IE7.

edit: die drie containers zijn ook niet wat ik zoek, omdat ik het kader niet altijd 800px breed wil hebben, maar ook van bijv. 200px. in mijn geval wordt het kader dan ook mooi kleiner, en blijven de hoeken even groot.

[ Voor 28% gewijzigd door DEiE op 22-11-2006 22:53 ]

[Elvis]

Ik heb een andere oplossing
Die bevat maar liefst 7 DIVs en 8 verschillende afbeeldingen , maar mijn DIVjes werken wél op elke breedte en/of hoogte...
Kijk eens hier (verander terwijl je kijkt je resolutie naar het maximum)

Dit is een template van een DIV

code:

<div class="artikel_body-top">  // krijgt via CSS de bovenste horiz. lijn
    <div class="artikel_body-bottom"> // krijgt via CSS de onderste horiz. lijn
        <div class="artikel"> // krijgt via CSS de linkerbovenhoek
            <div class="artikel_body-right"> // krijgt via CSS de rechter vert. lijn
                <h2>&nbsp;</h2> // krijgt via CSS de rechterbovenhoek
        
                <div class="artikel_body"> // krijgt via CSS de linker vert. lijn
                    <p class="artikel_tekst"> // is gewoon een DIV met tekst, zonder afbeelding
                                        &nbsp;
                    </p>
                        
                    <div class="artikel_footer"> // krijgt via CSS de linkeronderhoek
                        <div class="artikel_footer-right"> // krijgt via CSS de rechteronderhoek
                            <p>&nbsp;</p> // alleen tekst
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

dit zijn de afbeeldingen, op de volgorde zoals ze bij de DIVs komen
Boven :


Onder:


Linksboven:


Rechts:


Rechtsboven:


Links:


Linksonder:


Rechtsonder:


Dit is de CSS die ik gebruik :

code:

div.artikel_body-top
{
    background: url(../img/border/B.png) top repeat-x;
    background-color: #b3b2b2;
    width: 80%;
    margin-left: 10%;
    margin-top: 20px;
}

div.artikel_body-bottom
{
    background: url(../img/border/O.png) bottom repeat-x;
}

div.artikel
{
    background: url(../img/border/L-B.png) top left no-repeat;
}

div.artikel_body-right
{
    background: url(../img/border/R.png) right repeat-y;
}

div.artikel h2
{
    background: url(../img/border/R-B.png) top right no-repeat;
    padding-top: 50px;
    margin-left: 50px;
}

div.artikel_body
{
    background: url(../img/border/L.png) left repeat-y;
}

div.artikel_body p.artikel_tekst
{
    font-size: 16px;
    margin-left: 75px;
    margin-right: 60px;
}

div.artikel_footer
{
    background: url(../img/border/L-O.png) bottom left no-repeat;
}

div.artikel_footer-right
{
    background: url(../img/border/R-O.png) bottom right no-repeat;
    padding-top: 30px;
    padding-right: 30px;
}

div.artikel_footer p
{
    text-align: right;
    bottom: 50px;
    right: 25px;
    position: relative;
}

Ik weet dat het op het eerste zicht een warboel is, maar het werkt wél, zowel in FF, IE als Opera

[DEiE]

Elvis schreef op donderdag 23 november 2006 @ 06:18:
Ik heb een andere oplossing
Die bevat maar liefst 7 DIVs en 8 verschillende afbeeldingen , maar mijn DIVjes werken wél op elke breedte en/of hoogte...
Kijk eens hier (verander terwijl je kijkt je resolutie naar het maximum)

Dit is een template van een DIV

code:

...

Ik weet dat het op het eerste zicht een warboel is, maar het werkt wél, zowel in FF, IE als Opera

Ik ga dit vanmiddag eens proberen. die warboel moet toch niet uitmaken omdat ik het script door php ga laten maken, dus heb ik daar toch geen last van. bedankt voor de hulp.

[DEiE]

ik heb ondekt dat bij mijn pagina het fout loopt bij de height:100% van de linker- en rechterrand. deze "lijkt" niet met procenten aangepast kunnen worden. de bovenste rand + hoeken werkt ook gewoon wel, maar onder de randen loopt het mis.

[BtM909]

DEiE, let er even op dat je je eigen topic niet met een schopreactie binnen 24 uur weer naar boven brengt: Het algemeen beleid #verboden