verschil plaatsing kaders Firefox/Explorer

Status
Niet open voor verdere reacties.
J

jordas

Gebruiker
Lid geworden
5 apr 2007
Berichten
26
Lectori salutem,

ik stuit iedere keer als ik een site maak op hetzelfde probleem, het verschil tussen mozzilla firefox en windows explorer. Het probleem heeft bij mij vooral betrekking op de plaatsing van css kaders. Die willen op één of andere manier gewoon niet netjes in het midden gaan staan. Geopend in Firefox is dat wel zo, maar explorer heeft er problemen mee. Anderzijds wil het ook weleens zo zijn dat firefox de boel totaal anders weergeeft.
Mijn eigen website www.futurakeurmerk.nl is daar een voorbeeld van. Ik moet dat nog steeds oplossen, maar wordt er ondertusen helemaal kriegel van.

Ik zal voor het gemak even de code opschrijven:

de css
PHP: 
body{
background-image:url(behang.jpg);
margin-top:0px;
background-position:center;
background-repeat:repeat-y;
margin-bottom:0px;
}	

#header {
	width:750px;
	height:80px;
	margin:0px auto 0px auto;
	background-image:url(afbeeldingen/sjoerd0607_03_02.jpg);
	background-position:center;
	position:relative;
}

#scrollbalk {
width:750px;
height:55px;
margin:0px auto 0px auto;
border:none;
position:relative;
word-spacing:0px;
}

en de HTML
HTML: 
<body>
<div id="header"></div>
<div id="scrollbalk"></div>
</body>

Ik snap niet waarom de css kaders in explorer niet gewoon in het midden worden geplaatst en ik weet niet wat ik er aan kan doen. Als ik er namelijk absolute kaders van maak krijg ik problemen met verschillende schermformaten. Is er iemand die me hiermee kan helpen? Bij voorbaat heel veel dank.

groet jordas!



[Moderator-Edit] Php-tag en Html-tag geplaatst. [/Edit]
 
Laatst bewerkt door een moderator:
Heb je het al veranderd?
Nu zag i k een container.
Evenwel dient deze het gehele vlak te bevattten.
Je had ook een </div> teveel en </a> te weinig.

Code:
PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>
			Untitled Document
		</title>
<style type="text/css" />

/* CSS Document */
body{

background-image:url(schaduw.gif);

margin-top:0px;

font-size:10px;

background-position:center;

background-repeat:repeat-y;

margin-bottom:0px;

}

#heading {

	background-image:url(zieke header.jpg);

	position:relative;

	margin:0px auto 0px auto;

	height:186px;

	width:749px;

}



#container {


background-image:url(background.gif);

position:relative;

margin:0px auto 0px auto;

height:650px;

width:749px;
border:solid 2px #ff0000;
}

#nav{

	padding-top:58px;

	height:300px;

	width:150px;

	float:left;

	position:relative;

	padding-left: 10px;

	margin:0px auto 0px auto;

}


#nav ul li a, a:hover, a:visited, a:active{

font-family: Geneva, Arial, Helvetica, sans-serif;

font-size:11px;

font-weight:bold;

color:#000000;

text-decoration:none;

list-style-image:none;

list-style:none;

}

#content b {

color:#006600;
font-weight:bold;
}

#content {

	margin-top:20px;

	position:relative;

	float:right;

	width:450px;

	height:400px;

	padding-right:10px;

	padding-left:10px;

}


#footer {

text-align:center;
width:749px;
height:80px;
margin:0px auto 0px auto;
margin-top:570px;
left:0px;

}
#footer a, a:hover, a:visited, a:active{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
margin-right:0px;
margin-bottom:10px;
}


#footer img {

text-align:center;
color:#000000;
margin-left:10px;
margin-right:10px;
border:none;
}



p{

font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:10px;
color:#000000;
padding-right:80px;
text-align:justify;

}



h1{

font-family:Geneva, Arial, Helvetica, sans-serif;

font-size:36px;

color:#006600;

font-weight:bold;

}



h2 {

margin-top:14px;

font-family:Geneva, Arial, Helvetica, sans-serif;

font-size:12px;

color:#000000;

font-weight:bold;

text-align:center;

}



h3 {

font-family:Geneva, Arial, Helvetica, sans-serif;

font-size:20px;

color:#000000;

font-weight:bold;

text-align:left;

}

h4 {

color:#009900;

}

li {

font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#339900;
text-decoration:none;
line-height:40px;

}

a, a:hover, a:visited, a:active{

font-family:Geneva, Arial, Helvetica, sans-serif;

font-size:12px;

font-weight:bold;

color:#000000;

text-decoration:none;

border:none;

}

.vlag {

border:none;
}


</style>
<style type="text/css">
<!--
a {
	font-size: 36px;
}
.style1 {font-size: 14px}
-->
</style>
	</head>
	
	<body>
		<div id="container">
			 
			<div id="heading">
				 
			</div>
			
<!-- <div id="container">
-->
			<div id="nav">
				
				  
				  
				<ul>
					
					 
					<li>
					<a href="info2.html">over futura</a>
					</li>
					 
					  
					<li>
					<a href="nieuw.html">producten</a>
					</li>
					  
					<li>
					<a href="links.html">links</a>
					</li>
					  
				</ul>
				  
			</div>
			  
			<div id="content">
				
				    
				<h1>
					Welkom
				</h1>
				    
				<p>
				Deze website is bedoeld om u te informeren over het 
				<b>
					Futura
				</b>
				 keurmerk dat vanaf april 2007 op verschillende producten in de supermarkten te
				vinden zal zijn. Om meer te weten te komen over de betekenis van dit keurmerk
				kunt u klikken op de link "over futura ", ook kunt u bij "producten" enkele
				voorbeelden zien van producten die met dit keurmerk zijn voorzien.
				</p>
				    
				<p>
				<b>
					Futura
				</b>
				<i>
					, voor het maken van de juiste keuze
				</i>
				 
				</p>
				  
			</div>
			  
			<div id="footer">
				  
				  
				<a href="index.html">home - </a>
				<a href="mailto:contact@futurakeurmerk.nl">contact - </a>
				
				  
				<a class="vlag" href="english.html"><img src="britse-vlag.gif" width="19" height="15" /></a>
				  
				<a  class="vlag" href="index.html"><img src="nedvlag.gif" width="19" height="15" /></a>
			</div>
			
			
		</div>
		
		
		
		
	</body>
</html>
 
hEE pETer

Dank voor je bericht,

ik heb het nu opgelost. Dat van die </a> te weinig was inderdaad één van de problemen, de </div>'s kloppen volgens mij wel. Ik kwam er achter dat ik nog iets over het hoofd had gezien in de css. Ik had namelijk de footer geen position gegeven, hij wist dus niet waar hij heen moest. De site is nu helemaal in orde en functioneerd ook naar behoren op firefox. Ik moet de aanpassingen/veranderingen alleen binnenkort nog even online zetten.

groet

jordas
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan