---
title: "Safari har mer top-margin i jämförelse med IE och Firefox??"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/182072-safari-har-mer-top-margin-i-jämförelse-med-ie-och-firefox"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Cuiris"
published: "2010-01-19T10:13:11.000Z"
updated: "2010-01-19T14:17:28.000Z"
replies: 9
views: 843
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/182072-safari-har-mer-top-margin-i-jämförelse-med-ie-och-firefox"
---
# Safari har mer top-margin i jämförelse med IE och Firefox??
## #1 — Cuiris, 2010-01-19T10:13Z
Jag har gjort en enkel liten box/div som heter **holder** och i denna box har jag sedan lagt ytterliggare en liten box/div. Sedan har jag lagt till text som jag paddat den 10px från toppen. Men i safari ser det ut som om det är kanske enbart 3px paddat från toppen?
Alltså jag har tankat hem reset css:er från nätet som ska nolla alla förbaskade värden. Men detta är ju skrattretande! Jag får verkligen inte till det. Är det någon som har en aning eller länk till någon sida som tar upp detta?
:(
Permalänk: https://www.webforum.nu/p/182072
## #2 — Danne V, 2010-01-19T10:24Z
Det är väl bättre om du BÅDE laddar upp en sida där du demonstrerar problemet och OCH postar ALL kod (html och css), dvs inte bara den du tror det handlar om, utan även all annan eftersom det kan vara en helt annan kod än du tror som påverkar. Vi vet t.ex. inte ens om du har rätt DTD....
Dessutom: vilka versioner av webbläsarna och vilken plattform?
Och: Vaddå för "reset css:er"? Kan vi få se dom?
Ett grundläggande tips är i alla fall att börja en stilmall med att nolla all padding och alla marginaler:
```
* {padding:0; margin:0;}
```
Permalänk: https://www.webforum.nu/p/2223421
## #3 — Cuiris, 2010-01-19T11:20Z
Jag blir inte slug på detta. Kanske har man blivit lite blind och missar småsaker. Men här kommer en illustration på skillnaderna. Som faktiskt skiljer sig i FF och IE också. Se bifogad fil.
**Bifogar även HTML koden:**
```
Untitled Document
Galleriet
```
**Samt CSS-koden där "resetkoden" hämtad från nätet också ligger:**
```
.galleriRubrikHolder {
position:relative;
float:left;
width:228px;
height:27px;
background-color:#000;
vertical-align:top;
margin-top:0;
border-top:0px;
}
.galleriRubrikText {
position:relative;
vertical-align:top;
float:left;
width:218px;
height:auto;
padding-right:0px;
padding-top:4px;
padding-bottom:0px;
padding-left:10px;
margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
border-top:0px;
top:0px;
left: 0;
right:0;
bottom:0;
}
.text_15_white {
font-family:Calibri, Arial;
color:#fff;
font-size:15px;
}
/*------RESET CSS---------------------------------------------------------------------------------------------------------------------------*/
body, html {padding:0; margin:0}
* {padding:0; margin:0;}
.clear {
clear:both;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
border-spacing:0px;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
/*------RESET CSS---------------------------------------------------------------------------------------------------------------------------*/
```
Bilagor:
- [fel.gif](https://www.webforum.nu/a/21266.gif)
Permalänk: https://www.webforum.nu/p/2223426
## #4 — Danne V, 2010-01-19T11:45Z
Du kan ju börja med att rensa i stilmallen för .galleriRubrikText. Jag tror att följande är helt onödiga:
```
position:relative;
vertical-align:top;
float:left;
width:218px;
height:auto;
border-top:0px;
top:0px;
left: 0;
right:0;
bottom:0;
```
Följande gör heller ingen verkan i stilen för .galleriRubrikHolder
```
vertical-align:top;
```
Sen verkar den där reset-mallen vara lite overkill. Bl.a. undrar jag om inte följande ställer till det:
```
body {
line-height: 1;
}
```
och
```
vertical-align: baseline;
```
Sen kan man ju fråga sig om du verkligen kommer att använda alla de taggar som filen stilsätter, t.ex. ins, del, focus, blockquote osv?
Om jag vore du skulle jag istället börja med följande stilmall:
```
* {padding:0; margin:0;}
.galleriRubrikHolder {
position:relative;
float:left;
width:228px;
height:27px;
background-color:#000;
}
.galleriRubrikText {
padding: 4px 0 0 10px;
}
.text_15_white {
font-family:Calibri, Arial;
color:#fff;
font-size:15px;
}
```
I den har jag tagit bort allt onödigt och förkortat stilarna. Margin 0 är ju dessutom redan definierad allra högst upp, så det behöver man inte lägga in alls.
Permalänk: https://www.webforum.nu/p/2223432
## #5 — Cuiris, 2010-01-19T12:01Z
Anledningen till att det är all möjlig csskod är ett sista desperat försök att få det att fungera normalt.
Testade med din kod men det är fortfarande stora skillnader :\| Se bifogad skiss. Jag tycker det är så lustigt, det är ju liksom inget kryptiskt utan något väldigt basic man vill göra. Text som ska ligga i mitten, men ändå beter sig alla tre webbläsarna helt olika. Av dryg anledning.
Bilagor:
- [fel2.gif](https://www.webforum.nu/a/21267.gif)
Permalänk: https://www.webforum.nu/p/2223433
## #6 — jawbreaker, 2010-01-19T13:30Z
Ett tips är att du skippar den fasta höjden på din yttre wrapper + paddingen i höjdled. Det brukar vara lättare att justera höjden genom att sätta line-height på texten.
```
.galleriRubrikHolder {
background: #000;
padding: 0 10px;
width: 208px;
}
.text_15_white {
color: #fff;
font: 15px/30px Calibri, Arial, sans-serif;
}
```
I ovanstående fall är line-height 30px, så det är så hög boxen kommer att bli... Det är bara att ändra till 27px eller vad du tycker är lämpligt.
Sen är jag rätt tveksam till HTML-koden egentligen - två divar och en b-tagg för att få till en rubrik? Varför inte helt enkelt använda en rubrik-tagg?
```
h2 {
background: #000;
color: #fff;
font: bold 15px/30px Calibri, Arial, sans-serif;
margin: 0;
padding: 0 10px;
width: 208px;
}
```
och
```
Galleriet
```
(eller vilken rubriknivå som nu är lämplig för ändamålet) känns i så fall mer rätt.
Permalänk: https://www.webforum.nu/p/2223440
## #7 — Danne V, 2010-01-19T13:49Z
Håller med jawbreaker...
Permalänk: https://www.webforum.nu/p/2223441
## #8 — Cuiris, 2010-01-19T13:52Z
Kanontack! Jag visste inte om H2. Kan du förklara mer vad just H2 betyder och i vilka sammanhang man använder det? Är det för rubriker enbart?
Sedan undrar jag vad 15px/30px betyder?
Permalänk: https://www.webforum.nu/p/2223442
## #9 — Danne V, 2010-01-19T14:04Z
> **[Cuiris skrev:](https://www.webforum.nu/p/1495037)**
>
> Kanontack! Jag visste inte om H2. Kan du förklara mer vad just H2 betyder och i vilka sammanhang man använder det? Är det för rubriker enbart?
>
> Sedan undrar jag vad 15px/30px betyder?
H-taggarna är rubriktaggar (headline). h1 är störst och "viktigast" för bl.a. sökmotorer (semantisk mark-up), h6 är minst.
15px/30px är css "shorthand" och betyder fontstorlek/radavstånd.
Kolla in t.ex.
PS: Man bör inte använda fonter som folk inte har i sina datorer. "Calibri" har jag inte ens hört talas om. Kolla här:
Permalänk: https://www.webforum.nu/p/2223444
## #10 — Cuiris, 2010-01-19T14:17Z
Tack för all hjälp!
Permalänk: https://www.webforum.nu/p/2223448
---
Tråden på webben: https://www.webforum.nu/amne/html-css/182072-safari-har-mer-top-margin-i-jämförelse-med-ie-och-firefox