Problemen met layout site, alleen in IE - Softwareontwikkeling

woensdag 8 augustus 2007 11:15

Acties:

No smoke, no poke

Topicstarter

Hallo,

Ik ben (weer) bezig met een nieuwe layout, ik gebruik de css en html codes die ik ook bij de vorige layout heb gebruikt en in firefox 2 werkt alles zo als het moet. Maar in internet explorer 6 en 7 werkt hij voor de rest goed, alleen die stomme voetbalk niet.
De site layout is opgebouwd dmv afbeeldingen. (jpg)
Nu is het probleem dat de voetbalk, alleen in IE, dubbel word weergegeven.
Ik heb al echt van alles geprobeerd maar lukken wilt het niet, ik krijg hem niet goed in IE.

Hier de codes die ik gebruik.

De index:

HTML:

<html>
<head>
<title>Welkom op Joopies place!</title>
<link rel="shortcut icon" href="layout/jp.jpg" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body bgcolor="#fafbf6">
<div id="body">
<div id="container">
<div id="header">
</div>
<div id="gradient">
</div>
<div id="nav">
<iframe src="menu.html" width="194" height="374" frameborder="0" name="menu"></iframe></td>
</div>
<div id="content">
<iframe src="home.html" width="606" height="374" frameborder="0" name="tekstvak"></iframe></td>
</div>
<div id="footer">
</div>
</body>
</html>

De css code:

Cascading Stylesheet:

#body {
    text-align: center;
}
#container {
    width: 800px;
    height: 600px;
    margin: 0 auto;
    text-align: left;
}
#header {
    background-image: url(layout/header.jpg);
    width: 800px;
    height: 179px;
}
#gradient {
    background-image: url(layout/balk.jpg);
    width: 800px;
    height: 35px;
    float: left;
}
#nav {
    background-image: url(layout/menu.jpg);
    width: 194px;
    height: 374px;
    float: left;
}
#content {
    background-image: url(layout/tekst.jpg);
    width: 606px;
    height: 374px;
    float: left;
}
#footer {
    background-image: url(layout/footer.jpg);
    width: 800px;
    height: 12px;
    float: left;
}

De site is hier te bekijken

Wat is hier de fout? Hopelijk kan een van jullie mij helpen.

Het leven is te kort om geduld te hebben!

woensdag 8 augustus 2007 11:20

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Ik zou eens beginnen met een doctype declaratie om alle browsers in standards compliants mode te gooien

offtopic:
Gebruik .jpg voor foto's. Gebruik .gif voor afbeeldingen met <=256 kleuren; zo wordt je "::menu::" plaatje al stukken netter en duidelijker en niet zo ranzig vanwege de jpg compressie.

