Förstår inte varför IE och FF/Opera visar olika mycket utrymme ovanför en <h>-tag? Är det nån rackarns "box-model-hack" som måste till?
Jag kör med Transitional om det har någon betydelse...
Skillnader i rubriker <h>
17 svar · 904 visningar · startad av DanneSt
Det handlar ju bara om att de har olika marginaler. Varför inte bara nollställa dem så att de alla får samma förutsättningar?
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
}
Det finns ingen standard på hur HTML ska renderas, eller vilken CSS som ska finnas i webbläsarens stilmall.
Så olika webbläsare har olika stilmallar och alla är rätt.
Vill du få samma världen får du helt enkelt ange vilka marginaler du vill ha i sidans stilmall.
[edit] Seg jag är. ;) [/edit]
Ok, jag troooor att jag har nollställt alla värden...här är min css:
body
{
padding: 0;
margin: 0;
font-family: Georgia, Arial, Verdana;
font-size: 0.8em;
background-color: #ffffff;
}
#container
{
postition; absolute;
width: 760px;
height: auto;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
text-align: left;
background: url('images/bkgr.jpg');
border: 0px solid #000000;
padding: 0;
}
#head
{
width: 100%;
height: 162px;
padding: 0;
border: 0px solid #000000;
background: url("images/toppbalk.jpg");
text-align: right;
font-family: Verdana, Arial;
color: #ffffff;
font-size: 0.8em;
}
#meny
{
float: left;
width: 150px;
height: 400px;
margin-top: 4px !important;
margin-left: 4px !important;
margin-top: 4px;
margin-left: 4px;
text-align: left;
font-family: Arial;
background-color: #ffffff;
border: 0px solid #000000;
padding: 0px;
}
#meny a
{
font-size: 1.1em;
text-transform: uppercase;
}
#welcome
{
float: left;
width: 580px;
height: auto;
margin-top: 4px !important;
margin-left: 4px !important;
margin-top: 4px;
margin-left: 4px;
text-align: left;
overflow-y: auto;
background-color: #ffffff;
border: 0px solid #000000;
padding: 2px;
}
#senastenytt
{
float: left;
width: 330px;
height: auto;
margin-top: 4px;
margin-left: 4px;
overflow-y: auto;
border: 1px solid #999900;
background-color: #ffffff;
padding: 4px;
}
#bildruta
{
float: right;
width: 240px;
height: 240px;
margin-top: 4px;
margin-right: 8px;
overflow-y: auto;
border: 0px solid #999900;
background-color: #ffffff;
padding: 2px;
background: url('images/bildruta.gif');
}
#nyheter
{
float: left;
width: 330px;
height: auto;
margin-top: 16px;
margin-left: 4px;
border: 1px solid #999900;
background-color: #ffffff;
padding: 4px;
}
#content
{
float: left;
width: 96%;
height: auto;
margin-left: 14px !important;
margin-left: 8px;
overflow-y: auto;
background-color: #ffffff;
border: 0px solid #000000;
padding: 2px;
}
#footer
{
clear: both;
float: left;
width: 100%;
height: 28px;
margin-top: 12px;
font-size: 0.8em;
font-family: Arial;
text-align: left;
background: url("images/bottombalk.jpg");
border-top: 0px dotted #999900;
padding: 0px;
}
a:link { color: #999900; text-decoration: none}
a:visited { color: #999900; text-decoration: none}
a:active { color: #999900; text-decoration: none}
a:hover { color: #990000; text-decoration: none}
p { color:#000000; font-family: Georgia; font-weight: normal}
li { color:#000000; font-family: Georgia, Arial, Verdana; font-weight: normal}
td { color:#000000; font-family: Georgia, Arial, Verdana; font-weight: normal}
tr { color:#000000; font-family: Georgia, Arial, Verdana; font-weight: normal}
h1 { color:#000000; font-family: Arial; font-size: 1.6em; font-weight: bold}
h2 { color:#000000; font-family: Arial; font-size: 1.4em; font-weight: bold; font-style: italic}
h3 { color:#000000; font-family: Arial; font-size: 1.2em; font-weight: bold}
Det enklaste tycker jag är att nollställa allt, så att precis allt får samma förutsättningar. Det är en bra början.
* {margin: 0; padding: 0;}
silfver skrev:
Det enklaste tycker jag är att nollställa allt, så att precis allt får samma förutsättningar. Det är en bra början.
* {margin: 0; padding: 0;}
Ah! Tack för den! Utmärkt id'e som jag aldrig ens tänkt på!
Tack & bock!
silfver skrev:
Det enklaste tycker jag är att nollställa allt, så att precis allt får samma förutsättningar. Det är en bra början.
* {margin: 0; padding: 0;}
Har satt margin: 0; och padding: 0; på ALLA divvar nu.
Hjälper inte.
:-(
Danne V skrev:
Ah! Tack för den! Utmärkt id'e som jag aldrig ens tänkt på!
Tack & bock!
Jag skickar faktura. ;)
DanneSt skrev:
Har satt margin: 0; och padding: 0; på ALLA divvar nu.
Hjälper inte.
:-(
Har du satt samma inställningar på dina header-element då? En länk till sidan vore bättre så kan vi lättare hjälpa dig.
Länken är http://www.norrbageri.se/_uc/
Har fått till det så det ser riktigt ut nu iaf...men det blev en skitig och ful hack-lösning:
padding-top: 0px !important;
padding-top: 10px;
padding-left: 4px;
padding-right: 4px;
padding-bottom: 4px;
...men vänta nu...menar du alltså att jag ska sätta en * med de nollade värdena...hmmm.... *testar*
Vackert!! Tackar Silvfer, ditt tips funkade ju galant!
Men, vad hände nu? Hade jag inte lyckats nolla allt innan?
Vad menar du med header-element?
DanneSt skrev:
Vackert!! Tackar Silvfer, ditt tips funkade ju galant!
Men, vad hände nu? Hade jag inte lyckats nolla allt innan?
Vad menar du med header-element?
Skriver du
* {
margin: 0;
padding: 0;
}
Så gäller den här regeln för ALLT. Och med header-element menar jag <h1>, <h2>... osv.
silfver skrev:
Skriver du
* { margin: 0; padding: 0; }Så gäller den här regeln för ALLT. Och med header-element menar jag <h1>, <h2>... osv.
Ah, klartecken från kön! :-)
Ok, mina <h>-element hittar du längst ner i den postade koden en bit ovanför!
zcorpan skrev:
Det finns ingen standard på hur HTML ska renderas, eller vilken CSS som ska finnas i webbläsarens stilmall.
Ingen standard men här är iaf en rekommendation för hur CSS ska rendera HTML 4 som man kan använda:
http://www.w3.org/TR/CSS21/sample.html
Om man inkluderar denna först i stylesheetet så bör väl iaf skillnaderna i hur webläsarna renderar per default minskas? För text så kommer det ändå skilja beroende på vad användaren har för inställningar för textstorlek.
silfver skrev:
Det enklaste tycker jag är att nollställa allt, så att precis allt får samma förutsättningar. Det är en bra början.
* {margin: 0; padding: 0;}
Använde detta en gång och det löste mitt problem, men skapade en massa andra problem istället. Bl.a. formulär-element som blev skumma. Att nollställa margin och padding kan vara bra, men kanske inte på * utan specificera hellre alla de element du vill nollställa för.
stephan skrev:
Använde detta en gång och det löste mitt problem, men skapade en massa andra problem istället. Bl.a. formulär-element som blev skumma. Att nollställa margin och padding kan vara bra, men kanske inte på * utan specificera hellre alla de element du vill nollställa för.
Nollställer man allt så vill det ju till att man sätter marginaler och padding på alla element man använder. Och det är inte så jättekrångligt tycker jag. :)
Fördelen med att nollställa allt är ju åxå att det då bara är upp till en själv att bestämma utseendet, inte några inbyggda formateringar som är olika för varje webbläsare! (y)
silfver skrev:
Nollställer man allt så vill det ju till att man sätter marginaler och padding på alla element man använder. Och det är inte så jättekrångligt tycker jag. :)
Jag fick det aldrig att funka på dropdownboxar, så då var det faktiskt jättekrångligt:
http://www.webforum.nu/showthread.php?p=1193052#post1193052
silfver skrev:
Nollställer man allt så vill det ju till att man sätter marginaler och padding på alla element man använder. Och det är inte så jättekrångligt tycker jag. :)
Men vissa formulärelement (speciellt knappar) fungerar inte som de brukar när man anger margin/padding i vissa webbläsare, oavsett vad man anger.