Avatar billede zpanzer Nybegynder
03. december 2006 - 11:44 Der er 2 kommentarer

Container følger ikke og er ikke centreret i Internet Explorer.

Jeg har lige nu igang med at lege med at lave en hjemmeside, hvor jeg er støt på et problem.
for at vise det bedst kig venligst på følgene adresse:
http://octest.frac.dk/new/
Som i nok kan se er der 3 problemer.

1. Når man bruger Firefox, så kan i se den sorte "kontainer" med en grå border på ikke følger mit indhold(refere til den anden. nyheds boks hvis i scroller lidt ned. Hvordan kan jeg fixe det?

2. Når man bruger Internet explorer er siden ikke centreret som den er i firefox, er der en måde at gøre det, uden at ændre det i firefox?

3. Når man bruger Internet explorer kan i nok se at der åbenbart ikke er plads nok i den "kontainer" så min "login kontainer" bliver flyttet nedenunder, er der en måde at fixe det her, uden at ændre resultatet for meget i Firefox?

For at se kildekoden kan i bare sige "vis kildekode" på siden den er statisk og at koden er nok for stor at poste her.

Håber på at i kan hjælpe mig, siden det er nu noget tid siden før jeg har kodet sidst.

På forhånd tak.
200 points er ude :)
Avatar billede thesurfer Nybegynder
03. december 2006 - 13:57 #1
Hvis du har tænkt dig at bruge CSS i Internet Explorer, skal du (som altid) angive doctype..

http://www.netsteder.dk/artikler/doctype/index.html
Avatar billede notes2c Nybegynder
08. december 2006 - 19:34 #2
Har lavet nogle rettelse og fjernet et par overflødige ting omkring form tag.

Samt sørget for at clear'er float til slut.

Hos mig kan jeg ikke konstatere / se det du skriver omkring pkt 2, synes det virker ok.

Har kun testet dette i IE7 og FF...

Kode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>zomgwtfm8?</title>
<base href="http://octest.frac.dk/new/">
<style type="text/css">
body {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background-image: url('images/bg.gif');
    background-color:  #222222;
    background-repeat: repeat-x;
}
.container {
    width: 800px;
    height: 100%;
    margin: 0 auto;
    background-color: #000;
    border: 1px solid #565656;
    border-top: 0px;
    border-bottom: 0px;
    padding-left: 5px;
    padding-right: 5px;
}
.logo {
    width: 800px;
    height: 205px;
    background-image: url('images/logo.gif');
    background-position: bottom center;
    background-repeat: no-repeat
}
.menu {
    width: 800px;
    height: 45px;
    background-image: url('images/menu.gif');
    background-position: top center;
    background-repeat: no-repeat
}
.menusep {
    width: 800px;
    height: 30px;
    background-image: url('images/menusep.gif');
}
.content {
    width: 600px;
    height: 100%;
    float: left;
}
.login {
    width: 190px;
    border: 2px solid #2a2a2a;
    float: right;
}
.newscon {
    width: 600px;
    border: 2px solid #2a2a2a;
}
.newshead {
    width: 600px;
    height: 40px;
    background-image: url('images/newsheader.gif');
}
.newssep {
    width: 600px;
    height: 6px;
    background-image: url('images/newsep.gif');
}
.newstop {
    width: 600px;
    height: 10px;
    background-image: url('images/newstop.gif');
}
.newsmid {
    width: 600px;
    background-image: url('images/newsmid.gif');
}
.newsend {
    width: 600px;
    height: 4px;
    background-image: url('images/newsend.gif');
}
.avatar {
    width: 100px;
    height: 100px;
    float: left;
    padding: 4px;
    padding-top: 0px;
    padding-bottom: 0px;
}
p.news {
    margin: 6px;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #fff;
    font-family: Verdana;
    font-size: 9pt;
}
p.news2 {
    margin: 6px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 5px;
    color: #ffa800;
    font-family: Verdana;
    font-size: 9pt;
    font-weight: bold;
}
p.news3 {
    color: #fff;
    font-family: Verdana;
    font-size: 8pt;
    margin-top: 2px;
}
p.log {
    margin: 6px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 5px;
    color: #ffa800;
    font-family: Verdana;
    font-size: 9pt;
    font-weight: bold;
}
p.log2 {
    color: #fff;
    font-family: Verdana;
    font-size: 8pt;
    margin-left: 6px;
    margin-top: 2px;
}
.icon {
    width: 30px;
    height: 30px;
    margin: 5px;
    background-image: url('images/ocicon.gif');
    float: left;
    background-position: center center;
    background-repeat: no-repeat;
}
.loghead {
    width: 190px;
    height: 40px;
    background-image: url('images/loghead.gif');
}
.logsep {
    width: 190px;
    height: 6px;
    background-image: url('images/logsep.gif');
}
.logtop {
    width: 190px;
    height: 10px;
    background-image: url('images/logtop.gif');
}
.logmid {
    width: 190px;
    background-image: url('images/logmid.gif');
}
.logend {
    width: 190px;
    height: 10px;
    background-image: url('images/logend.gif');
}
form input {
    display: block;
    margin-left: 6px;
}
</style>
</head>
<body>
<div class="container">

<div class="logo"></div>
<div class="menu"></div>
<div class="menusep"></div>

<div class="content">
<div class="newscon">
<div class="newshead"><div class="icon"></div><p class="news2">Organised Test Page.</p><p class="news3">Written by: Hjangoor 24/12 - 2006</p></div>

