Website verspringt in Safari

Status
Niet open voor verdere reacties.
A

ananaz

Gebruiker
Lid geworden
15 feb 2010
Berichten
12
Hallo,

Ik heb nog nooit iets hier gepost, maar ben bang dat ik toch echt hulp nodig heb. Ik ben begonnen met het maken van een website en heb hiervoor een opzet gemaakt voor de layout. Ik gebruik zelf IE, maar het leek mij handig om hem nu alvast in een aantal andere browsers te testen, zodat ik de problemen nog kan overzien. In Firefox deed de site het prima, maar in Safari was alles naar boven geschoven. De helft van de site is nog maar te zien ...

Ik denk dat het aan m'n HTML ligt, dus ik hoop dat mijn vraag hier goed staat. Omdat ik hem nog niet online heb staan, hier is mijn index.html:

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

<HTML>
<HEAD>

<TITLE>Famous Dinners</TITLE>

<link rel="stylesheet" href="stylesheet.css" type="text/css">

</HEAD>

<BODY>
<img src="background.png" id="bg">

<div id="logokader">
<div id="kader1">
	<div id="pictures">
	<IMG SRC="pictures/exotic.png" WIDTH="170px" HEIGHT="198px" BORDER="0">
	</div>
	<div id="menu1">
	<ul id="menu">
		<li><A HREF="#">Home</A></li>
		<li><A HREF="#">Dinners</A></li>
		<li><A HREF="#">Contact</A></li>
	</dl>
	</div>
	<div id="menu2">
	<ul id="submenu">
		<li><A HREF="#">Exotic Dinners</A></li>
		<li><A HREF="#">Charity Dinners</A></li>
		<li><A HREF="#">Dinners at altitude</A></li>
		<li><A HREF="#">Unusual Dinners</A></li>
		<li><A HREF="#">Famous Restaurants</A></li>
		<li><A HREF="#">Famous Restaurants and Hotels</A></li>
		<li><A HREF="#">Exclusive Dinners</A></li>
	</ul>
	</div>
</div>
<div id="kader2">
	<div id="leegkader">
	</div>
	<div id="tekstkader">

Exotic Dinners<BR>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque accumsan ipsum nec erat. Sed condimentum iaculis ligula. Class aptent taciti ociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus pharetra condimentum ipsum. Aliquam faucibus neque a dolor. Quisque suscipit orci at massa. Nullam ante. Integer odio orci, bibendum a, luctus ut, blandit a, metus. Duis lacus augue, fringilla id, tincidunt sit amet, lobortis nec, ortor. Etiam vitae elit. Pellentesque in mauris. Vestibulum feugiat, quam sed viverra porttitor, nunc massa mollis massa, id aliquet dolor arcu eget odio. Ellentesque malesuada velit eget sapien pretium pulvinar. Sed pulvinar feugiat sapien.</p>
	
	</div>
</div>
</div>


</BODY>
</HTML>

Als het nodig is kan ik ook nog wel m'n CSS posten. Ik heb nog niet zoveel ervaring met het maken van sites, dus ik hoop echt dat jullie kunnen helpen. Ik heb hem ook gecheckt op fouten met http://validator.w3.org/ en daar haalde ie iets met sluithaakjes aan (>), maar ik snap niet zo goed wat ik daaraan fout heb gedaan. En dat ik geen character encoding heb gebruikt. Geen idee wat dat is .... kan er ook niet zoveel wijs uit worden.

Nog even ter info: de site heb ik zo opgezet dat de background verdeeld wordt over het hele scherm. Daarin heb ik een box geplaatst (div id="logokader") die zowel horizontaal als verticaal gecentreerd staat op het scherm. In safari staat ie wel horizontaal gecentreerd, maar verticaal staat het midden van de box dan bovenaan de pagina, waardoor nog maar de helft zichtbaar is.

Alvast bedankt voor de hulp!
 
