Check alle échte Black Friday-deals Ook zo moe van nepaanbiedingen? Wij laten alleen échte deals zien

HTML+CSS Rollover menu niet goed in IE WEL in Firefox

Pagina: 1
Acties:

  • Cidious
  • Registratie: Mei 2005
  • Laatst online: 06-11 13:33

Cidious

The Bloody Gent

Topicstarter
Ik ben even bezig een site van een kennisje aan te passen.. was nog allemaal HTML en dat wil ik gewoon even wat vereenvoudigen met een Stylesheet..

Nu loop ik even vast op het menu.. het gaat om een image rollover menu.. en in firefox werkt alles naar behoren maar in IE krijg ik em maar niet op z'n plek..

Firefox:
Afbeeldingslocatie: http://b.imagehost.org/0806/Firefoxk.jpg

IE7:
Afbeeldingslocatie: http://b.imagehost.org/0806/IE7k.jpg


En dit is het stukje CSS code dat erbij hoort..

#list-menu {
width: 177px;
}

#list-menu ul {
background:url(images/nav_bg.jpg) 0 0 no-repeat;
width:177px;
height:29px;
position:relative;
left:0px;
top:0px;
padding:0 0 240px 0;
list-style-type: none;
}

#list-menu ul li{
background:url(images/menu_bg.gif) right top no-repeat;
height:27px;
padding:0 0 0 0;
}

#list-menu ul li a{
display:block;
background:url(images/menu_bg.jpg) 0 0 repeat-y;
padding:0 14px;
font:bold 11px/27px Arial, Helvetica, sans-serif;
color:#ffffff;
background-color:inherit;
text-decoration:none;

}

#list-menu ul li a:hover{
background:url(images/menu_bg_ro.jpg) 0 0 repeat-y;
color:#fff;
background-color:inherit;
}

#header ul li a.hover{
display:block;
background:url(images/menu_bg_ro.jpg) 0 0 repeat-y;
color:#fff;
padding:0 14px;
font:bold 11px/27px Arial, Helvetica, sans-serif;
background-color:inherit;
text-decoration:none;
cursor:text;
}


iemand enig idee wat ik fout doe?

R7 9800X3D + ASUS ROG STRIX X870E-E + RTX 4090 FE + 48GB TG Xtreem 8200 CL38


  • Knaak
  • Registratie: Juni 2006
  • Laatst online: 04-11 09:24

Knaak

It's me, Mario!

Heeft het content veld wel een vaste breedte? Want daar zit ook duidelijk verschil in.

  • alex3305
  • Registratie: Januari 2004
  • Laatst online: 13:53
De code is heel onduidelijk en ik kan er weinig mee. Kun je geen volledige HTML/CSS geven? En overigens alles in nette code tags zetten de volgende keer.

Daarnaast zie ik nergens dat je margin's hebt aangegeven. Misschien behandelt IE ze anders dan Fx. Haal de site anders ook eens door de validator heen, want dit heb ik bijvoorbeeld nog nooit gezien:

Cascading Stylesheet:
1
font:bold 11px/27px Arial, Helvetica, sans-serif;


Die font-grootte met slashes.

  • DiSiLLUSiON
  • Registratie: September 2000
  • Laatst online: 02-10 09:07
alex3305 schreef op donderdag 15 mei 2008 @ 02:23:
De code is heel onduidelijk en ik kan er weinig mee. Kun je geen volledige HTML/CSS geven? En overigens alles in nette code tags zetten de volgende keer.

Daarnaast zie ik nergens dat je margin's hebt aangegeven. Misschien behandelt IE ze anders dan Fx. Haal de site anders ook eens door de validator heen, want dit heb ik bijvoorbeeld nog nooit gezien:

Cascading Stylesheet:
1
font:bold 11px/27px Arial, Helvetica, sans-serif;


Die font-grootte met slashes.
Die slash is simpelweg font-size/line-height.

  • Cascade
  • Registratie: Augustus 2006
  • Laatst online: 18-11 17:28
Heb je al met de margins van de ul en li gespeeld? Zet die eens op 0.

  • _Thanatos_
  • Registratie: Januari 2001
  • Laatst online: 05-09 14:39

_Thanatos_

Ja, en kaal

In het blokje CSS wat je gepost hebt, zie ik geen CSS-reset, wat voor een semantische html vaak nodig is, zo ook met een <ul> menu. Zoiets dus:
Cascading Stylesheet:
1
html,body,table,ul,ol,dl,div,form,fieldset { margin: 0; padding: 0; border: 0 }

Kan een hoop gezeik schelen.

日本!🎌


  • Sebazzz
  • Registratie: September 2006
  • Laatst online: 18-11 19:30

Sebazzz

3dp

Kan je dan niet beter * {margin: 0; padding: 0; border: 0;} doen?

@Fuzzinogwat: Lekker onderbouwd.

[ Voor 21% gewijzigd door Sebazzz op 18-05-2008 13:17 ]

[Te koop: 3D printers] [Website] Agile tools: [Return: retrospectives] [Pokertime: planning poker]


  • Fuzzillogic
  • Registratie: November 2001
  • Laatst online: 01-07 22:34
Sebazzz schreef op zondag 18 mei 2008 @ 13:09:
Kan je dan niet beter * {margin: 0; padding: 0; border: 0;} doen?
Nee. Bah.

  • _Thanatos_
  • Registratie: Januari 2001
  • Laatst online: 05-09 14:39

_Thanatos_

Ja, en kaal

Onderbouwing: zo heb je niet zelf de controle welke elementen een margin:0 krijgen. Zou je SVG in je pagina opnemen, dan geldt het daar ook voor. Resultaat: onbedoeld afbeeldingen vernaggelen. Het is ook gewoon netter om precies aan te geven welke elementen je bedoelt te resetten. Leest wat makkelijker terug; voor je zelf en je opvolger.
Ohja, en * werkt niet in IE6 ;)

[ Voor 6% gewijzigd door _Thanatos_ op 18-05-2008 13:25 ]

日本!🎌


  • Cidious
  • Registratie: Mei 2005
  • Laatst online: 06-11 13:33

Cidious

The Bloody Gent

Topicstarter
THNX voor jullie support door met wat tips van jullie aan de gang te zijn gegaan heb ik alles netjes op z'n plek gekregen.. wel loop ik weer tegen allerlei nieuwe problemen aan.. MET IE :( .

Ik hoop zo dat M$ IE8 een beetje meer webdesigner vriendelijk gaat maken.. want het is altijd IE dat loopt te hikken.. en dingen misvormd..

R7 9800X3D + ASUS ROG STRIX X870E-E + RTX 4090 FE + 48GB TG Xtreem 8200 CL38


  • DiSiLLUSiON
  • Registratie: September 2000
  • Laatst online: 02-10 09:07
Nou nou, van 'M$' heb ik nog nooit gehoord, maar ik neem aan dat je gewoon 'Microsoft' bedoelt? ;)

Internet Explorer is helaas een stuk minder vriendelijk naar de webdeveloper toe dan browsers die zich meer aan de standaarden houden. Het is aan jou natuurlijk om de afweging te maken of de doelgroep / complexiteit van de site het rendabel maakt om daarnaast ook IE te ondersteunen of niet.

  • ikbenmelle
  • Registratie: Januari 2008
  • Laatst online: 18-09 18:25

ikbenmelle

Front-end javascript developer

#list-menu ul { }

Met ook nog margin:0; erin? Dat zal denk ik wel helpen. Om alle settings van de ul en ul li naar nul te krijgen moet je ze allebei zo zetten:



ul {
margin:0;
padding:0;
}

ul li {
margin:0;
padding:0;
}



Ik ken een soortgelijk probleem, misschien helpt dit. Succes. ;)
Pagina: 1