Menu klopt niet in IE maar wel in FF

Status
Niet open voor verdere reacties.
T

Timmy Ownage

Gebruiker
Lid geworden
11 jan 2008
Berichten
60
Ik heb een website gemaakt en getest met Firefox. Als ik hem echter in Internet Explorer bekijk maakt die van mijn menu drie rijen, in plaats van 1 rij. Dit komt omdat ik voor 3 delen van het menu aparte klassen in mijn CSS heb gemaakt. Ik heb gehoord dat dit gemakkelijk te fixen is door een aantal regels bovenaan je pagina's te zetten, al kon ik dit niet vinden op het internet.

Iemand bekend met dit probleem en heeft iemand misschien een oplossing?
 
Kun je even een linkje geven naar het geheel zoals het ergens online staat? Dan kunnen we even kijken!
 
Op regel 22 moet je de openingstag van de div nog afsluiten.

Waarom heb je het laatste menuitem in een aparte list gezet?
 
Maak je op school en thuis misschien gebruik van verschillende ie versies?

Internet Explorer 6 en ouder staan bekend om het niet juist weergeven van css en html, ook als deze aan de w3c standaard voldoet. Om een en ander goed werkend te krijgen zijn dan hacks nodig (4.6 miljoen resultaten op google :shocked:)

Ik heb hier alleen moderne browsers draaien en daarin zie ik geen problemen met het menu.
 
ErikBooy007 zei:
Op regel 22 moet je de openingstag van de div nog afsluiten.

Waarom heb je het laatste menuitem in een aparte list gezet?
Klik om te vergroten...
Omdat ik het laatste menu-item Bestandsoverzicht eerst rechts wou hebben en Login links.

Ik heb nu Bestandsoverzicht er gewoon achteraan en Login helemaal rechtsboven, met wat ruimte er tussen. In IE7 + FF klopt het prima, maar in IE 6 niet.
 
Even om het visueel uit te beelden...
In Firefox klopt het menu zoals het er uit zou moeten zien, in IE totaal niet:

Firefox:
[smallimg]http://img8.imageshack.us/img8/2084/91514195.png[/smallimg]

IE:
[smallimg]http://img3.imageshack.us/img3/1282/13881768.png[/smallimg]
 
Laatst bewerkt:
First of all, volgens mij is je tweede plaatje IE7, niet IE6.

Second, ik snap nog niet waarom Bestandsoverzicht in een aparte list zit. Als je die nu eens gewoon bij de andere items in die andere list zet.
 
Graag de volgende keer met dit soort grote afbeeldingen de smallimg tag gebruiken in plaats van de img tag. Zo blijft de pagina lay-out normaal en worden je afbeeldingen klikbaar.:)
(Nu heb ik het voor je aangepast.)
 
Ha, je bent me net voor. Dat was mij ook opgevallen. En ook die met log-in zit in 'n aparte ul. (Reactie op Erik, niet op crash, die had ik niet gezien).
Die ul voor Bestandsoverzicht (#ul menu-last) is 1200 px breed.
Als je bij Firefox de lettergrootte verhoogd, gebeurt trouwens precies hetzelfde als in IE.
 
Laatst bewerkt:
Tsja, die login kan ik nog enigszins begrijpen, als je die aan de rechterkant wilt hebben, maar goed dat is ook wel mooier op te lossen.
 
Jawel, maar IE 7 en helemaal IE 6 maken regelmatig 'n zootje van de lay-out. En die kans is groter als je drie ul's naast elkaar zet dan wanneer 't er maar eentje is.
Je zou ook de <li> van de log-in naar rechts kunnen floaten, of zoiets.
 
Ik ben het 100% met je eens, daarom zei ik ook: "dat is ook wel mooier op te lossen".

Maar als beginner (weet niet of ik zomaar met die term mag smijten ;)), kan ik met voorstellen dat je snel geneigd bent om voor de "makkelijkere" oplossing te kiezen en gewoon nog een ul te pakken en die te positioneren.

Maargoed, ben benieuwd wat de TS ervan zegt. ;)
 
Maak van:

