CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

super_glenn Nybegynder

11. april 2006 - 12:36 Der er 7 kommentarer

Float problem i Opera og Safari

Hej Exp'ter
Mit problem er jeg er igang med at opbygge et design og det ser fint ud i IE og FF men i Opera og Safari(iCapture) rykker den venstre indholds boks sig 1px så der kommer et mellemrum på 1px mellem de to bokse i midten. Jeg kan simpelthen ikke selv se hvad fejlen er...

Her er css'en:

html{
margin: 0px;
padding: 0px;
}

body{
margin: 0px;
padding: 0px;
background-color: #FFF;
}

#container{
margin-right: auto;
margin-left: auto;
width: 100%;
height: 100%;
background-color: #FFF;
}

#top_bg{
margin: 0px;
padding: 0px;
width: 100%;
height: 60px;
background-color: #006699;
}

#top_indhold{
margin-right: auto;
margin-left: auto;
padding: 0px 0px 0px 0%;
width: 78%;
height: 60px;
}

#container_indhold{
margin: 0px auto 0px auto;
width: 80%;
}

#navigation{
margin: 0px auto 0px auto;
padding: 1%;
width: 98%;
height: 18px;
background-color: #539ac2;
}

#indhold{
margin: 0px auto 0px auto;
padding: 1%;
width: 68%;
height: 500px;
float: left;
background-color: #dde6df;
}

#soejle{
margin: 0px auto 12px auto;
padding: 1%;
width: 28%;
height: 500px;
float: right;
background-color: #b3de3c;
}

#bund{
margin: 0px auto 12px auto;
padding: 1%;
width: 78%;
height: 18px;
background-color: #006699;
clear: both;
}

p{
padding: 0px;
margin: 0px;
font: 12pt verdana,arial,helvetica,sans-serif;
color: #000;
}

h2{
padding: 16px 0px 0px 0px;
margin: 0px;
font: 22px trebuchet ms,verdana,helvetica,sans-serif;
color: #FFF;
}

Her er xhtml'en:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<title>Sidens titel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="stil.css" />
<link rel="shortcut icon" href="favicon.png" />
<link rel="alternate" title="RSS feed" href="rss_feed.xml" type="application/rss+xml" />

</head>

<body>

<div id="container">


<div id="top_bg">


<div id="top_indhold">

<h2>Sidens titel</h2>
</div>
</div>


<div id="container_indhold">


<div id="navigation">
<p>links her</p>

</div>


<div id="indhold">
<p>indhold her</p>
</div>


<div id="soejle">
<p><i>Links og andet her</i></p>

</div>

</div>


<div id="bund">
<p><u>Dette design er lavet af Niels Kjølholt</u></p>
</div>

</div>

</body>

</html>

Det kan ses her www.kapaki.dk/Noget/

Synes godt om

super_glenn Nybegynder

11. april 2006 - 12:37 #1

Btw. jeg vil gerne have andre råd i forhold til hvad god css form er og lign.

På forhånd tak

Synes godt om

mclemens Nybegynder

11. april 2006 - 13:54 #2

html, body{
margin: 0px;
padding: 0px;
height:100%;
}

#container{
margin: 0px auto;
height: 100%;
background: #FFF;
}

#top_bg{
height: 60px;
background: #006699;
}

#top_indhold{
margin: 0px auto;
width: 78%;
height: 60px;
}

#container_indhold{
margin: 0px auto;
width: 80%;
height:500px;
background: #b3de3c;
}

#navigation{
margin: 0px auto;
padding: 1%;
width: 98%;
height: 18px;
background: #539ac2;
}

#indhold{
padding: 1%;
width: 68%;
height: 100%;
float: left;
background: #dde6df;
}

#soejle{
padding: 1%;
width: 28%;
height: 100%;
float: right;
background: #b3de3c;
}

#bund{
margin: 12px auto;
padding: 1%;
width: 78%;
height: 18px;
background: #006699;
clear: both;
}

p{
padding: 0px;
margin: 0px;
font: 12pt verdana,arial,helvetica,sans-serif;
color: #000;
}

h2{
padding: 16px 0px 0px 0px;
margin: 0px;
font: 22px trebuchet ms,verdana,helvetica,sans-serif;
color: #FFF;
}

Synes godt om

mclemens Nybegynder

11. april 2006 - 14:00 #3

Problemet var at padding ikke øgede boksens str. i FF og
dem du nævnte derfor height og baggrund på #container_indhold ;)

Synes godt om

super_glenn Nybegynder

11. april 2006 - 16:27 #4

Hmm det ser stadig noget underligt ud i Opera: www.kapaki.dk/Noget/

Synes godt om

mclemens Nybegynder

11. april 2006 - 22:22 #5

Det har du ret i...
kan ikke lige se fejlen :/

Synes godt om

mclemens Nybegynder

11. april 2006 - 23:47 #6

er ikke vant til at lave % css men here goes...
FF og IE= ok har ikke safari og opera ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><title>Ingen titel</title>

<style type="text/css">

html, body{margin:0px;padding:0px;height:100%;width:100%;}

.clearit{clear: both;font-size:0px;line-height:0px;}

.clearitspace{clear: both;font-size:1px; height: 12px;}

#indholdtop{
width: 80%;
padding: 0px 10%;
height: 60px;
background: #006699;
}

#mainindhold{
margin: 0px 10%;
width: 80%;
background: #b3de3c;
}

#navigation{
margin: 0px auto;
padding: 1%;
width: 98%;
height: 18px;
background: #539ac2;
}

#indhold{
padding: 1%;
width: 68%;
height: 500px;
float: left;
background: #dde6df;
}

#soejle{
padding: 1%;
width: 28%;
height: 500px;
float: left;
background: #b3de3c;
}

#bund{
margin: 12px auto 0px auto;
padding: 1%;
width: 78%;
height: 18px;
background: #006699;
}

p{
padding: 0px;
margin: 0px;
font: 12pt verdana,arial,helvetica,sans-serif;
color: #000;
}

h2{
padding: 16px 0px 0px 0px;
margin: 0px;
font: 22px trebuchet ms,verdana,helvetica,sans-serif;
color: #FFF;
}

</style>

<script type="text/javascript">

</script>

</head>

<body>

<div id="indholdtop">

<h2>Sidens titel</h2>

</div>

<div id="mainindhold">


<div id="navigation">
<p>links her</p>
</div>


<div id="indhold">
<p>indhold her</p>
</div>


<div id="soejle">
<p><i>Links og andet her</i></p>
</div>

<div class="clearit"> </div>

</div>


<div id="bund">
<p><u>Dette design er lavet af Niels Kjølholt</u></p>
</div>

<div class="clearitspace"> </div>

</body></html>

Synes godt om

mclemens Nybegynder

08. juli 2006 - 13:15 #7

Hjalp det?

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS