[css] layout komt niet overeen in ff en ie - Softwareontwikkeling

maandag 25 januari 2010 08:37

Acties:

0 Henk 'm!

Creature of the web

Topicstarter

Hoi,

ik ben net begonnen met wat css te gebruiken, maar ik ben er niet zo heel bekend mee. Nu had ik een layout gemaakt met mijn FF maar toen ik deze bekeek in IE was het helemaal fucked.

Nu ik geen idee heb waar ik moet beginnen omdat ik een beperkte kennis heb van css en al zeker van de browser specifieke problemen.

index.html

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titel</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body class="basis">
<center>
<div class="alles">
    <div class="titel">
        <iframe scrolling="no" src ="titel.html" class="titelFrame" name="titelFrame" width="100%" height="100%">
            <p>U browser kent geen frames. U kan FireFox installeren om dit probleem op te lossen</p>
            <p>
                <a href='http://www.mozilla.com/en-US/?from=sfx&amp;uid=0&amp;t=573'>
                    <img src='http://sfx-images.mozilla.org/firefox/3.6/468x60_green.png' alt='Spread Firefox Affiliate Button' border='0' />
                </a>
            </p>
        </iframe>
    </div>
    <div class="links">
        <iframe scrolling="no" src ="leftBar.html" class="linksFrame" name="linksFrame" width="100%" height="100%">
            <p>U browser kent geen frames. U kan FireFox installeren om dit probleem op te lossen</p>
            <p>
                <a href='http://www.mozilla.com/en-US/?from=sfx&amp;uid=0&amp;t=573'>
                    <img src='http://sfx-images.mozilla.org/firefox/3.6/468x60_green.png' alt='Spread Firefox Affiliate Button' border='0' />
                </a>
            </p>
        </iframe>
    </div>
    <div class="hoofdmain">
        <div class="main">
            <iframe scrolling="no" src ="main.html" class="mainFrame" name="mainFrame" width="100%" height="100%">
                <p>U browser kent geen frames. U kan FireFox installeren om dit probleem op te lossen</p>
                <p>
                    <a href='http://www.mozilla.com/en-US/?from=sfx&amp;uid=0&amp;t=573'>
                        <img src='http://sfx-images.mozilla.org/firefox/3.6/468x60_green.png' alt='Spread Firefox Affiliate Button' border='0' />
                    </a>
                </p>
            </iframe>
        </div>
        <div class="rechts">
            <iframe scrolling="no" src ="rechts.html" class="rechtsFrame" name="mainFrame" width="100%" height="100%">
                <p>U browser kent geen frames. U kan FireFox installeren om dit probleem op te lossen</p>
                <p>
                    <a href='http://www.mozilla.com/en-US/?from=sfx&amp;uid=0&amp;t=573'>
                        <img src='http://sfx-images.mozilla.org/firefox/3.6/468x60_green.png' alt='Spread Firefox Affiliate Button' border='0' />
                    </a>
                </p>
            </iframe>
        </div>
    </div>
    <div class="onder">
        <center>&copy; 2010 Ikke</center>
    </div>
</div>
</center>
</body>
</html>

de css code

Cascading Stylesheet:

html, body {
margin: 0;
padding: 0;
height: 100%;

}

body.basis{
background-color: #ADFF2F;
}

div.alles{
position: relative;
margin-left: auto ;
margin-right: auto ;
width: 1000px;
}

div.titel {
position: absolute;
top: 10px;
height: 100px;
width: 1000px;
border: 0;
}

div.links {
position: absolute;
top: 110px;
width: 1000px;
height: 50px;
border: 0;
}

div{

}

div.rechts {
position: absolute;
left: 850px;
top: 160px;
width: 150px;
height: 500px;
border: 0;
}

div.main {
position: absolute;
top: 160px;
width: 850px;
height: 500px;
border: 0;
}

div.onder {
position: absolute;
top: 660px;
width: 1000px;
height: 50px;
border: 0;
}

img.titel{
width: 1000px;
height: 100px;
}

img.rechtslogo{
    width: 150px;
}

img{
    border: 0;
}

iframe.mainFrame{
overflow:scroll;
border: 0;
}

iframe{
border: 0;
}

hopelijk kunnen jullie me zeggen waar ik de problemen moet zoeken, of het nu een css lijn is waar het fout zit of iets in mijn html...

Just me

maandag 25 januari 2010 08:39

Acties:

0 Henk 'm!

RedHat

Heb je de W3C validator geprobeerd?

http://jigsaw.w3.org/css-validator/

maandag 25 januari 2010 08:44

Acties:

0 Henk 'm!

Dorgaldir

Creature of the web

Topicstarter

mijn css word gevalideerd als correcte css2.1

en krijg dit bij mijn html

Sorry! We vonden de volgende fouten (2)
URI : TextArea
61 Lexical error at line 8, column 3. Encountered: "D" (68), after : "<!" DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> > <title>Titel</title> > </head> <body class="basis"> <center> <div class="alles"> <div class="titel"> ="titel.html" class="titelFrame" name="titelFrame" width="100%" height="100%"> <p>U browser kent geen frames. U kan FireFox installeren om dit probleem op te lossen</p> <p> <a href='http://www.mozilla.com/en-US/?from=sfx&uid=0&t=573'> > </a> </p> </iframe> </div> <div class="links"> ="leftBar.html" class="linksFrame" name="linksFrame" width="100%" height="100%"> <p>U browser kent geen frames. U kan FireFox installeren om dit probleem op te lossen</p> <p> <a href='http://www.mozilla.com/en-US/?from=sfx&uid=0&t=573'> > </a> </p> </iframe> </div> <div class="hoofdmain"> <div class="main"> ="main.html" class="mainFrame" name="mainFrame" width="100%" height="100%"> <p>U browser kent geen frames. U kan FireFox installeren om dit probleem op te lossen</p> <p> <a href='http://www.mozilla.com/en-US/?from=sfx&uid=0&t=573'> > </a> </p> </iframe> </div> <div class="rechts"> ="rechts.html" class="rechtsFrame" name="mainFrame" width="100%" height="100%"> <p>U browser kent geen frames. U kan FireFox installeren om dit probleem op te lossen</p> <p> <a href='http://www.mozilla.com/en-US/?from=sfx&uid=0&t=573'> > </a> </p> </iframe> </div> </div> <div class="onder"> <center>©
66 Parse Error 2010 Ikke</center> </div> </div> </center> </body> </html>

maar kan dit iets te maken hebben met de layout?

Just me

maandag 25 januari 2010 08:52

Acties:

0 Henk 'm!

Manuel

Het is hier niet de bedoeling dat je wat code neergooit en vraagt zodat wij het probleem oplossen, graag zou ik je willen adviseren die gehele iFrames te gaan verbannen.

Verder op de output van de W3C Validator, dat werkt heel simpel. Er staat een regel nummer bij vermeld en ik neem aan dat het dan allemaal wel duidelijk moet zijn als je ook echt de foutmeldingen leest.

maandag 25 januari 2010 08:56

Acties:

0 Henk 'm!

Dorgaldir

Creature of the web

Topicstarter

wel als ik de iframes moet verbannen hoe moet ik dan pagina's kunnen inladen, of kan dit ook rechtstreeks in de div?

Just me

maandag 25 januari 2010 08:57

Acties:

0 Henk 'm!

TheMazzter

Het is soms gewoon niet mogelijk om ff en ie hetzelfde te laten doen zonder hacks in je css of html, misschien moet je daar ook eens naar kijken, na eerst je code een beetje te verbeteren uiteraard.

[ Voor 17% gewijzigd door TheMazzter op 25-01-2010 08:58 ]

maandag 25 januari 2010 09:05

Acties:

0 Henk 'm!

Dorgaldir

Creature of the web

Topicstarter

ik heb de site nu eens upgeload en dan in zijn geheel laten valideren door de w3 validator en ik kreeg geen fouten terug

@TheMazzter, het moet er ook niet exact hetzelfde uitzien van mij maar een beetje gelijkenis zou toch fijn zijn. ik zal het eens bekijken, bedankt voor de tip

Just me

maandag 25 januari 2010 09:08

Acties:

0 Henk 'm!

macciez

Als je een beetje had gezocht, had je overal kunnen vinden dat IE en FF (en nog een zootje natuurlijk) de code anders renderen. Zelfs de verschillende versies binnen IE en FF renderen dezelfde code anders. Het is daardoor heel belangrijk dat je jouw code goed opbouwt, zodat de verschillen minimaal zijn en/of helemaal niet aanwezig.
Lees je maar eens in over die verschillen van rendering en dan kom je ook 100% zeker oplossing of "hacks" daarvoor tegen.

taalnazi: Het is "Uw browser" ipv "U browser".

edit: je hebt de site online? URL? Een online voorbeeld is altijd makkelijker te controleren

[ Voor 8% gewijzigd door macciez op 25-01-2010 09:08 ]

Do what you love, do it often

maandag 25 januari 2010 09:11

Acties:

0 Henk 'm!

Dorgaldir

Creature of the web

Topicstarter

@macciez ben er nu volop over aan het lezen

de locatie van de testsite is hier

Just me

maandag 25 januari 2010 09:26

Acties:

0 Henk 'm!

macciez

IE is geloof ik nooit een fan geweest van position:absolute. Probeer het eens met een container div en dan jouw andere div's erin te floaten.
Je zou ook een standaard 2 of 3 kolommen layout kunnen gebruiken, die kun je overal laten genereren.
Verder leuk kleurgebruik

Do what you love, do it often

maandag 25 januari 2010 09:30

Acties:

0 Henk 'm!

Dorgaldir

Creature of the web

Topicstarter

@macciez ja let niet op de kleuren

eerst layout dan mooi maken met juiste kleuren en niet zo lelijke buttons

edit:

macciez schreef op maandag 25 januari 2010 @ 09:26:
IE is geloof ik nooit een fan geweest van position:absolute. Probeer het eens met een container div en dan jouw andere div's erin te floaten.

heb ik gedaan en het begint er op te lijken

nog niet zoals het zou moeten zijn maar toch al iets beter.

[ Voor 62% gewijzigd door Dorgaldir op 25-01-2010 09:38 ]

Just me

maandag 25 januari 2010 09:47

Acties:

0 Henk 'm!

macciez

In ieder geval hoef ik in IE8 niet meer horizontaal te scrollen.
Verder moet je echt van de iFrames afstappen om de content te laten zien. Dan heb je die lelijke scroll balken ook niet meer midden in je pagina.

Do what you love, do it often

maandag 25 januari 2010 09:51

Acties:

0 Henk 'm!

Dorgaldir

Creature of the web

Topicstarter

maar als ik die iframes wegdoe hoe moet ik dan een nieuwe pagina inladen?

Just me

maandag 25 januari 2010 09:55

Acties:

0 Henk 'm!

macciez

Je kan toch gewoon je menu-item naar een andere pagina laten verwijzen dmv een <a> ? Als ik het me correct herinner deed je dat toch ook al? Je menu doet het nu niet meer, dus kan het niet meer zien.

Do what you love, do it often

maandag 25 januari 2010 10:05

Acties:

0 Henk 'm!

lammert

Een advies, hierboven al eerder genoemd: dump de iframes. Ten tweede is het <center> element fossiel, en je hebt geen garantie dat dit in de toekomst in alle browsers ondersteund wordt. Het is sowieso beter om al je stijl in de CSS te definieren, dus gebruik iets als

Cascading Stylesheet:

1	div.center {text-align:center}

maandag 25 januari 2010 10:13

Acties:

0 Henk 'm!

Dorgaldir

Creature of the web

Topicstarter

lammert schreef op maandag 25 januari 2010 @ 10:05:
Een advies, hierboven al eerder genoemd: dump de iframes. Ten tweede is het <center> element fossiel, en je hebt geen garantie dat dit in de toekomst in alle browsers ondersteund wordt. Het is sowieso beter om al je stijl in de CSS te definieren, dus gebruik iets als
Cascading Stylesheet:
1
div.center {text-align:center}

bedankt voor de tip

heb het ineens aangepast

Just me

maandag 25 januari 2010 10:20

Acties:

0 Henk 'm!

Verwijderd

Dat iframes verhaal zou de boel wel eens kunnen slopen (al kan ik het nu even niet testen @linux). Je bent de iframes dus aan het dumpen. Misschien is het een idee om een voorbeeldje te bekijken van hoe je het "netjes" kan doen met divjes?

Hier een verzameling te vinden met allerlei varianten van een 2/3-column layout:
http://blog.html.it/layoutgala/

Best een goede reference denk ik.

Als je overigens toch je inhoud element(divje?) scrollbaar wil maken dan kan je die ook het stijl element overflow meegeven.

maandag 25 januari 2010 10:26

Acties:

0 Henk 'm!

Mike2k

Zone grote vuurbal jonge! BAM!

Maar je moet nog steeds de iFrames ditchen....
Hoe je een nieuwe pagina inlaad: ( dit is eigenlijk wel vreselijke basiskennis

)

Een beetje serverside code kan nooit kwaad

Je maakt een index.php welke de header en de footer laad. (de header is in dit geval die banner en die knoppen)
De footer is iets als copyright info ofzo, wat je wil.

Vervolgens laat je een klein stukje php code de juiste html pagina includen:
Even uit mijn blote hoofd:

PHP:

<?php
if (isset($_POST['pagina'])) {
    if(isfile($_POST['pagina'])) {
        include ('../je-directory/'.$_POST['pagina'].'.html');
    }
}
?>

Je url's worden dan zoiets:
www.testsite.nl?pagina=home
www.testsite.nl?pagina=contact
En dan wordt home.html geincluded in je index.php....en weg iFrames

You definitely rate about a 9.0 on my weird-shit-o-meter
Chuck Norris doesn't dial the wrong number. You answer the wrong phone.

maandag 25 januari 2010 10:29

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

Mike2k, wil je dat niet aanraden? Allereerst is het gebruik van $_POST ruk, daarnaast is deze code ook nog onveilig.

Verder is dit een beetje een "hier is mn code en fix het maar" topic, oftewel een Kan iemand even...? Deze gaat dan ook dicht.

[ Voor 40% gewijzigd door MueR op 25-01-2010 10:31 ]

Anyone who gets in between me and my morning coffee should be insecure.