CSS-problem i Firefox

[Aja]

Hej!

Jag har skapat en centrerad hemsida som fungerar utmärkt i Internet Explorer, men inte i Firefox. Jag kan inte hitta vad det är som felar i min css-fil. Problemet uppstår där jag har två boxar intill varandra (textruta2 och imagebox). De kommer inte alls upp i firefox, trots att det ser bra ut i Dreamweaver och IE. Kan någon hjälpa mig? Så här ser den ut:

@charset "utf-8";
/* CSS Document */

/* Bodyformat */
 body
  {
  margin:0px auto;
  padding: 5px;
  font: 11px Verdana, Arial, Helvetica, sans-serif;
  line-height: 14px;
  text-align:center;
  background-color: #000000; 
  }
 
 p  {
  line-height: 14px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-style: normal;
  }
  
 hr  {
  margin-left:0px;
  margin-right:0px;  
  color:#778899;
  } 
  
/* Rubrikformat */ 
 h1 {
  font-family : Trebuchet, Arial, Helvetica, sans-serif;
  font-size : 24px;
  font-weight : bold;
  padding: 6px;
  }
  
 h2 {
  font-family : Trebuchet, Arial, Helvetica, sans-serif;
  font-size : 20px;
  font-weight : normal;
  }
  
 h3 {
  font-family : Trebuchet, Arial, Helvetica, sans-serif;
  font-size : 16px;
  }

/*Tabellformat*/
  
 table {
  width: 720px;
  } 

 td {
  padding: 0px 10px 0px 10px;
  }
   
/* Länkformat*/
 
 a:link
  {
  color : #778899;
  text-decoration : none;
  }
 
 a:visited {
  color : #778899;
  text-decoration : none;
  }
 
 a:hover {
  color : #808080;
  text-decoration : none;
   }
      
/* Boxformat */

/* #container
  {
  text-align:center;
  margin: auto auto;
  } */
  
 #sidlayout
  {
  margin-left: auto;
  margin-right:auto;
  width:750px;
  text-align:left;
  padding: 5px 5px 5px 5px;
  border: 1px solid #778899;
  background-color: #ffffff;
  } 
 
 #header
  {
  position: relative;
  margin: auto auto;
  width:700px;
  height: 100px;
  padding: 5px 5px 5px 5px;
  background-image:url(../bilder/Sidhuvud.JPG);
  }
 
 #menu
  {
  position: relative;
  margin:auto auto;
  width:720px;
  height: 25px;
  padding: 5px 5px 5px 5px;
  background-color:#ffffff;
  }
 
 #content
  {
  position: relative;
  margin: auto auto;
  width: 700px;
  background-color:#ffffff;
  padding: 5px 5px 5px 5px;
  }
 
 #textruta1
  {
  position: relative;
  margin: auto auto;
  width:695px;
  height:100px;
  padding: 5px 5px 5px 5px;
  background-color:#ffffff;
  } 
 
 #textruta2
     {
  float:left;
  left:0px;
  margin: 0px auto;
  width:430px;
  height:200px;
  padding: 5px 5px 5px 5px;
  background-color:#ffffff;
  }
  
 #textruta2_kontakt
  {
  float:left;
  left:0px;
  margin: 0px auto;
  width:425px;
  height:440px;
  padding: 5px 5px 5px 5px;
  background-color:#ffffff;
  } 

 #imagebox
  {
  margin: 0px auto;
  float:left;
  width: 250px;
  height: 200px;
  padding: 5px 5px 5px 5px;
  background-color:#ffffff;
  }
   
 #textruta3 
  {
  float:left;
  margin: auto auto;
  width:695px;
  padding: 5px 5px 5px 5px;
  background-color:#ffffff;
  } 
   
 #footer 
  {
  position: relative;
  left:0px;
  margin: auto auto;
  width:700px;
  padding: 5px 5px 5px 5px;
  background-color:#ffffff;
  }

Hälsningar
Gunilla

[Alexa]

Det är lättare om man också har html-koden.
För att få min hemsida centerad skriver jag
margin-left: auto;
margin-bottom: auto;

Använder man Internet Explorer 7 eller tidigare följs inte samma standard som hos Firefox. Använder man Internet Explorer 8 som kom förra veckan så är det problemet fixat och sidorna ser likadana ut.

Uppdateringen är gratis för alla som har Windows XP eller Windows Vista.

Enligt W3C CSS så ska #textruta3 < br/>  { heta #textruta3 {

[Aja]

Alexa @ 2009-03-29, 16:09
Det är lättare om man också har html-koden.
För att få min hemsida centerad skriver jag
margin-left: auto;
margin-bottom: auto;

Använder man Internet Explorer 7 eller tidigare följs inte samma standard som hos Firefox. Använder man Internet Explorer 8 som kom förra veckan så är det problemet fixat och sidorna ser likadana ut.

Uppdateringen är gratis för alla som har Windows XP eller Windows Vista.

Enligt W3C CSS så ska #textruta3 < br/>  { heta #textruta3 {

Hej!

Problemet är inte att det inte funkar i IE7. Där funkar det utmärkt. Problemet är att det inte funkar i Firefox och troligen inte heller i IE8.

Jag använder margin: auto;

Det gör att sidan blir centrerad. Men jag måste göra något fel eftersom container-diven inte sträcker sig över hela sidan utan klipps av efter textruta1.

Det som jag inte riktigt förstår är när jag ska använda position:reltive: respektive float:left för mina olika textboxar.

Använder jag det ena så blir det fel på ett sätt och använder jag det andra så blir det fel på ett annat sätt.

Jag lägger ut en provsida ett par timmar på www.academicatravel.se så kan du kolla där. Jag har ändrat något i css-filen sedan jag kopierade in den här.

Gunilla

[Daniel_82]

Testa lägga till "display: inline;"  i CSS-koden för båda dessa boxarna.

Dessutom bör du ta bort installationsfilen för ditt CMS-program Moodle.
Länken du angav i ditt första inlägg leder till denna installationsfil och har du den kvar så kan någon elak typ ställa till det rejält för dig.
Har du installerat ditt CMS fullständigt så bör du ta bort installationsfilen!

[Aja]

Testa lägga till "display: inline;"  i CSS-koden för båda dessa boxarna.

Dessutom bör du ta bort installationsfilen för ditt CMS-program Moodle.
Länken du angav i ditt första inlägg leder till denna installationsfil och har du den kvar så kan någon elak typ ställa till det rejält för dig.
Har du installerat ditt CMS fullständigt så bör du ta bort installationsfilen!

Tack för tipsen. Det funkade dock inte med dispaly:inline;.

Har du något annat tips att prova?

Gunilla

[Aja]

Testa lägga till "display: inline;"  i CSS-koden för båda dessa boxarna.

Dessutom bör du ta bort installationsfilen för ditt CMS-program Moodle.
Länken du angav i ditt första inlägg leder till denna installationsfil och har du den kvar så kan någon elak typ ställa till det rejält för dig.
Har du installerat ditt CMS fullständigt så bör du ta bort installationsfilen!

Tack för tipsen. Det funkade dock inte med dispaly:inline;.

Har du något annat tips att prova?

Gunilla

Nu har jag fått det att funka!

Gunilla