Ten eerste welkom op het forum,
Zou je je CSS file ook kunnen posten dit maakt het wat makkelijker :) Op regel 25 vond ik een fout en sluit je een ul (#menu) niet goed af er staat </dl> i.p.v </ul>

verder staat er px achter width, (bij de img tag exotic.png) kan ook met css. Probeer ook alle tags met kleine letters te schrijven i.p.v <A HREF=""></A> gewoon <a href=""></a>

- Tags als <br> en <hr> moeten worden afgesloten, dat ziet er dan zo uit: <br /> en <hr />, ditzelfde geldt voor de img-tag
- Alle codes moeten lowercase zijn, dit mag dus niet: <BODY>, maar dat moet <body> zijn

hoop dat je zo weer even verder kunt :)
 
Laatst bewerkt:
pum zei:
Ten eerste welkom op het forum,
Zou je je CSS file ook kunnen posten dit maakt het wat makkelijker :) Op regel 25 vond ik een fout en sluit je een ul (#menu) niet goed af er staat </dl> i.p.v </ul>

verder staat er px achter width, (bij de img tag exotic.png) kan ook met css. Probeer ook alle tags met kleine letters te schrijven i.p.v <A HREF=""></A> gewoon <a href=""></a>

- Tags als <br> en <hr> moeten worden afgesloten, dat ziet er dan zo uit: <br /> en <hr />, ditzelfde geldt voor de img-tag
- Alle codes moeten lowercase zijn, dit mag dus niet: <BODY>, maar dat moet <body> zijn

hoop dat je zo weer even verder kunt :)
Klik om te vergroten...

Bedankt! Zal deze dingen alvast veranderen. Hoop dat dat werkt :)
Hier is ook m'n css stylesheet:

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

p {
font-family: Arial, Helvetica, Garuda, Sans-serif;
font-size: 10px;
}

a:link {
text-decoration: none;
color: #808080;
} 

a:visited {
text-decoration: none;
color: #808080;
} 

a:hover {
text-decoration: none;
color: #000000;
}

div#logokader {
position: relative;
width: 750px;
height: 500px;
left: 50%; margin: 0 0 0 -375px;
top: 50%; margin-top: -250px;
background-image: url(logo.gif);
}

div#kader1 {
width: 45%;
height: 100%;
float: left;
}

div#kader2 {
width: 50%;
height: 100%;
float: right;
}

div#pictures {
width: 100%;
height: 53%;
float: left;
}

div#menu1 {
width: 20%;
height: 47%;
float: left;
}

div#menu2 {
width: 78%;
height: 47%;
float: left;
}

div#leegkader {
width: 100%;
height: 53%;
float: right;
text-align: justify;
}

div#tekstkader {
width: 100%;
height: 47%;
float: right;
text-align: justify;
}

img#bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

ul#menu {
margin: 0 0 0 5px;
padding: 0;
list-style: none;
font-family: Arial, Helvetica, Garuda, Sans-serif;
font-size: 10px;
font-weight: bold;
color: #808080;
}

ul#submenu {
margin: 0 0 0 15px;
padding: 0;
list-style: circle;
font-family: Arial, Helvetica, Garuda, Sans-serif;
font-size: 10px;
color: #808080;
}

li {
margin: 5px 0 0 0;
}
 
Hallo en welkom,

Ik zou even wachten met die aanwijzingen van pum, want die zijn niet helemaal foutloos.
Die </dl> moet inderdaad 'n </ul> zijn. Met 'n beetje geluk is daarmee ook je probleem opgelost, want soms kunnen klein foutjes tot de wildste problemen leiden.

De width en height achter de image moet je juist laten staan. Alleen moet 'px' weg. Het wordt dus:
HTML: 
<IMG SRC="pictures/exotic.png" WIDTH="170" HEIGHT="198" BORDER="0">
Image is 'n grote uitzondering wat betreft hoogte en breedte. Hier kan het beter bij de afbeelding in de html, omdat de browser het gebruikt om vast ruimte te reserveren voor de afbeelding. Dit is ook een van de zeer weinige plaatsen waar geen eenheid (px) gebruikt mag worden.
De BORDER="0" kan weg, want 'n image krijgt niet vanzelf 'n border.