HTML: 
<div id="header"
		<h1><a href="http://www.ckv-rvec.nl/"> <span>CKV</span></a></h1>
			<h2>De site voor jou...</h2>
	</div>
	<div id="menu-box" class="cleaning-box">
	<a href="#skip-menu" class="hidden">Skip menu</a>

		<ul id="menu">
			<li><a href="index.html" class="active">Home</a></li>
			<li><a href="forum.html">Forum</a></li>
			<li><a href="theater.html">Theater</a></li>
			<li><a href="film.html">Film</a></li>
			<li><a href="bkunst.html">Beeldende Kunst</a></li>

			<li><a href="dans.html">Dans</a></li>	
			<li><a href="muziek.html">Muziek</a></li>	
			<li><a href="literatuur.html">Literatuur</a></li>	
			<li><a href="architectuur.html">Architectuur</a></li>
		</ul>
		<ul id="menu-last">
			<li><a href="bestanden.html">Bestandsoverzicht</a></li>			
		</ul>

		<ul id="menu2">
			<li><a href="login.html">Login</a></li>
		</ul>
	</div>

eens:

HTML: 
<div id="header">
  <h1><a href="http://www.ckv-rvec.nl/"> <span>CKV</span></a></h1>
  <h2>De site voor jou...</h2>
</div>
<div id="menu-box" class="cleaning-box">
  <a href="#skip-menu" class="hidden">Skip menu</a>
  <ul id="menu">
    <li><a href="index.html" class="active">Home</a></li>
    <li><a href="forum.html">Forum</a></li>
    <li><a href="theater.html">Theater</a></li>
    <li><a href="film.html">Film</a></li>
    <li><a href="bkunst.html">Beeldende Kunst</a></li>
    <li><a href="dans.html">Dans</a></li>	
    <li><a href="muziek.html">Muziek</a></li>	
    <li><a href="literatuur.html">Literatuur</a></li>	
    <li><a href="architectuur.html">Architectuur</a></li>
    <li><a href="bestanden.html">Bestandsoverzicht</a></li>			
    <li><a href="login.html">Login</a></li>
  </ul>
</div>
 
ErikBooy007 zei:
Maak van:

HTML: 
<div id="header"
		<h1><a href="http://www.ckv-rvec.nl/"> <span>CKV</span></a></h1>
			<h2>De site voor jou...</h2>
	</div>
	<div id="menu-box" class="cleaning-box">
	<a href="#skip-menu" class="hidden">Skip menu</a>

		<ul id="menu">
			<li><a href="index.html" class="active">Home</a></li>
			<li><a href="forum.html">Forum</a></li>
			<li><a href="theater.html">Theater</a></li>
			<li><a href="film.html">Film</a></li>
			<li><a href="bkunst.html">Beeldende Kunst</a></li>

			<li><a href="dans.html">Dans</a></li>	
			<li><a href="muziek.html">Muziek</a></li>	
			<li><a href="literatuur.html">Literatuur</a></li>	
			<li><a href="architectuur.html">Architectuur</a></li>
		</ul>
		<ul id="menu-last">
			<li><a href="bestanden.html">Bestandsoverzicht</a></li>			
		</ul>

		<ul id="menu2">
			<li><a href="login.html">Login</a></li>
		</ul>
	</div>

eens:

HTML: 
<div id="header">
  <h1><a href="http://www.ckv-rvec.nl/"> <span>CKV</span></a></h1>
  <h2>De site voor jou...</h2>
</div>
<div id="menu-box" class="cleaning-box">
  <a href="#skip-menu" class="hidden">Skip menu</a>
  <ul id="menu">
    <li><a href="index.html" class="active">Home</a></li>
    <li><a href="forum.html">Forum</a></li>
    <li><a href="theater.html">Theater</a></li>
    <li><a href="film.html">Film</a></li>
    <li><a href="bkunst.html">Beeldende Kunst</a></li>
    <li><a href="dans.html">Dans</a></li>	
    <li><a href="muziek.html">Muziek</a></li>	
    <li><a href="literatuur.html">Literatuur</a></li>	
    <li><a href="architectuur.html">Architectuur</a></li>
    <li><a href="bestanden.html">Bestandsoverzicht</a></li>			
    <li><a href="login.html">Login</a></li>
  </ul>
</div>
Klik om te vergroten...
Oké, dat heb ik gedaan. Hoe kan ik nu Login rechts uitlijnen en zorgen dat er na Bestandsbeheer niet zo'n | komt?
 
Daar moet je even in je HTML én je CSS wat voor aanpassen.

Voeg aan je login item eens toe:

HTML: 
class="last"

en in je CSS

Code: 
.last {
  float: right;
}

Van:

Code: 
#menu li {
  display: inline;
  list-style-type: none;
  text-align: center;
}

maak je:

Code: 
#menu li {
  display: block;
  list-style-type: none;
  text-align: center;
  float: left;
}

Dat streepje weet ik zo nog niet...
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan