[Fredrik.r]

Hej,

Försöker få till prickade linjer på en sajt jag bygger. Fungerar utmärkt i Firefox och Safari men Explorer ska, som vanligt, strula till allting.

Denna ger en linje med avlånga streck istället för 1x1 pixels prickar plus ett heldraget streck 1 pixel nedanför;

hr {
border: none 0; 
border-top: 1px dotted #ccc;
width: 100%;
}

Denna ger en linje med avlånga streck istället för 1x1 pixels prickar;

td.right li {
	border-bottom: 1px dotted #ccc;
	padding-bottom: 0;
	margin-bottom: 2px;
}

Väldigt tacksam för tips på kod som ger samma resultat i alla webbläsare för det ser för j*vligt ut i Explorer just nu.

[DeSoto]

En bra sida om det:
http://www.sovavsiti.cz/css/hr.html

[martine]

IE (6 åtminstone) gör inte prickade ramar om inte ramarna är bredare än 1px. Istället visas de som "dashed" av någon oförklarlig anledning. Antingen acceptera att IE inte kan visa "dotted" för smala ramar eller sätt bredden på ramen till 2px eller större. En möjlighet är förstås att använda en ljus "solid" ram för IE istället, t ex med:

* html td.right li { border-bottom: 1px dotted #ccc; }

hr är för övrigt kanske inte det optimala elementet att använda i modern webdesign.

Jag brukar sätta "dotted" när det ser snyggt ut (i Firefox etc) och strunta i att det ser annorlunda ut i IE om det inte ser för illa ut. IE-användare har ju faktiskt aldrig sett en 1px-dotted ram så dom vet oftast inte vad dom missar .

Edit: DeSoto: intressant länk även om den är 5 år gammal…

[Fredrik.r]

Hej,

Möjligt att inte <hr> är optimalt men vad ska jag då använda?
Explorer kör ju som sagt dashed även under koden ovan, som inte har med <hr> att göra.

[Kaffe]

Ett sätt är att emulera effekten med en brakgrundsbild

 div.divider { background: url(../graphics/dots.png) 0% 100% repeat-x; }

Jag förespråkar användandet av en div avgränsare istället för HR, åtminstone om alternativet för att uppnå samma effekt är att wrappa in HR i en div. HR är ett relativt osemantiskt element. Det kan grupperas med andra visuella element som bold och italic. Det beskriver egentligen bara hur det ser ut, inte funktion eller innehåll.

Ditt andra exempel blir helt klart krångligare. Ett tips kan vara en wrapper för texten, sätt på en liten padding för ditt listitem-element (li) och använd en bakgrundbild som är 2 x 2 px varannan grå, varannan vit. Lite svårt att förklara men jag hoppas du förstår. Om inte annat vispar jag ihop ett exempel när jag kommer hem ikväll.

[tedeh]

Originally posted by Kaffe@Jan 18 2007, 13:17
Ett sätt är att emulera effekten med en brakgrundsbild

 div.divider { background: url(../graphics/dots.png) 0% 100% repeat-x; }

Jag förespråkar användandet av en div avgränsare istället för HR, åtminstone om alternativet för att uppnå samma effekt är att wrappa in HR i en div. HR är ett relativt osemantiskt element. Det kan grupperas med andra visuella element som bold och italic. Det beskriver egentligen bara hur det ser ut, inte funktion eller innehåll.

Besserwisser måhända, men en div har inget som helst semantiskt värde. Anledningen till att användande av <hr> brukar avrådas är väl att den likt [b] eller
är presentativ, alltså att den beskriver hur sidan ska se ut. Sådant hör som vi alla borde veta inte hemma i html utan ska helt separeras till CSS.

Själv skulle jag defintivt råda trådskaparen att göra en border-bottom på närmaste block-element och sedan använda padding-bottom om han vill flytta runt linjen. Hur var det nu igen, visar verkligen IE border-bottom: dotted; som den ska? Minns inte, brukar själv inte hålla på exakt vilka ramar IE ritar.

[Fredrik.r]

Nej, Explorer visar inte border-bottom: dotted som den ska, det blir dashed (avlånga streck)

[Kaffe]

Originally posted by tedeh@Jan 18 2007, 16:19
[b] Besserwisser måhända, men en div har inget som helst semantiskt värde. Anledningen till att användande av <hr> brukar avrådas är väl att den likt eller
är presentativ, alltså att den beskriver hur sidan ska se ut. Sådant hör som vi alla borde veta inte hemma i html utan ska helt separeras till CSS.

Fullt medveten om detta. Men man tilldelar ett div-elementet i semantiskt värde. Man kan göra samma sak med en hr eller br också, och låta elementet ha en helt annan innebörd. Men då får man ju vara medveten om att det inte följer rekommenderade standarder.