Etikettarkiv: bugg

CSS: overflow, min-height och float

Inkorrekt buggig meny på allers.se
Inkorrekt buggig meny på allers.se

Ibland snubblar man på lite udda saker. Idag var ett sådant exempel på Allers.se. Problemet var menyn, när den blir överfull så försvann biten som blev för mycket, dvs vit text på vit bakgrund, och knuffade bort ena spalten under. Allt är en härlig röra med float: left, så det är fullt logiskt. Menyn hade en fast height, och bryr sig därför inte om float-element. För att göra det hela mer spännande så inträffade bara buggen på PC i kombination med IE8 eller Chrome.

Korrekt meny på allers.se
Korrekt meny på allers.se

Första omedelbara lösningen blev att minska marginalen mellan menyalternativen, på det viset slapp vi en överfull meny.

Fixad meny på allers.se
Fixad meny på allers.se

Men om vi inte bara vill ha en temporär fix, utan något som fungerar bättre i framtiden, hur gör vi då? Jo, vi ändrar från:

height: 29px;

till:

min-height: 29px;
overflow: hidden;

När menyn blir överfull så täcker den plötsligt en hel extra rad, och allt är frid och fröjd. Förutom att det rent estetiskt är ganska fult. Att jag kom upp med ovanstående lösning var egentligen för att jag testade lite olika saker och råkade kombinera i firebug. Trevligt.

Min teori är att overflow: hidden döljer allt överflödigt, eller snarare tillåter inte att något överflödigt visas. Det är en viss skillnad där. Min-height säger att minimum är 29px, den definierar inget max.

Bara min-height fungerar inte eftersom elementet är ett float-element. Den flyter så att säga runt lite som den vill utan att föräldern bryr sig.

Kombinationen min-height och overflow: hidden blir att allt i föräldern måste synas. Vi har inte definierat något max, och därför finns det ju inget överflödigt. Plötsligt bryr vi oss om float-elementet.

Hänger ni med? Givetvis är ni välkomna att skriva om ni har någon annan teori.

Johan hissar och dissar!

Hissar och dissarHissar:

  1. Folktandvården
    Jag gillar min tandläkare som konstigt nog inte är sadist och dessutom har humor.
  2. Rabattkuponger
    Restauranger ska bara besökas med rabattkuponger. Det är nog bara en tidsfråga innan Sibylla skäller ut mig och Thomas.
  3. Johannes citatinsamling
    Bra att någon samlar upp allt som sägs, även om det ibland kan bli ruskigt pinsamt efteråt.

Dissar:

  1. TV3 & Rosa Bandet-galan
    Jag skänker pengar men istället för att dra dem från mobilräkningen ska jag själv krångla med inbetalningen. Tittarombudskvinnan har såklart ingen aning om något när jag klagar, utan hänvisar till Baluba. Outsourcing är framtiden!
  2. iFån-bugg
    Alla alarm ringer en timme senare under vintertid. En bra anledning till att sova en timme längre på morgonen men annars bara irriterande!
  3. IF
    Jag sa klart och tydligt att jag inte vill binda upp mig på något över telefon. Ett tag senare kommer en bekräftelse på försäkring hem i brevlådan. Jag har ditt namn och nummer, tröga försäljare!