PDA

View Full Version : absolute layout viewing wrong in ie6?



kyllle
Mar 25th, 2009, 11:26 PM
Hi all,

Iv created an absolute 2 column layout through the guidance of link (http://www.shauninman.com/assets/examples/si-clear-children-1.0/clear.html)

unfortunately when I view the layout in ie6 the main column (primaryColumn) is riding against the left side of the wrapper, is there a way of curing this?

site (http://www.glen-lodge.co.uk/testing/quilly/index.html)

Many thanks in advance

Kyle

Excavator
Mar 25th, 2009, 11:47 PM
Hello kyllle,
Let's have a look at your code instead of the example you're following. Either post the code here (in [code] tags) or give us a link to the test site.

To move your main column away from the edge of the wrapper you would use margin or padding somewhere.

Are you aware that the example is using outdated methods? It was outdated when the author wrote it in 2006.
There are much better ways of making a 2 column layout now.
http://nopeople.com/CSS/equal_length_columns/index.html

kyllle
Mar 26th, 2009, 12:02 AM
Hi Excavator!

Thanks for the response

here is my test site (http://www.glen-lodge.co.uk/testing/quilly/index.html)

Basically I wanted to use this method to learn absolute position and how it can be used in layout.

Thanks!

Excavator
Mar 26th, 2009, 02:19 AM
Try making the div your basing your positioning on relative, in this case .container. It might not be specific enough by setting it on .clear_children since that is the second class.

See how that places in specificity here - http://www.w3.org/TR/CSS21/cascade.html#specificity

I haven't seen this in IE6. FF and later versions of IE don't do what you're describing.



This might make it more specific, if that is the problem -

/***Main Content******************************************************************/

.contentHeader,.container{
width: 770px;
background: #ccc;
position: relative;
margin: 0 auto 1.0em auto;
}

.contentHeader{
border-bottom: 1px solid #CCC;
padding-bottom: 0.25em;
margin-top: 1.0em;
margin-bottom: 1.0em;
}

.primaryColumn,.secondaryColumn{
position: absolute;
background: #f00;
top: 0;
left: 0;
}

.primaryColumn{
width: 480px;
}

Fisher
Mar 26th, 2009, 02:32 AM
The way you're applying your classes is very strange. To that left column, in order, these are the attributes you're using:

position:relative
display:inline
position:absolute
top: 0
left: 0
width:480px
position:relative;

(did I miss any?)

Why not keep it simple?

#container {
width:770px;
margin:0 auto;
}
#left {
float:left;
width:480px;
margin-left:10px;
}
#right {
width:270px;
float:right;
margin-right:10px;
}


<div id="container">
<div id="left">
<p>Lorem ipsum dolor sit amet</p>
<p>Nullam tincidunt volutpat orci.</p>
</div>
<div id="right">
<p>Lorem ipsum dolor</p>
<p>Morbi enim. Morbi id diam.</p>
</div>
</div>

Is there a special reason for all theses complicated classes?

EDIT: Didn't realize Excavator had already answered this.

kyllle
Mar 26th, 2009, 11:30 AM
Hi Fischer,

Basically I usually create layouts using floats but I want to look into creating absolute layouts basically to see if there are any advantages to these, because floats are capable of falling below one another I want to cancel this out as I plan on using this layout in joomla so when the editor has control of adding and deleting content I want to make sure the setup of the template can hold whatever is added.

Kyle

Fisher
Mar 26th, 2009, 02:13 PM
Fair enough Kyle, but I only asked because your method seemed so complicated. When I googled the javascript that you're using, it turns out that the method is almost 3 years old.

If you didn't want the enduser to "break" your layout, all you'd have to do is add overflow:hidden to the left and right divs. The user would look at his page and realize that he could only see half of his picture, and therefore something was wrong. :D

Best of luck.

kyllle
Mar 26th, 2009, 03:19 PM
So do you think im silly using this type of layout?

Does anyone have any links to more reliable up-to-date absolute layouts I could maybe look into using?

Or any guides on what layouts to use and what not to use?

Thanks so much for all your help so far.

Kyle

Fisher
Mar 26th, 2009, 03:58 PM
Try this. You'll have to adjust your image paths back.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="keywords" content="" />
<meta content="" name="description" />
<!--<link rel="stylesheet" type="text/css" href="style.css" /> -->
<link rel="shortcut icon" href="images/favicon.ico" />
<style type="text/css">
html, body {
height:100%;
background:#003350;
}
* {
margin:0;
padding:0;
}
#wrapper {
width:800px;
min-height:100%;
height:auto !important;
height:100%;
margin:0 auto -160px;
background:#002d47;
color:#FFF;
}
#header {
width:100%;
height:160px;
background:url(mainBanner.jpg) center no-repeat;
}
#contentHeader {
width:100%;
height:30px;
margin-left:10px;
}
#main {
width:800px;
font-size:12px;
text-align:left;
}
#left {
width:480px;
float:left;
overflow:hidden;
margin-left:10px;
display:inline;
}
#right {
width:270px;
float:right;
margin-right:10px;
overflow:hidden;
}
#footer, #push {
clear:both;
width:800px;
height:160px;
margin:0 auto;
text-align:center;
background:url(footer.jpg) bottom no-repeat #FFF;
}
#push {
background:none;
}
#footer img {
border:none;
padding:10px;
}
/* ----- nav ----- */
#nav {
width:100%;
background:url(border.png) bottom repeat-x;
font-size:14px;
margin: 0 0 10px 0;
height:45px;/*moves tabs above border line*/
line-height:23px;
}
#nav ul {
float: right;
margin:0 -5px 0 0;
padding:10px 10px 0;
list-style:none;
}
#nav li {
float:left;
background:url(unactiveLeft.png) no-repeat left top;
margin:0 0 0 5px;
padding:0 0 0 18px;
}
#nav a {
display:block;
background:url(unactiveRight.png) no-repeat right top;
padding:4px 25px 3px 7px;
font-size: 140%;
text-decoration: none;
font-weight: 600;
color: #fff;
}
#nav a:hover {
color:#FF0;
}
#nav #current {
background-image:url("activeLeft.png");
}
#nav #current a {
background-image:url("activeRight.png");
padding-bottom:5px;
color: #1b911e;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="nav">
<ul>
<li id="current"><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="header"></div>
<div id="contentHeader"><strong>Header</strong></div>
<div id="main">
<div id="left">
<p><strong>position: absolute;</strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent sed leo sed lacus luctus egestas. Suspendisse potenti. Morbi enim. Morbi id diam. Praesent tempor tellus ac diam. Nullam cursus. Vestibulum volutpat hendrerit ipsum. Integer bibendum libero et lectus. Etiam congue, turpis sed laoreet auctor, mi nisl mattis pede, nec sodales magna felis porta mauris.</p>
<p>Aliquam quis mi. Nulla facilisi. Aliquam erat volutpat. Suspendisse bibendum. Fusce ac sapien. Donec ac turpis. Nulla magna velit, sagittis at, vestibulum sit amet, lobortis at, purus. Quisque mattis pretium justo. Cras sagittis, quam ut imperdiet congue, nisl ante auctor odio, vitae gravida nibh enim quis massa. Nullam urna wisi, blandit quis, porttitor pharetra, dignissim nec, mauris. Curabitur posuere mattis ipsum. Nunc in metus aliquam felis bibendum tincidunt.</p>
<p>Nullam tincidunt volutpat orci. Morbi scelerisque. Aliquam vitae neque eget urna consectetuer suscipit. Nullam luctus augue quis est.</p>
<p>Donec mollis, sapien non tempus semper, nulla diam sagittis magna, sed sodales ligula dui eu wisi. Cras at erat nec quam pharetra sagittis. Pellentesque lacinia nonummy mi. Morbi a ante in odio luctus vulputate. Sed tincidunt. Nullam tincidunt volutpat orci. Morbi scelerisque. Aliquam vitae neque eget urna consectetuer suscipit. Nullam luctus augue quis est. Donec mollis, sapien non tempus semper, nulla diam sagittis magna, sed sodales ligula dui eu wisi. Cras at erat nec quam pharetra sagittis. Pellentesque lacinia nonummy mi. Morbi a ante in odio luctus vulputate. Sed tincidunt. </p>
</div>
<div id="right">
<p><strong>position: absolute;</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent sed leo sed lacus luctus egestas. Suspendisse potenti.</p>
<p>Morbi enim. Morbi id diam. Praesent tempor tellus ac diam. Nullam cursus. Vestibulum volutpat hendrerit ipsum. Integer bibendum libero et lectus.</p>
<p>Etiam congue, turpis sed laoreet auctor, mi nisl mattis pede, nec sodales magna felis porta mauris. Aliquam quis mi. Nulla facilisi. Aliquam erat volutpat. Suspendisse bibendum. Fusce ac sapien.
Etiam congue, turpis sed laoreet auctor, mi nisl mattis pede, nec sodales magna felis porta mauris. Aliquam quis mi. Nulla facilisi. Aliquam erat volutpat. Suspendisse bibendum. Fusce ac sapien.
Etiam congue, turpis sed laoreet auctor, mi nisl mattis pede, nec sodales magna felis porta mauris. Aliquam quis mi. Nulla facilisi. Aliquam erat volutpat. Suspendisse bibendum. Fusce ac sapien.
Etiam congue, turpis sed laoreet auctor, mi nisl mattis pede, nec sodales magna felis porta mauris. Aliquam quis mi. Nulla facilisi. Aliquam erat volutpat. Suspendisse bibendum. Fusce ac sapien.
Etiam congue, turpis sed laoreet auctor, mi nisl mattis pede, nec sodales magna felis porta mauris. Aliquam quis mi. Nulla facilisi. Aliquam erat volutpat. Suspendisse bibendum. Fusce ac sapien.
Etiam congue, turpis sed laoreet auctor, mi nisl mattis pede, nec sodales magna felis porta mauris. Aliquam quis mi. Nulla facilisi. Aliquam erat volutpat. Suspendisse bibendum. Fusce ac sapien.
Etiam congue, turpis sed laoreet auctor, mi nisl mattis pede, nec sodales magna felis porta mauris. Aliquam quis mi. Nulla facilisi. Aliquam erat volutpat. Suspendisse bibendum. Fusce ac sapien.
Etiam congue, turpis sed laoreet auctor, mi nisl mattis pede, nec sodales magna felis porta mauris. Aliquam quis mi. Nulla facilisi. Aliquam erat volutpat. Suspendisse bibendum. Fusce ac sapien.</p>
</div>
</div>
<div id="push"></div>
</div>
<div id="footer"> <a href="#"><img src="walkingHealth.gif" alt="image 1" height="89" width="90" /></a> <a href="#"><img src="heartFound.gif" alt="image 2" height="104" width="79" /></a> <a href="#"><img src="healthPromotion.gif" alt="image 3" height="57" width="133" /></a> <a href="#"><img src="countrySide.gif" alt="image 4" height="61" width="156" /></a> </div>
</body>
</html>

kyllle
Mar 26th, 2009, 04:37 PM
Thanks Fischer!!

Do you not agree with absolutely postioned layouts?

Kyle

Fisher
Mar 26th, 2009, 05:08 PM
I've used absolute positiong to build sites, but now I try to avoid it.

The one use I find for it is if I want elements to overlap. This can be a headache using float if there are many of them, so it's easier to use absolute positioning.

Of course, I'd never use absolute positioning relative to the window, only it's parent.

BTW - your site will still have a problem with IE6 because it's using transparent PNG files. You need to look that up. If you search these boards, you'll find a solution.