Frågan#1
Hej,
Jag får inte mina lager att fungera, så att de ser lika ut, på alla browsers.
Opera, netscape, mozilla, conqurer - fungerar de kanon på.
Internet Explorer - blir det fel.
sidan finns på:
http://medieteknik.bth.se/miab02/cv/
bifogar skrämdump på hur sidan ser ut i internet explorer, resp. firefox.
css mallen jag använder är denna:
/* --- == Body == --- */
body {
text-align: center;
margin: 0px;
padding: 0px;
font-family: verdana, sans-serif;
font-size: 12px;
background-color: #aaa;
background-image: url(../images/bakgrund_01.gif);
background-repeat: repeat;
}
html>body { /* Fixar Opera */
font-size: small;
}
/* --- == Bakgrund == --- */
#bakgrund {
width: 750px;
margin: 0 auto;
background-color: #fff;
color: #333;
border: 1px solid #D9DFEB;
line-height: 130%;
text-align: left;
background-image: url(../images/bakgrund_orginal.gif);
background-repeat: repeat-y;
padding: 0;
clear: both;
}
/* --- == Logo == --- */
#logo {
height: 47px;
padding: 4px;
background-color: #ddd;
border-bottom: 1px solid #000000;
background-image: url(../images/topp_orginal.gif);
background-repeat: no-repeat;
clear: both;
}
#logo h1 {
padding: 0;
margin: 0;
}
/* --- == Meny == --- */
#meny {
position: relative;
margin: 0;
padding: 0;
list-style: none;
background-color: #fff;
clear : both;
}
#menu {
border-bottom : 1px solid #000000;
margin : 0;
padding: 6px 0 30px 0;
}
#menu ul, #menu li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#menu a:link, #menu a:visited {
float: left;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #999;
}
#menu a:link#vald, #menu a:link.active, #menu a:visited.active, #menu a:visited#vald, #menu a:hover {
padding-bottom: 2px;
background: transparent;
color: #000;
}
#menu a:hover {
color : #000;
}
body.section-1 #menu li#nav-1 a,
body.section-2 #menu li#nav-2 a,
body.section-3 #menu li#nav-3 a,
body.section-4 #menu li#nav-4 a,
body.section-5 #menu li#nav-5 a,
body.section-6 #menu li#nav-6 a {
background : #fff;
border-bottom : 1px solid #fff;
color : #000;
}
#menu #subnav-1,
#menu #subnav-2,
#menu #subnav-3,
#menu #subnav-4,
#menu #subnav-5,
#menu #subnav-6 {
display : none;
width: 400px;
height: 14px;
}
body.section-1 #menu ul#subnav-1,
body.section-2 #menu ul#subnav-2,
body.section-3 #menu ul#subnav-3,
body.section-4 #menu ul#subnav-4,
body.section-5 #menu ul#subnav-5,
body.section-6 #menu ul#subnav-6 {
background : #fff;
display : inline;
position : absolute;
left : 0;
top : 21px;
}
body.section-1 #menu ul#subnav-1 a,
body.section-2 #menu ul#subnav-2 a,
body.section-3 #menu ul#subnav-3 a,
body.section-4 #menu ul#subnav-4 a,
body.section-5 #menu ul#subnav-5 a,
body.section-6 #menu ul#subnav-6 a {
background : #fff;
border : none;
border-left : 1px solid #ccc;
color : #999;
font-size : smaller;
font-weight : bold;
line-height : 10px;
margin-right : 4px;
padding : 2px 10px 2px 10px;
text-decoration : none;
}
#menu ul a:hover {
color : #f00 !important;
}
/* --- == Vänster kolumn == --- */
#vanster_kolumn {
float: left;
width: 492px;
margin: 0;
}
#vanster_kolumn h1 { margin: .5em 0 .5em .3em; }
#vanster_kolumn h2 { margin: .5em 0 .5em .3em; }
#vanster_kolumn p { margin: 0 1em 1em .3em; }
/* --- == Höger kolumn == --- */
#hoger_kolumn {
margin-left: 492px;
max-width: 255px;
padding: 1px;
}
#hoger_kolumn h1 { margin: .5em 0 .5em .3em; }
#hoger_kolumn h2 { margin: .5em 0 .5em .3em; }
#hoger_kolumn p { margin: .5em 0 1em .3em; }
/* --- == Bilder == --- */
#bild_vanster {
float: left;
margin: 4px 4px 4px 4px;
padding: 3px;
}
#bild_hoger {
float: right;
margin: 4px 4px 4px 4px;
padding: 3px;
}
/* --- == Övrigt == --- */
hr {
border-top: 1px dashed #cccccc;
height: 1px;
width: 95%;
padding: 0;
margin: 0 0 6px .6em;
}
a img {
border: none;
}
#logo a, #meny a, a.noline:link, a.noline:visited {
border-style: none;
}
#teman {
position: absolute;
right: 50px;
margin: -30px 0 0 0;
padding: 0;
}
#teman a img {
margin: 2px 5px 0 0;
}
och html koden så här:
<body id="startsida" class="section-1">
<div id="bakgrund"> <!-- div bakgrund /start -->
<div id="logo"><h1>Logo</h1></div> <!-- div logo /start /slut -->
<!--
<div id="meny">
<ul id="menyval">
<li id="active"><a href="http://medieteknik.bth.se/miab02/cv/" id="vald">startsida</a></li>
<li><a href="http://medieteknik.bth.se/miab02/cv/biografi/">biografi</a></li>
<li><a href="http://medieteknik.bth.se/miab02/cv/portfolio/">portfolio</a></li>
<li><a href="http://medieteknik.bth.se/miab02/cv/skriptarkiv/">skriptarkiv</a></li>
<li><a href="http://medieteknik.bth.se/miab02/cv/fotografier/">fotografier</a></li>
<li><a href="http://medieteknik.bth.se/miab02/cv/kontakta/">kontakta mig</a></li>
</ul>
-->
<div id="meny">
<ul id="menu">
<li id="nav-1"><a href="http://medieteknik.bth.se/miab02/cv/" id="vald">startsida</a></li>
<li id="nav-2"><a href="http://medieteknik.bth.se/miab02/cv/biografi/">biografi</a>
<ul id="subnav-2">
<li><a href="http://medieteknik.bth.se/miab02/cv/biografi/">om mig</a></li>
<li><a href="http://medieteknik.bth.se/miab02/cv/biografi/">historia</a></li>
<li><a href="http://medieteknik.bth.se/miab02/cv/biografi/">cv</a></li>
<li><a href="http://medieteknik.bth.se/miab02/cv/biografi/">framtid</a></li></ul></li>
<li id="nav-3"><a href="http://medieteknik.bth.se/miab02/cv/portfolio/">portfolio</a>
<ul id="subnav-3">
<li><a href="http://medieteknik.bth.se/miab02/cv/portfolio/">3d</a></li>
<li><a href="http://medieteknik.bth.se/miab02/cv/portfolio/">hemsidor</a></li>
<li><a href="http://medieteknik.bth.se/miab02/cv/portfolio/">flash</a></li></ul></li>
<li id="nav-4"><a href="http://medieteknik.bth.se/miab02/cv/skriptarkiv/">skriptarkiv</a>
<ul id="subnav-4">
<li><a href="http://medieteknik.bth.se/miab02/cv/skriptarkiv/">php</a></li>
<li><a href="http://medieteknik.bth.se/miab02/cv/skriptarkiv/">java</a></li>
<li><a href="http://medieteknik.bth.se/miab02/cv/skriptarkiv/">blandat</a></li></ul></li>
<li id="nav-5"><a href="http://medieteknik.bth.se/miab02/cv/fotografier/">fotografier</a>
<ul id="subnav-5">
<li><a href="http://medieteknik.bth.se/miab02/cv/fotografier/">hampus</a></li>
<li><a href="http://medieteknik.bth.se/miab02/cv/fotografier/">skottland</a></li>
<li><a href="http://medieteknik.bth.se/miab02/cv/fotografier/">gotland</a></li></ul></li>
<li id="nav-6"><a href="http://medieteknik.bth.se/miab02/cv/kontakta/">kontakta mig</a>
</li></ul>
<p id="teman">
<a href="#" onclick="setActiveStyleSheet('', 1);return false;" title="Byt till standard temat" class="noline"><img src="images/teman.gif" width="17" height="17" alt="Byt till standard temat" border="0" /></a><a href="#" onclick="setActiveStyleSheet('green', 1);return false;" title="Byt till grönt tema" class="noline"><img src="images/teman.gif" width="17" height="17" alt="Byt till grönt tema" border="0" /></a><a href="#" onclick="setActiveStyleSheet('desertdream', 1);return false;" title="Byt till Desert Dream temat" class="noline"><img src="images/teman.gif" width="17" height="17" alt="Byt till Desert Dream temat" border="0" /></a>
</p></div> <!-- div meny /start /slut -->
<div id="vanster_kolumn"> <!-- div vanster_kolumn /start -->
<h2>Startsida</h2>
<div class="skugga_hoger"><div><img src="images/catfloor.jpg" alt="katt" /></div></div>
<p>Ut wisi enim ad minim veniam</p>
<div class="skugga_vanster"><div><img src="images/catfloor.jpg" alt="katt" /></div></div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p><a href="test.php">test</a> Lorem ipsum dolor sit amet, consectetuer.</p>
<hr />
<h2>Testar att skapa "tabeller" med hjälp av css</h2>
<div id="tabell"><!-- div tabell /start -->
<ul class="vert"><li class="tabellheader"><ul class="horz">
<li>Rubrik 1</li>
<li class="namn">Rubrik 2</li>
<li>Rubrik 3</li>
<li>Rubrik 4</li></ul></li>
<li><ul class="horz">
<li>test 1</li>
<li class="namn">test 2</li>
<li>test 3</li>
<li>test 4</li></ul></li>
<li class="rad"><ul class="horz">
<li>test 1</li>
<li class="namn">test 2</li>
<li>test 3</li>
<li>test 4</li></ul></li>
<li><ul class="horz">
<li>test 1</li>
<li class="namn">test 2</li>
<li>test 3</li>
<li>test 4</li></ul></li></ul></div><!-- div tabell /slut -->
</div><!-- div vanster_kolumn /slut -->
<div id="hoger_kolumn"><!-- div hoger_kolumn /start -->
<h2>Rubrik H2</h2>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.</p>
<h1>Rubrik H1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.</p>
<hr />
<p>Det tog <?php $load = microtime(); print (number_format($load,2));?> sekunder för sidan att laddas.</p>
</div><!-- div hoger_kolumn /slut -->
<!-- div botten /start -->
<div id="botten"></div><!-- div botten /slut -->
</div><!-- div bakgrund /slut -->
</body>
</html>
tacksam för hjälpen...