4 svar · 489 visningar · startad av Pedda
Jag har en sida som validerar men jag har ändå problem i Safari.
Problemet är två st divvar som ska ligga bredvid varandra.
Funkar bra i IE och FX, men i Safari så hamnar dom ovanpå varandra.
css:
#leftbox {
width:160px;
background-color:#F2F5F7;
margin:0;
float:left;
padding:5px;
}
#main
{
margin:0;
padding:10px;
display:inline;
position:absolute;
float:left;
font-size:0.9em;
}
De hamnar inte ovanpå varandra när jag testkör
<html>
<body>
<head>
<style type="text/css">
#leftbox {
width:160px;
background-color:#F2F5F7;
margin:0;
float:left;
padding:5px;
}
#main
{
margin:0;
padding:10px;
display:inline;
position:absolute;
float:left;
font-size:0.9em;
}
</style>
</head>
<body>
<div id="leftbox">text 1</div>
<div id="main">text 2</div>
</body>
</html>
Har du någon annan css-kod som påverkar #leftbox eller #main?
Tycker inte att jag har det, men det har jag förmodligen då.
Sidan är uppbyggd såhär:
<div id="container">
<div id="header">
</div>
<div id="menu">
</div>
<div id="leftbox">
</div>
<div id="main">
</div>
</div>
och hela css:
html,body {
color: #333;
background-color:#fff;
height:100%; /**/
margin:10px;padding:0;
font-family: "Trebuchet MS", verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size: 0.9em;
line-height:140%;
}
a:link
{
color: #ff3300;
}
a:visited
{
color: #ff3300;
}
a:hover, a:active
{
color: #ff3300;
}
#container {
width:100%;
min-height:100%;
}
#header{
width: 100%;
height: 70px;
background-color:#fff;
margin:0;
padding: 5px 5px 5px 5px;
}
#login{ /* login deleted from master */
width: 200px;
height: 70px;
background-color:#fff;
text-align: right;
margin:0;
float:right;
}
#menu {
width:100%;
height: 40px;
background-color:#C0C0FF;
margin:0;
padding:5px;
}
#leftbox {
width:160px;
background-color:#F2F5F7;
margin:0;
float:left;
padding:5px;
}
#main
{
margin:0;
padding:10px;
display:inline;
position:absolute;
float:left;
font-size:0.9em;
}
.productname
{
font-style:italic;
font-family:Arial;
color:#0096D1;
font-size:24px;
margin-left: 30px;
}
h1
{
color:#0096D1;
font-size: 1.3em;
}
.verticalText {
writing-mode:tb-rl;
filter:flipv fliph;
}
.repeaterTableFullBorder
{
border: 1px solid #c0c0ff;
width: 100%;
}
.repeaterTableFullBorder td, th {
border: 1px solid #c0c0ff;
}
Det funkar hos mig om man tar bort position: absolute; Men jag har inte en aning om varför det funkar när man tar bort:
<div id="header">
</div>
<div id="menu">
</div>
Förstår inte riktigt heller varför, men eftersom det fungerar så gör jag så.
Tack för hjälpen.