My plan is to have some rows with 3 divs next to each other floated left replacing the Accordion-Headers, then open each div's content below a row of three pushing the rest of the page down.
I tried various 'position' possiblities but couldnt get it work the way I wanted it to..
More a css problem. Or better not use accordion?
jsfiddle.net/pCwxa/1
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#accordion").accordion({ collapsible: true },{ active: false });
});
</script>
<style type="text/css">
#link { background-color: grey;
float: left;
height: 300px;
width: 280px;
margin: 0 20px 80px 0px;
}
#cont { top:320px;
background-color: blue;
height: 300px;
width: 880px;
}
</style>
</head>
<body>
<div style="width:900px; height:900px; margin-left:30px; margin-bottom:; border:1px solid red; padding:0px;">
<div id="accordion">
<div id="link">
<h3>Section 1</h3></div>
<div id="cont">
<p>
Blabla
</div>
<div id="link">
<h3>Section 2</h3></div>
<div id="cont">
<p>
Blabla
</p>
</div>
<div id="link">
<h3>Section 3</h3></div>
<div id="cont">
<p>
Blabla
</p>
</div>
<div id="link">
<h3>Section 4</h3></div>
<div id="cont">
<p>
Blabla
</p>
</div>
</div>
</div>
</body>
</html>
You've got the div elements arranged in alternating order, with each div.link alternating with div.cont. Instead, put the three div.link first and then three div.cont. Use CSS clear to ensure that the second group of three appears on a new line.
Related
I have two images, a left arrow and a right arrow, that need to go outside of the text "submit your picture here!" I am actually able to achieve the look I'm going for: http://i.imgur.com/1k1QTE4.jpg ,but I used z-index to do so, which does not stay relative to the text when the screen is made smaller/larger. What would you suggest is the best way to go about this? Here is my code for the text:
<article>
<br>
<p style="text-align:center;font-family:arial">
<font size="4">
<strong>
<span class="white_bg">
Submit your picture here!
</span>
</strong>
</font>
</p>
<br>
<br>
<br>
<br>
<br>
<br>
</article>
There's not really anything (yet in the css) that pertains to this. Thanks!
Edit: Full CSS and HTML
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
<!--
#banner {width:100%}
#banner img {width:100%;height:auto}
nav {width:100%;display:block;}
nav ul {list-style-type:none;margin:0;padding:0;text-
align:center;background-color:#222419}
nav li {display:inline-block;background-color:#222419;}
nav a {line-height:35px; color:white; padding: 0 30px; font-size:18px;
font-family:Arial, sans-serif;background-color:#222419;}
nav a:hover {text-decoration:none}
a{float:left;
margin-right:58px;
margin-left:58px;
color:#000;
text-decoration:none;
}
body {background-image:url("background1.jpg");
background-size:1700px 850px;
background-repeat:no-repeat;
}
.white_bg {background-color:#ffffff;
padding: 1px;
}
.col-split-3 {
-webkit-column-count:3;
-moz-column-count:3;
column-count:3;
text-align:center;
width: 450px;
}
.col-split-3 > div {
display:block;
}
-->
</style>
<meta charset="utf-8"/>
<title>DrawYourPets.com</title>
</head>
<body>
<header>
<nav>
<div style="text-align:center" id="banner">
<img src="drawyourpetsbanner3.jpg" border="0" alt="DrawYourPetsBanner3"/>
</div>
<div>
<ul>
<li><strong>HOME</strong></li>
<li><strong>CONTACT</strong></li>
<li><strong>GALLERY<strong></li>
<li><strong>STORE</strong></li>
</ul>
</div>
</nav>
</header>
<section>
<aside>
</aside>
<article>
<br>
<div class="col-split-3">
<div><img src="arrow1.jpg" width="120" height="120"/></div>
<div><p style="font-family:arial">
<font size="4">
<strong>
<span class="white_bg">
Submit your picture here!
</span>
</strong>
</font>
</div>
<div><img src="arrow2.jpg" width="120" height="120"/></div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
</article>
</section>
<footer>
<div style="text-align:center" id="banner">
<img src="banner3.jpg" border="0" alt="Banner3">
</div>
</footer>
</body>
</html>
Edit 2 - Columns Centered
I found that the columns are similar to a table, and can only be centered in the css by adding margin-left and margin-right:auto:
.col-split-3 {
margin-left:auto;
margin-right:auto;
-webkit-column-count:3;
-moz-column-count:3;
column-count:3;
text-align:center;
width: 500px;
}
.col-split-3 > div {
display:block;
}
Now my only problem is getting "submit your picture here!" on two lines. I need to find a way to expand the width of the center column. Current screenshot:http://i.imgur.com/wxe79tS.jpg
There are a couple of ways to do this, just from me fiddling around with - Keep In mind: I've only tested these on Chrome because I don't have any other browsers installed on my computer.
Example 1
.img-left {
float: left;
}
.img-right {
float: right
}
.center {
text-align: center;
border: 1px solid black;
}
<br />
<div class="center">
<div class="img-left">
This is the left image
</div>
Text
<div class="img-right">
This is the right image
</div>
</div>
Example 2 (edited)
This one uses a trick of block-level elements inside an element with the column-count CSS property auto splitting into columns. I've not tested this with any large amount of text, but by your example it looks to be a fairly simple application. I've added a width to the parent element to change the spacing between the elements.
.col-split-3 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
text-align: center;
width: 300px;
}
.col-split-3 > div {
display: block;
}
<div class="col-split-3">
<div>Image 1</div>
<div>center text</div>
<div>Image 2</div>
</div>
These were sort of the first two ways that came to mind, I'm sure there's some way to use the ::before and ::after selectors to add images, I just don't currently have the time to fiddle with how.
I have the code corect for jquery to make rounded corners.. I have tested it with just a background color, and it works fine.
However, I want to apply the corners to images. It just won't work for me!
I have created an example page where I have the image with the class, right next to a div with the same class but only has a background color.. The image won't work, but the colored 'box' will.
I have tried coding it three different ways, and it still wont work. (I don't need all three ways of coding to work.. just one will do! ;'D )
Here is my Fiddle link: http://jsfiddle.net/SunnyOz/g46Gx/
Here is the test page online: http://www.webau.net/TC/example/corner_test.htm
Here is the CSS:
* {
border: 0 none;
}
.content {
width: 900px;
background-color: #fff;
margin: 0 auto;
}
.innertube {
padding: 20px;
}
.imgBox, .imgBox img { width:493px; height:257px; margin:0; padding:0 }
.divToHaveCorners, .divToHaveCorners img { width:493px; height:257px; margin:0; padding:0; display: block; }
Here is the HTML:
<div class="content">
<div class="innertube">
<br clear="all" />
<br clear="all" />
<img class="roundimg" src="http://webau.net/TC/example/images/motorcycle1.jpg" />
<div class="roundimg" style="width: 200px; height: 100px; background-color: #701080;">Hello World!</div>
<br clear="all" />
<br clear="all" />
<div class="imgBox"><img src="http://webau.net/TC/example/images/motorcycle1.jpg" /></div>
<div class="imgBox" style="width: 200px; height: 100px; background-color: #701080;">Hello World!</div>
<br clear="all" />
<br clear="all" />
<img class="divToHaveCorners" src="http://webau.net/TC/example/images/motorcycle1.jpg" />
<div class="divToHaveCorners" style="width: 200px; height: 100px; background-color: #701080;">Hello World!</div>
<br clear="all" />
<br clear="all" />
</div>
</div>
Here is the internal Javascript code:
$(document).ready(function(){
$(".roundimg").corner("tl 50px").corner("br 50px");
$(".imgBox").corner("15px");
$('.divToHaveCorners').corner();
});
My external JS references are:
<script type="text/javascript" src="http://webau.net/TC/example/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://webau.net/TC/example/jquery.corner.js"></script>
.
I am assuming that I have left out something really simple.. but I just can't see it.
Any help will be greatly appreciated.
Thanks,
SunnyOz
This does it, but there are also a TON of plugins that make these kinds of things a lot easier to use like imgr. Also- using this as a reference may be very helpful to you. Cheers!
<!DOCTYPE html>
<html>
<head>
<style>
#imgBox, #imgBoxPlain, #imgBox img { background-color: #701080; width:493px; height:257px; margin:0;padding:0;}
</style>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript">
$.fn.corner.defaults.useNative = false;
$(document).ready(function(){
$("#imgBox").corner("15px");
$("#imgBoxPlain").corner("15px");
});
</script>
</head>
<body>
<div class="content">
<div class="innertube">
<div id="imgBox"><img src="images/motorcycle1.jpg" /></div>
<div id="imgBoxPlain" style="width: 200px; height: 100px;">Hello World!</div>
</div>
</div>
</body>
</html>
I have simple divs
<div class="ui-bar-a ui-corner-top">
first_test | Status: <img src="templates/style/images/reload.gif" />
</div>
<div class="ui-bar-a">
sms1 | Status: <img src="templates/style/images/reload.gif" />
</div>
<div class="ui-bar-a ui-corner-bottom">
sms2 | Status: <img src="templates/style/images/reload.gif" />
</div>
It looks like:
I need it like:
I tried to set margin:auto align="middle", but it did not help
try putting
.ui-bar-a img{
vertical-align: middle;
}
just put
vertical-align:middle;
css for image. nothing else. you will get your output.
You could use this CSS:
.ui-bar-a img, .ui-bar-a span{
display:inline-block;
vertical-align:top;
}
.ui-bar-a img{
margin-top:xxx; // as you requirment
}
and this HTML:
<div class="ui-bar-a">
<span>Some text here </span>
<img src="xxx.jpg">
</div>
use this code, below is the result as well as attached
<div class="ui-bar-a">
sms1 | Status: <img src="status.png" style= "vertical-align:middle;" />
</div>
<div class="ui-bar-a ui-corner-bottom">
sms2 | Status: <img style= "vertical-align:middle;" src="status.png" />
</div>
Here an Example how to vertical align DIV's
Example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Universal vertical center with CSS</title>
<style>
.greenBorder {border: 1px solid green;} /* just borders to see it */
</style>
</head>
<body>
<div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div class="greenBorder" style=" #position: relative; #top: -50%">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>
</body>
</html>
Source: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
You can use: floting for making ,
<div class="ui-bar-a ui-corner-top">
<span>first_test</span> <span>|</span> <span>Status:<span> <img src="templates/style/images/reload.gif" />
.ui-corner-top{
overflow:hidden
padding:5px 0;
}
.ui-corner-top span{
float:left;
display:block;
padding:0 2px;
}
I am setting up a page with jQuery's Cycle plugin and have four divs set to fade. I have the code in place, the images set, but it doesn't cycle properly. Firefox says there is a problem with the following code:
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade'
});
});
</script>
Here is the html:
<div class="slideshow">
<div id="mainImg-1" class="slide">
<div class="quote">
<h2>Building Big Relationships with Small Business.</h2>
<p>“This is quote Number One.<br />
They are there when I need them the most.”</p>
<p><span class="author">Jane Doe – Charlotte Flower Shop</span></p>
<div class="help">Let Us Help You</div>
</div>
</div>
<div id="mainImg-2" class="slide">
<div class="quote">
<h2>Building Big Relationships with Small Business.</h2>
<p>“This is quote Number Two.<br />
They are there when I need them the most.”</p>
<p><span class="author">Jane Doe – Charlotte Flower Shop</span></p>
<div class="help">Let Us Help You</div>
</div>
</div>
<div id="mainImg-3" class="slide">
<div class="quote">
<h2>Building Big Relationships with Small Business.</h2>
<p>“This is quote Number three.<br />
They are there when I need them the most.”</p>
<p><span class="author">Jane Doe – Charlotte Flower Shop</span></p>
<div class="help">Let Us Help You</div>
</div>
</div>
<div id="mainImg-4" class="slide">
<div class="quote">
<h2>Building Big Relationships with Small Business.</h2>
<p>“This is quote Number Fout.<br />
They are there when I need them the most.”</p>
<p><span class="author">Jane Doe – Charlotte Flower Shop</span></p>
<div class="help">Let Us Help You</div>
</div>
</div>
Here is the CSS:
.slideshow { width: 946px; height: 283px; border: 1px solid #c29c5d; margin: 8px; overflow: hidden; z-index: 1; }
#mainImg-1 { width: 946px; height: 283px; background: url(../_images/main.jpg) no-repeat 9px 9px; }
#mainImg-2 { width: 946px; height: 283px; background: url(../_images/main.jpg) no-repeat 9px 9px; }
#mainImg-3 { width: 946px; height: 283px; background: url(../_images/main.jpg) no-repeat 9px 9px; }
#mainImg-4 { width: 946px; height: 283px; background: url(../_images/main.jpg) no-repeat 9px 9px; }
#mainImg-1 .quote,
#mainImg-2 .quote,
#mainImg-3 .quote,
#mainImg-4 .quote { width: 608px; height: 168px; float: right; margin: 80px 11px 0 0; background: url(../_images/bg_quoteBox.png) repeat-x; }
Before you go off and say, "hey, those images are all the same". You are right, the images are all the same right now, but the text should be rotating as well and there is a slight difference there. In addition, the fade should still show up.
Anyway, you can see the dev page here: http://173.201.163.213/projectpath/first_trust/index.html
I would appreciate some help to get this cycling through as it should.
Thanks!
Looking at the source, you're missing several </script> tags.
<script type="text/javascript" src="_scripts/navigation.js"></script>
<script type="text/javascript">
<script type="text/javascript">
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade'
});
});
</script>
<title>Charlotte Bank Mooresville Bank First Trust Bank</title>
I'm really really new to HTML/CSS, but somehow decided to plunge head on to using 960 Grid System, which I found helpful. I know some says it's unsemantic, but I've been involved and at the end, tangled in the problem stated above. I've tried a few codes like overflow: hidden, overflow: auto, display: block, etc that I found on other pages and pages on stack overflow, but the error still there.
I would really appreciate anyone's help at this site.
These are the html of the site:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content=
"text/html; charset=us-ascii">
<meta http-equiv="content-type" content=
"text/html; charset=us-ascii">
<base>
<title>
najibahabakar.com
</title>
<link rel="stylesheet" href="style.css" type="text/css"
media="screen">
<link rel="stylesheet" href="960.css" type="text/css" media=
"screen">
<link rel="stylesheet" href="text.css" type="text/css" media=
"screen">
</head>
<body>
<div class="container_12">
<div id="topgrafik">
<div class="prefix_6">
<ul id="nav" class="nav">
<li>Laman Depan
</li>
<li>Mengenai
</li>
<li>Mimpi
</li>
<li>Hubungi
</li>
</ul>
</div>
<div class="clear"></div>
<div class="grid_3 prefix_1" id="tgfocus">
<img class="frame" src="images/mengkuang.jpg" alt=
"tikar mengkuang!">
</div>
<div class="clear"></div>
<div class="center">
<div class="grid_4">
<h5>
Buku, Sastera, Diri
</h5>
</div>
<div class="grid_4">
<h5>
Galeri
</h5>
</div>
<div class="grid_4">
<h5>
Web Design
</h5>
</div>
</div>
</div>
<div class="clear"></div>
<div id="middlebody">
<div class="left">
<div class="grid_2 prefix_1">
<p id="date">
31 DISEMBER 2009
</p>
<p>
Buku, kemuncak peradaban
</p>
<hr>
<p id="date">
31 DISEMBER 2009
</p>
<p>
Cemas bila buku bertambah!
</p>
<hr>
<p id="date">
31 DISEMBER 2009
</p>
<p>
Janji tak terpenuh
</p>
</div>
<div class="grid_4 prefix_1">
<p>
Di sini galeri imej, mungkin juga hasil-hasil kerja
Photoshop & Inkscape
</p>
<hr>
</div>
<div class="grid_2 prefix_1">
<p id="date">
31 DISEMBER 2009
</p>
<p>
Hasil pertama
</p>
<hr>
</div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
And the css:
html {
background: url('images/bground.jpg') repeat;
color: #333333;
}
body,h1,h2,h3,h4,h5,h6 {
padding: 0;
margin: 0;
}
/*----------NAVIGATION--------------------*/
#nav li {
list-style-type: none;
display: inline;
}
ul.nav {
margin-top: 2px;
}
/*----------------GENERAL CLASSES------------*/
.center {
text-align: center;
align: center;
padding-left: 10px;
}
.left {
text-align: left;
font-size: 95%;
padding-left: 15px;
}
#date {
font-size: 85%;
}
/*-----------------BACKGROUND-----------------*/
#topgrafik {
background: url('images/topgrafik.jpg') center top;
height: 426px;
width: 993px;
float: left;
position: relative;
}
#middlebody {
background: url('images/kandungan2.jpg') center bottom repeat-y;
height: 408px;
width: 993px;
float: left;
position: relative;
}
#footer {
background: url('images/footer.jpg') center bottom;
background-repeat: no-repeat;
height: 228px;
width: 993px;
float: left;
position: relative;
}
/*---------------CONTENT LAYOUT---------------------*/
#tgfocus {
margin-top: 80px;
margin-bottom: 40px;
position: relative;
min-height: 205px;
}
/*------------------IMAGES AND THUMBNAIL GALLERY-----------*/
.frame {
padding: 10px;
border: 1px solid #333300;
height: 190px;
width: 150px;
background-color: #eaede0;
position: absolute;
}
.align-right {
float:right;
margin: 0 0 15px 15px;
}
.align-left {
float:left; margin: 0 15px 15px 0;
}
Plus the 960 Grid System CSS (for easy reference):
.container_12,.container_16{margin-left:auto;margin-right:auto;width:960px}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16{display:inline;float:left;position:relative;margin-left:10px;margin-right:10px}.container_12 .grid_3,.container_16 .grid_4{width:220px}.container_12 .grid_6,.container_16 .grid_8{width:460px}.container_12 .grid_9,.container_16 .grid_12{width:700px}.container_12 .grid_12,.container_16 .grid_16{width:940px}.alpha{margin-left:0}.omega{margin-right:0}.container_12 .grid_1{width:60px}.container_12 .grid_2{width:140px}.container_12 .grid_4{width:300px}.container_12 .grid_5{width:380px}.container_12 .grid_7{width:540px}.container_12 .grid_8{width:620px}.container_12 .grid_10{width:780px}.container_12 .grid_11{width:860px}.container_16 .grid_1{width:40px}.container_16 .grid_2{width:100px}.container_16 .grid_3{width:160px}.container_16 .grid_5{width:280px}.container_16 .grid_6{width:340px}.container_16 .grid_7{width:400px}.container_16 .grid_9{width:520px}.container_16 .grid_10{width:580px}.container_16 .grid_11{width:640px}.container_16 .grid_13{width:760px}.container_16 .grid_14{width:820px}.container_16 .grid_15{width:880px}.container_12 .prefix_3,.container_16 .prefix_4{padding-left:240px}.container_12 .prefix_6,.container_16 .prefix_8{padding-left:480px}.container_12 .prefix_9,.container_16 .prefix_12{padding-left:720px}.container_12 .prefix_1{padding-left:80px}.container_12 .prefix_2{padding-left:160px}.container_12 .prefix_4{padding-left:320px}.container_12 .prefix_5{padding-left:400px}.container_12 .prefix_7{padding-left:560px}.container_12 .prefix_8{padding-left:640px}.container_12 .prefix_10{padding-left:800px}.container_12 .prefix_11{padding-left:880px}.container_16 .prefix_1{padding-left:60px}.container_16 .prefix_2{padding-left:120px}.container_16 .prefix_3{padding-left:180px}.container_16 .prefix_5{padding-left:300px}.container_16 .prefix_6{padding-left:360px}.container_16 .prefix_7{padding-left:420px}.container_16 .prefix_9{padding-left:540px}.container_16 .prefix_10{padding-left:600px}.container_16 .prefix_11{padding-left:660px}.container_16 .prefix_13{padding-left:780px}.container_16 .prefix_14{padding-left:840px}.container_16 .prefix_15{padding-left:900px}.container_12 .suffix_3,.container_16 .suffix_4{padding-right:240px}.container_12 .suffix_6,.container_16 .suffix_8{padding-right:480px}.container_12 .suffix_9,.container_16 .suffix_12{padding-right:720px}.container_12 .suffix_1{padding-right:80px}.container_12 .suffix_2{padding-right:160px}.container_12 .suffix_4{padding-right:320px}.container_12 .suffix_5{padding-right:400px}.container_12 .suffix_7{padding-right:560px}.container_12 .suffix_8{padding-right:640px}.container_12 .suffix_10{padding-right:800px}.container_12 .suffix_11{padding-right:880px}.container_16 .suffix_1{padding-right:60px}.container_16 .suffix_2{padding-right:120px}.container_16 .suffix_3{padding-right:180px}.container_16 .suffix_5{padding-right:300px}.container_16 .suffix_6{padding-right:360px}.container_16 .suffix_7{padding-right:420px}.container_16 .suffix_9{padding-right:540px}.container_16 .suffix_10{padding-right:600px}.container_16 .suffix_11{padding-right:660px}.container_16 .suffix_13{padding-right:780px}.container_16 .suffix_14{padding-right:840px}.container_16 .suffix_15{padding-right:900px}.container_12 .push_3,.container_16 .push_4{left:240px}.container_12 .push_6,.container_16 .push_8{left:480px}.container_12 .push_9,.container_16 .push_12{left:720px}.container_12 .push_1{left:80px}.container_12 .push_2{left:160px}.container_12 .push_4{left:320px}.container_12 .push_5{left:400px}.container_12 .push_7{left:560px}.container_12 .push_8{left:640px}.container_12 .push_10{left:800px}.container_12 .push_11{left:880px}.container_16 .push_1{left:60px}.container_16 .push_2{left:120px}.container_16 .push_3{left:180px}.container_16 .push_5{left:300px}.container_16 .push_6{left:360px}.container_16 .push_7{left:420px}.container_16 .push_9{left:540px}.container_16 .push_10{left:600px}.container_16 .push_11{left:660px}.container_16 .push_13{left:780px}.container_16 .push_14{left:840px}.container_16 .push_15{left:900px}.container_12 .pull_3,.container_16 .pull_4{left:-240px}.container_12 .pull_6,.container_16 .pull_8{left:-480px}.container_12 .pull_9,.container_16 .pull_12{left:-720px}.container_12 .pull_1{left:-80px}.container_12 .pull_2{left:-160px}.container_12 .pull_4{left:-320px}.container_12 .pull_5{left:-400px}.container_12 .pull_7{left:-560px}.container_12 .pull_8{left:-640px}.container_12 .pull_10{left:-800px}.container_12 .pull_11{left:-880px}.container_16 .pull_1{left:-60px}.container_16 .pull_2{left:-120px}.container_16 .pull_3{left:-180px}.container_16 .pull_5{left:-300px}.container_16 .pull_6{left:-360px}.container_16 .pull_7{left:-420px}.container_16 .pull_9{left:-540px}.container_16 .pull_10{left:-600px}.container_16 .pull_11{left:-660px}.container_16 .pull_13{left:-780px}.container_16 .pull_14{left:-840px}.container_16 .pull_15{left:-900px}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}
All the background images in three divs #topgrafik, #middlebody and #footer disappear in IE.
Please help and thank you in advance.
I think the problem is the last slash in the image paths:
./images/footer.jpg/
I am not sure, but maybe, the dot may cause problems, too. You could describe a relative path just like this
images/footer.jpg
Have you tried removing the trailing slash in the image url?
Like this:
background: url('images/topgrafik.jpg') center top;