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;
}
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>
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.
I have the following HTML code:
<section class="gallery">
prev
next
<div class="holder">
<ul id="slider">
<li>
<img src="" alt="#" width="306" height="240" />
<span>Picture Title</span>
</li>
<li>
<img src="" alt="#" width="306" height="240" />
<span>Picture Title</span>
</li>
<li>
<img src="" alt="#" width="306" height="240" />
<span>Picture Title</span>
</li>
<li>
<img src="" alt="#" width="306" height="240" />
<span>Picture Title</span>
</li>
</ul>
</div>
</section>
And the following js:
$(document).ready(function(){
$('#slider').cycle({
fx:'scrollHorz',
timeout: 5000,
prev:'#link-prev',
next: '#link-next'
})
//$(".form-contact form").validate();
})
This works fine, but it shows just one picture, and if I want to see the following I click next, and if I want to see the previous, I click prev. How can I show more than one picture per transition?
Basically, like this example: scroll, but showing more than one picture per transition...
EDIT: The actual HTML I have when trying to have two pictures in each slide is this one:
<section class="gallery">
prev
next
<div class="holder">
<ul id="slider">
<div>
<img src="assets/content/pages/carrousell/UrbanFlame.jpg" alt="#" width="306" height="240" />
<img src="assets/content/pages/carrousell/TannourineRestaurant.jpg" alt="#" width="306" height="240" />
</div>
<div>
<img src="assets/content/pages/carrousell/PanchoVillaTaqueria.jpg" alt="#" width="306" height="240" />
<img src="assets/content/pages/carrousell/LaLanterna.jpg" alt="#" width="306" height="240" />
</div>
</ul>
</div>
</section>
And the CSS is this one:
.gallery .holder{
border-radius: 10px;
position:relative;
padding:4px 0 4px 0px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.gallery #link-prev,
.gallery #link-next{
position:absolute;
width:47px;
height:83px;
text-indent:-9999px;
overflow:hidden;
top:75px;
z-index:99999;
background:url(navigati.png) no-repeat;
}
.gallery #link-prev{left:-19px;}
.gallery #link-next{right:-19px;}
.gallery #link-next{background-position:-48px 0;}
.gallery h3{
color:#33638b;
font-size:18px;
line-height:21px;
margin:0 0 1px;
text-align:center;
}
#slider{
padding:0;
width:306px;
margin: 0 auto;
}
#slider li{
list-style:none;
text-align:center;
color:#FFFFFF;
font-size:14px;
line-height:17px;
padding:0px 0 0;
width:306px;
}
#slider img{
position:relative;
}
#slider span{
width:286px;
display:block;
padding:20px 10px;
background:url(../images/slider_span_bg.jpg) repeat-x left top; height:18px;}
#slider a{color:#33638b; font-family:Arial, Helvetica, sans-serif; color:#fff; font-size:18px;}
What's inside your <!-- picture link !--> blocks?
According to the Cycle documentation (and samples) the markup should be like this:
<div id="slider">
<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />
<!-- ... -->
</div>
EDIT:
Two pictures in one transition
var curElement = null;
$('#s1').cycle({
fx: 'scrollHorz',
prev: '#prev1',
next: '#next1',
timeout: 0,
after: function(currSlideElement, nextSlideElement, options, forwardFlag)
{
if (forwardFlag === 1 && (currSlideElement != curElement || curElement == null))
{
curElement = nextSlideElement;
$("#next1").trigger('click');
}
else if ( forwardFlag === 0 && (currSlideElement != curElement || curElement == null))
{
curElement = nextSlideElement;
$("#prev1").trigger('click');
}
}
});
EDIT 2
The problem is a #slider style. Set its width to f.e. 620px
#slider{
padding:0;
width:620px;
margin: 0 auto;
}
I'm not sure that the Cycle plug-in will handle that without editing the source.
It looks like this option could be useful though:
onPrevNextEvent: null,// callback fn for prev/next events: function(isNext, zeroBasedSlideIndex, slideElement)
It seems like you should be able to trigger a next or prev click onPrevNextEvent.
Something like this:
$('#slider').cycle({
fx:'scrollHorz',
timeout: 5000,
prev:'#link-prev',
next: '#link-next',
onPrevNextEvent: function(isNext) {
if(isNext) {
$('#link-next').trigger('click');
} else {
$('#link-prev').trigger('click');
}
}
})
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;