Hoofd- en kleine letters maakt geen verschil in html (wat jij gebruikt), alleen in xhtml. Beide mogen, net wat je prettig vindt. Ik zou wel consequent álle html met hoofd- of kleine letters doen.
De volledige regel wordt dan
HTML: 
<IMG SRC="pictures/exotic.png" WIDTH="170" HEIGHT="198">
(of in kleine letters, net wat je wilt).
Bij css is er trouwens wél soms verschil tussen kleine en hoofdletters.

Je tags mogen juist niet sluiten met 'n />. Dat wil zeggen: wel de sluittags als </p> en </ul>, maar niet de tags zonder sluittag, zoals <img ...> en <hr> en <br>. Die /> hoort in xhtml, maar jij gebruikt html, en daar is het verboden.
Overigens is html inmiddels beter dan xhtml om te gebruiken, omdat xhtml voor de komende (vele?) jaren weinig voordeel heeft voor websites. html wordt op het moment snel verder ontwikkeld.

De character encoding of tekenset geeft aan de browser door op welke manier hij accenten en zo moet weergeven. Als je van die vreemde Chinese tekens of vraagtekens ziet in 'n Nederlandse tekst, heeft dat daar mee te maken.
De eerste regel binnen je <head>, de bovenste dus, moet dat opgeven:
HTML: 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
De bovenste regel binnen de head, anders negeren sommige browsers hem.
Dit is tegenwoordig de beste, is geldig over de hele wereld.
Je moet er alleen even op letten dat je editor de tekst ook opslaat als utf-8. Meestal is dat zo, Die instelling zit bij opslaan, of voorkeuren, of zoiets.

Omdat je html zo netjes is gescheiden van de css, zou ik je aanraden 'n ander doctype te nemen: strict. Dat zorgt ervoor dat dat zo blijft, want anders geeft de validator 'n foutmelding.
Groot voordeel is dat dat veel simpeler is te onderhouden, maar vooral: de nieuwe html5 (wordt inmiddels al geleidelijk ingevoerd), kan probleemloos met strict overweg, maar niet met transitional.
transitional staat het gebruik van zwaar verouderde codes toe. Dan moet je dus in de toekomst dat weer allemaal gaan ombouwen, of je blokkeert de leuke nieuwe dingen van html5.
Strict doctype:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
Omdat jouw site zo netjes is, lijkt het me nuttig 'm gelijk zo te houden. Toch?

Verder zou ik 'n site maken in Firefox en niet in IE.
Toevallig is er net 'n heel verhaal geschreven hierover in 'n andere draad. Om m'n vingers te sparen link ik even daarnaar:
http://www.helpmij.nl/forum/showthread.php?p=3234679

Die validator is trouwens vaak volstrekt onbegrijpelijk. Dat is door techneuten geschreven en die kunnen nou eenmaal niet normaal schrijven :D
Ander foutje: bij 'n <img moet je 'n alt opgeven.
HTML: 
<img src="..." width="100" height="100" alt="Hier staat een plaatje">
Als het plaatje niet kan worden getoond, zien mensen nu de tekst binnen de alt. Dat is ook wat blinden te horen krijgen. Maar ook wat 'n zoekmachine 'ziet'.

Als je geluk hebt, werkt het goed als die fouten eruit zijn. Anders horen we het wel.
 
Laatst bewerkt:
Heel erg bedankt voor je uitgebreide uitleg! Ik had inmiddels ook al gevonden dat de /> tags alleen voor xhtml zijn :)

Ik zal straks nog even kijken of ik de site nog een keer bij m'n huisgenoot op Safari kan checken. Hoop dat ie het dan doet! Zal het nog laten weten.
 
