HALP! Internet Explorer hugger vekk nederste rammebit på en <li>

C₈H₁₀N₄O₂ · 26. april 2009

Etter en lang pause fra html og css og denslags har jeg prøvd meg på å lage et enkelt design igjen.

Her er hele sullamitten:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

 <head>
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
   <meta name="robots" content="index, follow" />
   <meta name="keywords" content="bla bla" />

   <meta name="description" content="bla bla" />
   <title>Gard Gitlestad - hovedside</title>

   <style type="text/css">

body {background: black;}

h1 {
margin-left: 30px;
color: white;
font-size: 25px;
font-family: verdana, sans-serif;
font-weight: 100;
letter-spacing: 1.5px;
}
h2 {
margin-left: 50px;
margin-top: 10px;
margin-bottom: -10px;
color: white;
font-size: 18px;
font-family: verdana, sans-serif;
font-weight: 100;
letter-spacing: 1.5px;
}


a {
text-decoration: underline;
color: white;
}

a:link, a:visited {
color: white;
}

a:hover {color: #800;}

a:active {color: #F00;}


p {
text-align: left;
color: white;
font-family: helvetica, sans-serif;
font-weight: 400;
letter-spacing: .7px;
font-size: 15px;
}

div.content {
width: 760px;
height: auto;
padding: 20px;
}

p.content {
color: white;
font-family: helvetica, arial, sans-serif;
font-size: 12pt;
letter-spacing: .5px;
}

div.bigthing {
width: 800px;
height: 600px;

/*border: 3px dotted red;*/
border-style: none;

position: absolute;
top: 50%;
left: 50%;
margin-top: -300px;
margin-left: -400px;
}

div.smallthing {
width: 800px;
height: 580px;
border: 3px double white;
margin-left: -3px;
display: table;
position: relative;
}

div.menuthing {
width: 800px;
height: 30px;
background-color: white;
border: 3px solid white;
margin: -3px -3px 0 -3px;
}

.menuthing ul li a {
text-decoration: none;
font-family: verdana, sans-serif;
padding: 2px 16px 2px 16px;
color: black;
border: 2px solid black;
}

.menuthing ul li a:hover {
color: white;
background-color: black;
}

.menuthing ul {
list-style-type: none;
padding: 0;
margin: 5px 0 0 0;
}

.menuthing ul li {display: inline;}

   </style>
 </head>

 <body>
   <div class="bigthing">
     <div class="menuthing">
<ul>
  <li><a href="#">Nivå 1</a></li>
  <li><a href="#">Nivå 2</a></li>
  <li><a href="#">Nivå 3</a></li>
  <li><a href="#">Nivå 4</a></li>
</ul>
     </div>
     <div class="smallthing">
<div class="content">

  <h1>
    Lorem ipsum dolor sit amet
  </h1>

  	  <p class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tortor risus, aliquet in,
    egestas ac, consectetur id, diam. Ut bibendum. Sed non ante in dui dapibus elementum.
     Mauris <a href="http://www.youtube.com/watch?v=oHg5SJYRHA0">ullamcorper velit</a> vitae
     mi. Donec tempus, ipsum sed tempor iaculis, nisi diam interdum metus, ac egestas dolor
     mauris vestibulum lacus. Maecenas mollis metus. Quisque fringilla felis et felis.
     Maecenas faucibus. Duis risus. Aenean sodales ipsum nec felis. Donec odio. Sed tempus,
     arcu in pulvinar luctus, lectus nibh scelerisque augue, ut sodales neque dolor sit amet
     lectus. 
  </p>

  <h2>
    Donec vehicula
  </h2>

  <p class="content">
    Mauris aliquam. Vivamus lectus. Sed metus. Vestibulum sed ipsum. Quisque cursus urna eu
    leo. Vivamus condimentum dictum purus. Donec vehicula egestas risus. Donec ut nulla non
    libero tincidunt consequat. Nunc
    <a href="http://www.youtube.com/watch?v=oHg5SJYRHA0">gravida ultrices</a> nunc. Ut
    facilisis tempus lorem. Praesent a elit non felis vehicula consequat. Morbi nibh.
    Proin ut velit. Cras imperdiet quam non leo. In tortor risus, feugiat a, aliquet non,
    tristique sed, eros. Proin dapibus tortor. Aenean vulputate orci sit amet nisi. Quisque
    pellentesque velit et mauris. 
  </p>

  <h2>
    Vivamus diam ligula
  </h2>

  <p class="content">
    Integer quis diam et ligula sagittis malesuada. Vivamus diam ligula, dictum eget,
    dignissim at, lobortis a, nulla. Class aptent taciti sociosqu ad litora torquent per
    conubia nostra, per inceptos himenaeos. Nunc auctor risus eget elit venenatis venenatis.
    Nullam pharetra diam eu nisi. Etiam lobortis dapibus mauris. Nunc ipsum. Fusce turpis.
    In gravida congue lacus. Vivamus pellentesque. Praesent id risus vel lorem vulputate
    sodales.
  </p>
</div>
     </div>
   </div>
 </body>
</html>

Det ser helt fint ut i FF, men i IE blir det noe tull med menyen øverst. Det skal være en helt streit ramme rundt de nivå-ditt-og-datt-knappene, men den nederste biten forsvinner. Har eksperimentert litt, men skjønner ikke helt hvordan jeg kan få den tilbake.

Anyone?

Endret 26. april 2009 av C₈H₁₀N₄O₂

funkweb · 27. april 2009

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >  
<head> 
<style type="text/css">
* {
margin:  0;
padding: 0;
}
body {
background-color: black;
padding-top: 250px;
}

#root {
width: 800px;
height: 600px;
border: 3px double white;
margin: 0 auto;	
}

.meny {
width: 800px; 
heigh: 30px;
background-color: white;
padding: 10px 0px 8px 6px;
margin: 0 auto;	
}

.meny ul {
margin: 0;
padding: 0;
list-style-type: none;
}

.meny ul li { display: inline; }

.meny ul li a {
text-decoration: none;	
font-family: verdana, sans-serif;
color: black;	
border: 2px solid black;
padding: 2px 16px 2px 16px;
}


.innhold {
padding: 20px;
}

.innhold p {
color: white;	
font-family: helvetica, sans-serif;	
}

</style>
</head>

<body>
<div class="meny">
<ul>
<li><a href="#">NAV 1</a></li>
<li><a href="#">NAV 2</a></li>	  
<li><a href="#">NAV 3</a></li>
<li><a href="#">NAV 4</a></li>
</ul>
</div>
<div id="root">
<div class="innhold"><p>bla bla bla bla, her kan du fikse selv.</p>
</div>	
</div>
</body></html>

Logg inn

HALP! Internet Explorer hugger vekk nederste rammebit på en <li>

Anbefalte innlegg

C₈H₁₀N₄O₂

Lenke til kommentar

Videoannonse

funkweb

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer