Positionering

[Jompan]

Varför lägger sig denna css riktigt i Firefox, dvs med vänsterställda marginaler, men centrerad (centrerad text) i Internet Explorer?

 

html {
font-size: 12px;
line-height: 150%; 
font-family: verdana;
   background-image: url('../img/bakgrund.gif'); 
background-repeat: repeat;
margin:0;
padding:0;
} 



body { 
   margin: 15px auto;
   width: 900px;
padding: 15px;
   background: #DEEDFD;
   border: 2px solid #660066;
}


#sidhuvud	{
height: 85px;
padding: 10px 0 0 0;
background-color: #C5E0FB;
margin-bottom: 15px;
} 


#container {
margin-top: 25px;
background: #E5F3FF; 
}

#col1 {
float: left;
width: 150px; 
padding-right: 0; 
padding-left: 0;
}

#col2 {
width: 510px; 
float: left; 
margin-left: 1px;
padding-right: 50px; 
padding-left: 25px;
border-left: 0 solid #000000; 
min-height: 450px;	
}


#col3 {
width: 140px; 
float: left; 
margin-left: 0;
padding-right: 0; 
padding-left: 0;
border-left: 0px solid #000000; 
}

#kolumnbox1 {
   -moz-border-radius: 20px 20px 20px 20px;
   -webkit-border-radius: 20px 20px 20px 20px;
float: left;
width: 125px;
border: 2px solid #c2c2c2;
background-color: #CCE6B3;
margin: 0;
margin-bottom: 20px;
padding: 10px;
}


#kolumnbox2 {
   -moz-border-radius: 20px 20px 20px 20px;
   -webkit-border-radius: 20px 20px 20px 20px;
right:175px;
width: 125px;
border: 2px solid #c2c2c2;
background-color: #C5E0FB;
margin: 0;
margin-bottom: 20px;
padding: 10px;
clear: left;
}


#kolumnbox3 {
right:175px;
width: 125px;
margin: 0;
padding: 10px;
clear: left;
}

 

Alltid dessa förvånande resultat!!

 

// Jompan

[Cluster]

Har inte kollat din kod så noga men du kan ju kan ju alltid lägga till värde för egenskapen text-align till lämpligt inline-objekt.

[Jonas__B]

det har inget med saker att göra men du har en del egenskaper satt till 0, vilket är onödigt då detta är standard.

Ta bort dessa så blir din kod lättare och mer överskådlig.

[Jompan]

Nu har jag rensat bort alla 0-koder. Allt funkar i Firefox och Chrome, men i Internet Explorer ligger fortfarande sidornas texter centrerade, och därtill har allt lagt sig i vänstermarginal, utom sidhuvudet som ligger centrerat över hela övre skärmdelen.

 

html {
font-size: 12px;
line-height: 150%; 
font-family: verdana;
   background-image: url('../img/bakgrund.gif'); 
background-repeat: repeat;
} 

body { 
   margin: 15px auto;
   width: 900px;
padding: 15px;
   background: #DEEDFD;
   border: 2px solid #660066;
}

#sidhuvud	{
height: 85px;
padding: 10px 0 0 0;
background-color: #C5E0FB;
margin-bottom: 15px;
} 

#container {
margin-top: 25px;
background: #E5F3FF; 
}

#col1 {
float: left;
width: 150px; 
}

#col2 {
width: 510px; 
float: left; 
margin-left: 1px;
padding-right: 50px; 
padding-left: 25px;
border-left: 0 solid #000000; 
min-height: 450px;	
}

#col3 {
width: 140px; 
float: left; 
border-left: 0px solid #000000; 
}

#kolumnbox1 {
   -moz-border-radius: 20px 20px 20px 20px;
   -webkit-border-radius: 20px 20px 20px 20px;
float: left;
width: 125px;
border: 2px solid #c2c2c2;
background-color: #CCE6B3;
margin-bottom: 20px;
padding: 10px;
}

#kolumnbox2 {
   -moz-border-radius: 20px 20px 20px 20px;
   -webkit-border-radius: 20px 20px 20px 20px;
right:175px;
width: 125px;
border: 2px solid #c2c2c2;
background-color: #C5E0FB;
margin-bottom: 20px;
padding: 10px;
clear: left;
}

#kolumnbox3 {
right:175px;
width: 125px;
padding: 10px;
clear: left;
}

h1	{
font-size: 14px;
font-weight: bold;
}

h2	{
font-size: 13px;
font-weight: bold;
font-variant: small-caps;
letter-spacing: 0.5px;
}

h3	{
font-size: 12px;
font-weight: bold;
}	

hr 	{
color: #ffcc99;
}	