Ervan uitgaande dat je op Windows werkt, kun je Safari (en Google Chrome en Opera) ook zelf op WIndows installeren.
Ik heb nog geen enkele melding gezien over welk verschil dan ook tussen Safari op de Mac of Safari op Windows.
 
Helaas ... alle tips hebben nog niet geholpen. De pagina is nog steeds maar voor de helft zichtbaar. Dit is hoe de html er nu uitziet, verwerkt met jullie tips. De border="0" heb ik er nog niet uitgehaald, want op een of andere manier verspringt m'n menu dan. Geen idee waar dat aan ligt.

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

<html>
<head>

<title>Famous Dinners</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque accumsan ipsum nec erat. Sed condimentum iaculis ligula.">
<meta name="keywords" content="Exotic Dinners, Charity Dinners, Dinners at altitude, Unusual Dinners, Famous Restaurants, Famous Restaurants and Hotels, Exclusice Dinners">

<link rel="stylesheet" href="stylesheet.css" type="text/css">

</head>

<body>
<img src="background.png" id="bg">

<div id="logokader">
<div id="kader1">
	<div id="pictures">
	<img src="pictures/exotic.png" width="170" height="198" border="0" alt="Exotic Dinners">
	</div>
	<div id="menu1">
	<ul id="menu">
		<li><a href="#">Home</a></li>
		<li><a href="#"><font color="#000000">Dinners</font></a></li>
		<li><a href="#">Contact</a></li>
	</ul>
	</div>
	<div id="menu2">
	<ul id="submenu">
		<li><a href="#"><font color="#000000">Exotic Dinners</font></a></li>
		<li><a href="#">Charity Dinners</a></li>
		<li><a href="#">Dinners at altitude</a></li>
		<li><a href="#">Unusual Dinners</a></li>
		<li><a href="#">Famous Restaurants</a></li>
		<li><a href="#">Famous Restaurants and Hotels</a></li>
		<li><a href="#">Exclusive Dinners</a></li>
	</ul>
	</div>
</div>
<div id="kader2">
	<div id="leegkader">
	</div>
	<div id="tekstkader">

<p>Exotic Dinners</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque accumsan ipsum nec erat. Sed condimentum iaculis ligula. Class aptent taciti ociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus pharetra condimentum ipsum. Aliquam faucibus neque a dolor. Quisque suscipit orci at massa. Nullam ante. Integer odio orci, bibendum a, luctus ut, blandit a, metus. Duis lacus augue, fringilla id, tincidunt sit amet, lobortis nec, ortor. Etiam vitae elit. Pellentesque in mauris. Vestibulum feugiat, quam sed viverra porttitor, nunc massa mollis massa, id aliquet dolor arcu eget odio. Ellentesque malesuada velit eget sapien pretium pulvinar. Sed pulvinar feugiat sapien.</p>
	
	</div>
</div>
</div>


</body>
</html>

Zou het kunnen dat safari dit uit mn css niet snapt:
left: 50%; margin: 0 0 0 -375px;
top: 50%; margin-top: -250px;

Heb het idee dat het daaraan ligt, omdat ie hem verticaal niet goed centreerd, maar op de top van de pagina centreerd. Misschien is de 'margin-top' een foutieve code? Ik weet niet zo goed hoe ik het nu op moet lossen.

Overigens maak ik m'n site niet met een editor ofzo, maar ik schrijf alles met de hand in kladblok. Dus ik ontwerp hem niet speciaal in Internet Explorer. Ik test hem telkens in zowel IE en Firefox :)
 
