Alle browsers behalve Internet Explorer

tombalfoort · 18 dec 2009

Hallo,

Ik heb een template gevonden en bewerkt, maar nu zit ik met het probleem dat deze niet wordt gecentreerd in internet explorer. In Firefox, Google Chrome, Safarie, en Opera komt hij netjes in het midden.

Dit is de style : http://tv.sprousebrosfans.net/style.css

Het is een website die ik voor iemand aan het maken ben. Maar ik komt er met de css even niet uit.

Groetjes Tom

pum · 19 dec 2009

centreren

geef je body eens een text-align:center mee

body{
margin:0;
padding:0;
text-align:center;
}

#wrap{
margin:0 auto;
width:800px;
}

dit moet werken werkt het niet haal dan * margin:0 padding:0 weg en geef alles gewoon handmatig een waarde mee. h tags p tags etc hebben in ie en firefox andere waardes dus deze altijd opmaken.

Goeroeboeroe · 19 dec 2009

Daar is zo niets van te zeggen. IE 6, IE 7 en IE 8 zijn in feite drie volkomen verschillende browsers. Ik gok zomaar dat hij in IE 8 wél centreert.
Het kan bijvoorbeeld liggen aan een missend of onvolledig doctype. Heb je 'n link naar de pagina online? Of kun je anders ook je html hier neerzetten?

In reactie op het vorige antwoord:
Welkom op het forum. Maar...
text-align: center is niet bedoeld voor blok-elementen, maar voor inline-elementen zoals tekst en afbeeldingen. Als je dat aan de body meegeeft, moet je het vervolgens elders weer gaan corrigeren.
'n Pagina is áltijd te centreren op de juiste manier, mits je volgens de standaard werkt.

Een handmatige waarde meegeven om te centreren kan niet, omdat vensters en schermen niet allemaal dezelfde maat hebben. Je kunt alleen handmatig centreren in één maat venster. (Ik neem aan dat met handmatig wordt bedoeld een vast getal of zo.)

Als

Code:

 #wrap {
margin: 20px auto;
width: 800px;
}

niet werkt, dan werkt het ook niet als je 20px in 0 verandert, want die hebben alleen betrekking op boven- en ondermarge, niet links en rechts.
Daarom denk ik ook dat het aan 'n missend of onvolledig doctype kan liggen, want bovenstaande zou moeten werken (aangenomen dat #wrap de hele pagina omvat).

h tags en p tags hebben al jaren in álle browsers dezelfde waarden, mits je 'n geldig doctype gebruikt. Zonder geldig doctype kunnen er verschillen zijn, maar dan zijn de verschillen tussen de marges van <p> en <h> bepaald niet je grootste probleem.

tombalfoort · 19 dec 2009

Dit is de HTML voor de pagina. Daar onder heb ik ook nog even appart de CSS gepost

HTML:

<html> 
<head> 
<title>Sprouse TV</title> 
 
 
    <!-- CSS --> 
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> 
    <link rel="stylesheet" type="text/css" href="css/lightwindow.css" /> 
    
	<!-- JavaScript --> 
	<script type="text/javascript" src="javascript/prototype.js"></script> 
	<script type="text/javascript" src="javascript/effects.js"></script> 
	<script type="text/javascript" src="javascript/lightwindow.js"></script> 
 
</head> 
<body style="margin:0"> 
 
<!-- START WEBSITE ---> 
 
<div id="wrap"> 
 
<div id="header"> 
<!-- Name --> 
<h1><font color="orange">Sprouse</font> <font color="#FFE788">TV</font></h1> 
</div> 
 
<!-- Include files with php --> 
 
 
<div id="right"> 
 
<h2><a href="#">Sprousebros Fans.net - TV</a></h2> <BR> 
 
Welcome to the Béta of Sprouse Tv. You can watch on the moment only Episode 1/2/3/4 of season 1. Click in the "TV Navigation" on SLOD Season 1.<BR><BR>Click on Back for the homepage of Sprousebros Fans.net
</div> 
<!-- End Include files with php --> 
 
 
<div id="left"> 
<h2>TV Navigation</h2> 
<ul> 
<li><a href="index.php?page=s1/index-s1">SLOD Season 1</a></li> 
<li><a href="index.php?page=s2/index-s2">SLOD Season 2</a></li> 
<li><a href="index.php?page=s3/index-s3">SLOD Season 3</a></li> 
<li><a href="index.php">.</a></li> 
<li><a href="http://site.sprousebrosfans.net">Back</a></li> 
</ul> 
 
 
<!-- Backup Code 
 
<h2> - </h2>
<ul>
<li><a href="#"> - </a></li> 
<li><a href="#"> - </a></li> 
</ul>
 
End Backup Code --> 
</div> 
 
<div style="clear: both;"> </div> 
 
<!-- Start Footer --> 
 
<div id="footer"> 
&copy; Sprousebros Fans.net - Video's hosting by YouTube.com
</div> 
<BR><center> 
 
