Just nu i M3-nätverket
Jump to content

CSS-problem i Firefox


Aja

Recommended Posts

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

Link to comment
Share on other sites

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 {

Link to comment
Share on other sites

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
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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
Link to comment
Share on other sites

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
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...