webForumDet fria alternativet
Logga in / Bli medlem

Safari har mer top-margin i jämförelse med IE och Firefox??

HTML & CSS

9 svar · 825 visningar · startad av Cuiris

CuirisMedlem sedan feb. 2006107 inlägg
Frågan#1

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?

:(

Danne Vs avatarDanne VMedlem sedan aug. 20068 090 inlägg
#2

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;}
CuirisMedlem sedan feb. 2006107 inlägg
#3

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/style2.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="galleriRubrikHolder text_15_white">
		<div class="galleriRubrikText"><b>Galleriet</b></div>
</div>
</body>
</html>

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---------------------------------------------------------------------------------------------------------------------------*/
fel.gif
Danne Vs avatarDanne VMedlem sedan aug. 20068 090 inlägg
#4

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.

CuirisMedlem sedan feb. 2006107 inlägg
#5

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.

fel2.gif
jawbreakers avatarjawbreakerMedlem sedan jan. 2003296 inlägg
#6

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

<h2>Galleriet</h2>

(eller vilken rubriknivå som nu är lämplig för ändamålet) känns i så fall mer rätt.

Danne Vs avatarDanne VMedlem sedan aug. 20068 090 inlägg
#7

Håller med jawbreaker...

CuirisMedlem sedan feb. 2006107 inlägg
#8

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?

Danne Vs avatarDanne VMedlem sedan aug. 20068 090 inlägg
#9

Cuiris skrev:

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. http://webdesignskolan.com

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: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

CuirisMedlem sedan feb. 2006107 inlägg
#10

Tack för all hjälp!

270 ms totalt · 4 externa anrop · v20260731065814-full.1dc6f849
128 ms — deklarationer (db)
0 ms — hämta statistik (cache)
139 ms — hämta tråd, inlägg och bilagor (db)
127 ms — ändringar (db)