Vet du vad koden du klistrat in från positioniseverything.net gör?
I vilket fall så använder inte klassnamnet clearfix på någon element i html-koden.
Sätt det på container så löser det problemet:
<div id="container" class="clearfix">
Frågan#1
Hjälp, nåt blir tokfel i FF i min design.
Jobbar med en huvud div och i denna skall två andra divar ligga (en meny och en innehålls sida). I IE så visas allt korrekt men FF "klipper" bort bakgrunden (vit) från huvudramen och visar bara sidans bakgrund.
Kan nån hjälpa mig att förstå vad som är fel så blir jag som vanligt överlycklig!
CSS kod:
body {
background: #6F6F6F;
font-size: 9px;
/* global font settings */
font-family: Verdana, Arial, Tahoma;
color: #333; /* main text color */
/* part 1 of centering hack */
text-align: center;
margin: 0;
padding-top: 10px;
}
#container
{
width: 948px;
background: #FFF;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
/* part 2 of centering hack */
text-align: left;
margin: 0 auto;
/* box model hack */
voice-family: "\"}\"";
voice-family:inherit;
width: 948px;
}
html>body #container {
width: 948px;
}
#pageheaderStatusbar
{
width: 948px;
margin: 0 auto;
background: #000;
padding: 0 0px;
color: #fff;
text-align: left;
line-height: 25px;
height: 25px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
#pageheaderStatusbar .date
{
font-weight:bolder;
padding-left: 10px;
float:left;
}
#pageheaderStatusbar .status
{
font-weight:bolder;
padding-right: 10px;
float: right;
}
#pageheaderStatusbar a
{
color: #FF871D;
}
#content
{
width: 720px;
float: right;
padding-top: 9px;
margin-left: 10px;
margin-right: 10px;
}
#mnu
{
width: 208px;
background: url([url]http://www.idofun.se/img/mnu_bg.gif);[/url]
background-repeat: repeat-y;
padding-top: 9px;
padding-bottom: 9px;
float: left;
}
#mnu .box
{
background: #fff;
padding: 0 5px 0 5px;
margin: 9px 10px 0 10px;
}
#mnu .box p
{
color: #FF871D;
font-weight: bolder;
margin: 0;
padding: 0;
}
#mnu ul
{
color: white;
background: #373737;
padding: 0 5px 0 5px;
margin: 0 10px 0 10px;
line-height: 17px;
}
#mnu li
{
list-style: none;
font-weight:bold;
}
#mnu a
{
display: block;
text-decoration: none;
color: white;
background: #2A2A2A;
font-weight:normal;
}
#mnu a
{
width: 99%;
/* only necessary for Internet Explorer */
}
#mnu a
{
voice-family: "\"}\"";
voice-family: inherit;
/* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */
}
#mnu>#navlist a
{
width: auto;
/* only necessary if you use the hacks above for the Internet Explorer */
}
#mnu a:hover
{
background: #373737;
}
/* CLEARFIX ([url]http://www.positioniseverything.net/easyclearing.html[/url])
-------------------------------------------------------------------- */
.clear {
height: 0px;
clear: both;
font-size: 1px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-table;
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */
HTML
<body>
<form id="form1" runat="server">
<div id="pageheaderStatusbar">
<div class="date">
<asp:Label ID="litToLongDateString" runat="server"></asp:Label>
</div>
<div class="status">
Inloggad: <a href="#">Nson</a> | Meddelanden: <a href="#">Inga nya</a> | Kontakter: <a href="#">Ingen online</a> |
<asp:LoginStatus ID="LoginStatus1" runat="server" ForeColor="White" />
</div>
</div>
<div id="container">
<div id="mnu">
... meny
</ul>
</div>
<div id="content">
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
</div>
</div>
</form>
</body>
Bifogar ochså bild på mitt fel ...
