Varken FF eller Opera verkar fatta margin-top som jag har lagt mot de överliggande divvarna. Nån som har en lösning på det?
margin-top
8 svar · 520 visningar · startad av DanneSt
Om Firefox och Opera är överrens om nånting så är det med största sannolikhet korrekt. Utan att se nån kod gissar jag att du har problem med kollapsande marginaler (ett koncept som IE har en del buggar med).
Hmm, kollapsande marginaler?
Här är css-koden:
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: 100px;
padding: 0;
border: 0px solid #000000;
background: url("images/toppbalk.jpg");
}
#meny
{
width: 96%;
height: auto;
text-align: center;
font-family: Arial;
background-color: #ffffff;
border: 0px solid #000000;
padding: 0px;
}
#meny a
{
font-size: 1.4em
}
#content
{
float: left;
width: 100%;
\width: 486px;
w\idth: 490px;
height: auto;
overflow-y: auto;
background-color: #ffffff;
border: 0px solid #000000;
padding: 2px;
}
#ordforande
{
float: left;
width: 242px;
\width: 230px;
w\idth: 242px;
height: auto;
overflow-y: auto;
border-left: 1px dotted #C6CC92;
background-color: #ffffff;
padding: 6px;
}
#driftinfo
{
float: left;
width: 242px;
\width: 230px;
w\idth: 242px;
height: 80px;
\height: 76px;
h\eight: 80px;
background-color: #ffffff;
border-top: 1px dotted #C6CC92;
padding: 2px;
}
#senaste_nytt
{
float: left;
width: 242px;
\width: 230px;
w\idth: 242px;
height: 80px;
\height: 76px;
h\eight: 80px;
border-top: 1px dotted #C6CC92;
background-color: #ffffff;
border-left: 1px dotted #C6CC92;
padding: 2px;
}
#epost
{
float: left;
width: 242px;
\width: 230px;
w\idth: 242px;
height: 80px;
\height: 76px;
h\eight: 80px;
background-color: #ffffff;
border-top: 1px dotted #C6CC92;
border-left: 1px dotted #C6CC92;
padding: 2px;
}
#footer
{
clear: both;
width: 100%;
height: 28px;
margin-top: 6px;
text-align: center;
background: url("images/bottombalk.jpg");
background-color: #ffffff;
border: 0px solid #000000;
padding: 0px;
}
a:link { color: #0099ff; text-decoration: none}
a:visited { color: #0099ff; text-decoration: none}
a:active { color: #0099ff; text-decoration: none}
a:hover { color: #aeccff; 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.2em; 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.4em; font-weight: normal}
Och här är html-koden:
<div id="container">
<div id="head">
</div>
<div id="meny">
<!--#Include file="meny.asp"-->
</div>
<div id="content">
<h2>Content</h2>
<!--#Include file="news/news3.asp"-->
</div>
<div id="ordforande">
<h2>Ordförande har ordet </h2>
<%ordf_kort = Replace (left(rs("ordforande"), 250), vbCrLf, "<br />")%>
<%=ordf_kort%>...
<br /><br />
<a href="ordforande.asp">Läs mer!</a>
</div>
<div id="driftinfo">
<h2>Driftinfo</h2>
<%=Replace(Server.HTMLEncode(rs("driftinfo")),vbCrLf,"<br />")%>
</div>
<div id="senaste_nytt">
<h2>Senaste Nytt</h2>
</div>
<div id="epost">
<h2>Registrera din e-post</h2>
<form action="reg_epost.asp">
<p style="text-align: center">Anmäl din e-post här för snabb
info!
<input type="text" name="epost" size="15" /> <input type="submit" value="Ok" name="B1" />
<a target="_blank" href="epost_las_mer.asp">Läs mer!</a></p>
</form>
</div>
<div id="footer">
Wiihaga Samfällighet | Box 70, 86530
ALNÖ | <a href="mailto:info@wiihaga.se">info@wiihaga.se</a>
</div>
</div>
Är problemet att rubrikerna kommer för långt ner och footern för långt upp?
Footern kommer för långt upp, över "e-post"-divven.
(https://www.wiihaga.se)
prova med att radera alla height i e-post-diven...
Ser att du inte testat att radera height. Har lite bättre tid nu, så här en liten förklaring.
ur #epost
height: 80px;
\height: 76px;
h\eight: 80px;
De två första vänder sig till samma webläsare så ta bort den med \ före. Finns någon webläsare som lämnar css helt när den hittar den. Kommer inte ihåg nu vilken... Den sista som vänder sig till IE5 ska ha höjden + marginaler.
Men varför jag skrev att du skulle radera alla tre i mitt förra inlägg var för att du ville ju att man skulle kunna förstora text vid behov. Har du bestämd höjd så kommer den att lägga sig över foten som den gör nu, om innehållet blir för stort. Utan bestämd höjd, kommer diven att anpassa sig till innehållet.
Just nu tror jag att innehållet är ungefär 100-105 pixlar hög så antingen ändrar du värdena eller raderar, så ska nog ditt problem vara ur världen...
Men oavsett vad du gör så strunta i hack på höjder...
eller ännu hellre undvik dem över allt... ;)