<div class="newssep"></div>
<div class="newstop"></div>
<div class="newsmid">
<div class="avatar"><img src="images/hjangoor.gif" alt="Hjangoor"></div><p class="news">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam vel nisi. Cras tincidunt venenatis sapien. Sed placerat consequat libero. Fusce volutpat bibendum odio. Nulla scelerisque, odio eu faucibus faucibus, eros lectus ultrices pede, nec elementum lorem enim non magna. Duis id nunc nec justo rhoncus ultrices. Maecenas elit diam, pulvinar quis, elementum ut, vulputate in, nunc. Maecenas ipsum odio, vulputate sit amet, sodales eget, malesuada sed, leo. Vestibulum magna nibh, pellentesque molestie, sollicitudin at, posuere ut, nisl. Nulla ac libero. Aliquam erat volutpat. Sed sed risus. Aenean eu augue eget nibh pulvinar lobortis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ac tellus. Cras laoreet adipiscing leo. Nam condimentum, lorem eget scelerisque mattis, nisi tellus rutrum neque, sed dapibus quam arcu ut ante. Nulla ut quam ac lacus fermentum adipiscing. Aenean a sem.Quisque a augue. Quisque id tellus at sem ornare interdum. Nam et erat. Praesent gravida risus vel dui. Etiam accumsan lacus id mi. Nulla facilisi. Vivamus luctus est non augue. Praesent eget lectus. Nam magna. Nulla enim massa, vehicula ac, ultricies ut, malesuada non, odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst.Phasellus aliquam bibendum arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi pulvinar, nisi eu tincidunt gravida, eros augue egestas nulla, ac auctor lorem nisi sit amet magna. Sed sit amet nulla et risus dignissim volutpat. Morbi purus pede, ultrices et, convallis ac, porttitor a, nunc. Pellentesque gravida. Vestibulum eros nibh, pharetra eget, placerat in, dapibus quis, est. Sed hendrerit. Quisque convallis placerat massa. Nunc venenatis sem et odio. Nulla mollis luctus risus. Sed condimentum faucibus massa. Aenean eu velit. Cras aliquam. Quisque ac eros.</p>
</div>
<div class="newsend"></div>
</div><br>
<div class="newscon">
<div class="newshead"><div class="icon"></div><p class="news2">Organised Test Page.</p><p class="news3">Written by: Hjangoor 24/12 - 2006</p></div>
<div class="newssep"></div>
<div class="newstop"></div>
<div class="newsmid">
<div class="avatar"><img src="images/hjangoor.gif" alt="Hjangoor"></div><p class="news">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam vel nisi. Cras tincidunt venenatis sapien. Sed placerat consequat libero. Fusce volutpat bibendum odio. Nulla scelerisque, odio eu faucibus faucibus, eros lectus ultrices pede, nec elementum lorem enim non magna. Duis id nunc nec justo rhoncus ultrices. Maecenas elit diam, pulvinar quis, elementum ut, vulputate in, nunc. Maecenas ipsum odio, vulputate sit amet, sodales eget, malesuada sed, leo. Vestibulum magna nibh, pellentesque molestie, sollicitudin at, posuere ut, nisl. Nulla ac libero. Aliquam erat volutpat. Sed sed risus. Aenean eu augue eget nibh pulvinar lobortis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ac tellus. Cras laoreet adipiscing leo. Nam condimentum, lorem eget scelerisque mattis, nisi tellus rutrum neque, sed dapibus quam arcu ut ante. Nulla ut quam ac lacus fermentum adipiscing. Aenean a sem.Quisque a augue. Quisque id tellus at sem ornare interdum. Nam et erat. Praesent gravida risus vel dui. Etiam accumsan lacus id mi. Nulla facilisi. Vivamus luctus est non augue. Praesent eget lectus. Nam magna. Nulla enim massa, vehicula ac, ultricies ut, malesuada non, odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst.Phasellus aliquam bibendum arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi pulvinar, nisi eu tincidunt gravida, eros augue egestas nulla, ac auctor lorem nisi sit amet magna. Sed sit amet nulla et risus dignissim volutpat. Morbi purus pede, ultrices et, convallis ac, porttitor a, nunc. Pellentesque gravida. Vestibulum eros nibh, pharetra eget, placerat in, dapibus quis, est. Sed hendrerit. Quisque convallis placerat massa. Nunc venenatis sem et odio. Nulla mollis luctus risus. Sed condimentum faucibus massa. Aenean eu velit. Cras aliquam. Quisque ac eros.</p>

</div>
<div class="newsend"></div>
</div>
</div>

<div class="login">
<div class="loghead"><p class="log">Login.</p><p class="log2">Login or registrer.</p></div>
<div class="logsep">&nbsp;</div>
<div class="logtop">&nbsp;</div>
<div class="logmid">
<form action="" method="post" name="login">
<div>
<p class="news">Username:</p>
<input name="username" type="text" id="username" size="20">
<p class="news">Password:</p>
<input name="password" type="password" id="password" size="20">
<p class="news">Remember?</p>
<input type="checkbox" name="stay_in[]" checked>
<input name="submit" type="submit" id="submit" value="login">
<input name="q" value="login" type="hidden">
</div>
</form>
</div>
<div class="logend">&nbsp;</div>
</div>
<div style="clear: both;">&nbsp;</div>
</div>
</body>
</html>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester