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

[HTML/CSS] Firefox uiterlijk probleem.

Door lol lol op 20-04-2009 18:16
1.346 views
Hallo allemaal,

Ik heb een probleem met mijn website en het probleem ligt 'em in het uiterlijk van firefox.

Ik heb een layout gemaakt in Photoshop, deze hebben ik gesliced etc etc. Nu heb ik alles in elkaar gezet, alleen in Firefox verschuift het menu naar rechts, echter is dit probleem niet in Internet Explorer 7, hier staat het menu netjes in het midden.
Ik dacht in eerste instantie het op te kunnen lossen met margins, alleen verschuift dit weer in Internet Explorer 7.

Mijn CSS:

<style type="text/css">

/* INDELING */

body{
text-align: center;
font: 12px;
font-family: Arial;
}

#total {
font-family: Arial;
position: center;
width: 939px;
margin-right: auto;
margin-left: auto;
text-align: center;
}

#header {
height: 118px;
width: 939px;
text-align: center;
background-image: url(afbeeldingen/header.gif);
background-repeat: no-repeat;
}

#menu {
margin-left: auto;
margin-right: auto;
height: 37px;
width: 939px;
}

#news {
height: 32px;
width: 939px;
background-image: url(afbeeldingen/boven.gif);
background-repeat: no-repeat;
}

#links {
text-align: left;
float: left;
height: 535px;
width: 12px;
background-image: url(afbeeldingen/links.gif);
background-repeat: no-repeat;
}

#content {
text-align: center;
float: left;
height: 535px;
width: 758px;
background-image: url(afbeeldingen/content.gif);
background-repeat: no-repeat;
}

#rechtsmid {
float: left;
height: 535px;
width: 26px;
background-image: url(afbeeldingen/rechtsmid.gif);
background-repeat: no-repeat;
}

#rechtscontent {
float: left;
height: 535px;
width: 120px;
background-image: url(afbeeldingen/rechts_content.gif);
background-repeat: no-repeat;
}

#rechts {
float: left;
height: 535px;
width: 23px;
background-image: url(afbeeldingen/rechts.gif);
background-repeat: no-repeat;
}

#onder {
float: left;
height: 15px;
width: 939px;
background-image: url(afbeeldingen/onder.gif);
background-repeat: no-repeat;
}

#footer {
font-size: 10px;
height: 14px;
width: 939px;
clear: both;
text-align: center;
}



/* MENU HORIZONTAAL */


ul {
list-style-type: none;
height: 37px;
width: 940px;
margin: 0;
}

li {
margin-left: auto;
margin-right: auto;
float: left;
}

ul a {

text-align: center;
background-image: url(afbeeldingen/btn_normal.gif);
background-repeat: no-repeat;
}

ul li a:hover
{
display:block;
text-align: center;
background-image: url(afbeeldingen/btn_hover.gif);
width: 94; 
height: 37;
color: #FFFFFF;
}

ul a:visited
{
display:block;
text-align:center;
background-image: url(afbeeldingen/btn_normal.gif);
width: 94;
height: 37;
text-decoration: none;
font-family: Arial, Veranda;
size: 12;
color: #c1c1c1;
}

ul a:active
{
display:block;
text-align:center;
background-image: url(afbeeldingen/btn_normal.gif);
width:94; 
height: 37;
text-decoration: none;
font-family: Arial, Veranda;
size: 12;
color: #c1c1c1;
}

ul a:link
{
display: block;
text-align:center;
background-image: url(afbeeldingen/btn_normal.gif);
width: 94; 
height: 37;
text-decoration: none;
font-family: Arial, Veranda;
size: 12;
color: #c1c1c1;
}
</style>



Hier mijn HTML:



<html>
<head />
<body>

	<div id="total">
	<!-- RESET HTML SIZE -->
	<style type="text/css">
	<!--
	body{
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	background-color: #000000;
	}
	-->
	</style>
	<!-- EIND RESET HTML SIZE -->
	<div id="header">
	</div>
	
	<div id="menu">
		<ul>
  		<li><a href="#" class="ul">Home</a></li>
  		<li><a href="#" class="ul">Contact</a></li>
  		<li><a href="#" class="ul">Registreren</a></li>
		<li><a href="#" class="ul">Inloggen</a></li>
		<li><a href="#" class="ul">Forum</a></li>
		<li><a href="#" class="ul">Gastenboek</a></li>
		<li><a href="#" class="ul">Test1</a></li>
		<li><a href="#" class="ul">Test2</a></li>
		<li><a href="#" class="ul">Test3</a></li>
		<li><a href="#" class="ul">Test4</a></li>
 		</ul>
	</div>

	<div id="news">
	</div>
	
	<div id="links">
	</div>
	
	<div id="content">
	<font class="mid">Welkom op de nieuw site!</font>
	</div>
	
	<div id="rechtsmid">
	</div>
	
	<div id="rechtscontent">
	</div>
	
	<div id="rechts">
	</div>
	
	<div id="onder">
	</div>
	
	<div id="footer">
	<font class="warn">
	Blabla bla copyright
	</font>
	</div>

</div>
</body>
</html>


Voorbeeld:
http://www.zimblox.nl/test.html

Alvast bedankt.
T
Tamara
20-04-2009 18:48
Misschien beter als je een voorbeeldje online hebt, want die plaatjes hebben wij natuurlijk niet ;)
N
Noppes
20-04-2009 18:53
Om te beginnen kan je de margin en de pading op 0 stellen
Pieter van Linschoten
20-04-2009 19:06
Zou je verder niet zorgen dat je text in het menu in het midden van je knoppen zit, en niet aan de bovenkant, met een "text-align: center".


ul {
list-style-type: none;
height: 37px;
width: 940px;
margin: 0;
padding: 0;
}


edit: uitleg.

IE en FF behandelen sommige elementen verschillend.

FF heeft bijvoorbeeld bij een ul automatisch een bepaalde padding, wanneer deze niet is opgegeven, waar internet explorer dat niet doet.

edit2:

Ik zou met jou design óf de divbox tegen de bovenkant aanzetten, of ronde hoeken gebruiken. Hij zweeft namelijk nu, terwijl hij boven vierkante hoeken heeft, en beneden ronde. Lijkt mij niet de bedoeling.

Om je website tegen de bovenkant aan te zetten:

html{
margin: 0;
padding: 0;
}

body{
margin: 0;
padding: 0;
text-align: center;
font: 12px;
font-family: Arial;
}
l
lol lol
20-04-2009 19:17
Lapidi schreef op 20.04.2009 19:06
Zou je verder niet zorgen dat je text in het menu in het midden van je knoppen zit, en niet aan de bovenkant, met een "text-align: center".



Dit werkt niet, center is het gedeelte van links naar rechts, niet van top naar bottom.

Klinkt erg dom dit, maar mede dankzij jullie heb ik het probleem gevonden, door de uitleg heb ik bij ul margin: 0; en padding: 0; neergezet, en werkt het nu ook in Firefox.

Met andere woorden, opgelost!
Hartelijk dank voor de reacties.
Martijn Wieringa
20-04-2009 21:53
Wat ik vaak standaard in mijn CSS files zet is deze code; een aanrader ;)

html, body, div, form
{
	margin: 0px;
	padding: 0px;
}

div
{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-khtml-box-sizing: border-box;
}

Reageren

Inloggen om te reageren