<script type="text/javascript"><!--
google_ad_client = "pub-7899080074660706";
/* Sprousebrosfans.net - TV */
google_ad_slot = "7270065006";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
 
</center> 
 
<!-- End Footer --> 
 
</div> 
 
<!-- EINDE WEBSITE --> 
 
<script type="text/javascript"> 
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script> 
<script type="text/javascript"> 
try {
var pageTracker = _gat._getTracker("UA-11865795-1");
pageTracker._setDomainName(".sprousebrosfans.net");
pageTracker._trackPageview();
} catch(err) {}</script> 
 
</body> 
</html>

Style.css

Code:

* {
	margin: 0;
	padding: 0;
}

body {
background: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 17px;
color: #eee;
}

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

#wrap {
margin: 20px auto;
width: 800px;
}

#header {
height: 60px;
line-height: 60px;
}
#header h1 {
color : #fff; 
font-size: 50px;
letter-spacing: -7px;
}

#left {
margin-top: 10px;
float: left;
width: 160px;
font-size: 13px;
padding: 10px;
background: #2F2C2C;
}
#left ul {
list-style-type: square;
padding: 5px 0 10px 30px;
color: #FFE788;
}
#left h2 {
font-size: 20px;
font-weight: 100;
letter-spacing: -2px;
padding: 5px 0 5px 0;
}

#right {
margin-top: 10px;
float: right;
width: 580px;
background: #2F2C2C;
text-align: justify;
padding: 10px;
}
#right h2 {
font-weight: 100;
letter-spacing: -2px;
font-size: 28px;
padding: 15px 0 10px 0;
}
#right h2 a {
}
#right h2 a:hover {
color: #fff;
text-decoration: none;
}

#footer {
background: #0D0D0D;
font-size: 11px;
text-align: center;
margin-top: 30px;
padding: 5px 0;
}


hr {
  border: 5;
  width: 50%;
  color: #f00;
  background-color: orange;
  height: 3px;
}

Goeroeboeroe · 19 dec 2009

Het doctype mist inderdaad. Daardoor 'denkt' Internet Explorer dat dit 'n heel oude site is en geeft hem op 'n heel oude, foutieve, manier weer ('t is ingewikkelder, maar zoiets).
Helemaal bovenaan als allereerste regel moet je neerzetten:

HTML:

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

of:

HTML:

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

De <html> die er nu staat vervalt.
lang="nl" is niet verplicht, maar zorgt ervoor dat zoekmachines en spraakbrowsers e.d. weten dat het om 'n Nederlandstalige site gaat. Als het Engelstalig is, verander 'nl' dan in 'en'.

Het Doctype moet echt de bovenste regel zijn, er mag zelfs geen spatie voor staan, want dan schiet IE 6 in 'n stuip, de ziel. (Nou ja, 't heet officieel quirks mode, en 't sloopt je lay-out.)

Als je met 'n nieuwe site begint, zou ik heel sterk aanraden om het bovenste doctype te gebruiken, dat met strict. Dat is even wennen in het begin omdat je 'n aantal tags als <font> niet meer mag gebruiken, maar dit zorgt er wel voor dat je site ongelooflijk veel makkelijker is te onderhouden, beter toegankelijk is voor spraakbrowsers, zoekmachines, e.d., en in de toekomst ook goed blijft werken met nieuwere versies van html.

De tweede, die met Transitional, is bedoeld voor bestaande sites. Je mag dan wel tags als <font> gebruiken, maar dat levert de nadelen hierboven op.

Op http://jigsaw.w3.org/css-validator/ kun je je css valideren (checken op fouten)
Op http://validator.w3.org/ kun je je html valideren.
De validator had je in dit geval ook op het missende doctype gewezen. Echt heel erg handig, zo'n validator. Er zitten nog meer fouten in, als je daar niet uitkomt horen we 't wel.
Succes!

pum · 19 dec 2009

wist zo niet dat dat met doctype te make had

ik gebruik altijd text-align center. en centreer dan idd in bijv content de tekst left,

weer wat geleerd

Goeroeboeroe · 19 dec 2009

Dat vind ik het leuke van 'n forum. Als ik reageer en 't klopt niet helemaal, corrigeert iemand anders het (hopelijk). Dan heeft iedereen weer wat geleerd en mogelijk ook wat meelezers.

tombalfoort · 19 dec 2009

Hij werkt,

Ik heb de code boven aan de website geplaatst en hij doet het. Hij komt nu netjes in het midden te staan van de pagina.

Bedankt voor jullie snelle reacties.

Groetjes Tom

P.s. Fijne Feestdagen Alvast

Alle browsers behalve Internet Explorer

tombalfoort

Gebruiker

pum

Gebruiker

Goeroeboeroe

Terugkerende gebruiker

tombalfoort

Gebruiker

Goeroeboeroe

Terugkerende gebruiker

pum

Gebruiker

Goeroeboeroe

Terugkerende gebruiker

tombalfoort

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy