PDA

View Full Version : 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/layouts/item/css-fixed-layout-21-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...


<!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
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. :eek:
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