[ Voor 56% gewijzigd door RobIII op 08-08-2007 11:22 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 8 augustus 2007 12:03

Acties:

Joopieboy

No smoke, no poke

Topicstarter

Ok, maar welke doctype moet ik dan gebruiken in dit geval?

Want ik vind informatie over 3 soorten doctypes met html 4.01, nml frameset, strict en transistional.

En bedankt voor de andere tip, dan zal ik in plaats van de jpg afbeeldingen de png's omzetten naar gif.

[ Voor 24% gewijzigd door Joopieboy op 08-08-2007 12:05 ]

Het leven is te kort om geduld te hebben!

woensdag 8 augustus 2007 12:05

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Joopieboy schreef op woensdag 08 augustus 2007 @ 12:03:
Ok, maar welke doctype moet ik dan gebruiken in dit geval?

Want ik vind informatie over 3 soorten doctypes met html 4.01, nml frameset, strict en transistional.

Gebruik de doctype die ervoor bedoeld is? Een frameset doctype gebruik je voor frames

Maar ik zou gaan voor 4.01 strict.

Joopieboy schreef op woensdag 08 augustus 2007 @ 12:03:
En bedankt voor de andere tip, dan zal ik in plaats van de jpg afbeeldingen de png's omzetten naar gif.

Ik doelde (bijv.) op deze: http://77.160.86.211/layout/balk.jpg

[ Voor 49% gewijzigd door RobIII op 08-08-2007 12:09 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 8 augustus 2007 12:07

Acties:

Joopieboy

No smoke, no poke

Topicstarter

Ja ik snap wat je bedoelt, alles staat nu als jpg's online.
Om ipv die jpg, gif te gaan gebruiken moet ik van de originele afbeeldingen die ik als png heb opgeslagen dan gif maken ipv jpg wat ik nu heb gedaan.

RobIII schreef op woensdag 08 augustus 2007 @ 12:05:
[...]

Gebruik de doctype die ervoor bedoeld is? Een frameset doctype gebruik je voor frames
Wat betreft strict an transistional; als je HTML strict is gebruik je... juist!

Ik volg je niet helemaal, frames gebruik ik niet, dus die valt af.
Maar wat is strict en wat is dan transistional

[ Voor 49% gewijzigd door Joopieboy op 08-08-2007 12:08 ]

Het leven is te kort om geduld te hebben!

woensdag 8 augustus 2007 12:11

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Joopieboy schreef op woensdag 08 augustus 2007 @ 12:07:
Ik volg je niet helemaal, frames gebruik ik niet, dus die valt af.
Maar wat is strict en wat is dan transistional

Kon je dat niet zelf vinden

quote: http://www.w3.org/TR/html4/strict.dtd
Authors should use the Strict DTD when possible, but may use the Transitional DTD when support for presentation attribute and elements is required.

Of:

quote: http://www.w3schools.com/tags/tag_doctype.asp
HTML Strict DTD

Use this when you want clean markup, free of presentational clutter. Use this together with Cascading Style Sheets (CSS)

HTML Transitional DTD

The Transitional DTD includes presentation attributes and elements that W3C expects to move to a style sheet. Use this when you need to use HTML's presentational features because your readers don't have browsers that support Cascading Style Sheets (CSS).

[ Voor 77% gewijzigd door RobIII op 08-08-2007 12:14 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 8 augustus 2007 12:27

Acties:

Joopieboy

No smoke, no poke

Topicstarter

Nja, dat doctype maakt het alleen slechter, daarom twijfelde ik ook, maar alle 3 werken niet goed in IE.
Ik ging zelf uit van strict, maar die gaf ook problemen.

In IE staat de site niet meer gecentreerd en onderaan de voetbalk werkt ook niet.

Dus ja, hoe nu verder?

Het leven is te kort om geduld te hebben!

woensdag 8 augustus 2007 12:39

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Joopieboy schreef op woensdag 08 augustus 2007 @ 12:27:
Dus ja, hoe nu verder?

Als je het fatsoenlijk cross-browser wil hebben moet je toch echt gewoon een doctype opnemen om zo de quirks mode te voorkomen. Als het 'erger' wordt met die doctype dan moet je het dus gewoon fixen tot het goed is daarmee. Het is geen 'wondermiddel' dat spontaan al je problemen fixed ofzo.

[ Voor 8% gewijzigd door RobIII op 08-08-2007 12:39 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 8 augustus 2007 12:46

Acties:

job

Joopieboy schreef op woensdag 08 augustus 2007 @ 12:27:
In IE staat de site niet meer gecentreerd en onderaan de voetbalk werkt ook niet.

Dus ja, hoe nu verder?

IE6 bedoel je?
In IE7 ziet het er gewoon goed uit.

Is dit niet de centreer bug in IE6? (of hoe heet dat ding)
Je kan dan even googlelen voor een eenvoudige oplossing.

woensdag 8 augustus 2007 12:49

Acties:

Verwijderd

Ook ik zag eigenlijk niet veel bijzonders via IE7. De copyright by Joopie staat alleen dubbel omdat de footer te veel ruimte kent (bij een vergroting of verkleining van de site zie je het verschil). De footer dus nog even aanpassen

woensdag 8 augustus 2007 12:58

Acties:

Joopieboy

No smoke, no poke

Topicstarter

En wat moet ik dan aanpassen met de footer?

Het leven is te kort om geduld te hebben!

woensdag 8 augustus 2007 13:02

Acties:

Verwijderd

misschien dat je de repeat van je background op no-repeat moet zetten

http://www.w3schools.com/css/pr_background-repeat.asp

succes

woensdag 8 augustus 2007 13:03

Acties:

job

Je kan de footer korter maken in je css.
Je kan de afbeelding langer maken
Je kan de afbeelding op no-repeat zetten in je css
Je kan de tekst gewoon toevoegen aan je html en dus verwijderen uit de afbeelding, en in de css je footer korter maken.
etc.. etc..

[ Voor 13% gewijzigd door job op 08-08-2007 13:04 ]

woensdag 8 augustus 2007 13:24

Acties:

Joopieboy

No smoke, no poke

Topicstarter

Ok, bedankt voor jullie hulp, ik heb hem nu op no repeat gezet, en hij werkt nu goed.

Cascading Stylesheet:

#footer {
    background-image: url(layout/footer.jpg);
    background-repeat: no-repeat;
    width: 800px;
    height: 12px;
    float: left;
}

Het leven is te kort om geduld te hebben!

woensdag 8 augustus 2007 16:25

Acties:

Boelie-Boelie

Geen doctype, onvolledig doctype, correct doctype, het kan erg veel verschil maken. Dat het niet klopt wanneer je een doctype gebruikt, komt niet door het doctype, maar door verkeerd gebruik van CSS. Anders gezegd, als je zonder correct doctype werkt en het er in IE goed uitziet, werk je eigenlijk in een soort door IE gecreëerde droomwereld, een droomwereld waarin elke browser behalve IE gek is.

In werkelijkheid (d.w.z. met een Stict-doctype) merk je dat juist IE gek is, iets dat ook gewoon feitelijk al jaren bekend is. IE onderkende de problemen en probeerde het met IE7 op te lossen (helaas nog niet helemaal gelukt). Overigens, als je in quirks mode werkt, dan heb je in IE7 dus nog gewoon last van alle onopgeloste CSS-bugs.

You take the blue pill - the story ends, you wake up in your bed and believe whatever you want to believe. You take the red pill - you stay in Wonderland and I show you how deep the rabbit-hole goes.

Lees ook waarom een Stict-doctype beter is.

Cogito ergo dubito

woensdag 8 augustus 2007 18:28

Acties:

Joopieboy

No smoke, no poke

Topicstarter

@Boelie-Boelie:
Harstikke bedankt voor je uitleg.
Dus ik zou een doctype moeten gebruiken met mijn site, maar als ik deze invoer:

Cascading Stylesheet:

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

Dan werkt hij in FF goed, maar in IE niet.

Toen ik over doctypes en alles doorlas, kwam ik tegen dat de iframes die ik gebruik eigenlijk "foutief" zijn....

Hoe kan ik dat dan doen

Het leven is te kort om geduld te hebben!

woensdag 8 augustus 2007 18:32

Acties:

Snake

Los Angeles, CA, USA

Neen gij moet de XHTML 1 gebruiken, want in u code shortclosed ge u <link /> attribute

Going for adventure, lots of sun and a convertible! | GMT-8

woensdag 8 augustus 2007 18:36

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Snake schreef op woensdag 08 augustus 2007 @ 18:32:
Neen gij moet de XHTML 1 gebruiken, want in u code shortclosed ge u <link /> attribute

Je moet helemaal geen XHTML gebruiken

En al zeker niet 'omdat een tag geshortclosed wordt'.

XHTML veroorzaakt nog (te) veel problemen om uberhaupt nuttig te zijn (lees de links eens die gepost werden in dit topic); HTML 4.01 strict is gewoon wat de TS nodig heeft.

[ Voor 22% gewijzigd door RobIII op 08-08-2007 18:36 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 8 augustus 2007 19:08

Acties:

Cadezo

Joopieboy schreef op woensdag 08 augustus 2007 @ 18:28:
Dan werkt hij in FF goed, maar in IE niet.

Ik zou gewoon HTML 4.01 Strict gebruiken en dan kijken wat er in IE (6 of 7?) niet klopt en dit dan indien nodig aanpassen met behulp van bv. conditional comments...

woensdag 8 augustus 2007 22:07

Acties:

Joopieboy

No smoke, no poke

Topicstarter

Mm, ok.
Maar goed het werkt nu zo, en omdat ik dat allemaal nog niet echt begrijp en dit verder prima is laat ik het hierbij zo.
Bedankt voor zover.

En, dat omzetten van png naar gif dat werkt niet via adobe photoshop sc2, via de windows viewer wel, maar dan is de kwaliteit echt bagger..
Hoe kan ik dit beter en anders doen?

Het leven is te kort om geduld te hebben!

woensdag 8 augustus 2007 22:19

Acties:

Cadezo

Joopieboy schreef op woensdag 08 augustus 2007 @ 22:07:
En, dat omzetten van png naar gif dat werkt niet via adobe photoshop sc2, via de windows viewer wel, maar dan is de kwaliteit echt bagger..
Hoe kan ik dit beter en anders doen?

Waarom zou je dat willen, levert volgens mij geen (noemenswaardige) kleinere bestanden op. Volgens mij moest je die menu-items i.p.v. JPEG GIF-bestanden maken....

woensdag 8 augustus 2007 22:50

Acties:

Joopieboy

No smoke, no poke

Topicstarter

Ik was bang voor heel zware achteruitgang van de kwaliteit omdat de jpg bestanden immers al iets kleiner gemaakt waren. Daarom ging ik van de originele png bestanden naar gif om nog een zo goed mogelijke kwaliteit te behouden.
Maar dat is dus niet gelukt.

Het leven is te kort om geduld te hebben!