Laatst bewerkt:
Kun je je css hier ook even neerzetten? Of, wat makkelijker zou zijn als dat kan, 'n link naar waar 't online staat?
Die margin-top en zo moet Safari in principe gewoon lezen. Dus op zichzelf kan dat de fout niet zijn. (Wel in combinatie met iets anders.)
Die image hoort geen border te krijgen als hij niet in 'n link staat, en dat is hier niet zo. Dus dat moet ergens in de css worden opgegeven. Zou je zeggen.
Wat 't lastig maakt als hier alleen de code staat: je gebruikt images (background.png) waar de maat onbekend van is. Althans: die maat staat niet in de html. Dat maakt het vinden van zoiets lastig. Vandaar dat 'n link naar de code online (waar alles bij elkaar staat) het beste is.
Anders in ieder geval graag de maat van die background.png, dan kan ik 'm even vervangen door 'n statiefoto van mezelf of zo.

Edit: ah, je maakt hem met de hand. Vandaar de nette code! Blijft toch met stip de beste manier.
Als je Kladblok gebruikt, zou je ook Notepad++ 'ns kunnen proberen. Die is vrijwel hetzelfde, maar kleurt je code. Dat maakt het vinden van fouten 'n stuk makkelijker. En je kunt vanuit Notepad++ snel browsers starten, dat soort dingen.
 
Laatst bewerkt:
Hoi!

Ik had m'n CSS hierboven al ergens gepost! :)
Heb net safari (en alle andere mogelijke browsers) op m'n windows geinstalleerd en hier doet ie het gewoon wel! Heb hem ook nog bij iemand anders op z'n mac getest en daar werkt het ook. Zou het aan de instellingen van die laptop van m'n huisgenoot kunnen liggen dat ie hem daar niet goed pakt??

Ik ga in iedergeval dat notepad++ even downloaden, dat is vast handig!
Onwijs bedankt voor de hulp en dat ik het hier allemaal kwijt kon. Fijn dat er mensen zijn die ook werkelijk veel verstand ervan hebben :D Ik ben nog maar een beginneling, maar vind het wel interessant allemaal.

Nu nog uitvinden hoe ik een flashintro kan maken en dan kan ik de site invullen met nuttige informatie. Ik probeer expres de html en css netjes te houden omdat ik de site voor een klant maak. Zelf ben ik er nog weleens rommelig mee, maar vind het wel belangrijk om het goed (of in ieder geval overzichtelijk) af te leveren.

Normaals BEDANKT! :D
 
Ah, de css staat er al. Ga 't toch ook nog even testen bij mij op Safari. Uit nieuwsgierigheid.
't Lijkt me niet dat 't aan de instellingen op die laptop ligt. Althans: aangenomen dat je niet ergens 'n vaste hoogte hebt opgegeven die toevallig vreemd uitkomt op de maat van dat scherm. Maar dat lijkt me stug.
Wat wel met ene regelmaat voorkomt is 'n beschadigd bestand in de cache. Als je huisgenoot de cache van Safari leegmaakt móét alles opnieuw worden geladen, en dan weet je zeker dat 't niet uit de cache wordt gelezen.
 
Ik heb toch iets gevonden, denk ik. In Internet Explorer 6 verspringt hij ook (althans: ik denk dat je dat bedoelt).
IE 6 kent geen position: fixed. Ik heb even 'n background.png gemaakt van 1500x1000. Da's groot, maar ik neem aan dat hij alle schermen moet beslaan.
De rest van de pagina wordt door IE 6 daaronder gezet, omdat hij fixed negeert.

't Andere is de manier van centreren div#logokader, die wat vreemd overkomt. Mogelijk veroorzaakt die combinatie toch 'n probleem op sommige schermen, hoewel dat wel vreemd is. Hoe dan ook: 't gaat in ieder geval mis in IE 6, en dat is toch nog 10-20% van de gebruikers hier in Nederland (afhankelijk van wie je moet geloven).

Ik neem aan dat die background.png de achtergrond van de pagina is en dat die niet mee moet scrollen. Waarom maak je daar dan geen background-image in de <body> van en zet hem daar vast met background-attachment: fixed; (of shorthand gewoon als onderdeel van background)
Dan is 't probleem in IE 6 opgelost.

