Raar gedrag IE

Status
Niet open voor verdere reacties.
H

Haaren101

Terugkerende gebruiker
Lid geworden
4 apr 2007
Berichten
3.195
Ik heb hier een stukje website. Dit werkt prima in Opera, Safari, Firefox en Chrome. Maar helaas niet in IE, niet in IE8 en niet in IE10.

Het is de bedoeling dat er na het klikken op "Route informatie" een overlay inschuift. Helaas staat het overlay volledig zichtbaar al meteen op de pagina.

Alvast bedankt voor het meedenken
Ron
 
Begin altijd met een cross-browser template en maak vanuit hier je website.

index.html
Code: 
<!DOCTYPE html lang="nl">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<title>Mijn website</title>
<meta name="description" content="Dit is mijn website" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="view">
<!-- hier komt je html -->
</div>
</body>
</html>

style.css
Code: 
/* cross-browser reset en defaults, zet dit bovenaan in je css */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,
address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,
var,b,u,i,center,dl,dt,dd,ol,ul,li,table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video {
	margin:0; padding:0; border:0; outline:0; font-size:100%;
	vertical-align:baseline; background:transparent;}
article,aside,details,figcaption,figure,
footer,header,hgroup,nav,section,summary {
	display:block;}
audio,canvas,video {
	display:inline-block; *display:inline; *zoom:1;}
blockquote,q {
	quotes:none;}
blockquote:before,blockquote:after,q:before,q:after {
	content:''; content:none;}
:focus, *:focus {
	outline:0; outline-style:none; outline-width:0;}
ins {
	text-decoration:none;}
del {
	text-decoration:line-through;}
table {
	border-collapse:collapse; border-spacing:0; font-size:inherit; font:100%;}
th {
	vertical-align:bottom;}
td {
	vertical-align:top;}
* {
	font-weight:inherit; font-style:inherit; font-family:inherit;}
dfn {
	display:none; overflow:hidden;}
html {
	height:100%; padding-bottom:1px;}
a {
	text-decoration:none; text-align:left; cursor:pointer;}
a:hover, a:focus {
	text-decoration:underline;}
a:active, a:focus {
	outline:0; outline-style:none; outline-width:0;}
p {
	margin-bottom:10px; padding:0; text-align:left;}
b, strong {
	font-weight: bold;}
i, em {
	font-style: italic;}
sup, sub {
	height:0; line-height:0; vertical-align:baseline; position:relative;}
sup {
	vertical-align:super; font-size:0.7em;}
sub {
	vertical-align:sub; font-size:0.7em;}
small {
	font-size:85%;}
hr {
	width:100%; height:2px; margin:0; display:block; border:1px solid transparent;
	border-top:1px solid #7f7f7f;}
#view {
	width: auto;}
/* hier begint jouw css */

**edit:
controleer even je css bestand. Als dit niet ok is dan gebeuren er rare dingen
body
a:link {color:#427427; text-decoration: none;}
a:visited {color:#427427; text-decoration: none;}
a:hover {color:black; background-color:#FFFF91; text-decoration: underline;}
a:active {color:black;}
{ background-color:#FFFFFF;}
 
Laatst bewerkt:
Aanvulling:
Als je de html in orde maakt werkt het in IE en Chrome (net getest).
- Dubbele </tr> weghalen.
- Her en der </td> toevoegen
- In css foutjes eruit halen

haaren101.jpg
 
@Bron

Bedankt voor de tips zo ver. Ik krijg het (nog) niet voor elkaar. Ik heb nu de tr's en td's goed staan; dat was een makkelijke

In css foutje eruit halen werkt bij mijn nog niet goed zo. Ik heb niet zo gek veel ervaring met css en herken zo gauw geen fouten. Heb nu alle statements afgesloten met een ; maar verder herken ik weinig fouten. Zou je een tipje van de sluier voor mij op kunnen lichten?
Ik had eerst wat css in een .css file staan en css in de htm file; nu staat alles in een .css file (maakt ook al niet uit :confused:)

Ik heb nog niets met je eerste post gedaan.

Ongelooflijk bedankt voor het meedenken in ieder geval.

Ron

@edit: ik heb een voorbeeld wat wel werkt. Ik ga hier mee aan de gang om te zien waar de 7 verschillen zitten. Heb ondertussen nog meer fouten uit de html gehaald ook. Ik laat weten hoe het af loopt!
 
Laatst bewerkt:
Gebruik een editor met syntax highlighting voor html/css/javascript.
Begin elke website met de cross-browser template. Zie boven.
Gebruik geen hoofdletters in html tags en css.

Belangrijkste tip:
Pagina's bouwen met <table> is pre-historie. Gebruik <div> met float, margin, etc.
Gebruik table alleen in tabellen!
 
Laatst bewerkt:
Hij doet het!

Ik gebruik notepad++ maar heb hier en daar de signalen gemist :o

Ik ben kaal begonnen en heb langzaam maar zeker zaken weggegooid die niet nodig leken en uiteindelijk alle css in een .css file gezet. Met deze stap voor stap benadering bleef alles prima werken en werden foutjes makkelijk opgespoord.

Tsja en dan die <table>. Is inderdaad primitief, maar dat ben ik denk ik ook :). Voor quick en dirty programmeren werkt het bij mij goed. Maar, nu ik dit aan het werk heb kan ik me erop gaan richten om de boel te optimaliseren.

@Bron, bedankt voor het duwtje in de goede richting
Ron
 
Super :thumb: en graag gedaan.
Ron (jaja, ik ook)
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan