[HTML/CSS] IE a:hover padding probleem

[alex3305]

Hoi,

Ik heb een probleem met padding, ik ben een beetje een new designtje voor mijn site aan het maken maar ik krijg de padding niet lekker in Internet Explorer (6) en ik word er eerlijk gezegd helemaal ziek van, misschien dat een van jullie me kunnen helpen.

Het probleem doet zich voor als je over een 'knopje' heen gaat wat ingesteld is met een a:hover in CSS, in Firefox doet dit het namelijk wel goed maar in Internet Explorer helemaal niet, daar wordt de padding-top en bottom - om het zo maar ff duidelijk te maken - niet goed weergeven.

Mijn test design staat hier:
http://www.faut.nl/5ilk/index.html
MIjn CSS file staat hier:
http://www.faut.nl/5ilk/style.css
Het probleem wat zich voordoet kun je hier een beetje zien:
en ook hier - bewerkt met mijn 1337 paintskillz -:
http://www.faut.nl/5ilk/mouseover.png

Sorry dat ie nog een beetje sloom is en zo maar da komt vooral omdat de header image nog helemala niet compressed is (en andere ook niet) en aangezien die al 300kB+ is, is het niet echt aan te raden voor de 56k'rs onder ons.

Maar goed. Alvast bedankt voor het kijken hierna en als je oplossing weet zou die graag te weten willen komen. Het maakt me niet zoveel uit hoe het werkt, maar of het goed werkt zoals het ook al doet in FF.

Naja laterz,
- Alex3305 -

[KompjoeFriek]

Waarom het in IE niet goed weergegeven word is best eenvoudig te verklaren:
Je <div id="left"> en <div id="right"> zijn net zo groot als de achtergrond die tijdens het hoveren weergegeven word.
Als je in firefox de webdevelopment toolbar installeerd, kun je dat met de optie "Outline block Level Elements" al snel zien:


ik heb dat opgelost door je margin-top te vervangen door padding aan de bovenkant, en een height toe te voegen aan die divs:
(en de widths weg gehaald, aangezien die geen effect hebben op het resultaat in dit geval )

Cascading Stylesheet:

div.menu #left 
{
  float: left; 
  text-align: left; 
/*  width: 70%; */
/*  margin-top: 9px; */
  padding: 9px 0 0 0;
  height: 26px; /* 35px - 9px */
}
div.menu #right 
{
  float: right; 
  text-align: right; 
/*  width: 20%; */
/*  margin-top: 9px; */
  padding: 9px 0 0 0;
  height: 26px; /* 35px - 9px */
}

En in je anchors heb ik de margin weg gehaald:

Cascading Stylesheet:

div.menu a, a:link, a:visited, a:active 
{
  background: #323232 url(menubg.png) repeat-x; 
  color: #b8b8b8; 
/*  margin-top: 5px; */
  padding: 9px 12px 10px 13px; 
  font-weight: bold;
}

ps:
• je doctype eindigt met /> terwijl dat daar niet mag (alleen > dus)
• <center> is een depricated tag, gebruik hier ook css voor
• xhtml heeft graag dat je een encoding aangeeft
bv. met <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

[alex3305]

Bedankt ! Ook bedankt voor de tip over die toolbar, kende em nog niet maar nog ff over dit:

ps:
# je doctype eindigt met /> terwijl dat daar niet mag (alleen > dus)
# <center> is een depricated tag, gebruik hier ook css voor
# xhtml heeft graag dat je een encoding aangeeft

Punt 1: Wist ik al heb ik bij de versie die ik lokaal draai al bijgewerkt maar online nog niet.
Punt 2: <center> is alleen depricated in Xhtml 1.0 Strict en niet in Transitional maar ik krijg in body { text-align: center } ook niet goed werkend, gebruik ik de verkeerde code ?
Punt 3: Encoding heb ik ook al toegevoegd bij de local version.

Heel erg bedankt !! Misschien kun je me ook nog helpen met punt 2 maar goed dat maakt niet zoveel uit

Laterz,
- Alex3305 -

[Reinier]

Oplossing voor punt 2

[Pixeldude]

KompjoeFriek schreef op dinsdag 04 oktober 2005 @ 21:37:
Als je in firefox de webdevelopment toolbar installeerd, kun je dat met de optie "Outline block Level Elements" al snel zien:

offtopic:
Waar heb je die gedownload? Ik heb namelijk net even zitten zoeken maar ik kan hem niet vinden. Het lijkt me namelijk ook wel een handige tool

[Scott]

Skyline GTR schreef op dinsdag 04 oktober 2005 @ 22:01:
[...]

offtopic:
Waar heb je die gedownload? Ik heb namelijk net even zitten zoeken maar ik kan hem niet vinden. Het lijkt me namelijk ook wel een handige tool

Hier: http://chrispederick.com/work/webdeveloper/

[alex3305]

Dankjewel dat is dan ook weer: Solved !

Werkend design: http://www.faut.nl/5ilk/

Als je nog tips, ideëen of commentaar hebt dan hoor ik dat altijd graag, positief of negatief, kan ik er in ieder geval aan werken !

[Pixeldude]

ScottB schreef op dinsdag 04 oktober 2005 @ 22:02:
[...]


Hier: http://chrispederick.com/work/webdeveloper/

Thanx