[CSS] Stylesheet werkt wel en IE maar niet goed in FF

[Verwijderd]

Beste,

Ik ben een programmeur in principe alleen websites ontwikkeld voor IE. Maar gezien er steeds andere browsers komen waarin mijn websites niet goed werken, wil ik me wat verdiepen in het goed werkend maken van mijn CSS Stylesheets.

Nu heb ik het volgende punt.
Om een menu knop een leuke look te geven, doe ik in mijn sheet het volgende:

code:

.m_Header:link, .m_Header:active, .m_Header:visited {
    padding:            3px;
    height:             45px;
    width:              80px;
    color:              #BBBBBB;
    background:         #FFFFFF;
    border-bottom:      solid 2px #D9F0FF;
    text-decoration:    none;
    text-align:         center;
    font-size:          11Px; 
    font-weight:        none;
    font-family:        verdana;
}
.m_Header:hover{
    padding:            3px;
    height:             45px;
    width:              80px;
    color:              #000000;
    background:         #F3FAFF;
    border-bottom:      solid 2px #86CFFF;
    text-decoration:    none;
    text-align:         center;
    font-size:          11Px;
    font-weight:        none;
    font-family:        verdana;
}

Het gaat nu voornamelijk om de height en de width die neit goed werken in FF.

De link waar het om gaat is:

code:

<a class="m_Header" href="Default.asp?p=home"><img src="/Menu/Images/Home.gif" border="0"><br>Home</a>

Nu heb ik geprobeert een simpele div te maken en een simpele stylesheet te maken.
Dit werkte wel.

Ik heb een vermoeden dat het ligt aan het feit dat ik de link, active, vidited, hover gebruik. Maar hier zou toch ook iets mee moeten werken?

Is er iemand die me kan helpen?

Gr. Robert

[disjfa]

Een link is een inline element en werkt dus anders dan een div, wat een block element is.

En verder hoef je je style niet compleet te herhalen in je hover.

[Creepy]

En zoals netjes staat beschreven in Waar hoort mijn topic? horen vragen over HTML, CSS e.d. in Webdesign, Markup & Clientside Scripting en niet in Programming.

Move -> Webdesign, Markup & Clientside Scripting

[Verwijderd]

disjfa schreef op woensdag 03 september 2008 @ 22:00:
Een link is een inline element en werkt dus anders dan een div, wat een block element is.

En verder hoef je je style niet compleet te herhalen in je hover.

Is heir dan wel een oplossing voor of moet ik een andere manier gaan bedenken om het op te lossen? iets van javascript ofzow?

[Borizz]

Verwijderd schreef op woensdag 03 september 2008 @ 22:08:
[...]


Is heir dan wel een oplossing voor of moet ik een andere manier gaan bedenken om het op te lossen? iets van javascript ofzow?

Je kan er een inline blok van maken:

Cascading Stylesheet:

.m_Header {
  display: -moz-inline-block; /* voor FF < 3*/
  display: inline-block;
}

[Verwijderd]

Borizz schreef op woensdag 03 september 2008 @ 22:25:
[...]


Je kan er een inline blok van maken:

Cascading Stylesheet:

.m_Header {
  display: -moz-inline-block; /* voor FF < 3*/
  display: inline-block;
}

Het werkt in ieder geval, zie wel dat het voor mij nog een redelijk nieuw stukje CSS is:P maar iig bedankt!

[SanderTje!]

Ik wil hier nog wel toevoegen dat het 'good practice' is vanuit een andere browser te ontwerpen dan IE6/7. Begin met Firefox, ziet het er daar goed uit, kijk dan hoe de andere browsers het interpreteren.

Vooral IE6 zou de browser moeten zijn die de truukjes achteraf toegeworpen krijgt via een specifieke style sheet.

My 2 cents.