Als ik 't goed zie staat de hele pagina in div#logokader. Die heeft in de css
Code: 
div#logokader {
position: relative;
width: 750px;
height: 500px;
left: 50%; margin: 0 0 0 -375px;
top: 50%; margin-top: -250px;
background-image: url(logo.gif);
}
position: relative: wil zeggen: ten opzichte van de positie waar hij normaal genomen neergezet zou worden.
Normaal genomen wordt bij deze manier van centreren niet relative, maar position: absolute; gebruikt (in combinatie met left, top en margin)
Mogelijk is op die laptop om een of andere reden de standaardpositie van het div#logokader raar (ik roep maar even wat), en omdat je relatief positioneren gebruikt, wordt ten opzichte van dat 'rare' gepositioneerd. Bij absoluut zou 't dan over horen te zijn.

Maar.
Tenzij je 'n reden hebt die ik niet ken, zou ik niet zo positioneren. Bij absoluut positioneren op deze manier verdwijnt wat aan de bovenkant of links buiten het scherm valt gewoon helemaal, zonder scrollbalk. Wat rechts en onder niet past is niet zo'n ramp, daar krijg je 'n scrollbalk.
Voor horizontaal positoneren werkt dit in 99 van de 100 gevallen ook prima, zonder bovengenoemd gevaar, en 't is veel simpeler:
Code: 
div#logokader {
position: relative;
width: 750px;
margin: 0 auto;
background-image: url(logo.gif);
}
0 auto: maar 2 waarden, alleen voor boven en rechts, dus onder en links worden hetzelfde: 0 auto 0 auto.
auto betekent hier: evenveel. Oftewel: altijd horizontaal gecentreerd, ongeacht grootte venster.
position: relative kan weg, maar als je 't laat staan kunnen de kinderen van #logokader worden gepositioneerd ten opzichte van #logokader.

Voor verticaal positioneren moet je inderdaad absoluut positioneren. Met het risico dus dat 'n deel van de content wegvalt. Dat risico wordt inmiddels weer steeds groter vanwege de toename aan iPhones, verrekijkers, koffiediklezers en hoe al die mobieltjes ook mogen heten met de wildste maten scherm.
Zelf centreer ik eigenlijk nooit verticaal. Mensen met grote schermen zijn 'n rand onderaan wel gewend. Maar meestal zullen ze gewoon bovenin van alles open hebben staan, waardoor ze toch 'n kleiner scherm hebben.
Anders zou ik, als je 't echt wilt, eerst via JavaScript de hoogte van het venster opvragen en dan berekenen hoe hoog 't moet komen om verticaal te centreren.

Edit: overigens zou Safari dat niet horen te doen, maar 't zou 'n exotische bug kunnen zijn.
 
Laatst bewerkt:
Hm ik zal morgen dan nog wel even kijken hoe hij in IE6 reageert.

De reden waarom ik hem zowel verticaal als horizontaal wil positioneren is het ontwerp van de site. Deze heb ik niet gemaakt en is niet optimaal voor het omzetten naar html. Het ontwerp bestaat uit een background met een gradient en een logo in het midden en om het logo heen is de site opgebouwd.

Eerst dacht ik eraan om de hele site mee te laten schalen met het scherm, maar dan zou het logo dus ook heel raar meeschalen. Ik heb er daarom voor gekozen om de background los te houden. Deze wordt nu over de pagina verspreid (en dus uitgerekt of verkleind) en scrollt niet mee. Daarover heb ik het logo geplaatst gecentreerd in een box. Mijn html kennis is dus niet heel groot en dit leek mij de beste oplossing.

Ik heb de box een maat van 750x500px gegeven, waardoor ie (volgens mij) op vrijwel alle schermresoluties zou moeten passen. Is het dan wel mogelijk om hem als 'absolute' te defineeren?

Als ik het goed begrijp zijn dus de problemen:
'fixed' bij de background en
'relative' bij de box?

Ik bedenk me trouwens net dat ik nog ergens een code had eerst van 'if IE6' ... blijkbaar ben ik die vergeten. Zal die weer eens opzoeken, dan is het background probleem in ieder geval al opgelost.

Ga morgen kijken of ik die box anders op kan lossen. Nu eerst maar eens een nachtje goed erover slapen :)

EDIT:
Toch nog heel even die site opgezocht waar ik de 'stretch a background' vandaan had ( http://webdesign.about.com/od/css3/f/blfaqbgsize.htm ) en dit even precies zoals aangegeven toegepast in mijn html.
Ziet er nu zo uit:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>

<title>Famous Dinners</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque accumsan ipsum nec erat. Sed condimentum iaculis ligula.">
<meta name="keywords" content="Exotic Dinners, Charity Dinners, Dinners at altitude, Unusual Dinners, Famous Restaurants, Famous Restaurants and Hotels, Exclusice Dinners">

<link rel="stylesheet" href="stylesheet.css" type="text/css">

<!--[if IE 6]>
<style type="text/css">
html { overflow-y: hidden; }
body { overflow-y: auto; }
#bg { position:absolute; z-index:-1; }
#content { position:static; }
</style>
<![endif]-->

</head>

<body>
<img src="background.png" id="bg">

<div id="content">

<div id="logokader">
<div id="kader1">
	<div id="pictures">
	<img src="pictures/exotic.png" width="170" height="198" border="0" alt="Exotic Dinners">
	</div>
	<div id="menu1">
	<ul id="menu">
		<li><a href="#">Home</a></li>
		<li><a href="#"><font color="#000000">Dinners</font></a></li>
		<li><a href="#">Contact</a></li>
	</ul>
	</div>
	<div id="menu2">
	<ul id="submenu">
		<li><a href="#"><font color="#000000">Exotic Dinners</font></a></li>
		<li><a href="#">Charity Dinners</a></li>
		<li><a href="#">Dinners at altitude</a></li>
		<li><a href="#">Unusual Dinners</a></li>
		<li><a href="#">Famous Restaurants</a></li>
		<li><a href="#">Famous Restaurants and Hotels</a></li>
		<li><a href="#">Exclusive Dinners</a></li>
	</ul>
	</div>
</div>
<div id="kader2">
	<div id="leegkader">
	</div>
	<div id="tekstkader">

<p>Exotic Dinners</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque accumsan ipsum nec erat. Sed condimentum iaculis ligula. Class aptent taciti ociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus pharetra condimentum ipsum. Aliquam faucibus neque a dolor. Quisque suscipit orci at massa. Nullam ante. Integer odio orci, bibendum a, luctus ut, blandit a, metus. Duis lacus augue, fringilla id, tincidunt sit amet, lobortis nec, ortor. Etiam vitae elit. Pellentesque in mauris. Vestibulum feugiat, quam sed viverra porttitor, nunc massa mollis massa, id aliquet dolor arcu eget odio. Ellentesque malesuada velit eget sapien pretium pulvinar. Sed pulvinar feugiat sapien.</p>
	
	</div>
</div>
</div>

</div>

</body>
</html>

In de css is deze nog bijgevoegd:
Code: 
#content {
position:relative;
z-index:1;
}

Blijkbaar zit hierin dus wel de fout, want nu doet hij precies hetzelfde rare verspringen in IE (ik heb versie 8), Firefox en Opera. In Google Chrome en Safari doet ie het nu wel goed. Vreemd vreemd ... Zodra ik die content div toepas gaat het mis. De site leek zo simpel, maar vind het toch aardig ingewikkeld worden ;)
 
