Frågan#1
Hej!
Jag håller på och gör en ny design till min hemsida, men jag har stött på ett problem. Min sida visas rätt i Internet Explorer men fel i Firefox och Opera! Jag vet inte vad som är fel, sidan är valid HTML och CSS! Har ni någon aning vad som kan vara fel?
Sidan finns här: http://www.test.jwebb.se/.
HTML-koden:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="sv">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Johans Webb</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<h1><img src="images/logo.png" alt="Johans Webb"></h1>
</div>
<div id="menu">
<h3>Meny</h3>
<ul class="glossymenu">
<li><a href="http://www.dynamicdrive.com/" >Dynamic Drive</a></li>
<li><a href="http://www.dynamicdrive.com/style/" >CSS Examples</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.codingforums.com/" style="border-bottom-width: 0">Coding Forums</a></li>
</ul>
</div>
<div id="content">
<h2>Startsida</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec volutpat risus vel ipsum pretium euismod. Nulla dapibus dolor nec mauris. Aliquam dictum, pede sit amet blandit tempus, velit felis convallis orci, sit amet mattis lacus lacus nec dolor. Vivamus ante. Donec pharetra faucibus nisi. Cras sed nisl ac metus imperdiet tincidunt. Praesent libero. Quisque in felis. Cras aliquet venenatis felis. Pellentesque lectus. Nunc imperdiet convallis ligula.
</p>
<p>
Aenean vulputate sodales mauris. Donec eleifend iaculis urna. Pellentesque nisi tellus, pretium non, eleifend vitae, semper eget, odio. Fusce laoreet magna fermentum velit. Cras in eros. Vestibulum porta faucibus neque. Vestibulum cursus dui quis ipsum. Duis erat enim, consequat non, vestibulum vel, faucibus eget, nisi. Donec consectetuer facilisis justo. Proin laoreet scelerisque justo.
</p>
<p>
Quisque at quam. Vestibulum sem. In ipsum turpis, rutrum a, faucibus a, feugiat facilisis, magna. Maecenas lacus libero, viverra at, viverra at, lobortis in, massa. Pellentesque consectetuer. Vestibulum risus ipsum, ullamcorper quis, cursus vitae, sagittis varius, ante. Quisque mattis lobortis massa. Mauris vel velit. Sed quis felis a sapien molestie rutrum. Suspendisse massa lorem, tristique vel, euismod sit amet, pretium id, quam. Aliquam erat volutpat. Morbi eget massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus vel massa vitae tellus laoreet suscipit. Nullam mattis tortor sit amet eros. Nullam et tortor. Nulla libero dui, volutpat ac, consectetuer et, pulvinar ac, libero. Proin lorem.
</p>
<p>
Maecenas varius ligula eu lorem. Sed sed metus. Maecenas sodales. Vivamus id nulla. Etiam tempor consectetuer tellus. Proin quis turpis quis nisl gravida pellentesque. Sed ipsum. Maecenas pharetra feugiat metus. Praesent bibendum. Maecenas faucibus nulla eu lorem. Etiam commodo tincidunt tellus. Vestibulum tellus magna, laoreet non, imperdiet id, bibendum sed, augue. Etiam ultrices, turpis non consequat feugiat, tellus diam vestibulum orci, ut luctus leo ipsum id nisl. Nunc lorem turpis, sodales dapibus, rhoncus vitae, vehicula a, massa. Maecenas sed massa id nulla consequat venenatis. Fusce ligula. Duis vestibulum, mauris sed porttitor pretium, elit augue euismod sem, ut lobortis neque metus in orci. Quisque non neque. Nullam ullamcorper, purus sit amet vehicula ullamcorper, leo felis mollis arcu, vitae suscipit turpis nibh in nisi.
</p>
<p>
Curabitur ut mi. Proin ut urna. Proin consequat mattis libero. In hac habitasse platea dictumst. Phasellus a mauris nec ipsum dapibus tincidunt. Proin vel est. Pellentesque pharetra. Pellentesque ac nibh id tortor ullamcorper malesuada. Maecenas dictum, lorem non sagittis scelerisque, lacus nunc convallis tellus, quis convallis elit tortor nec tellus. Integer molestie leo in tortor. In ullamcorper. Duis sed lacus sit amet lacus dapibus molestie. Donec urna. Nam mi eros, fringilla ac, vehicula at, mattis et, orci. Suspendisse potenti.
</p>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional" height="31" width="88"></a>
<a href="http://jigsaw.w3.org/css-validator/check?uri=referer"><img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a>
</p>
</div>
<div id="footer">
Copyright © Johans Webb 2008
</div>
</div>
</body>
</html>
CSS-koden:
body
{
font-family: Arial;
font-size: 10pt;
text-align: center;
color: #444;
background: #cccccc;
}
#container
{
text-align: left;
width: auto;
margin: 5px;
background: #ccff99;
}
#header
{
text-align: center;
width: auto;
height: auto;
background: #ffffcc;
}
#menu
{
float: left;
margin: auto 5px;
width: 170px;
}
#content
{
float: left;
margin: auto 5px;
width: auto;
}
#footer
{
text-align: right;
clear: both;
font-size: 80%;
padding: 2px 5px;
background: #ffcc66;
}
img
{
border-style: none;
}
/*Credits: Dynamic Drive CSS Library */
/*URL: [url]http://www.dynamicdrive.com/style/[/url] */
.glossymenu
{
list-style-type: none;
margin: 5px 0;
padding: 0;
width: 160px;
border: 1px solid #9A9A9A;
border-bottom-width: 0;
}
.glossymenu li a
{
background: white url(images/glossyback.gif) repeat-x bottom left;
font: bold 13px Arial;
color: white;
display: block;
width: auto;
padding: 3px 0;
padding-left: 10px;
text-decoration: none;
}
* html .glossymenu li a
{
/*IE only. Actual menu width minus left padding of A element (10px) */
width: 160px;
}
.glossymenu li a:visited, .glossymenu li a:active
{
color: white;
}
.glossymenu li a:hover
{
background-image: url(images/glossyback2.gif);
}
Jag har kodat allt utom utseendet för menyn. Logotyp och färger är bara tillfälliga. Tacksam för svar!
Mvh Johan
