Hvorfor virker ikke vertical-align her?

Rinox · 7. oktober 2006

Hei! Noen som vet hvorfor vertical align ikke virker i disse kodene? Er ganske sikker på at jeg har oversett noe, men jeg finner det ikke. Kjempefint om noen kunne fortelle meg hva som er galt Tusen takk

HTML:

Skjult tekst: (Marker innholdet i feltet for å se teksten):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Utviklet av Andix</title>

<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>

<table id="allcontent">
 <tr>
 
 
   <td id="meny">
<table>
  <tr>
       <td id="logo"><img src="images/logo.bmp" alt="MTI"></td>
     </tr>
  
     <tr>
       <td>
<ul class="hovedmeny">
 <li><a href="#" class="valgt">Hovedsiden</a></li>
 <li><a href="#">Kontakt</a></li>
 <li><a href="#">Produkter</a></li>
 <li><a href="#">Priser</a></li>
 <li><a href="#">Arbeidere</a></li>
 <li><a href="#">Søk jobb </a></li>
 <li><a href="#">Om oss </a></li>
 <li><a href="#">Lokaler</a></li>
 <li><a href="#">Åpningstider</a></li>
 <li><a href="#">Partnere</a></li>
</ul>
</td>
  </tr>
 <tr>
 <td id="info"><p>MTI Produkter:<br /><br />
 Telefon: 77 83 11 30<br />
 Telefaks: 77 83 11 30<br /><br />
 E-post: [email protected]</p></td>
 </tr>
   </table>
</td>


   <td>
<table>
<tr>
<td id="header"><img src="images/header.bmp"></td>
</tr>
<tr>
<td id="content">

<h1>LASERGRAVERING</h1>
<p>Vi har moderne utstyr for å utføre de mest kompliserte graveringsoppdragene, enten det gjelder skilt, tekniske merking, premier, gravering i glass, tre eller andre materialer. Noen eksempler er dørskilt og postkasseskilt i eloksert aluminium.<br>
Alt gjøres til forhåndsavtalte priser og med kort leveringstid.</p>
</td>
</tr>
</table>
</td>
 </tr>
</table>

</body>

</html>

CSS:

Skjult tekst: (Marker innholdet i feltet for å se teksten):

body {
background-color: #CCCCCC;
margin-top: 5px;
text-align: left;
height: 100%;
vertical-align: top;
}

a {
color: #333333;
text-decoration: none;
}

a:hover {
color: #333333;
text-decoration: none;
}

a:visited {
color: #333333;
text-decoration: none;
}

#header {
vertical-align: top;
height: 122px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
color: #333333;
font-weight: bold;
margin-top: 0px;
padding-left: 10px;
}

#meny {
vertical-align: top;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: left;
color: #333333;
margin-left: 1px;
width: 150px;
text-align: left;
padding: 10px 0px 15px 0px;
background-color: #ffa14e;
}

ul.hovedmeny {
margin: 0 0 20px 0;
padding: 0;
color: #000000;
}
ul.hovedmeny li {
list-style: none;
}
ul.hovedmeny a {
padding: 3px 13px 3px 13px;
font-weight: bold;
border-top: 1px #ffa14e solid;
border-bottom: 1px #ffa14e solid;
text-decoration: none;
color: #333333;
width: 150px;
display: block;
}
ul.hovedmeny a:hover {
background: #ffe6cb;
border-top: 1px #ffffff solid;
border-bottom: 1px #ffffff solid;
text-decoration: none;
color: #333333;
width: 150px;
}
ul.hovedmeny a.valgt {
background: #ffcea0;
}

#logo {
font-family: Arial, Helvetica, sans-serif;
height: 92px;
width: 140px;
color: #333333;
font-size:30px;
font-weight:600;
padding-bottom:20px;
text-align: center;
vertical-align: middle;
}

#allcontent {
width: 820px;
border: 1px solid #000000;
background-color: #FFFFFF;
vertical-align: top;
}

#content {
vertical-align: top;
width: 620px;
padding-left: 20px;
padding-top: 25px;
padding-right: 15px;
padding-bottom: 15px;
color: #666666;
font-size: 14px;
text-align: left;
}

#content img {
float:left;
margin: 5px 5px 5px 5px;
}

.imgborder {
border: 1px solid #333333;
float: left;
margin: 5px 5px 5px 5px;
}

#info {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
}

#info a {
text-decoration: none;
color: #999999;
}

#info a:hover {
color: #FF6600;
text-decoration: none;
}

h1 {
font-size: 42px;
font-weight: normal;
}

h2 {
font-size: 36px;
font-weight: normal;
}

h3 {
font-size: 26px;
font-weight: normal;
}

h4 {
font-size: 20px;
font-weight: normal;
}

Endret 7. oktober 2006 av Rinox

pgdx · 7. oktober 2006

Hovedproblemet er at du bruker tabeller til layout. Hadde du gjort det på den korrekte metoden, hadde dette problemet aldri vært et tema.

http://htmldog.com

Rinox · 8. oktober 2006

Selvfølgelig vet jeg at det ikke lønn3er seg å bruke tabeller, men her har jeg gjort det. Hovedgrunnen til at jeg brukte det var for at menyen skulle strekke seg etter innholdet. Jeg har spurt hvordan man gjør dette med div, men har aldri fått et fungerende svar.

Nå bruker jeg altså tabeller. Noen som vet hva er feil?

pgdx · 8. oktober 2006

Å få menyen til å strekke seg etter innholdet med bruk av en div er ikke særlig vanskelig... http://www.alistapart.com/articles/fauxcolumns/

Rinox · 8. oktober 2006

Takk Men hvordan gjør jeg det nå med tabeller da? Det er greit å vite uansett

glad · 11. oktober 2006

feks <td valign="middle"></td>

Rinox · 11. oktober 2006

Fant ut av det. Det var fordi jeg hadde "float: left;"

Logg inn

Hvorfor virker ikke vertical-align her?

Anbefalte innlegg

Rinox

Lenke til kommentar

Videoannonse

pgdx

Lenke til kommentar

Rinox

Lenke til kommentar

pgdx

Lenke til kommentar

Rinox

Lenke til kommentar

glad

Lenke til kommentar

Rinox

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer