[css] verschil div Firefox / IE

Status
Niet open voor verdere reacties.
B

Bussel

Gebruiker
Lid geworden
24 feb 2006
Berichten
13
Hoi,

ik ben het vaak tegengekomen op fora ed, toch kan ik het specifieke juiste antwoord voor mij niet vinden. Ik heb dus voor mijn moeder een website gemaakt, maar IE en firefox geven de website niet hetzelfde weer. Omdat de doelgroep ouder is dan ik, heb ik in eerste instantie de website geoptimaliseerd voor IE, maar niet alle divs, en plaatjes worden nu in firefox niet getoond zoals ik wil.

Website
Stylesheet
Screen IE
Screen Firefox(3)

De div 'mainnav' en het plaatje (niet als zodanig in stylesheet verwerkt) moet in firefox dus anders getoond worden.

Weet iemand wat ik in mijn css moet sleutelen zodat de website er in Firefox ook fatsoenlijk uit ziet?

Alvast hartelijk bedankt!
 
Dat had ik al gedaan. Stonden maar twee foutjes in betreffende font-weight. Daar kon ik dus verder niks mee.
 
Je hebt op 'n aantal plaatsen bold ingevuld achter font-style. Dat kan niet.
Wat jij hebt gevalideerd is de css. Die link hierboven is om de html te valideren. Daar zitten meer fouten in. Mogelijk zit daar de oorzaak, mogelijk ook niet.
Je hebt de lay-out gemaakt in 'n tabel, en dat is 'n verouderde manier van werken die veel moeilijker goed te krijgen is dan wanneer je met divs en zo werkt.
Maar misschien heb je geluk en helpt het als je die fouten eruit haalt. Het zijn in ieder geval fouten die met de structuur te maken hebben.
 
Wat vaak ook helpt bij verschil in plaatsing van verscheidene elementen, is om alle margins en paddings eerst op 0px te zetten.

HTML: 
* {
margin: 0px;
padding: 0px;
}

En dan bij elk element de margin handmatig instellen. Dat is sowieso de beste en netste manier, anders gebruik je gewoon de margins en paddings die de browser zelf invult, en die zijn bij FireFox anders dan bij Internet Explorer.
 
Hier de code:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd ">


<html lang="nl">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
		<META NAME="GENERATOR" CONTENT="ConTEXT">
		        
		<META NAME="ROBOTS" CONTENT="FOLLOW,INDEX">
		        
		<META NAME="DESCRIPTION" CONTENT="De Lollypops is een Brabants zangduo dat bestaat uit de zusjes Jet en José Meeuws. Met smartlappen en levensliederen maken zij op ludieke wijze van elke optreden een waar feest.">
		        
		<META NAME="KEYWORDS" CONTENT="Lollypops lolliepops zusjes meeuws smartlappen someren zangduo levenslied">
		        
		<meta http-equiv="imagetoolbar" content="no">
		
		<title>
			--o De Lollypops o-- De Lollypops houwen oew zuut!
		</title>
		
<style type="text/css">

body
		{
	margin: 0;
	padding: 0;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #464040;
	background: #FF99F2 url(afbeeldingen/img12.jpg) repeat top left;
	font-size: 0.8em;
	text-align: left;
border:solid 2px #ff0000;
}

#container{
	width: 950px;

	background-color: #ff8040;
	border: 40px solid #80ff00;

 
margin:0 auto 0 auto;

}

#banner{
	background-color: #FFFFFF;
	background-image: url(afbeeldingen/headernieuw.jpg);
	border-bottom: 3px solid #0D83FB;
	height: 120px;

}

#mainnav{
	background-color: #004080;
	text-align: left;
	border-bottom: 3px solid #0D83FB;
	height: 40px;

}

#mainnav ul {
	list-style-type: upper-alpha;
	color: #000000;
	margin: 0;
border:solid 2px #ff0000;}
		#mainnav li {
			display: inline;
					}

#nav{
	float: left;
	width: 120px;
	height: 280px;
	margin-left: 3px;
	padding-top: 4em;
	border-right: 3px solid #0D83FB;
border:solid 2px #00ff00;
}

		#nav p { 
			margin-top: 0; 
				}

#navunder{
	clear: both;
	float: left;
	width: 120px;
	height: 100px; 
	margin-left: 5px;
border:solid 2px #ff0000;
}

		#navunder p {
		 margin-top: 0;
		}
 		 
#content{
		padding-top: 2em;
		margin: 0 2em 0 0px;
border:solid 2px #ff0000;
float:left;
}

#tekst{
float:left;
margin:5px;
width:750px;
}

#footer{
   clear: left;
	background-color: #FFFFFF;
	border-top: 3px solid #0D83FB;
	width: 600px;
	font-size: 0.8em;
	margin: 0;
border:solid 2px #ff0000;
	}

		A:link
{
color:#0D83FB; text-decoration:none;font-weight: bold;
}

		A:visited
{
color:#0D83FB; text-decoration:none; font-weight: bold;
}

		A:active  
{
color:#0D83FB; text-decoration:none; font-weight: bold;
}

		A:hover   
{
	color: #FA0EB5; text-decoration: none; font-weight: bold;
}

		A.type1:link    
{
color:#008BEC; text-decoration:none; 
}

		A.type1:visited 
{
color:#008BEC; text-decoration:none;
}

		A.type1:active  
{
color:#DC143C; font-weight: bold; text-decoration:none;
}

		A.type1:hover   
{
color:#DC143C; font-weight: bold; text-decoration:overline underline;
}

img{
	border: 0px;

}

img.sfeer{
	border: 0px;
	float: right;
}

div#tooltip a {
  position:relative;
}

div#tooltip a span {
  display:none;
}

div#tooltip a:hover span {
  display:block;
  position:absolute; width: 320px;
  color: black; background-color: #deedf6; border: 2px solid #DC143C;
   font: 0.9em Verdana, sans-serif; text-align: left;
	padding: 5px;
}

div#tooltip a:hover {text-indent:0;} 



</style>
		        
		<link rel="stylesheet" href="stylesheet1.css" media="screen">
		        
		<link rel="alternate stylesheet" type="text/css" href="groter.css" title="groter">
		        
		<link rel="alternate stylesheet" type="text/css" href="giga.css" title="gigant">
<script type="text/javascript" src="styleswitcher.js">
</script>
<SCRIPT language="JavaScript" type="text/javascript">
<!--
self.moveTo(0,0);
self.resizeTo(screen.availWidth,screen.availHeight);
//-->

</SCRIPT>
		
<script language="Javascript" type="text/javascript">
//pas de twee variabelen aan met de informatie van je eigen site
var bookmarkurl="http://www.delollypops.nl/"
var bookmarktitel="De Lollypops houwen oew zuut!"
function favorieten(){
if (document.all)
window.external.AddFavorite(bookmarkurl,bookmarktitel)
}

</script>
		
		
	</head>
	<body>
		
		<div id="container">
			<div id="banner">
			</div>

				<div id="mainnav">
					<ul>
						<li>
						<a href="#" onclick="setActiveStyleSheet('normaal'); return false;" title="De normale lettergrootte"><img src="a_normaal.gif" alt="normaal" class="no"></a>
						    
						</li>
						<li>
						<a href="#" onclick="setActiveStyleSheet('groter'); return false;" title="De normale lettergrootte"><img src="a_groter.gif" alt="groter" class="no"></a>
						    
						</li>
						<li>
						<a href="#" onclick="setActiveStyleSheet('gigant'); return false;" title="De normale lettergrootte"><img src="a_giga.gif" alt="heel groot" class="no"></a>
						<b>
							 | 
						</b>
						 
						</li>
						
						 
						<li>
						<a href="contact.htm" title="Contact">Contact</a>
						<b>
							 | 
						</b>
						</li>
						
						<li>
						<a href="help.htm" title="Help">Help</a>
						&nbsp;
						</li>
						
						
						
					</ul>
					    
				</div>
			<div id="content">
				
				
				<div id="nav">
					<table border=0>
						  
						
						    
						<tr>
							
							     
							<td>
								<a href="index.html" title="Menu Home"><img src="afbeeldingen/home.gif" alt="home"></a>
							</td>
							          
						</tr>
						
						    
						<tr>
							      
							<td>
								<a href="biografie.htm" title="Menu Biografie"><img src="afbeeldingen/biografie.gif" alt="biografie"></a>
							</td>
							      
							
							    
						</tr>
						
						    
						<tr>
							      
							<td>
								<a href="foto.htm" title="Menu &lt; Foto's"><img src="afbeeldingen/fotos.gif" alt="Foto's"></a>
							</td>
							     
							   
						</tr>
						
						    
						<tr>
							      
							<td>
								<a href="Repertoire.htm" title="Menu  Repertoire"><img src="afbeeldingen/repertoire.gif" alt="Repertoire"></a>
							</td>
							
							      
							    
						</tr>
						
						    
						<tr>
							      
							<td>
								<a href="gastenboek.htm" title="Menu  Gastenboek"><img src="afbeeldingen/gastenboek.gif" alt="Gastenboek"></a>
							</td>
							     
							   
						</tr>
						
						    
						<tr>
							      
							<td>
								<a href="contact.htm" title="Menu  Home"><img src="afbeeldingen/contact.gif" alt="Contact"></a>
							</td>
							      
							    
						</tr>
						     
					</table>
					       
				</div>


			

<div id="tekst"><IMG src="http://www.delollypops.nl/afbeeldingen/home2.jpg" class="sfeer" alt="Sfeerfoto Home">

				
				<h2>
					De Lollypops - Home
				</h2>
				
								<p>
				<b>
					De Lollypops
				</b>
				 is een 
				<b>
					Brabants zangduo
				</b>
				 dat bestaat uit de zusjes Jet en José Meeuws. 
				<b>
					Smartlappen
				</b>
				 en 
				<b>
					levensliederen
				</b>
				 uit de jaren '60 / '70 brengen zij inmiddels al bijna 10 jaar op 
				<b>
					ludieke
				</b>
				 wijze ten gehore en maken ze van elke bruiloft, ouderenmiddag of verjaardag
				een echt 
				<b>
					feest
				</b>
				. Wilt u een optreden van De Lollypops boeken, dan kunt u 
				<b>
					<a href="contact.htm" title="Contact"> contact</a>
				</b>
				 met ons opnemen.
				<p align="right">
				<i>
					"Het magische van de muziek is, dat zij erin slaagt ons heimwee te doen krijgen
					naar iets dat we nooit gekend hebben."
				</i>
				<br>
				
				                -Gilbert Cesbron
				                
				<h3>
					Nieuws
				</h3>
				                
				<p>
				<b>
					2009
				</b>
				:  Tweede lustrum: De Lollypops bestaan 10 jaar!
				<p>
				<b>
					01-07-'08
				</b>
				:  Daar issie dan! De nieuwe website van de lollypops. Overzichtelijker,
				strakker en nu ook te bereiken via www.delollypops.nl. Zet dit nieuwe adres dus
				meteen in uw 
				<b>
					<a href="javascript:favorieten()">favorieten</a>
				</b>
				!
				
				</div>
				
				
				
				
			</div>
			<div id="footer">
				<p>
				Best bekeken in Internet Explorer, 1200x800 of 1024x768 |  &copy
				www.delollypops.nl 2008  |  
				<a href="contact.htm">Contact</a>
				  |  
				<a href="help.htm">Help</a>
				
			</div>
		</div>
<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">
var pageTracker = _gat._getTracker("UA-4980454-2");
pageTracker._initData();
pageTracker._trackPageview();
</script>
	</body>
</html>

Rest mag je zelf uitvogelen.

Probleem:
je moet "geblokt denken"
divjes zijn blokken.
Header apart, ok
Maar je menu en tekst moeten (mou ja, moeten... ) in één div, en hebben dan ieder weer hun eigen div.
Footer ook apart, met eventueel eifen divjes.

Het geheel in een container.

Als je borders, of felle achtergrondkleuren gebruikt in het ontwerpstadium, zie je het effect van je aanpassingen.

Je had ook een negatieve waarde, heb je normaal niet nodig.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan