---
title: "Egentillverkad HR som behöver lite padding"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/124288-egentillverkad-hr-som-behöver-lite-padding"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "mattiasnordin"
published: "2005-03-13T15:39:35.000Z"
updated: "2005-03-13T20:57:46.000Z"
replies: 4
views: 216
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/124288-egentillverkad-hr-som-behöver-lite-padding"
---

# Egentillverkad HR som behöver lite padding

## #1 — mattiasnordin, 2005-03-13T15:39Z

CSS:

```
.hrHorizontalRulerTable {
	background-image : url(/web2005/_design/bakgrund_dot_vertical.gif); 
	background-repeat: repeat-x;
	padding-top: 22px;
	padding-bottom: 22px;
	padding-left: 22px;
	padding-right: 22px;
}
```

```
<!-- Dotted HR line --><table cellpadding=0 cellspacing=0 border=0 width=100%><td width=100% class="hrHorizontalRulerTable"></td></table>
```

Hmmm.... jag försöker göra en dynamisk "\<HR\>" som fungerar både vertikalt och horizontalt. Men jag behöver kunna kontrollera padding i alla kanter. Ovan ger mig inte någon padding alls, i övrigt fungerar det.

Hur kan jag få padding på min tabell?

Permalänk: https://www.webforum.nu/p/124288

## #2 — mattiasnordin, 2005-03-13T15:54Z

Hmmm...

```
<!-- Dotted HR line --><table cellpadding=0 cellspacing=0 border=1 width=100%><td width=100% class="hrHorizontalRulerTable">[b]& n b s p ;[/b]</td></table>
```

Om jag lägger till ett tecken i tabellen så fungerar det med den lodrätta paddingen men o andra sidan så får jag alltid en radbrytning i tabellen. Det vill jag inte ha...

Funderar... Finns det inte en bättre lösning. Det verkar inte gå att få till den vågrätta paddingen när man använder sig av en bakgrundsbild. Det är ju igentligen bilden jag vill ha padding på och inte tabellen...

HJÄLP :)

Permalänk: https://www.webforum.nu/p/1572115

## #3 — mattiasnordin, 2005-03-13T16:12Z

```
.hrHorizontalRulerTable {
	background-image : url(/web2005/_design/bakgrund_dot_vertical.gif); 
	background-repeat: repeat-x;
	background-position: center;
}
.hrHorizontalRulerTablePadding {
	padding-top: 2px;
	padding-bottom: 20px;
	padding-left: 2px;
	padding-right: 22px;
}
```

```
<!-- Dotted dynamic HR line box. Den första tabellen positionerar bakgrundsbilden -->
<table cellpadding=0 cellspacing=0 border=0 width=100% height=2 class="hrHorizontalRulerTablePadding">
<td><!-- bilden --><table cellpadding=0 cellspacing=0 border=0 width=100%><td class="hrHorizontalRulerTable"></td></table><!-- // bilden --></td>
</table>
```

Ovan fungerar bra. Men finns det inte något smidigare sätt ???

Permalänk: https://www.webforum.nu/p/1572127

## #4 — zcorpan, 2005-03-13T16:36Z

Vad är det du försöker åstakomma? Det verkar som att man kan göra såhär: 

```
hr {
	border: none;
	height: 7px;
	background: url([url]http://qurl.net/bA[/url]) repeat-x left center; 
	padding: 2px 22px 20px 2px;
}
```

```
<hr>
```

Fast IE ger den en border ändå, vilket vi kan fixa genom: 

```
div.hr hr { display: none; }
div.hr {
	height: 7px;
	background: url([url]http://qurl.net/bA[/url]) repeat-x left center; 
	padding: 2px 22px 20px 2px;
}
```

```
<div class="hr"><hr></div>
```

Permalänk: https://www.webforum.nu/p/1572139

## #5 — mattiasnordin, 2005-03-13T20:57Z

Låter ju onekligen mycket sexigare. Ska testa!

Permalänk: https://www.webforum.nu/p/1572272

---

Tråden på webben: https://www.webforum.nu/amne/html-css/124288-egentillverkad-hr-som-behöver-lite-padding