[ie6, ie7, ff] simpele website, groot verschil. - Softwareontwikkeling

donderdag 21 december 2006 14:17

Acties:

Topicstarter

Hey,

Na zoeken op dit forum kom ik erachter dat er al veel en vaak problemen zijn geweest met doctype, positioning, divs, height en noem het maar op.
Ik heb het gevoel dat ie6 een slechte browser is op dit gebied (html, css).

Nu ben ik bezig een nieuwe website te maken en vond het een leuke uitdaging om deze volgende de w3s standaarden te maken. Zoals verwacht werkt dit 100% in FF en verrasend ook in IE7.

Alleen IE6 maakt er werkelijk helemaal niets van.

Ik maak gebruikt van strict tdt (durf ik wel aan

) en zeker gezien het feit dat de website momenteel nog heel simpel is, zou je toch anders verwachten.

Maargoed, veel zoeken, veel proberen, veel dingen opgelost, maar nog altijd geen website in IE6.

Kan iemand van jullie het geheel wat voor me ophelderen / oplossen?

Het gaat om: http://www.moosdijk.com/wesley/nieuw

Code die ik gebruik:
html

code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> ++ Boekhandel van de Moosdijk b.v. ++ </title>
<meta name="Author" content="Wesley Vogels, www.request-design.nl">
<meta name="Keywords" content="collector, books, collectorbooks, boeken, boekhandel, verzamel">
<meta name="Description" content="Online collectorbooks - Boekhandel van de Moosdijk b.v.">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

<body>

<div id="SideBarDiv"></div>

<div id="MenuBar"></div>

</body>
</html>

css:

code:

html,body 
{
    background-color: #FFF;
    margin: 0px;
    height: 100%;
    width: 100%;
    overflow: auto;
}

div#SideBarDiv
{
    background-color: #C5231D;
    background-image: url('rood_vlak_verloop.gif');
    background-repeat: repeat-y;
    width: 150px;
    height: auto;
    position: absolute;
    top: 80px;
    left: 0px;
    bottom: 0px;
}

div#MenuBar
{
    background-color: #707070;
    background-image: url('grijs_vlak_verloop.gif');
    background-repeat: repeat-x;
    width: auto;
    height: 25px;
    position: absolute;
    top: 55px;
    left: 150px;
    right: 0px;
}

Naar mijn idee perfecte code, maar je gaat aan jezelf twijfelen he.

donderdag 21 december 2006 14:20

Acties:

JHS

Splitting the thaum.

Je doctype klopt zo te zien niet, die heeft tegelijkertijd "TRANSITIONAL" en de strict url

? Daarnaast is waarschijnlijk het meest relevante dat je xml prolog in IE6 quirks mode veroorzaakt, en dus niet de standard mode zaken toepast. Ik zou die dus verwijderen, aangezien het 0 toegevoegde waarde heeft

.

DM!

donderdag 21 december 2006 14:21

Acties:

momania

iPhone 30! Bam!

HTML:

1 2	<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">

Hier ga je al fout. Je zegt dat je een xml bestand bent, dus verwacht je een xhtml doctype.
Vervolgens geef je een Transitional doctype op, maar linked naar de strict doctype.

Ga terug naar W3C, ontvang geen 20.00 euro

Neem je whisky mee, is het te weinig... *zucht*

donderdag 21 december 2006 14:37

Acties:

Predje

Topicstarter

ok nu heb ik er:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title> ++ Boekhandel van de Moosdijk b.v. ++ </title>
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=ISO-8859-1">
<META HTTP-EQUIV="content-style-type" CONTENT="text/css">
<META HTTP-EQUIV="content-script-type" CONTENT="text/javascript">
<META NAME="Author" CONTENT="Wesley Vogels, www.request-design.nl">
<META NAME="Keywords" CONTENT="collector, books, collectorbooks, boeken, boekhandel, verzamel">
<META NAME="Description" CONTENT="Online collectorbooks - Boekhandel van de Moosdijk b.v.">
<LINK REL="stylesheet" TYPE="text/css" HREF="stylesheet.css">
</head>

<body>

<div id="SideBarDiv"></div>

<div id="MenuBar"></div>

</body>
</html>

van gemaakt, geen verschil....

thx iig voor deze fouten, maar wat kan ik nogmeer doen?

donderdag 21 december 2006 14:52

Acties:

EnsconcE

Predje schreef op donderdag 21 december 2006 @ 14:17:
css:
div#SideBarDiv
{
background-color: #C5231D;
background-image: url('rood_vlak_verloop.gif');
background-repeat: repeat-y;
width: 150px;
height: auto;
position: absolute;
top: 80px;
left: 0px;
bottom: 0px;
}

Kijk even naar het dik gedrukte

[ Voor 25% gewijzigd door EnsconcE op 21-12-2006 14:53 ]

donderdag 21 december 2006 14:55

Acties:

Zerora

Ik Henk 'm!

Interessant topic. Dit is iets waar ik ook mee aan het kloten ben. Ik ga dit topic ff in de gaten houden.

Trans-life! :::: "All things change, whether from inside out or the outside in. That is what magic is. And we are magic too."

donderdag 21 december 2006 14:55

Acties:

Predje

Topicstarter

EnsconcE schreef op donderdag 21 december 2006 @ 14:52:
[...]

Kijk even naar het dik gedrukte

??? absolute, top 80px, bottom 0px.. dan is auto toch 100% - 80px?
Auto veranderen in 100% maakt 100% + 80px en dus scrollbar..

donderdag 21 december 2006 16:16

Acties:

erwin85

Zou je misschien de position:absolute er niet uit kunnen halen?

Dan #SideBarDiv een float:left; mee kunnen geven en een height: 100%;.
Ow ja om hem een stuk naar beneden te zetten geef je het een margin-top: 100px;

Ik hoop dat je hiermee er uit komt

donderdag 21 december 2006 16:24

Acties:

Predje

Topicstarter

erwin85 schreef op donderdag 21 december 2006 @ 16:16:
Zou je misschien de position:absolute er niet uit kunnen halen?

Dan #SideBarDiv een float:left; mee kunnen geven en een height: 100%;.
Ow ja om hem een stuk naar beneden te zetten geef je het een margin-top: 100px;

Ik hoop dat je hiermee er uit komt

Had ik al geprobeerd, werkt totaal niet.
Bovendien dacht ik dat je beter position kan gebruiken ipv float.

Maar thx anyway.

vrijdag 22 december 2006 00:37

Acties:

Cartman!

ben ik t mee oneens. Ik float dingen liever dan dat ik ze absoluut positioneer. Juist omdat die geen flow hebben dus zegmaar

wat ik geleerd heb : alleen absolute gebruiken als t nodig is...
zet j element dus op 'position:relative;' en 'float:left';
die top en left dus weghalen. speel er maar eens mee, je zal het met me eens zijn...

en een top en bottom in 1 declaratie persen heeft geen enkele zin. Daar gebruik je height voor.

[ Voor 13% gewijzigd door Cartman! op 22-12-2006 00:38 ]

vrijdag 22 december 2006 00:44

Acties:

disjfa

be

Een position geeft alleen mee wat je met je element doet. Met een absolute haal je je element uit de flow van je html document. 99.9% van de gevallen niet wat je wilt. Met een float zeg je alleen tegen je document dat je je elementen ergens neer zet waar je ze wilt.

Position absolute is over het algemeen overbodit aangezien je wel logica in je document wilt houden. Dan kan je dus beter een goede float eraan mee geven.

Maargoed beide moet je gebruiken als je weet waar je mee bezig bent.

Cartman! schreef op vrijdag 22 december 2006 @ 00:37:
en een top en bottom in 1 declaratie persen heeft geen enkele zin. Daar gebruik je height voor.

Als html zou werken zoals html zou moeten werken zou dat geen probleem zijn. Alleen werkt html niet zoals je zou willen dus word het wat lastiger.

Maar een top en een bottom in een element zou echt wel handig zijn. Ook met relative hoogten.

[ Voor 31% gewijzigd door disjfa op 22-12-2006 00:46 ]

disjfa - disj·fa (meneer)
disjfa.nl

vrijdag 22 december 2006 00:45

Acties:

crisp

Devver

Pixelated

Cartman! schreef op vrijdag 22 december 2006 @ 00:37:
en een top en bottom in 1 declaratie persen heeft geen enkele zin. Daar gebruik je height voor.

Dat heeft wel degelijk zin (in uitzonderlijke gevallen), enkel IE < 7 kan er niets mee

Verder sluit ik me aan bij het verhaal over absolute positioning zoveel mogelijk vermijden. Floats worden ook wel uit de flow gehaald maar hebben nog wel invloed op de rest van de flow

Intentionally left blank

vrijdag 22 december 2006 01:27

Acties:

Zerora

Ik Henk 'm!

Soms zie je weleens van die hoekjes op webpagina's of iets dergelijks helemaal in de hoek van de pagina. Daar is absolute positioning wel handig voor, maar de meeste andere dingen kun je beter een andere oplossing zoeken.

Trans-life! :::: "All things change, whether from inside out or the outside in. That is what magic is. And we are magic too."

vrijdag 22 december 2006 13:40

Acties:

Cartman!

crisp schreef op vrijdag 22 december 2006 @ 00:45:
[...]

Dat heeft wel degelijk zin (in uitzonderlijke gevallen), enkel IE < 7 kan er niets mee

Dat bedoelde ik ook min of meer. Het heeft nu nog geen enkele zin het te gebruiken zegmaar.

vrijdag 22 december 2006 13:45

Acties:

BalusC

Carpe diem

Absolute positionering heeft imo wel nut als de parent relatief gepositioneerd is

Maargoed, dit is eigenlijk offtopic

vrijdag 22 december 2006 13:53

Acties:

robkamp

Ik zou je een advies willen geven om te gaan kijken bij http://www.quirksmode.org/css/quirksmode.html van Peter-Paul Koch. Hij behandeld hier je probleem en geeft er uitgebreid uitleg over.

Er staan ook work-around en hacks voor alle overige browsers.