Hej Kan du inte påverka något av HTML-koden alls? Inte ens den yttre strukturen med div- och span-elementen? Det här ser väl rätt så bra ut?CSS och float
Jag har ett antal boxar som jag försöker flyta på en sida. Nu har jag
fått det att fungera i IE 6, men alla andra browsers får tupptjuck av
det och havererar totalt. Finns det någon CSS guru där ute?
Och här kommer adressen: http://www.hallonsoda.se/css/
Tackar...
/andersSv: CSS och float
En av orsakerna till att det blir konstigt är skillnaden mellan IE och andra webbläsare om hur breddangivelser tolkas. IE tolkar det som bredden hos innehållet + padding + border, medan standarden säger att width anger bredden hos innehållet.Sv: CSS och float
<code>
<html><head>
<style type="text/css">
html, body {
padding: 0px;
margin: 0px;
font-weight: normal;
font-family: verdana,helvetica,sans-serif;
font-size: 11px;
}
/* GENERAL */
form { padding: 0px; margin: 0px; }
h1 { font-size: 1.5em; }
h2 { font-size: 1.5em; font-weight: bold; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.2em; }
h5 { font-size: 1.1em; font-weight: bold; }
/* BOXMODEL */
#main {
width: 756px;
float: left;
background-image: url(/lda2/bg.gif);
background-repeat: repeat-y;
}
#megaad
{
float: left;
width: 756px;
background-color: Gray;
}
#top {
background-color: #ED6B14;
background: url(/lda2/cstopbg2.gif);
background-position: bottom left;
width: 742px;
margin: 0 0 0 13px;
}
#navigation
{
float: left;
width: 128px;
padding: 0 0 0 0px;
margin: 0px 5px 0px 10px;
voice-family: "\"}\"";
voice-family: inherit;
width: 128px;
}
html>body #navigation {
width:135px;
margin: 0px 5px 0px 15px;
}
.ad {
text-align: center;
float: left;
width: 601px;
margin: 0px 0 0px 0;
}
#senaste {
float: left;
width: 592px;
margin: 0px 0px 0px 5px;
}
#container {
float: left;
}
#content {
float: left;
}
#puff {
float: left;
width: 199px;
padding: 0 5px 5px 5px;
margin: 0 0 20px 0;
border-left: 1px dotted #000000;
border-bottom: 1px dotted #000000;
voice-family: "\"}\"";
voice-family: inherit;
width: 189px;
}
html>body #puff {
width:189px;
}
#fotter {
float: left;
width: 755px;
background-color: #767847;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
/* - TOP ---------------------------------------------------------------------------- */
#top h1 {
padding: 0px;
margin: 0px;
}
#top .logo {
float: left;
padding: 0 0 0 10px;
border-left: 1px solid #000000;
}
#top .logo img{
border: 0px;
}
#top .logon {
float: right;
font-size: 1.2em;
}
#top .logon td {
font-size: 0.8em;
}
#top .logon .boxesUser{
border: black 1px solid;
width: 130px;
font-size: 1em;
}
/* -- fix for GnällSvensson -- */
#top .logon .svensson
{
padding: 0 0 0 2px;
}
#top .logon .boxesPw{
border: black 1px solid;
width: 60px;
font-size: 1em;
}
#top .logon .button{
border: black 1px solid;
}
/* navibar "du är här:" */
#navibar {
background-color: #E7651A;
background-repeat: repeat-y;
background-image: url(/lda2/navibar3.gif);
border-top: 1px solid black;
border-bottom: 1px solid black;
clear: both;
}
#navibar ul {
padding: 2px 0px 2px 150px;
margin: 0;
}
#navibar .first {
display: inline;
background: none;
padding: 0 0.9em 0 0px;
font-weight: bold;
}
#navibar li {
display: inline;
background: url(/lda2/navibarplutt.gif) no-repeat 0px 3px;
padding: 0 0.9em 0 9px;
}
#navibar .desc {
display: inline;
font-weight: bold;
background: url() no-repeat 0px 0px;
padding: 0px 0px 0px 0px;
}
#navibar a
{
color: Black;
}
/* - AD -------------------------------------------------------------------------------- */
.ad p {
margin: 10px 0 10px 0;
padding: 0;
}
.ad img {
margin: 10px 0 10px 0;
padding: 0;
}
/* - NAVIGATION ------------------------------------------------------------------------ */
/* first level */
#navigation ul
{
padding: 0 0 0 9px;
margin: 0;
list-style-type: none;
}
#navigation li
{
padding: 0.2em 0 0 3px;
/* background: url(/lda2/p2.gif) no-repeat 0;*/
}
#navigation a {
text-decoration: none;
color: #7B7B7B;
}
/* second level */
#navigation ul
{
padding: 0px;
margin: 0px;
list-style-type: none;
}
#navigation ul ul
{
padding: 0 0 0 1em;
margin: 0px;
list-style-type: none;
}
#navigation ul ul ul
{
padding: 0 0 0 1em;
margin: 0;
list-style-type: none;
}
/* - CONTENT --------------------------------------------------------------------------- */
#content .text
{
width: 400px;
padding: 0 13px 0 7px;
voice-family: "\"}\"";
voice-family: inherit;
width: 380px;
}
html>body #content .text {
width:380px;
}
/* för fotoalbum och liknande */
#content .full {
width: 590px;
padding: 0 13px 0 7px;
voice-family: "\"}\"";
voice-family: inherit;
width: 570px;
}
/* - PUFF ----------------------------------------------------------------------------- */
#puff h3{
font-weight: bold;
font-size: 1.1em;
padding: 0 0 0 17px;
background: url(/lda2/pluppG.gif) no-repeat 0px;
}
#puff a {
/*padding: 0 0 0 9px;
background: url(/lda2/navibarplutt.gif) no-repeat 0px;*/
color : #7B7D4A;
font-weight: bold;
text-decoration: none;
}
#puff a:hover {
/*padding: 0 0 0 9px;
background: url(/lda2/navibarplutt.gif) no-repeat 0px;*/
color : #E76518;
font-weight: bold;
text-decoration: none;
}
#puff hr {
height: 1px;
border-top: none;
border-right: none;
border-bottom: 1px dotted black;
border-left: none;
}
#senaste .column
{
width: 188px;
float: left;
padding-right: 8px;
}
#senaste h3{
border-top: 1px dotted black;
font-weight: bold;
font-size: 1.2em;
padding: 0 0 0 17px;
background: url(/lda2/pluppG.gif) no-repeat 0px;
}
#senaste a {
color : #7B7D4A;
/*font-weight: bold;*/
text-decoration: none;
}
#senaste a:hover {
color : #E76518;
/*font-weight: bold;*/
text-decoration: none;
}
/* - FOTTER ----------------------------------------------------------------------------- */
#fotter p
{
padding: 5px 0 5px 20px;
margin: 0;
}
#fotter a
{
color : #000000;
font-weight: bold;
text-decoration: none;
}
#fotter a:hover
{
text-decoration: underline;
}
/* - OLD FÖR KOMPABILITET MED "GAMMAL" CS-HTML ------------------------------------------ */
.bildtext
{
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
FONT-SIZE: 10px; color: #FFFFFF
}
.bildtext2
{
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
FONT-SIZE: 10px; color: #000000
}
/* ANDERS TESTAR ------------- */
.dt13
{
color:Black;
line-height: 1.3em;
border: 1px solid blue;
}
.dt13 ul
{
padding: 0;
margin: 0;
}
.dt13 li
{
list-style-type: none;
}
.dt13 li a
{
color:Black;
text-decoration: none;
padding: 0 0 0 12px;
background: url(/lda2/rgp1.gif) no-repeat 0px;
}
.dt13 li a:hover
{
text-decoration: underline;
padding: 0 0 0 12px;
background: url(/lda2/navibarplutt.gif) no-repeat 0px;
}
.rad1
{
background-color:EFEEC5;
}
</style>
<style type="text/css">
body {
font: normal 11px verdana, helvetica, sans-serif;
}
#content {
width: 590px;
}
.dt13 {
width: 380px;
border: 1px solid blue;
}
.box0, .box1, .box2, .box3, .box4, .box5, .box6 {
display: block;
}
.box0, .box1 {
width: 100%;
border-bottom: 1px dashed black;
}
.box2, .box3, .box4, .box5 {
width: 48%;
margin: 0;
padding: 0;
}
.box2, .box4, .box5 {
float: left;
border-right: 1px dashed black;
border-bottom: 1px dashed black;
}
.box5 {
border-bottom: none;
}
.box3 {
float: right;
padding: 5px;
}
.box6 {
clear: both;
border-top: 1px dashed black;
}
</style></head>
<body><h3>CSS anpassning IE/Firefox</h3>
Jag har lyft ut själva boxarna från resten av desigen för att göra det hela lite lättare att förstå. <br>
När jag tittar på denna sidan i IE6 ser det ut precis som jag vill ha det.<br>
Firefox (och andra) däremot gillar det inte riktigt. <br><br>
Kommentarer/hjälp mottages tacksamt på larsson@hallonsoda.se :)
<p>Ps. Jag kan inte påverka HTML-koden utan bara CSS.</p>
<hr>
<p> </p>
<div id="content">
<div class="text">
<div class="dt13">
<span class="box0"><img src="ny%20www.hallonsoda.se_filer/2939905.jpg" align="right" height="150"><h1>0. Det var Kalas i stan</h1><p>Kalasturnen
har dragit vidare och inte lämnat många spår efter sig. Vi kommer
uppdatera med bilder och recensioner under helgen, ta en titt längst
ner under "Nytt på sajten".</p><p>Vi har nu laddat upp allting till sajten, spana in de fina bilderna!</p><p></p><ul><li class="boxUrl">Läs mer om Kalas här</li></ul></span>
<span class="box1"><h3>1. Nyhetsnotiser</h3><ul><li class="rad1">Mördande legender 2 - 2001-01-21 00:00:00</li><li>Djävulen och jag - 2001-02-04 00:00:00</li><li class="rad1">Kejsarens nya stil - 2001-02-10 00:00:00</li><li>Chocolat - 2001-03-03 00:00:00</li><li class="rad1">Beck - Hämndens Pris - 2001-07-27 00:00:00</li></ul><ul><li>Fler nyhetsnotiser här...</li></ul></span>
<span class="box2"><h3>2. För vi har tagit studenten</h3><p>Spana in alla hundratals bilder från studentbalen på Marienlyst, After School, efterfester och självklart utspringet!</p><ul><li class="boxUrl">Spana in här</li></ul></span>
<span class="box3"><h3>3. Konsert</h3><p></p><p>Här
skriver vi lite fint om en konsert som vi varit och lyssnat på. Mest
sådär för att fylla ut och visa att det går att skriva någonting här.
Fina grejor va.</p>
<p>Här skriver vi lite fint om en konsert som vi
varit och lyssnat på. Mest sådär för att fylla ut och visa att det går
att skriva någonting här. Fina grejor va.</p>
<p>Här skriver vi lite
fint om en konsert som vi varit och lyssnat på. Mest sådär för att
fylla ut och visa att det går att skriva någonting här. Fina grejor va.</p>
<p>Här
skriver vi lite fint om en konsert som vi varit och lyssnat på. Mest
sådär för att fylla ut och visa att det går att skriva någonting här.
Fina grejor va.</p><p></p></span>
<span class="box4"><h3>4. utfyllnad</h3><p>Nu har jag skrivit lite om något annat som vi har gjort här på citysajten. Bara för att folk ska vilja läsa lite mer om det.</p></span>
<span class="box5"><h3>5. mer utfyllnad</h3><p>Detta
är sistd Detta är sistd Detta är sistd Detta är sistd Detta är sistd
Detta är sistd Detta är sistd Detta är sistd Detta är sistd Detta är
sistd anDetta är sistdanDetta är sistdan. Detta är sista grejen på
denna sidan. Dett denna sidan. Detta är sista grejen på denna sidan.
Detta är sista grejen på denna sidan. <br>Detta är sista grejen på denna sidan. Detta är sista grejen på denna sidan. </p></span>
<span class="box6"><h3>6. Absolut sista</h3><p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Sed venenatis purus
at elit. Quisque id elit. Phasellus augue sapien, fringilla ut, laoreet
quis, bibendum non, massa. Donec interdum, ligula interdum convallis
placerat, nunc est euismod velit, vitae nonummy nunc nunc a arcu. Ut
vulputate dictum nulla. Quisque varius luctus erat. Suspendisse
pharetra ipsum eu felis. Nullam auctor pretium augue. Pellentesque
gravida aliquet turpis. Maecenas in augue. Nam et dolor eget ipsum
luctus mollis. Mauris id tortor. Fusce enim leo, adipiscing a,
vestibulum nec, varius vel, tellus. Nullam porta diam ut enim. Sed
nonummy nibh vitae neque. Proin in orci. Nunc ultricies ullamcorper
augue.</p></span>
</div>
</div></div>
<p> </p>
<p> </p>
</body>
</html>
</code>