troubleshooting Question
CSS Design Centered DIV Layout
I am working on a web page design.
You can see it on http://syskonsult.com/index2.html
The design consist of several CENTERED div's. See the code attached.
It works fine in Firefox 3.6, BUT I noticed that in IE7 the background design start getting out of sync when the window inner width is smaller than 1064px. Apparently it works fine in IE8. I have not tested it yet in IE6, Opera or Chrome.
I wonder if anyone could come up with a working solution for my problem.
Below is a cut and paste code, complete with comments, to use directly on your computer. All images and links are linked to the domain so you can see the result directly while working on it.
I am very grateful if this problem could be solved quickly with attached CUT AND PASTE CODE.
You can see it on http://syskonsult.com/index2.html
The design consist of several CENTERED div's. See the code attached.
It works fine in Firefox 3.6, BUT I noticed that in IE7 the background design start getting out of sync when the window inner width is smaller than 1064px. Apparently it works fine in IE8. I have not tested it yet in IE6, Opera or Chrome.
I wonder if anyone could come up with a working solution for my problem.
Below is a cut and paste code, complete with comments, to use directly on your computer. All images and links are linked to the domain so you can see the result directly while working on it.
I am very grateful if this problem could be solved quickly with attached CUT AND PASTE CODE.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="paulk">
<BASE HREF='http://syskonsult.com/'>
<title>Title text</title>
<style>
body {
font:12px Arial;
/* background is a 2064px wide gradient image with a "computer spike" in the "middle" */
background:white url('background2064_2.jpg') top center repeat-y;
}
h1 {font:20px Arial;}
</style>
<script src='fadeinout.js'></script>
</head>
<body>
<!-- This div is placed on top to push the Content up for SEO -->
<div style="position: absolute; left: 50%; margin-left: -532px; width: 1064px; top:229px; background-color: yellow; background-image:url('background1064.jpg')">
<!-- Content Text -->
<div style='position:absolute; top:0px; left:300px; width:503px'>
<h1>Title text about this.</h1>
Text text text text text text text text text text text text text text text text text text text.<br />
Text text text text.
</div>
<!-- Content Pictures in right side column-->
<div style='position:absolute; top:0px; left:803px; width:261px;'>
<img src="rightcolpics.jpg" style='float:right;'>
</div>
<!-- Menu links -->
<div style="position:absolute; top:20px; left:97px; width:203px; font:14px Arial; font-weight:bold; color:white;">
Startsida<br />
Videopresentationer<br />
Teknisk specifikation<br />
Orderformulär<br />
Kontakt<br />
Om Företaget
</div>
</div>
<!-- Header content: logo + slideshow -->
<div style="position:absolute; top:0px; left:0px; width:100%; height:229px; background-image:url('rainbow_background.png')">
<div style='position: absolute; left: 50%; margin-left: -532px; width:1064px; top:0px;'>
<img src='logotype.jpg' style='width:300px; height:229px; float:left;'>
<div style="width:503px; height:229px;float:left;">
<script type='text/javascript'>
// this creates a 503px*229px picture slideshow:
var fadeimages=new Array();
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=['topanim1.jpg', '', ''];
fadeimages[1]=['topanim2.jpg', '', ''];
fadeimages[2]=['topanim3.jpg', '', ''];
fadeimages[3]=['topanim4.jpg', '', ''];
fadeimages[4]=['topanim5.jpg', '', ''];
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder ('R'))
new fadeshow(fadeimages, 503, 229, 0, 7000, 0)
</script>
</div>
</div>
</div>
</body>
</html>
Learn from the best
Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.
Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 2 Answers and 12 Comments.
Try for 7 days”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.
Our community of experts have been thoroughly vetted for their expertise and industry experience.
The Distinguished Expert awards are presented to the top veteran and rookie experts to earn the most points in the top 50 topics.