Laatst bewerkt:
Als je alles laat zoals 't hier op 't forum staat, werkt het in Safari, IE 7 en 8, Opera, Firefox en Google Chrome bij verschillende lettergroottes, in- en uitzoomen en verschillende venstergroottes. Alleen blijft het risico bestaan dat er boven en links content verdwijnt buiten het venster. Maar 750 x 500 zou op elke desktop moeten passen. En ja, als iemand nog 800x600 heeft én wil zoomen... Ergens houdt 't op.

Hè? Bij mij werkte 't niet???
Ja, klopt. Ik vergeet de eerste zin. Komt omdat ik 'n heel verhaal klaar had en toen op de verkeerde toetsen drukte, waarna ik tegen 'n zwart scherm zat aan te staren. En de tekst dus weg was.
Je moet aan de css voor div#content toevoegen: height: 100%

'n div wordt nooit hoger dan nodig is om de inhoud weer te kunnen geven. Dus div#content blijft vrij laag. Maar de positie van #logokader wordt bepaald aan de hand van de hoogte van #content. En die is dus te laag. Als je dan dus zo'n eind terug omhoog schiet, wordt 't te hoog.

't Verschil tussen de browsers kan worden verklaard door de marge aan de bovenkant. De standaard is niet ingewikkeld op dat punt, het is gewoon wartaal. Geen touw aan vast te knopen. Hoe de tekst precies is, weet ik niet meer, want ik heb dat deel lang geleden uit pure wanhoop verdrongen. Waar het op neerkomt is dat er iets bijzonders is met de marge aan de bovenkant van het eerste blok-element in de body, als ik me goed herinner.. Wat precies weet ik niet meer, maar browsers leggen die wartaal verschillend uit.
Geen probleem, want je merkt 't vanzelf en 't is simpel op te lossen (padding gebruiken, bijvoorbeeld, i.p.v. marge). Alleen nam 't bij jou wat extreme vormen aan door de grote maten.

In IE 6 werkt 't als je deze css voor dat kreng, sorry, voor de lieverd toevoegt:
HTML: 
<!--[if IE 6]>
<style type="text/css">
html { overflow: hidden; }
body { overflow: hidden; }
div#content {position: absolute; left: 0; width: 100%;}
</style>
<![endif]-->

O ja, het 'werkt'. Definieer 'werkt': de content staat overal in het midden en de achtergrond-afbeelding vult steeds volledig het venster, maar is toch volledig te zien. Schaalt dus mee.
Nou, dan wens ik je vast 'n goeiemorgen!
 
Laatst bewerkt:
Wauw, dat is een goed begin van de dag! :D
Onwijs bedankt, hier zou ik zelf nooit uitgekomen zijn.
 
't Was ook leuk om te doen, 'n apart probleem. (Behalve toen ik bijna klaar was met m'n verhaal en alles wiste, grinnik).
Zoals 't nu is geeft 't me ook 'n wat geruster gevoel, omdat 't 'griezelige' deel binnen 'n div staat, en niet meer rechtstreeks binnen de body. Je moet 't trouwens zelf nog wel even echt uitgebreid testen.
Ik heb nog even nagekeken waarom bij centreren meestal absolute en niet relative wordt gebruikt (als je 't zo doet zoals jij). Die methode met left: 50% wordt sowieso niet zo vaak gebruikt, en ik wist werkelijk niet meer wat er tegen relative was.
Hmmm, niets dus. Althans: bij 'n pagina.
Als je 'n div binnen 'n div of zo op die manier gaat centreren, blijft hij de oorspronkelijke ruimte bezetten als je relative gebruikt. Op het scherm staat hij voor het oog goed, maar je krijgt dus 'n enorme lege plek links. Heel verwarrend, want hij is dan wel leeg, maar je kunt er niet zomaar iets anders neerzetten.
Maar bij 'n pagina speelt dat natuurlijk niet, want naast de pagina staat hoogstens je collega of zo, maar geen andere elementen. (Tenzij je collega 'n element is. Goed. Koffietijd, kennelijk.)
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan