PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
?

Plaatje sluit niet mooi aan in IE

Door Onbekende gebruiker op 28-07-2006 19:25
340 views
Aan de linker kant sluit het plaatje niet mooi aan wat er in de #inhoud zit.
Dit is alleen het geval in IE, in FF sluit het wel mooi aan.

Testpagina

Dit is de code op de pagina:

<body>
<div id="container">

<div id="kop"><table width="100%" height="157" border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="#99CDFF">
	<tr>
		<td width="364" height="100" rowspan="2" align="left"><img src="/nieuw/images/logo_australian_01.jpg" width="364" height="157" /></td>
		<td height="100" align="left"><img src="/nieuw/images/logo_australian_02.jpg" width="536" height="100" /></td>
	</tr>
	<tr>
		<td height="57" align="left" class="logomenu"></td>
	</tr>
</table>
</div>
<div id="menulinks"><?php include("menu.php"); ?></div>
<div id="menurechts">Dit is het rechter menu</div>
<div id="inhoud">Hier komt de inhoud te staan</div>
<div id="footer">Dit is de footer</div>

</div>

</body>
</html>


En dit is de css:

.logomenu {
	background: url(/nieuw/images/logo_australian_04.jpg) repeat-x scroll 0px 0px;
}
.menuutje {
	background: url(/nieuw/images/logo_australian_05.jpg) no-repeat scroll left top;
}
html, body {
	height: 85%;
	background: #99cdff;
}

#container {
	position: relative;
	min-height: 100%;
	height: auto;
	voice-family: "\"}\"";
	voice-family: inherit;
	height: auto;
	margin: 0px;
	padding: 0px;
	border: 0px;
}

html>body #container {
	height: 85%;
}
#kop {
	background:  #99CDFF;
	margin: 0px;
	padding: 0px;
	height: 157px;
}
#menulinks {
	float: left;
	background: url(/nieuw/images/logo_australian_07.jpg) repeat-y scroll 0px 0px;
	padding: 0px;
	vertical-align: top;
	margin: 0px;
	height: 100%;
	border: 0px;
}
#menurechts {
	float: right;
	width: 200px;
	margin: 0px;
	padding: 0px;
	background: #99CDFF;
}
#inhoud {
	padding: 0px;
	background: url(/nieuw/images/logo_australian_06.jpg) no-repeat scroll left top;
	margin: 0px 200px 0px 206px;
	height: 100%;
	vertical-align: top;
	border: 0px;
}
#footer {
	border: 1px solid #0000FF;
	padding: 0em;
	clear: both;
	margin-bottom: 0px;
}
Jan Koehoorn
28-07-2006 20:04
IE heeft nogal eens moeite met de CSS shorthand voor background plaatjes.

Dit:
background: url(/nieuw/images/logo_australian_04.jpg) repeat-x scroll 0px 0px;

Kun je beter veranderen in:
background: url(/nieuw/images/logo_australian_04.jpg) 0px 0px repeat-x;

Ik weet niet of dat je probleem oplost, maar ik zag het toevallig staan. Waarom gebruik je trouwens een table in die header?
?
Onbekende gebruiker
28-07-2006 20:15
@jan

Omdat het header plaatje uit verschillende stukjes bestaat.

Ik heb de css aangepast maar het helpt helaas niet:

.logomenu {
	background: url(/nieuw/images/logo_australian_04.jpg) 0px 0px repeat-x;
}
.menuutje {
	background: url(/nieuw/images/logo_australian_05.jpg) 0px 0px no-repeat;
	text-align: left;
	vertical-align: top;
	padding: 3px;
	margin-top: 0px;
}
html, body {
	height: 85%;
	background: #99cdff;
}

#container {
	position: relative;
	min-height: 100%;
	height: auto;
	voice-family: "\"}\"";
	voice-family: inherit;
	height: auto;
	padding: 0px;
	border: 0px;
	margin: 0px;
}

html>body #container {
	height: 85%;
}
#kop {
	background:  #99CDFF;
	margin: 0px;
	padding: 0px;
	height: 157px;
}
#menulinks {
	float: left;
	background: url(/nieuw/images/logo_australian_07.jpg) 0px 0px repeat-y;
	padding: 0px;
	vertical-align: top;
	margin: 0px;
	height: 100%;
	border: 0px;
}
#menurechts {
	float: right;
	width: 200px;
	margin: 0px;
	padding: 0px;
	background: #99CDFF;
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	text-align: left;
}
#inhoud {
	padding: 4px;
	background: url(/nieuw/images/logo_australian_06.jpg) 0px 0px no-repeat;
	margin: 0px 200px 0px 206px;
	height: 100%;
	vertical-align: top;
	border: 0px;
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	text-align: left;
}
#footer {
	padding: 0em;
	clear: both;
	margin-bottom: 0px;
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	text-align: center;
	border-top: 1px solid #FFFFFF;
	border-right: 1px;
	border-bottom: 1px;
	border-left: 1px;
}
td {
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
}
.menukopje {
	font: bold 11px Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	text-align: center;
	padding-top: 2px;
	padding-bottom: 2px;
}
?
Onbekende gebruiker
28-07-2006 21:19
Ik weet waar het fout gaat nu.
Ik heb nu de hoogte weggehaald in de #inhoud.
Als ik daar iets invul al is het auto of 50% dan sluit het plaatje weer niet aan.

Het voordeel van daar nu niets inzetten is dat het plaatje mooi aansluit.

Het nadeel is dat als je er maar een paar regels in hebt staan het plaatje niet helemaal zichtbaar is.

Of je moet nog een andere oplossing weten en anders valt hier wel mee te leven....
?
Onbekende gebruiker
28-07-2006 22:42
Dan is dit het antwoord, dus daar zit volgens mij niets fout.

* Regel : 4 (Level : 1) U heeft geen achtergrondkleur opgegeven : .logomenu
* Regel : 15 (Level : 1) U heeft geen kleur voor uw achtergrondkleur opgegeven : body
* Regel : 15 (Level : 1) U heeft geen kleur voor uw achtergrondkleur opgegeven : body
* Regel : 23 (Level : 2) Herdefinitie van voice-family : #container
* Regel : 24 (Level : 2) Herdefinitie van height : #container
* Regel : 34 (Level : 1) U heeft geen kleur voor uw achtergrondkleur opgegeven : #kop
* Regel : 65 (Level : 1) U heeft geen achtergrondkleur opgegeven : #inhoud
* Regel : 72 (Level : 1) U heeft geen achtergrondkleur opgegeven : #footer
* Regel : 83 (Level : 1) U heeft geen achtergrondkleur opgegeven : td
* Regel : 87 (Level : 1) U heeft geen achtergrondkleur opgegeven : .menukopje
M
MrX
28-07-2006 23:35
Wat lijn 24 #container betrefd staat er 2X height: auto;

De andere zijn simpel op te lossen door backgroundcolor toe te voegen en een kleur.

Maar met dit is je vraag nog niet beantwoord... maandag zal ik het eens nakijken... ben het hele weekend weg.

Reageren

Inloggen om te reageren