p	{
font-family: verdana;
font-size: 12px;
color: #000000;
}

a 	{
text-decoration:none;
outline:0;
} 

a:link	{
color: #0033ff;
}

a:visited	{
color: #0033ff;
}

a:hover	{
color: #006600;
}	

a:active {
color: #0033ff;
}

#sidfot {
height: 20px;
padding: 1px 0 20px 0;
background:#CCE6B3;
margin-right: 1px;
margin-bottom: 5px;
margin-left: 1px;
}

#sidfot p {
font-weight: bold;
text-align: center;
font-size: 10px;
margin-left: 1px;
}

.clear {
clear: both;
}

.left {float: left;}
.right {float: right;}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

/* clearer fix */
div#content {overflow:auto;} 

 

Finns det någon lösning?

 

// Jompan

[Jonas__B]

du har text-align: center; i #sidfot p.

Kan du ha gjort fel i din html som gör att allt annat också blir centrerat?

 

Hur ser din html ut?

[Jompan]

Jag använder php med include, så det är många filer:

 

Huvud

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>

<head>
   <meta charset="utf-8">
   <title><?php echo $title; ?></title>
   <link rel="stylesheet" href="stil/standard.css">
<link rel="shortcut icon" href="img/favicon.ico">
</head>

<div id="sidhuvud">

<center>
<img src="img/logga.gif" width="450">

</div>

Mitten centrum

<?php include("incl/config.php"); ?>
<?php $title = "Mitten"; ?>
<?php include("incl/huvud.php"); ?>

<div id="container">
</div>

<div id="col1">
<?php include("incl/meny.php"); ?>
</div>

<div id="col2">

<h1>XXX</h1>

<h2>Yyy ...</h2>

Diverse CSS tar kontroll över dina sidor
CSS - (Cascading Style Sheets) är stilmallar som tillåter både den som skapar dokument och den som 

Diverse CSS tar kontroll över dina sidor
CSS - (Cascading Style Sheets) är stilmallar som tillåter både den som skapar dokument och den som 
sidor.</p>

</div>
</div>
</div>

<?php include("incl/sida.php"); ?>
<?php include("incl/fot.php"); ?>

 

Fot

<div id="sidfot">

<p>Webbplatsen uppdaterad ...
</p>

</div>

</body>
</html> 

 

Meny vänster

<style>

#meny ul {
padding:0;
margin:0;
margin-left:10px; 
margin-right:20px;
list-style:outside none;
font-weight: bold;
}

#meny li{
margin:0; 
padding:0; 
} 

#meny li {
border-bottom: 1px solid #660066;
}

#meny li:first-child {
border-top: 1px solid #660066;
border-bottom: 1px solid #660066;
}

#meny li a{
display:block; 
padding:8px;
} 

</style>

<div id="meny">

<ul> 
   <li><a href="index.php">Hem</a></li> 
   <li><a href="mitten.php">Guideprogram</a> 
   <li><a href="kontakt">Aktuella månadsmöten</a> 
   </ul>

</div>

 

Sida höger

<div id="col3">
<div id="kolumnbox1">
<p>
aaa Diverse CSS tar kontroll över dina sidor
Diverse CSS tar kontroll över dina sidor
</p>
</div>

<div id="kolumnbox2">
<p>
bbbbbbb Diverse CSS tar kontroll över dina sidor
Diverse CSS tar kontroll över dina sidor
</p>
</div>

</div>

<div class="clear">
</div>

 

Usch så rörigt!!

 

// Jompan

[Jompan]

Här kommer också en direkt länk till min 'flygande' sida, om det kan vara till någon hjälp för felanalys.

 

http://www.vskg.nu/awe/

http://www.vskg.nu/awe/

[Jonas__B]

i sidhuvud har du

<center>
<img src="img/logga.gif" width="450">

 

ta bort <center> eller lägg till en sluttagg efter bilden(loggan)

[Jompan]

Hjälper tyvärr inte.

Både 'huvud' och 'fot' täcker fortfarande hela skärmen, medan mellansektionen ligger vänsterställd.

 

// Jompan

[Jonas__B]

Fel jag hittade i källkoden

 

1. Ogiltliga tecken först i dokumentet.
   
2. style-del ska ligga i head-avsnittet
   
3. Ogiltligt tecken innan <style>-tagg, innan #col3 och innan #sidfot
   
4. Ingen bodytag efter </html>
   
5. Använd inte <center>-taggen. Använd istället css-propertyn text-align för att centrera
   
6. I col2 stänger du div-taggen för många gånger.
   
7. Ska inte #container omsluta allt innehåll? -Det gör det inte nu