I'm trying to position my sidebar on the right side of my content, but I still want it in the same 'box'. See:
As you can see in the picture it's on the right side, but it is not in the 'content' box, and I would like it to be almost directly under my menu. Please help.
My code looks like this (just ignore the danish commentary, that's just notes):
body {
background: #98c8d7;
width: 1000px;
margin: auto;
font-family: "Trebuchet ms", Verdana, sans-serif;
}
#header {
background: #fff url(banner.jpg) no-repeat;
margin: 10px 0 10px 0;
padding: 8em 2em 1em 2em;
text-align: center;
border-radius: 15px;
opacity: 0.8;
border: 1px dotted #000
}
/*Dette formaterer menuen */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link,
a:visited {
display: block;
width: 312.5px;
font-weight: bold;
color: #000;
background-color: #51a7c2;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
border: 1px solid #91cfca;
opacity: 0.8;
}
a:hover,
a:active {
background-color: #98c8d7;
}
#content {
background: #b4cdd9;
color: #000;
padding: 1em 1em 1em 1em;
top right bottom left
}
#tekst {
background: #98c8d7;
color: #000;
opacity: 0.8;
margin: 5px 0 5px 0;
padding: 0.5em 1em 1em 1em;
text-align: left;
}
#sidebar {
background: #b4cdd9;
color: #000;
width: 320px;
position: relative;
float: right;
margin: 5px 0 5px 0;
padding: 0.5em 1em 1em 1em;
text-align: left;
border-style: outset;
border-width: 3px;
border-color: black;
}
a {
color: #0060B6;
text-decoration: none;
}
a:hover {
color: #00A0C6;
text-decoration: none;
cursor: pointer;
}
<!doctype html>
<head>
<!-- Titel -->
<title>IT-hjælp til ældre</title>
<meta charset="utf-8">
<link href="CSS sheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Denne div indeholder dit content, altså din brødtekst -->
<div id="content">
<!--Header. Indeholder banner -->
<div id="header">
</div>
<!-- Menu -->
<ul>
<li>Forside
</li>
<li>Priser
</li>
<li>Kontakt
</li>
</ul>
<!-- Her kommer din brødtekst så -->
<div id="tekst">
<h1>Overskrift 1</h1>
<p>Her kan du skrive, hvad du tilbuder, hvorfor, hvorledes, til hvem og anden info</p>
<!-- Overskrift to. Der er flere former for overskrifter. H1 betegner en bestemt slags, H2 en mindre slags osv. Du kan godt bruge H1 flere gange -->
<h2>Underoverskrift 1</h2>
<p>Her kan du måske skrive lidt om dig selv og dine kvalifikationer?</p>
<div id="sidebar">
<h3>Leon Laksø</h3>
<p>Så-og-så-mange år i tjeneste, certificeret bla bla, alt muligt andet shit her. Måske et billede hvor du ser venlig ud?</p>
<p>Mail link kunne være her?</p>
</div>
</div>
</div>
</body>
</html>
One quick solution is to change your html structure and move sidebar as first child of div wih id #tekst:
body {
background: #98c8d7;
width: 1000px;
margin: auto;
font-family: "Trebuchet ms", Verdana, sans-serif;
}
#header {
background: #fff url(banner.jpg) no-repeat;
margin: 10px 0 10px 0;
padding: 8em 2em 1em 2em;
text-align: center;
border-radius: 15px;
opacity: 0.8;
border: 1px dotted #000
}
/*Dette formaterer menuen */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link,
a:visited {
display: block;
width: 312.5px;
font-weight: bold;
color: #000;
background-color: #51a7c2;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
border: 1px solid #91cfca;
opacity: 0.8;
}
a:hover,
a:active {
background-color: #98c8d7;
}
#content {
background: #b4cdd9;
color: #000;
padding: 1em 1em 1em 1em;
top right bottom left
}
#tekst {
background: #98c8d7;
color: #000;
opacity: 0.8;
margin: 5px 0 5px 0;
padding: 0.5em 1em 1em 1em;
text-align: left;
}
#sidebar {
background: #b4cdd9;
color: #000;
width: 320px;
position: relative;
float: right;
margin: 5px 0 5px 0;
padding: 0.5em 1em 1em 1em;
text-align: left;
border-style: outset;
border-width: 3px;
border-color: black;
}
a {
color: #0060B6;
text-decoration: none;
}
a:hover {
color: #00A0C6;
text-decoration: none;
cursor: pointer;
}
<body>
<!-- Denne div indeholder dit content, altså din brødtekst -->
<div id="content">
<!--Header. Indeholder banner -->
<div id="header"></div>
<!-- Menu -->
<ul>
<li>Forside
</li>
<li>Priser
</li>
<li>Kontakt
</li>
</ul>
<!-- Her kommer din brødtekst så -->
<div id="tekst">
<div id="sidebar">
<!-- move it here -->
<h3>Leon Laksø</h3>
<p>Så-og-så-mange år i tjeneste, certificeret bla bla, alt muligt andet shit her. Måske et billede hvor du ser venlig ud?</p>
<p>Mail link kunne være her?</p>
</div>
<h1>Overskrift 1</h1>
<p>Her kan du skrive, hvad du tilbuder, hvorfor, hvorledes, til hvem og anden info</p>
<!-- Overskrift to. Der er flere former for overskrifter. H1 betegner en bestemt slags, H2 en mindre slags osv. Du kan godt bruge H1 flere gange -->
<h2>Underoverskrift 1</h2>
<p>Her kan du måske skrive lidt om dig selv og dine kvalifikationer?</p>
</div>
</div>
</body>
Swapping your #tekskt and #sidebar around should be your main change. I've also adding a bit of margin for aesthetics.
Here is a Live Demo of it in action. :)
It will then look like:
body {
background: #98c8d7;
width: 1000px;
margin: auto;
font-family: "Trebuchet ms", Verdana, sans-serif;
}
#header {
background: #fff url(banner.jpg) no-repeat;
margin: 10px 0 10px 0;
padding: 8em 2em 1em 2em;
text-align: center;
border-radius: 15px;
opacity: 0.8;
border: 1px dotted #000
}
/*Dette formaterer menuen */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link,
a:visited {
display: block;
width: 312.5px;
font-weight: bold;
color: #000;
background-color: #51a7c2;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
border: 1px solid #91cfca;
opacity: 0.8;
}
a:hover,
a:active {
background-color: #98c8d7;
}
#content {
background: #b4cdd9;
color: #000;
padding: 1em 1em 1em 1em;
position: absolute;
}
#tekst {
background: #98c8d7;
color: #000;
opacity: 0.8;
margin: 5px 0 5px 0;
padding: 0.5em 1em 1em 1em;
text-align: left;
position: relative;
}
#sidebar {
background: #b4cdd9;
color: #000;
width: 320px;
position: relative;
float: right;
z-index: 5;
margin: 5px 0 5px 0;
padding: 0.5em 1em 1em 1em;
text-align: left;
border-style: outset;
border-width: 3px;
border-color: black;
margin: 1em;
}
a {
color: #0060B6;
text-decoration: none;
}
a:hover {
color: #00A0C6;
text-decoration: none;
cursor: pointer;
}
<!-- Denne div indeholder dit content, altså din brødtekst -->
<div id="content">
<!--Header. Indeholder banner -->
<div id="header"></div>
<!-- Menu -->
<ul>
<li>Forside
</li>
<li>Priser
</li>
<li>Kontakt
</li>
</ul>
<!-- Her kommer din brødtekst så -->
<div id="sidebar">
<h3>Leon Laksø</h3>
<p>Så-og-så-mange år i tjeneste, certificeret bla bla, alt muligt andet shit her. Måske et billede hvor du ser venlig ud?</p>
<p>Mail link kunne være her?</p>
</div>
<div id="tekst">
<h1>Overskrift 1</h1>
<p>Her kan du skrive, hvad du tilbuder, hvorfor, hvorledes, til hvem og anden info</p>
<!-- Overskrift to. Der er flere former for overskrifter. H1 betegner en bestemt slags, H2 en mindre slags osv. Du kan godt bruge H1 flere gange -->
<h2>Underoverskrift 1</h2>
<p>Her kan du måske skrive lidt om dig selv og dine kvalifikationer?</p>
</div>
</div>
What browser are you using? Working fine for me on firefox 33 and chrome 38.
JSFiddle
Try clearing your float.
#tekst {
background:#98c8d7;
color:#000;
opacity: 0.8;
margin:5px 0 5px 0;
padding:0.5em 1em 1em 1em;
text-align:left;
overflow: hidden; //*clears float*//
}
Related
Can someone please tell me why the #sidebar doesn't get sticky with this code? When I test the sticky property on main, #searchbar and #localnav it works fine, but not on #sidebar. I have tested adding padding-bottom to sidebar, main to test if that should help but it doesn't.
Please see code snippet.
#charset "UTF-8";
/* CSS Document */
/* ----- Förberedande stilar ----- */
/* Samma utgångsvärde för struktur/layout-elementen för alla webbläsare */
html,
body,
div,
header,
nav,
main,
article,
section,
aside,
footer {
margin: 0;
padding: 0;
}
/* Om äldre webbläsaren inte förstår taggen så visa den som block istället för inline */
header,
nav,
main,
article,
aside,
footer,
section {
display: block;
}
html {
-webkit-text-size-adjust: 100%;
}
/*Så att Safari i iPhone inte skalar om texten */
/* ----- Layout ----- */
body {
background-image: url("pics/leonardo-da-vinci.jpg");
color: #000;
font-family: Verdana, sans-serif;
}
#wrapper {
width: 1000px;
margin: 10px auto;
background-color: #ffffff;
box-shadow: 7px 7px 7px rgba(42, 56, 28, 0.69);
}
/*positionering*/
main {
margin-left: 20%;
}
#localnav {
float: left;
width: 20%;
}
article {
width: 62.8%;
float: left;
background-color: #e7e3e3;
padding: 0.9em;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
box-shadow: 7px 7px 7px rgba(42, 56, 28, 0.69)
}
.sidebar {
width: 30%;
float: right;
}
.sidebar section {
background-color: #379013;
color: #fff;
padding: 0.9em;
margin-bottom: 1em;
border-bottom-left-radius: 20px;
box-shadow: -7px 7px 7px rgba(42, 56, 28, 0.69);
}
section a {
text-decoration: none;
}
section a {
padding: 0.5em;
}
section a:link,
section a:visited {
color: #fff;
}
section a:hover,
section a:active {
color: #0e2a05;
}
#searchbar {
padding: 0.5em;
margin-bottom: 0.5em;
text-align: center;
}
/* #searchbar form {
display: inline-block;
text-align: center;
} */
#searchbar input {
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid green;
border-radius: 4px;
font-size: 1.1em;
}
#searchbar input[type="text"] {
width: 40%;
}
#globalnav {
border-bottom: solid;
padding-bottom: 0.5em;
font-size: 1.5em;
}
#globalnav ul {
list-style: none;
margin: 0;
padding: 0;
}
#globalnav ul li {
display: inline;
}
#globalnav a {
text-decoration: none;
padding: 0.5em;
color: #267d0c;
}
#localnav ul {
list-style: none;
margin: 0;
padding: 0;
}
#localnav ul li {
display: block;
position: relative;
margin-top: 1em;
margin-right: 110px;
}
#localnav a {
text-decoration: none;
padding: 0.5em;
padding-right: 1em;
font-size: 1.5em;
}
#localnav a:link,
#localnav a:visited {
color: #666;
}
#localnav a:hover,
#localnav a:active {
background-color: #267d0c;
color: #ffffff;
}
.thisSection {
background-color: #b9f0aa;
color: #000;
border-top-right-radius: 25px;
}
#localnav ul li ul {
background-color: #b9f0aa;
border: 1px solid #333;
box-shadow: 3px 3px 3px #666;
position: absolute;
top: -0.7em;
left: 5em;
visibility: hidden;
}
#localnav ul li:hover ul {
visibility: visible;
}
#localnav ul li ul li {
display: block;
width: 100%;
white-space: nowrap;
margin-top: auto;
}
#localnav ul li ul li a {
display: block;
padding: 0.5em;
}
#localnav ul li ul li a:hover {
background-color: #267d0c;
color: #FFF;
}
#localnav #thisPage:before {
content: "> ";
}
#localnav {
padding-bottom: 0.5em;
}
main p {
text-align: justify;
}
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
main {
overflow: visible;
}
img {
max-width: 100%;
height: auto;
}
/*flexibla bilder som justeras efter skärmstorlek, höjden justeras efter bredden för att behålla proportionerna */
article img {
float: right;
}
header img {
width: 200px;
float: left;
border-radius: 50%;
}
header {
height: 133px;
padding-bottom: 2em;
padding-top: 2em;
margin-left: 1em;
position: relative;
}
header h1 {
position: absolute;
top: 1em;
right: 12em;
}
header h2 {
position: absolute;
top: 4em;
right: 6em;
}
header h1,
header h2 {
font-style: italic;
font-weight: bold;
text-shadow: 3px 3px 5px green;
}
footer {
border-top: solid;
padding: 1em;
clear: both;
}
<div id="wrapper">
<header>
<img src="pics/logo.jpg" alt="logo">
<h1>Fysiohjälpen</h1>
<h2>Snabbt och enkelt att hitta informationen du söker</h2>
</header>
<div id="searchbar">
<form class="" action="" method="post">
<input type="text" name="search" placeholder="Hitta information om symtom, behandling..."><input type="button" name="" value="Sök">
</form>
</div>
<nav id="globalnav">
<ul>
<li>Handbok</li>
<li>Länkar</li>
<li>Kontakt</li>
</ul>
</nav>
<nav id="localnav">
<ul>
<li>Rygg
<ul>
<li>Diskbråck</li>
<li>Spinal stenos</li>
<li>Skolios</li>
</ul>
</li>
<li>Knä
<ul>
<li>Artros</li>
<li>Korsbandsskada</li>
</ul>
</li>
<li>Axel
<ul>
<li>Impingement</li>
<li>Instabila axeln</li>
</ul>
</li>
</ul>
</nav>
<main>
<article>
<h2>Om diskbråck</h2>
<img src="pics/disc.png" alt="ryggraden">
<h3 id="symtom">Symtom</h3>
<p>Ett cervikalt diskbråck är en utbuktning av nucleus puposus genom ett brott i anulus fibrosus i en disk i nacken. Cervikal radikulopati är ett neurologiskt tillstånd som kännetecknas av dysfunktion av en cervikal spinalnerv, rötterna till nerven,
eller båda. Flertalet patienter med symtomgivande cervikalt diskbråck har smärtor och/eller domningar som följer berörda myotom respektive dermatom. </p>
<h3 id="behandling">Behandling</h3>
<p>Undvik aktiviteter som ökar trycket i disken, det vill säga undvik aktiviteter som utlöser smärtor: Löpning, hoppning och liknande avrådes ifrån. Ensidiga ställningar av nacke och rygg bör undvikas</p>
<p>Övningar i form av rörelseträning, styrkeövningar och aerobiska övningar används ofta vid cervikal radikulopati.</p>
<h3 id="patientinformation">Patientinformation</h3>
<p>Slitage eller skada på diskarna i nacken kan leda till ett diskbråck som trycker mot nerver som utgår från halsryggraden. Konsekvensen kan bli utstrålande smärtor i en arm och/eller nedsatt kraft i armen. I de flesta fall går bråcket tillbaka.</p>
<p>De flesta som har diskbråck i nacken blir bra utan behandling. Visserligen kan besvären komma och gå, men hos många är obehaget plågsamt under en period för att senare aldrig komma tillbaka.</p>
<p>Många klarar sig bra med milda smärtstillande läkemedel vid besvär. Ibland kan det vara aktuellt att använda starkare smärtstillande eller inflammationshämmande läkemedel (NSAID), som dämpar irritationen runt diskbråcket. Svullnaden går ned och
det blir mer utrymme runt vävnaden. Diskbråcket trycker mindre på andra strukturer. Nackdelen med NSAID är att många får magbesvär av dem.</p>
<p>Behandlingen beror på hur stort diskbråcket är. För de flesta gäller det att behandla sig själv genom att till exempel undvika aktiviteter som belastar nacken mycket. En bra regel är att inte göra saker som ger smärtor. Löpning, hoppning och liknande
är det bra att vara försiktig med i början. Detsamma gäller ensidiga ställningar i nacke och rygg.</p>
<h3 id="referenser">Referenser</h3>
<p>Carette S and Fehlings MG. Cervical radiculopathy. N Engl J Med 2005; 353: 392-9.</p>
<p>Eubanks JD. Cervical radiculopathy: Nonoperative management of neck pain and radicular symptoms. Am Fam Physician 2010; 81: 33-40.</p>
</article>
<div class="sidebar sticky">
<section>
<h2>Genväg till innehåll</h2>
<nav id="articlemenu">
<ul>
<li>Symtom</li>
<li>Behandling</li>
<li>Patientinformation</li>
<li>Referenser</li>
</ul>
</nav>
</section>
</div>
</main>
<footer>
© Tobias Andersson 2018-03-04
</footer>
</div>
<!-- End wrapper -->
Well position: sticky works within its parent element's height and your sticky positioned div's parent main does not have any height because of the inner floated divs, thats why position:sticky not working...
So try to put a in-flow element just after floated div using :after pseudo element
main:after {
content: "";
display: table;
clear: both;
}
html,
body,
div,
header,
nav,
main,
article,
section,
aside,
footer {
margin: 0;
padding: 0;
}
header,
nav,
main,
article,
aside,
footer,
section {
display: block;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
background-image: url("pics/leonardo-da-vinci.jpg");
color: #000;
font-family: Verdana, sans-serif;
}
#wrapper {
width: 1000px;
margin: 10px auto;
background-color: #ffffff;
box-shadow: 7px 7px 7px rgba(42, 56, 28, 0.69);
}
main {
margin-left: 20%;
}
#localnav {
float: left;
width: 20%;
}
article {
width: 62.8%;
float: left;
background-color: #e7e3e3;
padding: 0.9em;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
box-shadow: 7px 7px 7px rgba(42, 56, 28, 0.69)
}
.sidebar {
width: 30%;
float: right;
}
.sidebar section {
background-color: #379013;
color: #fff;
padding: 0.9em;
margin-bottom: 1em;
border-bottom-left-radius: 20px;
box-shadow: -7px 7px 7px rgba(42, 56, 28, 0.69);
}
section a {
text-decoration: none;
}
section a {
padding: 0.5em;
}
section a:link,
section a:visited {
color: #fff;
}
section a:hover,
section a:active {
color: #0e2a05;
}
#searchbar {
padding: 0.5em;
margin-bottom: 0.5em;
text-align: center;
}
#searchbar input {
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid green;
border-radius: 4px;
font-size: 1.1em;
}
#searchbar input[type="text"] {
width: 40%;
}
#globalnav {
border-bottom: solid;
padding-bottom: 0.5em;
font-size: 1.5em;
}
#globalnav ul {
list-style: none;
margin: 0;
padding: 0;
}
#globalnav ul li {
display: inline;
}
#globalnav a {
text-decoration: none;
padding: 0.5em;
color: #267d0c;
}
#localnav ul {
list-style: none;
margin: 0;
padding: 0;
}
#localnav ul li {
display: block;
position: relative;
margin-top: 1em;
margin-right: 110px;
}
#localnav a {
text-decoration: none;
padding: 0.5em;
padding-right: 1em;
font-size: 1.5em;
}
#localnav a:link,
#localnav a:visited {
color: #666;
}
#localnav a:hover,
#localnav a:active {
background-color: #267d0c;
color: #ffffff;
}
.thisSection {
background-color: #b9f0aa;
color: #000;
border-top-right-radius: 25px;
}
#localnav ul li ul {
background-color: #b9f0aa;
border: 1px solid #333;
box-shadow: 3px 3px 3px #666;
position: absolute;
top: -0.7em;
left: 5em;
visibility: hidden;
}
#localnav ul li:hover ul {
visibility: visible;
}
#localnav ul li ul li {
display: block;
width: 100%;
white-space: nowrap;
margin-top: auto;
}
#localnav ul li ul li a {
display: block;
padding: 0.5em;
}
#localnav ul li ul li a:hover {
background-color: #267d0c;
color: #FFF;
}
#localnav #thisPage:before {
content: "> ";
}
#localnav {
padding-bottom: 0.5em;
}
main p {
text-align: justify;
}
div.sticky {
position: sticky;
top: 0;
}
main:after {
content: "";
display: table;
clear: both;
}
img {
max-width: 100%;
height: auto;
}
article img {
float: right;
}
header img {
width: 200px;
float: left;
border-radius: 50%;
}
header {
height: 133px;
padding-bottom: 2em;
padding-top: 2em;
margin-left: 1em;
position: relative;
}
header h1 {
position: absolute;
top: 1em;
right: 12em;
}
header h2 {
position: absolute;
top: 4em;
right: 6em;
}
header h1,
header h2 {
font-style: italic;
font-weight: bold;
text-shadow: 3px 3px 5px green;
}
footer {
border-top: solid;
padding: 1em;
clear: both;
}
<div id="wrapper">
<header>
<img src="http://lorempixel.com/50/50/sports" alt="logo">
<h1>Fysiohjälpen</h1>
<h2>Snabbt och enkelt att hitta informationen du söker</h2>
</header>
<div id="searchbar">
<form class="" action="" method="post">
<input type="text" name="search" placeholder="Hitta information om symtom, behandling..."><input type="button" name="" value="Sök">
</form>
</div>
<nav id="globalnav">
<ul>
<li>Handbok</li>
<li>Länkar</li>
<li>Kontakt</li>
</ul>
</nav>
<nav id="localnav">
<ul>
<li>Rygg
<ul>
<li>Diskbråck</li>
<li>Spinal stenos</li>
<li>Skolios</li>
</ul>
</li>
<li>Knä
<ul>
<li>Artros</li>
<li>Korsbandsskada</li>
</ul>
</li>
<li>Axel
<ul>
<li>Impingement</li>
<li>Instabila axeln</li>
</ul>
</li>
</ul>
</nav>
<main>
<article>
<h2>Om diskbråck</h2>
<img src="pics/disc.png" alt="ryggraden">
<h3 id="symtom">Symtom</h3>
<p>Ett cervikalt diskbråck är en utbuktning av nucleus puposus genom ett brott i anulus fibrosus i en disk i nacken. Cervikal radikulopati är ett neurologiskt tillstånd som kännetecknas av dysfunktion av en cervikal spinalnerv, rötterna till nerven,
eller båda. Flertalet patienter med symtomgivande cervikalt diskbråck har smärtor och/eller domningar som följer berörda myotom respektive dermatom. </p>
<h3 id="behandling">Behandling</h3>
<p>Undvik aktiviteter som ökar trycket i disken, det vill säga undvik aktiviteter som utlöser smärtor: Löpning, hoppning och liknande avrådes ifrån. Ensidiga ställningar av nacke och rygg bör undvikas</p>
<p>Övningar i form av rörelseträning, styrkeövningar och aerobiska övningar används ofta vid cervikal radikulopati.</p>
<h3 id="patientinformation">Patientinformation</h3>
<p>Slitage eller skada på diskarna i nacken kan leda till ett diskbråck som trycker mot nerver som utgår från halsryggraden. Konsekvensen kan bli utstrålande smärtor i en arm och/eller nedsatt kraft i armen. I de flesta fall går bråcket tillbaka.</p>
<p>De flesta som har diskbråck i nacken blir bra utan behandling. Visserligen kan besvären komma och gå, men hos många är obehaget plågsamt under en period för att senare aldrig komma tillbaka.</p>
<p>Många klarar sig bra med milda smärtstillande läkemedel vid besvär. Ibland kan det vara aktuellt att använda starkare smärtstillande eller inflammationshämmande läkemedel (NSAID), som dämpar irritationen runt diskbråcket. Svullnaden går ned och
det blir mer utrymme runt vävnaden. Diskbråcket trycker mindre på andra strukturer. Nackdelen med NSAID är att många får magbesvär av dem.</p>
<p>Behandlingen beror på hur stort diskbråcket är. För de flesta gäller det att behandla sig själv genom att till exempel undvika aktiviteter som belastar nacken mycket. En bra regel är att inte göra saker som ger smärtor. Löpning, hoppning och liknande
är det bra att vara försiktig med i början. Detsamma gäller ensidiga ställningar i nacke och rygg.</p>
<h3 id="referenser">Referenser</h3>
<p>Carette S and Fehlings MG. Cervical radiculopathy. N Engl J Med 2005; 353: 392-9.</p>
<p>Eubanks JD. Cervical radiculopathy: Nonoperative management of neck pain and radicular symptoms. Am Fam Physician 2010; 81: 33-40.</p>
</article>
<div class="sidebar sticky">
<section>
<h2>Genväg till innehåll</h2>
<nav id="articlemenu">
<ul>
<li>Symtom</li>
<li>Behandling</li>
<li>Patientinformation</li>
<li>Referenser</li>
</ul>
</nav>
</section>
</div>
</main>
<footer>
© Tobias Andersson 2018-03-04
</footer>
</div>
here is part of the CSS code, i cant seem to figure it out.
#About{
height:500px;
background: url("murano.jpg") no-repeat center;
}
I want to decrease the opacity of the imported background image
Add Opacity with your css
#About{
opacity :0.4;
height:500px;
background: url("murano.jpg") no-repeat center;
}
the best solution would be to create another div inside your #about div and position that div absolute while position your #about div to relative and give the background of this newly added div as rgba(0,0,0,0.5) where 0.5 represents the opacity
there is no css rule to provide opacity to background images.
when you put the opacity of #about div to 0.4 of course its child will inherit this property and any text inside about div will get the opacity of 0.4
<div id="about">
<div class="absolute">
</div>
</div>
#about{
position:relative;
background:url(..);
}
.absolute{
position:absolute;
background:rgba(0,0,0,0.5);
}
Use background-color: rgba(255, 255, 0, 0.3);
The 0.3 being the the alpha(opacity channel).
OR
Add an extra div to hold the background, and change the opacity there.
opacity: 0.4; filter:alpha(opacity=40);
Example :
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('http://i40.tinypic.com/3531bba.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
opacity: 0.4;
filter: alpha(opacity=40);
}
.head {
width: 150px;
height: 160px;
}
body {
font-family: tahoma, helvetica, arial, sans-serif;
font-size: 12px;
text-align: center;
background: #000;
color: #ddd4d4;
padding-top: 12px;
line-height: 2;
}
td,
th {
font-size: 12px;
text-align: left;
line-height: 2;
}
#wrapper {
margin: auto;
text-align: left;
width: 832px;
position: relative;
padding-top: 27px;
}
#body {
background: url(images/body_bg_1.gif) repeat-y;
width: 832px;
}
#bodyi {
background: url(images/body_top_1.gif) no-repeat;
width: 832px;
}
#bodyj {
background: url(images/body_bot_1.gif) bottom no-repeat;
padding: 1px 0;
}
#body2 {
background: url(images/body_bg_2.gif) repeat-y;
width: 832px;
}
#bodyi2 {
background: url(images/body_top_2.gif) no-repeat;
width: 832px;
}
#bodyj2 {
background: url(images/body_bot_2.gif) bottom no-repeat;
padding: 1px 0;
}
h1,
h2,
h3,
#nav,
#nav li {
margin: 0;
padding: 0;
}
#nav {
font-size: 10px;
position: absolute;
right: 0;
top: 12px;
line-height: 1.2;
padding-left: 120px;
}
#nav li {
float: left;
width: 108px;
list-style: none;
margin-left: 2px;
border-bottom: 1px solid black;
}
#nav a {
background: #738d09;
color: #2e3901;
font-weight: bold;
text-decoration: none;
display: block;
text-align: center;
padding: 1px 0;
}
#sidebar {
float: left;
width: 250px;
padding-left: 4px;
}
#sidebar .content {
padding-left: 24px;
}
#sidebar .content img {
float: left;
clear: left;
margin: 5px 5px 5px 0;
}
#sidebar .divider {
background: url(images/left_splitter.gif) center no-repeat;
height: 5px;
width: 169px;
}
#content {
float: right;
width: 462px;
}
#content1 {
float: left;
width: 800px;
}
#content1 .content {
margin: 7px 35px 7px 20px;
padding-left: 20px;
}
#content .content {
margin: 7px 55px 7px 17px;
}
#content .content table {
width: 310px;
margin-right: 0px;
}
#content .content table td,
#content .content table th {
padding-right: 10px;
}
#content .content table td.download {
text-align: right;
padding-right: 0px;
}
#content .divider {
background: url(images/right_splitter.gif) repeat-x;
height: 5px;
}
h1 {
position: absolute;
left: 0;
top: 0;
}
h2 {
font-size: 10px;
color: #cf9118;
margin: 1em 0;
}
h3 {
font-size: 10px;
margin: 1em 0;
}
h5 {
font-size: 20px;
color: #cf9118;
margin: 1em 0;
text-align: center;
}
h6 {
font-size: 18px;
margin: 1em 0;
}
p {
margin: 1em 0;
}
img {
border: 0;
}
img.left {
float: left;
margin-right: 14px;
}
img.right {
float: right;
margin-left: 14px;
}
.readmore {
text-align: right;
}
.hidden {
visibility: hidden;
}
.clear {
clear: both;
}
a {
color: #f0b33c;
font-weight: bold;
text-decoration: none;
}
a:visited {
color: #cf9118;
}
a:hover {
text-decoration: underline;
}
table a {
text-decoration: underline;
font-weight: normal;
color: #7f7c79;
}
#power {
color: #fff;
text-align: center;
}
#power a {
color: #fff;
}
<div id="background"></div>
<div class="head">
</div>
<div id="wrapper">
<ul id="nav">
<li>Inicio
</li>
<li>Sobre a banda
</li>
<li>Membros
</li>
<li>Bilhetes
</li>
<li>Galeria
</li>
<li>Área Pessoal
</li>
</ul>
<h1></h1>
<div id="body">
<div id="bodyi">
<div id="bodyj">
<div id="sidebar">
<div class="content">
<h2>Galeria de imagens</h2>
<p>Aqui poderá encontrar uma galeria de imagens da banda, com fotos de concertos, entre outras imagens.</p>
<p class="readmore">Ver
</p>
</div>
<div class="content">
<h2>Noticias</h2>
<h3>18 de Abril, 2011</h3>
<h4>"So Far Away" vai ter videoclip</h4>
<p>Muitos se questionavam se o mais recente single dos Avenged Sevenfold, "So Far Away", ia ter direito a um videoclip. Eis que surge a boa notícia para os fãs dos A7X: So Far Away vai ter videoclip. Já foram divulgadas algumas fotos do set de
filmagens.</p>
<h3>10 de Março, 2011</h3>
<h4>A7X nomeados para a Metal Hammer Golden Gods Awards 2011</h4>
<p>Os Avenged Sevenfold foram nomeados para a Metal Hammer Golden Gods Awards 2011 em duas categorias. As categorias onde os A7X estão a participar são as seguintes:
<p>
- Best International Band (Melhor Banda Internacional)
<p>
- Best Shredder (com o Synyster Gates) (Melhor Shredder)</p>
</div>
</div>
<div id="content">
<center>
<img src="images/avengeds.jpg" width="346" height="234" alt="four men walking" />
</center>
<div class="content">
<h2>O album mais recente</h2>
<img src="images/nightmare.jpg" width="82" height="80" alt="Unwired album cover" class="left" />
<p>Os californianos Avenged Sevenfold estão de volta aos discos com "Nightmare". Solos de guitarra, vocalizações rasgadas e um som contagiante continuam a ser a base do sucesso de uma das bandas de heavy-metal com mais fãs no mundo inteiro. Fundados
em 1999 por M. Shadows, Synyster Gates, Zacky Vengeance, Johnny Christ e The Rev - baterista que faleceu em Dezembro de 2009 passado e que foi substituido neste disco por Mike Portnoy, dos Dream Theater - os Avenged Sevenfold já contam com
cinco discos de originais na sua carreira.</p>
<div class="divider"></div>
<h2>Musicas com maior sucesso</h2>
<table summary="track downloads" border="0" cellspacing="0">
<tr>
<th width="55%">Faixa</th>
<th>Album</th>
<th class="hidden">Dowload links</th>
</tr>
<tr>
<td>Bat Country</td>
<td>City of Evil</td>
<td class="download">Ouvir
</td>
</tr>
<tr>
<td>Beast and the Harlot</td>
<td>City of Evil</td>
<td class="download">Ouvir
</td>
</tr>
<tr>
<td>Seize the Day</td>
<td>City of Evil</td>
<td class="download">Ouvir
</td>
</tr>
<tr>
<td>Almost Easy</td>
<td>Avenged Sevenfold</td>
<td class="download">Ouvir
</td>
</tr>
<tr>
<td>Afterlife</td>
<td>Avenged Sevenfold</td>
<td class="download">Ouvir
</td>
</tr>
<tr>
<td>Nightmare</td>
<td>Nightmare</td>
<td class="download">Ouvir
</td>
</tr>
<tr>
<td>Welcome to the Family</td>
<td>Nightmare</td>
<td class="download">Ouvir
</td>
</tr>
</table>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div align="right">
<font size="2">text</font>
</div>
</div>
you would want to add the background to the #about:after and then apply the transparency to that. there is no way to add the transparency directly to the background as far as I know.
here is a link to a good article on this.
I want to make a responsive menu with only html and css , no Javascript.
I'm still practising.. maybe anyone can see why my menu doesn't appear when clicking on the label?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="Frank.css">
<meta name="author" content="Frank Van Hoek">
<title>Frank</title>
</head>
<body>
<header>
<div class="logo" class="cfx">
<img class="imglogo" class="cfx" src="afbeeldingen/logo.png" alt="Logo">
</div>
<div class="facebook" class="cfx"></div>
<img class="facebook" class="cfx" src="afbeeldingen/facebook.png" alt="facebook">
</header>
<div class="wrapper" class="cfx">
<nav class="normaal" class="cfx">
<ul class="menu" class="cfx">
<li class="actief">Home</li>
<li>Leden</li>
<li>Parken</li>
<li>Evenementen</li>
<li>Over ons</li>
</ul>
</nav>
/************HAMBURGER***************/
<nav class="hamburger">
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle"></label>
<ul>
<li class="actief">Home</li>
<li>Leden</li>
<li>Parken</li>
<li>Evenementen</li>
<li>Over ons</li>
</ul>
</nav>
<div class="content" class="cfx">
<h2>BMX : Streetculture in Antwerp</h1>
<video controls><source src="afbeeldingen/StreetcultureInAntwerp.mp4" type="video/mp4"></video>
<p>Onze A.Way leden in dit filmpje zijn Tarik Begdouri, Zeno Peeters, Koen Vanden Broeck en Dimitri Huybrechts. De andere rijders zijn Niels Mertens, Stef de Backer, Brian O' Brien, Jonas van Oosterbosch en Juno Vereecken. Het werd gefilmd en gemonteerd door onze rijder Ilyas Deckers en de achtergrondmuziek is "Al'Tarba Vs Lord Lhus - 3 Amigos feat Dirty Dike & Jace Abstract".</p>
<h1>Nieuwsfeeds</h1>
<div class="nieuwsfeed">
<p class="bericht">
Dit weekend is het de 'Braaab BMX Contest 2015' in '040 BMX park' in Eindhoven. Dit wil je niet missen! Meer informatie vind je op de facebookpagina.
</p>
<p class="datum">
4 maart 2015
</p>
</div>
<div class="nieuwsfeed">
<p class="bericht">
Iemand die deze rail durft te grinden? - Locatie: Aan de schelde, niet ver van ATV
</p>
<p class="datum">
2 maart 2015
</p>
</div>
<div class="nieuwsfeed">
<p class="bericht">
Reminder!!! Deze zondag 2de meeting ivm Bmx jam stadspark - Locatie: Fietsenfikser - Tijdstip: 13u
</p>
<p class="datum">
26 februari 2015
</p>
</div>
<div class="nieuwsfeed">
<p class="bericht">
Deze vrijdag Pizza Friday om 5u in het Stadspark! Be there!
</p>
<p class="datum">
25 februari 2015
</p>
</div>
</div>
<footer>
<p>© All rights reserved - 2015</p>
</footer>
</div>
</body>
</html>
CSS
html
{
font-family: Arial, sans-serif;
height:100%;
margin: 0;
padding: 0;
}
img , video;
{
max-width: 100%;
height: auto;
}
body
{
height:inherit;
margin: inherit;
padding: inherit;
background-color: #000;
}
.wrapper
{
max-width: 900px;
min-width: 400px;
min-height:100%;
margin: 0 auto;
background-color: #000;
}
header
{
background-image:url(afbeeldingen/skyline.png);
margin: auto;
height: 336px;
width: inherit;
}
.logo
{
padding: 0 1.25em;
float: left;
}
.imglogo
{
width: 170px;
height: 170px;
}
.facebook
{
width: 40px;
height: 40px;
text-align:right;
float:right;
padding-top: 30px;
}
nav
{
width: 100%;
padding: 0px auto 0px auto;
}
ul.menu
{
list-style-type: none;
margin: 5px 10% 5px 10%;
padding: 5px auto 5px auto;
left: 0;
text-align: center;
}
.menu li
{
float:left;
margin: 5px auto 5px auto;
padding: 0px 1.875em 0px 1.875em;
background-color: #000;
text-align: center;
}
.menu li:first-child
{
padding: 0px 1.875em 0px 1.875em;
}
.menu li > a
{
display: block;
padding: 10px 0px 10px 0px;
margin: 0px 0px 0px 0px;
text-decoration: none;
color: #fff;
}
.menu li:hover, li.actief
{
background-color: #f08222;
}
.menu li:hover > a, li.actief >a
{
color: #000;
}
.hamburger
{
display: none;
}
.content
{
color: #fff;
display:block;
margin: 50px 7.7777777777777777777777777777778% 70px 7.7777777777777777777777777777778%;
}
.content video
{
width: 760px;
height: auto;
}
.content h1
{
text-decoration: underline;
margin: 50px auto;
}
.nieuwsfeed
{
margin: 30px auto;
padding: 0.625em;
border: 1px solid #fff;
border-radius: 5px;
}
.datum
{
text-align: right;
font-size: 0.8em;
}
.content a:link
{
color: #f08222;
}
.content a:visited
{
color: #e2ff00;
}
footer p
{
color: #fff;
font-size: 0.9em;
text-align: center;
margin: 200px auto 40px auto;
}
/**************************
* MEDIA QUERY *
*************************/
#media screen and (max-width: 820px)
{
html, body {
height: 100%;
}
body {
margin: 0;
overflow-x: hidden;
font-family: Arial, sans-serif;
}
.normaal
{
display:none;
}
.hamburger
{
display: inline-block;
}
#menu-toggle {
display: none;
}
#menu-toggle:checked ~ .hamburger ul{
left:0;
}
#menu-toggle:checked ~ .content {
left:240px;
}
#menu-toggle:checked + label {
left:250px;
}
label[for="menu-toggle"] {
position: fixed;
left:60px;
top:300px;
width: 30px;
height: 30px;
background-color: #0f0;
z-index: 2;
}
.hamburger ul{
position: fixed;
width: 240px;
height: 100%;
top:300px;
left: -240px;
background-color: #e34dd2;
color: white;
}
.hamburger ul {
margin: 0;
padding: 0;
list-style: none;
}
.hamburger li a {
display: block;
padding:0.5em 1em;
color: white;
border-bottom: 1px #424240 solid;
}
.container {
position: relative;
left:0;
padding: 2em;
}
nav, .container, label[for="menu-toggle"] {
-webkit-transition: left 0.5s;
transition: left 0.5s;
}
}
/*************************
* C L E A R F I X *
*************************/
.cfx::before, .cfx::after {
display: table;
line-height: 0;
content: "";
}
.cfx::after {
clear: both;
}
It would make more sense to use a responsive framework, such as Bootstrap, or Foundation.
Here is a simplistic example for a responsive navigation menu which utilises bootstrap.
Responsive navigation bar Preview
Responsive navigation bar Download
You have this:
.hamburger ul{
position: fixed;
width: 240px;
height: 100%;
top:300px;
left: -240px;
background-color: #e34dd2;
color: white;
}
position: fixed; means that its position values are in relation to the window/viewport. So having left: -240px; will move this element out of the viewport (i.e. make it invisible). Do you really want this? Even if that's intentionally and supposed to work together with this rule
#menu-toggle:checked ~ .hamburger ul{
left:0;
}
...to move it in, they are in the wrong order - the former rule will most likely overwrite the other one, making the element invisible...
Hi guys I really cant figure out why the images on my <ul> wont work.
I need to style the ul with a class but the <li> keeps looking the same.
Here is my css code:
body{padding:0;margin:0; background:#39424b; font-family: verdana;}
h1, h2{padding:0;margin:10px 0 10px 0;}
h1 {font-size: 150%;}
h2 {font-size: 110%;}
p{padding:0; margin:0 0 5px 0;}
a {color:#176092; text-decoration:none;}
a:hover {text-decoration:underline;}
#wrap {width:960px; margin: 0 auto; background:#999;}
#header, #footer {background: #0f1923; color:#fff; padding:10px 40px;}
#footer p {font-size:80%; text-align:right;}
#content {background:#ccc; padding:10px 40px;}
pre {font-size:85%; background:#fff; border:1px #ccc solid; padding:5px}
#checkjul ul {
list-style-image: url('http://dorchdanola-netbutik.dk/Resources/Files/general/checkbox-jul.png');
padding-left: 25px;
margin-bottom: 10px;
height: 19px;
}
#slide-out-div-jule-holder {
width: 600px;
height: 270px;
margin: 20px;
margin-top: 10px;
Here is my html code:
<div class="slide-out-div">
<a class="handle" href="http://link-for-non-js-users">Julehandel</a>
<div style="float:left" class="slide-out-div-jule-holder">
<b>Køb julegaver hos Dorch & Danola<br /> - Nemt, Sikkert og billigt!</b>
<ul class="checkjul"><li>E-mærket kontrolleret webshop for sikker handel</li>
<li>Vi bytter alle ordre købt fra 20. oktober frem til og med den 15. januar 2015</li>
<li>Gratis ombytning af Julegaver - Vi sender returlabel </li>
<li> Sidste bestillingsdato for julegaver er den 22. december.</li>
<li> Hurtig levering - Fragt fra Kr. 39,-</li>
<b>Dorch & Danola ønsker alle en glædelig jul og et rigtig godt nytå</b></ul>
</div></div>
So it doesn't work because you are styling #checkjul ul but you don't have such an element. So to work you need to add those styles to your ul class .checkjul and it will work :)
body {
padding: 0;
margin: 0;
background: #39424b;
font-family: verdana;
}
h1,
h2 {
padding: 0;
margin: 10px 0 10px 0;
}
h1 {
font-size: 150%;
}
h2 {
font-size: 110%;
}
p {
padding: 0;
margin: 0 0 5px 0;
}
a {
color: #176092;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
#wrap {
width: 960px;
margin: 0 auto;
background: #999;
}
#header,
#footer {
background: #0f1923;
color: #fff;
padding: 10px 40px;
}
#footer p {
font-size: 80%;
text-align: right;
}
#content {
background: #ccc;
padding: 10px 40px;
}
pre {
font-size: 85%;
background: #fff;
border: 1px #ccc solid;
padding: 5px
}
.checkjul{
list-style-image: url('http://dorchdanola-netbutik.dk/Resources/Files/general/checkbox-jul.png');
padding-left: 25px;
margin-bottom: 10px;
height: 19px;
}
#slide-out-div-jule-holder {
width: 600px;
height: 270px;
margin: 20px;
margin-top: 10px;
}
<div class="slide-out-div">
<a class="handle" href="http://link-for-non-js-users">Julehandel</a>
<div style="float:left" class="slide-out-div-jule-holder">
<b>Køb julegaver hos Dorch & Danola<br /> - Nemt, Sikkert og billigt!</b>
<ul class="checkjul">
<li>E-mærket kontrolleret webshop for sikker handel</li>
<li>Vi bytter alle ordre købt fra 20. oktober frem til og med den 15. januar 2015</li>
<li>Gratis ombytning af Julegaver - Vi sender returlabel</li>
<li>Sidste bestillingsdato for julegaver er den 22. december.</li>
<li>Hurtig levering - Fragt fra Kr. 39,-</li>
<b>Dorch & Danola ønsker alle en glædelig jul og et rigtig godt nytå</b>
</ul>
</div>
</div>
You have
<ul class="checkjul">
but you are defining your style as an ID, and applying it to the wrong element:
#checkjul ul
For this to work, you will need:
.checkjul li
I know this is a well-known issue in web design. My web site works as expected on Firefox, Opera and Safary but on IE the original design is lost. There is something wrong with the container as you can see in: www.skaldenmet.cjb.net
I'm aware the coding is not that good, but I would like someone to tell me where does exactly the problem lies so I don't have to re-design everything from the scratch.
I hope someone can help. Thanks in advance!
HTML SOURCE
<html>
<head>
<link rel="icon" href="favicon.jpg" type="image/x-icon" />
<link href="skaldenmet-css.css" rel="stylesheet" type="text/css">
<title>Skaldenmet-Folk Metal</title>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="navigation">
<ul>
<li>Inicio</li>
<li>Historia</li>
<li>Música</li>
<li>Banda</li>
<li>Contacto</li>
<li>Licencia CC</li>
<li>Enlaces</li>
<li>English</li>
<li>Noticias</li>
</ul>
</div>
<div style="text-align: justify; background-image: url('bg55.jpg');">
<h1>Bienvenidos a Skaldenmet,</h1>
<div style="text-indent: 160px;"> un proyecto folk metal desde el norte de Argentina.</div>
<div style="padding: 5px;">
<p>
En este sitio encontrarán información sobre la banda así como la posibilidad de descargar
"Bosque bajo la noche", el primer, y tal vez último, disco lanzado.<br>
</p>
</div>
</div>
<div id="footer">
<p>2010-2011 | www.skaldenmet.cjb.net | Republica Argentina </p>
<p>Content on this site is licensed under a Creative Commons Attribution 3.0 License</p>
<p>Sitio desarrollado con software libre GNU/Linux.</p>
</div>
</div>
</body>
</html>
CSS FILE
#CHARSET "ISO-8859-1";
*
{
padding: 0;
margin: 0;
}
body
{
font-family: Optima, ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, Helvetica, Arial, sans-serif;
font-size: 12px; color: #000;
text-align: center;
padding: 12px 0;
background: #FCFCFC;
}
#container
{
margin: 0 auto;
width: 800px;
background:#fff;
border-width: 2px;
border-style:solid;
}
#header
{
background-image: url(header2.jpg);
background-repeat: repeat;
width:800px;
height: 200px;
}
#header h1
{
text-align:right;
padding-top: 80px;
padding-right: 20px;
}
#navigation
{
float: left;
width: 800px;
background: #333;
}
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation li a
{
display: block;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#navigation li a:HOVER
{
background: #383;
}
#content-container, #content-container-index
{
clear:left;
background-image: url("bg55.jpg");
height: 400px;
}
/* esto no se si es necesario */
#content-container
{
padding:20px;
}
#content-image{
width: 780px;
text-align: justify;
}
#content-container h2
{
color:#000;
font-size: 160%;
margin: 0 0 .5em;
}
#footer {
background-image: url(footer.jpg);
background-repeat: repeat;
height: 50px;
}
a:link {
color: #333333;
}
a:visited {
color: #333333;
}
a:hover {
color: #CCCCCC;
background-color: #333333;
text-decoration: none;
}
a:active {
color: #333333;
}
You need to add a doctype as the very first line to trigger Standards Mode:
<!DOCTYPE html>
Without it, IE is rendering your page in Quirks Mode (which emulates IE5.5).
See: http://hsivonen.iki.fi/doctype/
I'm not intimately familiar with your site, but after manually changing the browser mode to IE9 mode just to test (hit F12), it looks "identical" to Chrome.