hjelp til å midstille i IE og Firefox

[Beyma]

Først brukte jeg bare align og auto, men så ser jeg at boksen min er midstilt i firfox, men i IE så er den til venstre..

 

Jeg lager en blogg lignende side med css og vil ha den midstilt, men får det ikke til..

 

Kan noen hjelpe en nybegynner?

[mikk-]

Lag et blokkelement med begrenset bredde, og sett margin-egenskapen til å ha "auto" i venstre- og høyreretning.

 

Med andre ord:

body {
 width: 500px;
 margin: 0 auto;
}

[Beyma]

Det fungerte ikke :\

 

Koden jeg bruker er slik

div.container
{margin-left:auto;margin-right:auto;
width:800px;
padding:2px;
}

 

Hva må jeg gjøre annerledes?

[uranus]

I body, skriv text-align: center;

 

Og på diven du sentrerer det hele med, skriver du:

 

text-align: left;

margin: 0 auto;

 

Da tenker jeg den er midtstilt i både IE og FF

[Erik B.]

Det fungerte ikke :\

 

Koden jeg bruker er slik

div.container
{margin-left:auto;margin-right:auto;
width:800px;
padding:2px;
}

 

Hva må jeg gjøre annerledes?

 

Prøv med denne:

 

div.container
{
margin:0 auto;
width:800px;
padding:2px;
height:600px; //Still selv
}

 

 

Er ganske sikker på du ma ha definert en høyde for at det skal virke.

[Beyma]

Det fungerte ikke :\

 

Koden jeg bruker er slik

div.container
{margin-left:auto;margin-right:auto;
width:800px;
padding:2px;
}

 

Hva må jeg gjøre annerledes?

 

Prøv med denne:

 

div.container
{
margin:0 auto;
width:800px;
padding:2px;
height:600px; //Still selv
}

 

 

Er ganske sikker på du ma ha definert en høyde for at det skal virke.

Hmm.. funket heller ikke

[Steinmann]

Det fungerte ikke :\

 

Koden jeg bruker er slik

div.container
{margin-left:auto;margin-right:auto;
width:800px;
padding:2px;
}

 

Hva må jeg gjøre annerledes?

 

Prøv med denne:

 

div.container
{
margin:0 auto;
width:800px;
padding:2px;
height:600px; //Still selv
}

 

 

Er ganske sikker på du ma ha definert en høyde for at det skal virke.

Fail.

 

 

Jeg er rimelig sikker på at det er noe annet enn dette som er problemet. Gi oss komplett html og css så har vi kanskje en sjans til å hjelpe deg.

[Torjus]

Det fungerte ikke :\

 

Koden jeg bruker er slik

div.container
{margin-left:auto;margin-right:auto;
width:800px;
padding:2px;
}

 

Hva må jeg gjøre annerledes?

 

Bytt koden med:

 

div.container {
margin: 0: auto;
width:800px;
padding:2px;
}

 

Hvis ikke det virker så er det noe annet som er galt.

[mikk-]

div.container {
margin: 0: auto;
width:800px;
padding:2px;
}

 

Hvis ikke det virker så er det noe annet som er galt.

 

 

div.container {
margin: 0 auto;
width:800px;
padding:2px;
}

 

Fixed. For øvrig det samme som jeg skrev i min første post.

 

Som Steinmann sier, legg ut hele dokumentet, HTML og CSS.

[Beyma]

Okei..

 

Her er css

body {background-image: url('08original.gif');
}

h2 
{
color: #808080;
}

p 
{
color: #ffffff;



font-family: arial;
}

ul.ego
{color: #808080;

}

a:visited  {color: #000000; text-decoration: none}
a:link  {color: #000000; text-decoration: none}
a:active  {color: #000000; text-decoration: none}


div.container {
margin: 0: auto;
width:966px;
padding:2px;
margin: auto
}

div.info {
float: right;
width:150px;
height: 100%;
border-left: 3px dotted #808080;
padding: 5px;
}

div.header
{width:966px;height:368px;
background-image: url('header.png');
clear:left;
vertical-align: bottom;
}

div.menuline
{
width: 817px;
height: 50px;
}

#menu
{
float:left;
height: 50px;
width: 120px;
background: url(kanppen.png) no-repeat left top;
text-align: center;
vertical-align: middle;

}

div.content
{
background-color: #d1d1d1;
width:817px;
height:400px;

}

div.top
{background-image: url('toppstrek.png');
width:817px;
height:20px;
}

div.bottom
{
background-image: url('bunnstrek.png');
text-align:center;
height: 20px;
width:817px;
}

img
{
border:2px solid black;
}

ul.none
{
list-style-type: none;
}

ul.menu
{
float:left;
padding:0;
margin:0;
list-style-type:none;
background-image: url('knappen.png');
}

ul.mheader
{
float:left;
width:80px;
padding:0.2em 0.6em;
margin:0;
list-style-type:none;
border-bottom:1px solid #808080;
border-right:1px solid #808080;
}

a
{
float:left;
width:5.5em;
text-decoration:none;
color:white;
padding:0.2em 0.6em;
border-bottom:1px solid #808080;
}

li {display:inline}

a:hover {background-color:#8ddcca}

a.stil
{text-decoration:none;}

 

<html>
<head>
<title>playGROUND</title>
<link rel="stylesheet" type="text/css"
href="classicgrey.css">
</head>
<body>
<div class="container">

<div class="header">
</div>
<div class="menuline">
<div id="menu"><p>Home</p></div><div id="menu"><p>Foto</p></div><div id="menu"><p>Fun</p></div>
</div>
<div class="top">
</div>
<div class="content">
<div class="info"> INFO. Her kan det stå masse tekst. masse tekst...jajajja.. masse tekst.</div>


Hei jeg heter Christer





:)<div>

<div class="bottom"></div>


</div>
</body>
</html>

[mikk-]

HTML-en din er jo helt skakkjørt. Du åpner mange flere elementer enn du lukker. Container-diven lukkes ikke, kanskje det kan ha noe med saken å gjøre?

 

For øvrig har du mange elementer med ID-en "menu". ID-er skal være unike! (Klasser kan deles mellom flere elementer.)

 

Rydd opp i HTML-en din, eventuelt bruk HTML-validatoren på w3c.org, så skal du se det blir ordnings!

[uranus]

Hadde funka det jeg sa men

[mikk-]

Sikker? Kommer ikke FF til å ignorere text-align-egenskapen på div-en fordi det er et blokkelement (som ikke påvirkes av text-align)? Da vil vel det som står igjen til å påvirke utseendet i FF være "margin: auto;", som er det samme som jeg sa? Eller tar jeg feil?

[uranus]

Prøv, jeg bruker det på min side (sleit med det samme i dag tidlig, så leste jeg meg frem til denne løsningen).

 

Du kan selvfølgelig legge til kvote rundt koden slikt at den kun funker i IE hvis du vil, men det funker fint for meg

[mikk-]

Poenget er jo at margin:auto; tydeligvis ikke har noen effekt i akkurat dette tilfellet (sannsynligvis fordi noe er feil med HTML-koden), og at text-align:auto; ikke skal ha noen effekt i Firefox.

[uranus]

Hmm, foreslår du poster absolutt all kode jeg trådstarter, prøve på lokalserver

[Beyma]

den ligger på www.freewebs.com/crimar til jeg har fått kjøpt mitt eget domene..

[Demantios]

Litt overdreven bruk av div's

 

I utgangspunktet er det ikke verre enn slik

 

body {
text-align: center; }
#wrapper {
width: 800px;
margin: 0px auto; }

 

Evnt med menyer og slik

 

body {
text-align: center; }
#header {
width: 800px;
margin: 0px auto; }
#menu {
float: left;
width: 100px;
margin: 0px auto; }
#content {
float: left;
width: 700px;
margin: 0px auto; }

 

Tar forbehold om mulige feil

Endret 2. oktober 2008 av PepsiCo

[haugsand]

Det trengs en gyldig doctype-deklarasjon for at margin: auto; skal bli tolket korrekt av Internet Explorer.

[Vindstille]

Det trengs en gyldig doctype-deklarasjon for at margin: auto; skal bli tolket korrekt av Internet Explorer.

Jepp. Legg dette øverst i HTML-koden.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Endret 2. oktober 2008 av JonT