webForumDet fria alternativet

får inte lagrerna att fungera i explorer. (i övriga browsers fungerar de bra)

HTML & CSS

1 svar · 373 visningar · startad av mikael_a

Medlem sedan mars 2000475 inlägg
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.

Internet explorer
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...

Medlem sedan mars 2000475 inlägg
#2

har löst det..

genom: width: 100%; i #meny.

263 ms totalt · 4 externa anrop · v20260731065814-full.86ec41c2
125 ms — deklarationer (db)
0 ms — hämta statistik (cache)
136 ms — hämta tråd, inlägg och bilagor (db)
125 ms — ändringar (db)