Haslayout oplossen in IE6 & IE7

Mark — Sat, 08 Aug 2009 09:01:25 +0000

Haslayout is een browser specifieke eigenschap van windows browser Internet Explorer om te zeggen of een element dimensie moet krijgen van zijn siblings (elementen met inhoud in het betreffende element), maar door sommige CSS eigenschappen toe te passen verandert dit soms naar Haslayout-1 en krijg je niet hetzelfde effect als in andere browsers. Hoe je dit kunt oplossen met volgende 2 kleine CSS Snippets:

Conditionele CSS voor IE6

Conditionele CSS voor IE7

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Een link is een inline element

Mark — Mon, 13 Jul 2009 10:16:58 +0000

Een link is een inline element, bewijs hiervan is als je een link in een stuk tekst zet zal deze niet op een nieuwe lijn beginnen. Maar soms wil je juist wel dimensie geven aan een link (navigatie, etc …), dan kun je niet anders dan er een block-element van te maken (indien je hoogte, breedte en margin wenst toe te voegen).
Als de links (meerdere) langs elkaar moeten komen kan je inline-block gebruiken of block in combinatie met float.

HTML

Link 1
Link 2
Link 3
Link 4

Links naast elkaar methode 1, zonder dimensie

CSS

a {
padding: 0 5px;
}

Links naast elkaar methode 2, met dimensie

CSS

a {
display: inline-block;
height: 20px;
width: 20px;
margin: 0 3px;
padding: 0 5px;
}

Links naast elkaar methode 3, met dimensie

CSS

a {
display: block;
float: left;
height: 20px;
width: 20px;
margin: 0 3px;
padding: 0 5px;
}