[css] menu probleempje in Mozilla - Softwareontwikkeling

donderdag 18 december 2003 17:13

Acties:

Verwijderd

Topicstarter

een problemo, misschien pak ik het ook helemaal verkeerd aan.
Het gaat hierom: menu probleem

In IE ziet het er precies zo uit als ik wil maar in Mozilla heb ik deze problemen:
- de links zijn niet helemaal wit zoals bij IE
- het plaatje beneden past niet mooi
- de links passen niet helemaal goed in de DIV eromheen

zo ziet het er dus uit in Mozilla:
Afbeeldingslocatie: http://www.harings.com/got/moz.gif

Afbeeldingslocatie: http://www.harings.com/got/moz.gif

mijn code:

HTML:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
a.menu {    
    text-decoration: none;
    color: #444444;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    background-color: #FFFFFF;
    border-left: 1px solid #7A7A7A;
    border-bottom: 1px solid #7A7A7A;
    padding: 3px 3px 3px 5px;
    width: 145px;
}
a.menu:active { 
    text-decoration: none;
    color: white;
    background-color: #C9C9C9;
}
a.menu:hover {  
    text-decoration: none;
    color: white;
    background-color:#C9C9C9;
}
.MenuContainer {
    background-color:#C9C9C9; 
    width:149px; height:60px; 
    border-top: 1px solid #C9C9C9; 
    border-left: 1px solid #C9C9C9; 
    background-image:url(menubackright.gif);
}
.MenuDiv {
    height: 20px; 
    width: 145px; 
    margin-top: 1px;
}
-->
</style>
</head>

<body>
<div class="MenuContainer">
<div class="MenuDiv"><a href="#" class="menu">Partners</a></div>
<div class="MenuDiv"><a href="#" class="menu">Investeringen</a></div>
<div class="MenuDiv"><a href="#" class="menu">Investeringscriteria</a></div>
[img]"menubackbottom.gif"></div>
</body>
</html[/img]

iemand voor mij een tip hoe ik dit in Mozilla precies zo krijg als in IE?

[ Voor 15% gewijzigd door Verwijderd op 18-12-2003 17:16 ]

donderdag 18 december 2003 17:15

Acties:

disjfa

1. doctype
2. box model

disjfa - disj·fa (meneer)
disjfa.nl

donderdag 18 december 2003 17:18

Acties:

Verwijderd

Topicstarter

1. Die doctype heb ik eruit gelaten omdat anders in IE ik dit helemaal niet krijg.
2. Box model, heb geprobeerd die -moz ding erin te zetten maar dat hielp ook niet.

donderdag 18 december 2003 17:23

Acties:

disjfa

Cascading Stylesheet:

1
2
3

a{
    display:block;
}

en dan kan je er wel een doctype bij zetten en nog eens het box model toepassen zodat het er in elke browser mooi uitziet

disjfa - disj·fa (meneer)
disjfa.nl

donderdag 18 december 2003 17:26

Acties:

Verwijderd

display:block; voor je a.menu helpt al heel wat.
-moz-box-sizing:border-box; erbij en het wordt nog iets beter.
Ik hou nog wel een irritant klein gaatje over aan de rechteronderkant. Ik zal nog even kijken, momentje aub.

edit: je hebt height:65px; in je .MenuContainer staan.
Als je die weghaalt (of iets groter maakt), dan ziet die er ook goed uit in Mozilla.

[ Voor 25% gewijzigd door Verwijderd op 18-12-2003 17:31 ]

donderdag 18 december 2003 17:35

Acties:

disjfa

ja of als je het iets opschoont.... de code dan.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body{
    font-family:verdana;
    font-size:12px;
}
div.MenuContainer a {    
    display:block;
    text-decoration: none;
    color: #444444;
    font-size: 11px;
    font-weight: bold;
    background-color: #FFFFFF;
    margin:2px 2px 0px 1px ;
    padding:3px;
    border-left: 1px solid #7A7A7A;
    border-bottom: 1px solid #7A7A7A;
}
div.MenuContainer a:hover {    
    text-decoration: none;
    color: white;
    background-color:#C9C9C9;
}
div.MenuContainer a:active {
    background-color: #C9C9C9;
         color:#FFF;
}
div.MenuContainer {
    -moz-box-sizing:padding-box;
    background-color:#C9C9C9; 
    width:150px;
    float:left;
    padding-bottom:2px;
}
-->
</style>
</head>

<body>
<div class="MenuContainer">
<a href="#">Partners</a>
<a href="#">Investeringen</a>
<a href="#">Investeringscriteria</a>
</div>
</body>
</html>

werkt in ie, moz, opera

en volgende keer wel t doctype er graag inzetten

dan is het makkelijker cross browser te houden

[ Voor 47% gewijzigd door disjfa op 18-12-2003 17:51 ]

disjfa - disj·fa (meneer)
disjfa.nl

donderdag 18 december 2003 17:44

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op 18 december 2003 @ 17:26:
display:block; voor je a.menu helpt al heel wat.
-moz-box-sizing:border-box; erbij en het wordt nog iets beter.
Ik hou nog wel een irritant klein gaatje over aan de rechteronderkant. Ik zal nog even kijken, momentje aub.

edit: je hebt height:65px; in je .MenuContainer staan.
Als je die weghaalt (of iets groter maakt), dan ziet die er ook goed uit in Mozilla.

dit werkt prima! inderdaad!
maarre heel irri in Mozilla is nu wel nog dat als mijn a active is hij niet grijs wordt,
is dat ook nog op te lossen?

ik heb nu:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
a.menu {    
    display:block;
    text-decoration: none;
    color: #444444;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    background-color: #FFFFFF;
    border-left: 1px solid #7A7A7A;
    border-bottom: 1px solid #7A7A7A;
    padding: 3px 3px 3px 5px;
    width: 145px;
    -moz-box-sizing:border-box;
}
a.menu:active { 
    text-decoration: none;
    color: white;
    background-color: #C9C9C9;
}
a.menu:hover {  
    text-decoration: none;
    color: white;
    background-color:#C9C9C9;
}
.MenuContainer {
    background-color:#C9C9C9; 
    width:149px; 
    border-top: 1px solid #C9C9C9; 
    border-left: 1px solid #C9C9C9; 
    background-image:url(menubackright.gif);
}
.MenuDiv {
    height: 20px; 
    width: 145px; 
    margin-top: 1px;
}
-->
</style>
</head>

<body>
<div class="MenuContainer">
<div class="MenuDiv"><a href="#" class="menu">Partners</a></div>
<div class="MenuDiv"><a href="#" class="menu">Investeringen</a></div>
<div class="MenuDiv"><a href="#" class="menu">Investeringscriteria</a></div>
[img]"menubackbottom.gif"></div>
</body>
</html[/img]

[ Voor 53% gewijzigd door Verwijderd op 18-12-2003 17:47 ]

donderdag 18 december 2003 17:45

Acties:

Verwijderd

Topicstarter

verkeerd knop,.. quote ipv edit:

@disfja: bedankt, maarre het ziet er met jouw oplossing toch heel anders uit dan ik het ontworpen heb,.. display:block iig was een goeie!

[ Voor 50% gewijzigd door Verwijderd op 18-12-2003 17:48 ]

donderdag 18 december 2003 17:50

Acties:

disjfa

ik heb gewoon wat te veel eruit gesloopt. nu ziet hij er precies t zelfde uit

disjfa - disj·fa (meneer)
disjfa.nl

donderdag 18 december 2003 17:54

Acties:

Verwijderd

Topicstarter

zo twee oplossingen voor 1 probleem! welke zal ik nou nemen?

hmm,.. ze zijn toch niet precies hetzelfde zo te zien.
ik ga verder met die ik nu heb!

[ Voor 160% gewijzigd door Verwijderd op 18-12-2003 17:59 ]

donderdag 18 december 2003 17:57

Acties:

disjfa

ja wat is daarmee?

verder zit er bij de html 4.01 versie nog een layout verschil aan de rechterkant van het menu

en is xhtml natuurlijk nieuwe er in mijn ogen makkelijker mee te werken. als je er iig mee kan werken

disjfa - disj·fa (meneer)
disjfa.nl

donderdag 18 december 2003 19:23

Acties:

Verwijderd

IE in quirk kan gewoon door  voor de doctype te zetten. Dan blijft Mozilla in standard-compliant mode. -moz-box-sizing/box-sizing etc kun je beter _niet_ gebruiken, vanwege de mogelijke veranderingen hierin bij CSS3.

donderdag 18 december 2003 19:33

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op 18 december 2003 @ 19:23:
IE in quirk kan gewoon door  voor de doctype te zetten. Dan blijft Mozilla in standard-compliant mode. -moz-box-sizing/box-sizing etc kun je beter _niet_ gebruiken, vanwege de mogelijke veranderingen hierin bij CSS3.

weet iemand al wanneer CSS3 wordt ingevoerd cq ondersteund?
maarre is heb dus wel nog mijn probleem in Mozilla met mijn a:active die dus niet blijft staan zoals in IE, is daar iets op te verzinnen? En ook zo`n lelijke spikkelrand als ik erop klik in Mozilla, jeweetwel net alsof er een photoshop-selektie omheen zit.

donderdag 18 december 2003 19:47

Acties:

Verwijderd

Grapjas

, die spikkelrand betekent dat dat element de focus heeft.
Kun je uitzetten met: -moz-outline-width:0px;
Eigenlijk doet IE het fout met a:active. Het zou eigenlijk a:focus moeten zijn.

donderdag 18 december 2003 21:04

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op 18 december 2003 @ 19:47:
Grapjas , die spikkelrand betekent dat dat element de focus heeft.

dat was wel bekend

Kun je uitzetten met: -moz-outline-width:0px;

kijk, dat wou ik ff weten.

nu nog die active

in Mozilla!

vrijdag 19 december 2003 18:28

Acties:

Verwijderd

Niet dat dit enige oplossing biedt voor je probleem qua active (heb hem zelf ook even nagemaakt), maar ipv div'jes zou je in dit geval beter een unordered list kunnen gebruiken. Een menu is namelijk in principe gewoon een lijstje.

vrijdag 19 december 2003 21:34

Acties:

Verwijderd

Topicstarter

^^ nou voor een derde oplossing sta ik zeker open, heb alleen nu even niet de tijd om dat weer helemaal om te gooien, t werkt nu namelijk prima! (en ziet er ook prima uit

vrijdag 19 december 2003 22:01

Acties:

Verwijderd

Ik had het je al gezegd, IE behandelt a:active als a:focus, dus je moet eigenlijk a:focus hebben, maar omdat dat niet werkt in IE moet je er ook a:active bijzetten.
Dus dan wordt het:a.menu:focus,a.menu:active

vrijdag 19 december 2003 22:48

Acties:

Verwijderd

Topicstarter

@ Martijn22 $_/-\o_$ dankoewel, wist niet dat ik dat erbij moest zetten.

/me moet beter lezen in het vervolg

Pagina: 1

Reageer