I have the following div
<div class="GoogleActiveViewElement" data-google-av-cxn="https://pagead2.googlesyndication.com/pcs/activeview?xai=AKAOjsudJRMvrlZlT45Ttm1RMAMHc5hcztNQCne-rhrSacn7IrQgGtuXg528lxeI6WNimjQpc3PAavA26eLFW3kl5SPgVbGKAANcnxVtND4V93Q&sig=Cg0ArKJSzNad2i7_dWSoEAE" data-google-av-adk="2411428758" data-google-av-metadata="la=0&xdi=0&" data-google-av-override="-1" data-google-av-dm="2" data-google-av-immediate="" data-google-av-aid="0" data-google-av-naid="1" data-google-av-slift="" data-google-av-cpmav="" data-google-av-btr="https://securepubads.g.doubleclick.net/pcs/view?xai=AKAOjst46QS0vYvgXay8v4GHNx4Ms1ynqO9tqoJLPRC2LfwmhqyQ59zjIZhsJte9uA4985Ka2X8xGz2pOUT0cQBhbOSEAQHkB63D7Y6SMtEdH6CCv8S4SOSvZgL1Brh1ME5Ld94DAGVluAIptWktdFT_ZCCBEc_7TEBMlo0an5s12yD4jvFJPtj8Xlpff-NzZl6Mw46aniYwUkUJKhD57l2FtTXB3dZkMs92oYJ0QV99C9vRNUK_eTyEhjHyfWgB4vISQNG-z-Ij7GWu8OQBtcrfAxJC&sai=AMfl-YQKOGKDZUHDTBNxlyqZiNmP6_rrW9cOrc4NoFO_iGSYabzRGjq8jFel8ORQPBs_hBoBPblA_61rLgyLA7iF6ozRBdDqlUWuNVdBeSBynE4_p7_9jT1FsCsP2Vhfl_e9InY2xQ&sig=Cg0ArKJSzHeCVx_Ynp6KEAE&urlfix=1&adurl=" data-google-av-itpl="7" data-google-av-rs="4" data-google-av-flags="["xz"]">
<a href="https://adclick.g.doubleclick.net/pcs/click?xai=AKAOjss-c9OKDawTcctAwsrHawUMGjOZsWgw7JBPC41cdgdzOIJxJi2ONzIwJVGtPzuprpuuKMuPnheb_ETS4X2Cx01-2QABoEA12N8YvXHnZDvRmk0wKM4zVvMCPefsWMPNAqcVJRUi5_hOLGeXP0LMe3B1BeC7vH_YTwij5DtK-OKYVneNOcvy7SAjDIN-NBahyE0_D-HppUSYm1RZdfio6shJXkzVSwnjjVvisGesN4Hq0eyb6OKUaZhQHBEF_c1yrcL2APxC5NlE7A&sai=AMfl-YTS5eZFEApy5JXVRUMr1mwg0xqccIXUuatLkgOeojS6ezBrqwS--0_2TW-xpjdQFDflT2VEQ0eUqDASKUTrQt2QxQamcvU2ysxFH2Bx-YyS9nWpGsfeOvv-MU74ffMBnN5boA&sig=Cg0ArKJSzGN9wZsT-r7jEAE&urlfix=1&adurl=https://www.hepsiburada.com/gunun-firsati-teklifi" target="_top">
<div style="width:100%; height:90px; display: block; background-color:#8603d3;">
<div style="width: 970px; height: 90px; margin: 0 auto; position: relative;">
<img src="https://tpc.googlesyndication.com/simgad/2447781458133218807?" style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto; height:90px; width:970px;">
</div>
</div>
</a>
</div>
I'm trying to get that img src but can't get childs of div.
irb(main):010:0> #bw.div(class:"GoogleActiveViewElement")
=> #<Watir::Div: located: false; {:class=>"GoogleActiveViewElement", :tag_name=>"div"}>
irb(main):011:0> #bw.div(class:"GoogleActiveViewElement").img.present?
=> false
irb(main):012:0> #bw.div(class:"GoogleActiveViewElement").a.present?
=> false
irb(main):014:0> #bw.div(class:"GoogleActiveViewElement").div.present?
=> false
Related
I have a complex flex-based angular page, with a big amount of nested flex items. I need to have customizable stretch elements to the end of page and use scroll by some of inner containers.
Chrome/Edge/Firefox doing well, as expected. But Safari start to freeze whole page.
I have analyzed styles of all elements. And, for demonstrate this issue, I created demo page.
let startTime = new Date().getTime();
window.onload = () => {
window.onload = null;
setTimeout(() => {
const endTime = new Date().getTime();
const timeSpend = endTime - startTime;
const loadTime = `Loading time: ${timeSpend}ms`;
console.log(loadTime);
const input = document.querySelector("label");
input.innerText = loadTime;
startTime = new Date().getTime();
});
}
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.flex-item {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
background: rgba(0, 128, 0, 0.05);
}
.block-item {
display: block;
height: 100%;
width: 100%;
background: red;
}
div {
border: 1px solid black;
border-radius: 5px;
padding: 2px 10px;
position: relative;
}
span {
position: absolute;
top: 0;
left: 0;
}
label {
position: fixed;
left: 200px;
top: 10px;
background: white;
z-index: 10;
box-shadow: 0px 0px 10px 2px black;
border-radius: 20px;
padding: 5px;
}
<label></label>
<div class="flex-item"><span>0</span>
<div class="block-item"><span>1</span> <!-- block here -->
<div class="flex-item"><span>2</span>
<div class="flex-item"><span>3</span>
<div class="flex-item"><span>4</span>
<div class="flex-item"><span>5</span>
<div class="flex-item"><span>6</span>
<div class="flex-item"><span>7</span>
<div class="flex-item"><span>8</span>
<div class="flex-item"><span>9</span>
<div class="flex-item"><span>0</span>
<div class="flex-item"><span>1</span>
<div class="flex-item"><span>2</span>
<div class="flex-item"><span>3</span>
<div class="flex-item"><span>4</span>
<div class="flex-item"><span>5</span>
<div class="flex-item"><span>6</span>
<div class="flex-item"><span>7</span>
<div class="flex-item"><span>8</span>
<div class="flex-item"><span>9</span>
<div class="flex-item"><span>0</span>
<div class="flex-item"><span>1</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Or demo on codepen: https://codepen.io/JBeen/full/LYBwYmJ
Tried on Safari 16.3 and Safari TP 16.4 on Macbook Pro 16 M2 Max
Loading time: ~3.5s
When I increase amount of nested elements and add 1 element -- loading time increase twice, and became ~7s. So after adding several more nested elements -- page start to freeze completely.
Does Safari have an issue on official bug tracker?
Or what I'm doing wrong?
golang template how to convert string to html，i use {{.links|safe}} but get error message
function "safe" not defined
and How to optimize the code, I just started learning golang。
Or you can write a data structure if you render a structure in templat, such as Button struct.
Are there more examples of template usage?
button := []Button{
{Name: "admin", Link: "/system/"},
{Name: "index", Link: "/"},
}
to html
layer.open({
type: 1
,title: false
,closeBtn: false
,area: '300px;'
,shade: 0.8
,id: 'LAY_layuipro'
,btn: ["admin","index"]
,btnAlign: 'c'
,moveType: 1
,content: '<div style="padding: 50px; line-height: 22px;font-weight: 300;"> layer.msg(安装成功)</div>'
,success: function(layero){
var btn = layero.find('.layui-layer-btn');
btn.find('.layui-layer-btn0').attr({href: '/system/',target: '_blank'});btn.find('.layui-layer-btn1').attr({href: '/',target: '_blank'});
}
});
views code
type Button struct {
Name string
Link string
}
func Install(ctx iris.Context) {
fmt.Println("........")
if dao.DB != nil {
ctx.Redirect("/")
return
}
templateName := "install.html"
button := []Button{
{Name: "admin", Link: "/system/"},
{Name: "index", Link: "/"},
}
links := ""
var btns []string
i := 0
for _, btn := range button {
links += fmt.Sprintf("btn.find('.layui-layer-btn%v').attr({href: '%v',target: '_blank'});", i, btn.Link)
btns = append(btns, btn.Name)
i += 1
}
data := iris.Map{
"message": "安装成功",
"btns": btns,
"links": links,
}
ctx.View(templateName, data)
return
}
template
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初始化安装</title>
<style>
.container {
padding: 30px;
}
.title {
text-align: center;
padding: 20px;
}
.layui-form {
max-width: 600px;
margin: 50px auto;
padding: 20px;
max-width: 600px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
border-radius: 5px;
}
.layui-form-item {
display: flex;
margin-bottom: 20px;
align-items: top;
}
.layui-form-label {
padding: 6px 0;
width: 100px;
}
.layui-input-block {
flex: 1;
}
.layui-input {
box-sizing: border-box;
width: 100%;
padding: 2px 10px;
border: 1px solid #eaeaea;
border-radius: 4px;
height: 36px;
font-size: 15px;
}
input:focus,
textarea:focus {
outline: 1px solid #29d;
}
.layui-form-mid {
padding: 3px 0;
}
.layui-aux-word {
color: #999;
font-size: 12px;
}
.layui-btn {
cursor: pointer;
border-radius: 2px;
color: #555;
background-color: #fff;
padding: 10px 15px;
margin: 0 5px;
border: 1px solid #eaeaea;
}
.layui-btn.btn-primary {
color: #fff;
background-color: #3f90f9;
}
.submit-buttons {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1 class="title">安企CMS(AnqiCMS)初始化安装</h1>
<form class="layui-form" action="/install" method="post">
<div>
<div class="layui-form-item">
<label class="layui-form-label">数据库地址</label>
<div class="layui-input-block">
<input type="text" name="host" value="localhost" required placeholder="一般是localhost"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">数据库端口</label>
<div class="layui-input-block">
<input type="text" name="port" value="3306" required placeholder="一般是3306" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">数据库名称</label>
<div class="layui-input-block">
<input type="text" name="database" value="anqicms" required placeholder="安装到哪个数据库"
autocomplete="off" class="layui-input">
<div class="layui-form-mid layui-aux-word">如果数据库不存在，程序则会尝试创建它</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">数据库用户</label>
<div class="layui-input-block">
<input type="text" name="user" required placeholder="填写数据库用户名" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">数据库密码</label>
<div class="layui-input-block">
<input type="password" name="password" required placeholder="填写数据库密码" autocomplete="off"
class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">后台用户名</label>
<div class="layui-input-block">
<input type="text" name="admin_user" value="admin" required placeholder="用于登录管理后台"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">后台密码</label>
<div class="layui-input-block">
<input type="password" name="admin_password" minlength="6" maxlength="20" required
placeholder="请填写6位以上的密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">网站地址</label>
<div class="layui-input-block">
<input type="text" name="base_url" value="" autocomplete="off" class="layui-input">
<div class="layui-form-mid layui-aux-word">
指该网站的网址，如：https://www.anqicms.com，用来生成全站的绝对地址
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block submit-buttons">
<button type="reset" class="layui-btn">重置</button>
<button class="layui-btn btn-primary" type="submit">确认初始化</button>
</div>
</div>
</form>
</div>
</body>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script>
{{ if .message }}
{{ $length := len .btns }}{{ if eq $length 0 }}
layer.msg({{.message}})
{{else}}
layer.open({
type: 1
,title: false //不显示标题栏
,closeBtn: false
,area: '300px;'
,shade: 0.8
,id: 'LAY_layuipro' //设定一个id，防止重复弹出
,btn: {{.btns}}
,btnAlign: 'c'
,moveType: 1 //拖拽模式，0或者1
,content: '<div style="padding: 50px; line-height: 22px;font-weight: 300;"> layer.msg({{.message}})</div>'
,success: function(layero){
var btn = layero.find('.layui-layer-btn');
{{.links}}
}
});
{{end}}
{{ end }}
</script>
</html>
generate html
layer.open({
type: 1
,title: false
,closeBtn: false
,area: '300px;'
,shade: 0.8
,id: 'LAY_layuipro'
,btn: ["admin","index"]
,btnAlign: 'c'
,moveType: 1
,content: '<div style="padding: 50px; line-height: 22px;font-weight: 300;"> layer.msg(安装成功)</div>'
,success: function(layero){
var btn = layero.find('.layui-layer-btn');
"btn.find('.layui-layer-btn0').attr({href: '/system/',target: '_blank'});btn.find('.layui-layer-btn1').attr({href: '/',target: '_blank'});"
}
});
i want to result
layer.open({
type: 1
,title: false
,closeBtn: false
,area: '300px;'
,shade: 0.8
,id: 'LAY_layuipro'
,btn: ["admin","index"]
,btnAlign: 'c'
,moveType: 1
,content: '<div style="padding: 50px; line-height: 22px;font-weight: 300;"> layer.msg(安装成功)</div>'
,success: function(layero){
var btn = layero.find('.layui-layer-btn');
btn.find('.layui-layer-btn0').attr({href: '/system/',target: '_blank'});btn.find('.layui-layer-btn1').attr({href: '/',target: '_blank'});
}
});
Right, so I have made a navigation bar and I want to add images before each link, I know I can use a.header:before but I need different images for each link, a house for home, spanner for spec and so on. What is the simplest way of doing this? Is there a way without creating a div for each one and styling them individually?
For a preview of the page so far with the nav - http://zimxtrial.ukbigbuy.com/
One more thing - here is part of the css:
#header-nav {
background-color: #FFFFFF;
height: 80px; height: 8.0rem;
width: 100%;
position: absolute;
top: 50px;
}
.header-nav-center {
height: 80px; height: 8.0rem;
text-align: center;
position: relative;
top: 0px;
width: 500px; width: 50.0rem;
margin-left: auto;
margin-right: auto;
}
.header-nav-center ul {
margin: 0;
}
.header-nav-center ul li {
list-style: none;
margin: 0 35px 0 0;
display: inline;
}
a.header {
line-height: 80px; line-height: 8.0rem;
font-size: 17px; font-size: 1.7rem;
}
And HTML:
<div id="home">
<div id="header-nav">
<div id="hr-nav-top-container">
<hr class="nav" />
</div>
<div id="logo"></div>
<div class="header-nav-center">
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li><a class="header" href="#features">Features</a>
</li>
<li><a class="header" href="#specification">Specification</a>
</li>
<li><a class="header" href="#contact-us">Contact Us</a>
</li>
</ul>
</div>
<div id="pre-order"></div>
<div id="hr-nav-bottom-container">
<hr class="nav" />
</div>
</div>
</div>
Can I add something like:
a.header.home:before {
background: url('../images/home-logo.png') center center no-repeat;
}
Not that exactly but something like it?
You could make ids for each link and add the ids to the desired link img
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;