Problem with layout in IE

**baz3** · 01-16-2007, 10:07 AM

Hi all.

I have a problem with IE...

In this case at least.

I'm using a layout from DD, http://www.dynamicdrive.com/style/la...1-fixed-fixed/
, as a base for my site.
Then I want to add layers with content inside the layout.
This works perfect in FF 1.5 but when viewing it in IE6 or 7 the div layers aren't showing at all!?
I must have missed something in the coding.

I'm pretty new to css coding so I hope you guys can help me out.

You can look at a working example on http://baze.wideworks.net/lindallen/ and here to see the stylesheet, http://baze.wideworks.net/lindallen/lindallen.css

Thanks alot in advance.

/Claes

**coothead** · 01-16-2007, 12:43 PM

Hi there baz3,

and a warm welcome to these forums.

You rarely need to use absolute positioning for layout purposes.
Try it like this instead...

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Lindall&#233;n - Startsida</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<script  src="functions.js" type="text/javascript"></script>

<style type="text/css">
body {
    margin:0;
    padding:0;
    background-color:#b7ca90;
    color:#000;
 }
#maincontainer {
    width: 994px;
    margin: 0 auto;
 }
#topsection img {
    float:left;
    width:497px;
    height: 216px; 
 }
#meny img {
    border:0 none;
    float:left;
 }
#leftcolumn{
    float:left;
    width: 497px; 
    height:475px;
    background-image:url(images/newbg-left-bot.jpg);
 }
#hands {
    float:left;
    width:133px;
    height:100px;
    margin:192px 0 0 104px;
 }
#first_page {
    float:left;
    width:246px;
    height:134px;
    margin:174px 0 0 7px;
 }
#rightcolumn {
    float:left;
    width: 497px; 
    height:475px;
    background-image:url(images/newbg-right-bot.jpg);
 }
#massage,#stenar,#ansiktsmas {
    float:left;
    width:133px;
    height:100px;
    margin:192px 0 0 5px;
 }
#footer{
    clear:both;
    background-color:#7a8660;
    font-family: verdana,arial,helvetica,sans-serif; 
    font-size:10px; 
    color:#000;
    text-align:center;
    padding-bottom:8px;
 }
#footer a:link,#footer a:visited { 
    color:#fff;
    text-decoration:none;
    background-color:#7a8660;
 }
#footer a:hover,#footer a:active {
    color:#fff;
    text-decoration:underline;
    background-color:#7a8660;
 }
</style>

</head>
<body>

<div id="maincontainer">

<div id="topsection">
<img src="images/newbg-left-top.jpg" alt=""/>
<img src="images/newbg-right-top.jpg" alt=""/>
</div>

<div id="meny">	
<img src="images/meny03-all-guides-00-off.jpg" alt=""/>
<a href="om_oss.html" onmouseover="turnOn('image1');return true" onmouseout="turnOff('image1'); return true">
<img name="image1" src="images/meny03-all-guides-01-off.jpg" alt=""/>
</a>
<a href="behandlingar.html" onmouseover="turnOn('image2');return true" onmouseout="turnOff('image2'); return true">
<img name="image2" src="images/meny03-all-guides-02-off.jpg" alt=""/>
</a>
<a href="spadbarn.html" onmouseover="turnOn('image3');return true" onmouseout="turnOff('image3');return true">
<img name="image3" src="images/meny03-all-guides-03-off.jpg" alt=""/>
</a>
<a href="#" onmouseover="turnOn('image4');return true" onmouseout="turnOff('image4');return true">
<img name="image4" src="images/meny03-all-guides-04-off.jpg" alt=""/>
</a>
<a href="#" onmouseover="turnOn('image5');return true" onmouseout="turnOff('image5');return true">
<img name="image5" src="images/meny03-all-guides-05-off.jpg" alt=""/>
</a>
<a href="#" onmouseover="turnOn('image6');return true" onmouseout="turnOff('image6');return true">
<img name="image6" src="images/meny03-all-guides-06-off.jpg" alt=""/>
</a>
<a href="#" onmouseover="turnOn('image7');return true" onmouseout="turnOff('image7');return true">
<img name="image7" src="images/meny03-all-guides-07-off.jpg" alt=""/>
</a>
<a href="presentkort.html" onmouseover="turnOn('image8');return true" onmouseout="turnOff('image8');return true">
<img name="image8" src="images/meny03-all-guides-08-off.jpg" alt=""/>
</a>
<a href="#" onmouseover="turnOn('image9');return true" onmouseout="turnOff('image9');return true">
<img name="image9" src="images/meny03-all-guides-09-off.jpg" alt=""/>
</a>
<img src="images/meny03-all-guides-10-off.jpg" alt=""/>
</div>

<div id="leftcolumn">
<img id="hands" src="images/hands.png" alt=""/>
<img id="first_page" src="images/text_first_page.png" alt=""/>
</div>

<div id="rightcolumn">
<img id="massage" src="images/massage.png" alt=""/>
<img id="stenar" src="images/stenar2.png" alt=""/>
<img id="ansiktsmas" src="images/ansiktsmask2.png" alt=""/>
</div>

<div id="footer">
A website made by Claes Adamsson, contact <a href="mailto:claes.adamsson@gmail.com">webmaster</a>. &copy; 2007 <a href="index.html">www.lindallen.se</a>. All Rights Reserved.
</div>

</div>

</body>
</html>

coothead

**baz3** · 01-16-2007, 03:04 PM

Hi coothead!
Thanks for the really fast response.
Your code works great, I'll recode the other pages the same way.

Good idea to put the images as backgrounds instead.
As I said, I'm pretty new to xhtml but it's really fun.

Thanks again for helping me out.
I'll send you a link of the result when it's done.

Take care!

/baz3

**coothead** · 01-16-2007, 03:11 PM

No problem, you're welcome.

**baz3** · 01-18-2007, 01:15 PM

Hi again.

I used the code you gave me and that works great.
I tried to add a layer on top of the two columns, like a content layer.
IE breaks of the layer in half but it works fine in firefox.
I'm not sure if I'm using the right way to do it, I tried with

Code:

margin:92px 0 0 -158px;

in the right column, I started out as a trial and error just to see if it worked, and it did, in firefox...

Maybe I should have just one layer and put a background atribute in that, then put a content layer on top of that. What do you think?

Check out http://baze.wideworks.net/lindallen/behandlingar.html
as an example.

Take care.

/baz3

**coothead** · 01-18-2007, 07:31 PM

Hi there baz3,

Maybe I should have just one layer and put a background atribute in that, then put a content layer on top of that. What do you think?

I think that you will always have problems with the content area split into two.

With that in mind check out a complete re-working of the code - (no javascript used) - here...

http://mysite.orange.co.uk/coothead/baz3/index.html

...if this interests you, I have put it all into a zip file which can be downloaded here...

http://mysite.orange.co.uk/coothead/baz3/baz3.zip

coothead

Thread: Problem with layout in IE

Thread Tools

Search Thread

Problem with layout in IE

Bookmarks

Bookmarks

Posting Permissions