[opgelost] vraagje over layout en validator

[iStevo]

Waarom is mijn layout in IE anders dan mijn layout in chrome, firefox??
Wie kan me zeggen wat er fout is, ik heb dit nog nooit gebruikt en wil er graag iets van opsteken.

http://validator.w3.org/check?uri=http% ... ator%2F1.1

Code: Select all

html {
       background: #07558E;
	margin: 0px;
	padding: 0px;
}

body {	
	margin: 0px;
	padding: 0px;
	color: #000;
}

.container_holder {
	padding: 20px;
	width: 950px;
}

.container {
	width: 950px;
	margin: 0px auto;
        background:#07558E url('uploads/images/event-body.png') repeat-y;
	overflow: hidden; 
}

#container_bg {
        width: 950px;
        margin: 0px;
	padding: 0px;
}

#container_holder {
	margin-top: 20px;
}


#header {
        width: 950px;
        background:#07558E url('uploads/images/event-top.png') no-repeat;
        height: 200px;
}

#content {
        width: 850px;
	min-height: 300px;
        font-size: 12px;
        font-family: Verdana, Arial, Comic Sans MS, sans-serif;
        margin: 10px 40px 20px 50px;
        overflow: hidden;
}

#content a {
        text-decoration: none;
        color: #07558E;
}

#content a:visited {
        text-decoration: none;
        color: #07558E;
}

#content a:active {
        text-decoration: none;
        color: #07558E;
}

#content a:hover {
        text-decoration: underline;
        color: #07558E;
}

#footer_holder {
      background:#07558E url('uploads/images/event-bottom.png') no-repeat;
      width: 950px;
      height: 80px;
      margin: auto;
      font-family: Verdana, Arial, Comic Sans MS, sans-serif;
      font-size: 12px;
      color: #FFF;
}

#footer_copyright {
        margin: 30px;
        width: 40%;
        float: left;
}

#footer_links {
        margin: 30px;
        width: 40%;
        text-align: right;
        float: right;

}


#search {
        width: 250px;
        font-size: 12px;
        font-family: Verdana, Arial, Comic Sans MS, sans-serif;
	position: relative;
	margin-right: 40px;
	margin-top: -100px;
        float: right;
}
.links a {
      font-family: Verdana, Arial, Comic Sans MS, sans-serif;
      font-size: 12px;
      text-decoration: none;
      color: #FFF;
}

.links a:visited {
      font-family: Verdana, Arial, Comic Sans MS, sans-serif;
      font-size: 12px;
      text-decoration: none;
      color: #FFF;
}

.links a:active {
      font-family: Verdana, Arial, Comic Sans MS, sans-serif;
      font-size: 12px;
      text-decoration: none;
      color: #FFF;
}

.links a:hover {
      font-family: Verdana, Arial, Comic Sans MS, sans-serif;
      font-size: 12px;
      text-decoration: underline;
      color: #FFF;
}

Het probleem is dat ik ook een coppermine gallery aan deze css heb verbonden en in IE trekt deze op NIETS http://www.stevo.be/gallery en blijkbaar heb ik daar meer fouten in de validator

[Rolf]

Zo even snel gekeken:

Code: Select all

<div id="container_holder>
	<div id="content_holder" class="container">

Je mist hier een " en je gebruikt twee de ID container_holder.

Code: Select all

<img src="uploads/images/event/stevo-events.png" name="header" />

Je mist hier de alt="" tag

grt. Rolf


//PS

Code: Select all

...
<td width="50%" valign="top">
<table width="100%" cellspacing="0" cellpadding="0">
...

Je kunt beter een totale maximale breedte van 99% aanhouden.
IE berekend de pixels net iets anders in vergelijking tot goede webbrowsers, en daardoor kan het nog wel eens te breed uitkomen.
2 x 49%
3 x 33%
1 x 99%

[iStevo]

Zo even snel gekeken:

Code: Select all

<div id="container_holder>
	<div id="content_holder" class="container">

Je mist hier een " en je gebruikt twee de ID container_holder.

2 x container_holder??
Dat zie ik niet.
Vorige heb ik aangepast.

[iStevo]

Code: Select all

<img src="uploads/images/event/stevo-events.png" name="header" />

Je mist hier de alt="" tag

Hoe kan ik hier een alt tag zetten??
In sjabloon werk ik met een content image block.

Code: Select all

		<div id="header">{content_image block='header' dir='images/event'}</div>

[Rolf]

Dit komt uit de broncode van de site

...







...

Code: Select all

{content_image block='header' dir='images/event' alt='stevo.be'}

grt. Rolf

[iStevo]

Mijn foutmeldingen zijn eruit volgens de valitdator, maar toch heb ik problemen in IE en opera.

[Rolf]

Iedere webbrowser gaat weer anders om met bepaalde tags en waarden.

Zal de ene browser in een tabel de inhoud mooi links plaatsen, kan de andere hem gaan centreren.
Om dit te voorkomen moet je deze waarden hard opnemen in de code. Al lijkt het soms overbodig...

Ik zou hier per een 'center' geven:

Code: Select all

<center>
<table>
...
</table>
</center>

en geen center om de gehele tabel heen.

Grt. Rolf

[iStevo]

en hoe kan ik mijn footer best gelijktrekken met IE.

Werkt wel met FF, opera, chrome

[Rolf]

Ik zie dit niet gebeuren...
Of heb je het inmiddels al gefixt

Rolf

[Rolf]

Wat je wel ziet is dat IE de blauwe achtergrondkleur niet helemaal helder heeft.
Om dit op te lossen kun je beter

Code: Select all

html {
       background: #07558E;
...
}

vervangen door

Code: Select all

html {
       background: url(/pad/naar/background.jpg);
...
}

Je maakt dan één plaatje van zeg maar 10x10px met dezelfde achtergrondkleur (#07558E)
Je zult dan geen kleurverschil meer zien.

grt. Rolf 

[M@rtijn]

Internet Explorer verafschuwen, de-installeren, mail sturen naar Microsoft dat ze een fatsoenlijke browser moeten afleveren en niet 4 versies die elk op een andere manier werken. Koffie zetten, even tot rust komen en dan een creatieve oplossing gebruiken

Code: Select all

<!--[if IE]>
<style type="text/css">
.footertext {margin-top:5px;}
</style>
<![endif]-->

[iStevo]

@ ringportal
Heb dat in mijn stylesheet geschreven, maar dit is resultaat (zie bijlage)

moet dus in mijn sjabloon staan.
Als ik nu footer copyright mooi wil laten links lopen, kan dit op zelfde manier??


@ Rolf
Ben nu op vakantie in Den Helder, maar wil het zeker eens uitproberen eens ik terug thuis ben

[iStevo]

Code: Select all

<!--[if IE]>
<style type="text/css">
.footertext {margin-top:5px;}
</style>
<![endif]-->

Ik krijg nu volgende foutmelding in FF.

string(124) "Smarty error: [in tpl_head:23 line 8]: syntax error: unrecognized tag: margin-top:5px; (Smarty_Compiler.class.php, line 446)" string(110) "Smarty error: [in tpl_head:23 line 8]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 590)"

[M@rtijn]

Je kan nu allerlei specifieke css opgeven voor IE, dus inderdaad ook iets naar links, rechts, of onder.

Dit is inderdaad voor in het sjabloon, ik was alleen even vergeten de {literal} tag erom te plaatsen

Code: Select all

{literal}
<!--[if IE]>
<style type="text/css">
.footertext {margin-top:5px;}
</style>
<![endif]-->{/literal}

[iStevo]

Je kan nu allerlei specifieke css opgeven voor IE, dus inderdaad ook iets naar links, rechts, of onder.

Dit is inderdaad voor in het sjabloon, ik was alleen even vergeten de {literal} tag erom te plaatsen

Code: Select all

{literal}
<!--[if IE]>
<style type="text/css">
.footertext {margin-top:5px;}
</style>
<![endif]-->{/literal}

Ben eindelijk thuis en ik heb dit even bekeken, maar ik krijg het toch niet opgelost op deze manier.
http://www.stevo.be/events/