...

View Full Version : Faux column problem, double margin in IE?



moss2076
01-02-2008, 06:34 AM
I have added a second faux-column to my site. It is not actually floated right, but the background image is floated right.

It appears correctly in Firefox, but in Internet Explorer there is a top-margin pushing the div called "contentDiv" down. ContentDiv is the div with the blue border. The top of it should be flush with the grey-bordered div called "backgroundDiv". It seems its the double-margin bug, but im not sure.

Can anyone have a look at my code and see where I am going wrong?
http://www.siteoftom.com/dualfaux.html

effpeetee
01-02-2008, 08:53 AM
Try this:-


#secondaryContent {
margin-right: 0px;
margin-bottom: 20px;
margin-left: 0px;
float: right;
height:1%;
width: 49%;
}


This site is very useful. It may help.:)

http://www.positioniseverything.net/

Frank

moss2076
01-02-2008, 03:19 PM
Thankyou for your reply, but it hasnt fixed it in IE. The div still appears too low.

I need the top of ContentDiv (blue border) to be flush with the grey-bordered backgroundDiv.

Firefox displays it correftly.

effpeetee
01-02-2008, 04:23 PM
I have found one or two things that put IE7 to rights, but then Firefox is wrong. I don't know where to go from here.

Frank

moss2076
01-02-2008, 04:52 PM
It is wierd as it is only a UL placed at the start and end of the div called BackgroundDiv. I had wondered if the problem was being caused by the LI straight after the rightfaux UL. That particular LI doesnt have any css, but when I applied padding/margin 0px to it nothing changed in IE. If I remove the rightfaux UL everything is displayed fine in IE, so I dont understand whats causing it.

I could use another Div instead of the rightfaux UL but im trying to avoid using divs for everything - dont want divitis!

ahallicks
01-02-2008, 05:14 PM
I'm very curious as to why you are using a list for these columns. They are not technically a list as such, they are divisions of the page and therefore should be placed in divs, not as list items? I can't say I've ever seen a site use this method before and I have a feeling that it is this that is causing the problem as IE and FF display lists quite differently as once uses margins and one padding to position the default list items

Plus, YOU HAVE NO DOCTYPE. I would suggest you put one in!

harbingerOTV
01-02-2008, 05:17 PM
I think the problem is that your nesting the whole site inside #rightfaux. If I take the rest of the page out of it and float #rightfaux left and give it a width it works fine. Your code is a little jumbled for me the way it is so I made a sample to reflect a simpler way to do it.

I know you don't want to get div happy, but what your are doing with the three colums is what div are for.

try this out:


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Site Of Tom - Fluid</title>
<style type="text/css">
html, body {
height: 100%;
}

body {
font: 11px verdana, arial, helvetica, sans-serif;
padding: 0px;
margin: 0;
background: #fff;
}

#backgroundDiv {
background: transparent url(http://www.siteoftom.com/images/redcolumn_faux.gif) top left repeat-y;
height: 100%;
}

#backgroundDivInner {
background: transparent url(http://www.siteoftom.com/images/redcolumn_faux.gif) top right repeat-y;
height: 100%;
}

#left {
width: 120px;
float: left;
margin: 10px 0 0 10px;
display: inline;
}
#right{
width: 120px;
float: right;
margin: 10px 10px 0 0;
display: inline;
}
#left ul, #right ul {
background: #ccc;
margin: 0;
padding: 0;
list-style: none;
}
#left ul li, #right ul li {
margin: 0;
padding: 6px;
}

#center {
margin: 0 140px;
background: #fc3;
border-top: 1px solid #fc3;
padding: 20px 0;
}
#center p {
width: 90%;
margin: 0 auto 12px;
}
</style>
</head>

<body>
<div id="backgroundDiv">
<div id="backgroundDivInner">
<div id="left">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
<div id="right">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
<div id="center">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce interdum neque vel urna. Suspendisse tristique. Nulla facilisi. Donec erat elit, facilisis sit amet, volutpat quis, ultrices non, velit. In condimentum tempor lectus. Phasellus nisi. Sed porttitor. In tortor ante, suscipit a, tincidunt at, ornare eu, sapien. Vestibulum nibh leo, vehicula vel, rutrum non, nonummy id, sem. In lacinia sodales neque. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut sit amet quam. Suspendisse sapien nibh, vulputate non, blandit nec, rhoncus consequat, ante. Etiam congue nibh et elit. Nulla facilisi. Proin orci massa, ullamcorper ac, scelerisque vel, tristique at, nulla. Sed augue. Phasellus laoreet interdum arcu.</p>

<p>Vestibulum mattis malesuada libero. Donec ut risus. Aenean vitae sem. Proin dignissim pede at enim. Fusce placerat orci ut urna. Morbi imperdiet dui sed mauris. Etiam id elit. Duis accumsan neque ac massa. Etiam facilisis, nisi non consectetuer pulvinar, sem orci viverra lorem, ac porta justo tortor eu lectus. Nullam faucibus placerat enim. Duis metus lectus, imperdiet nec, nonummy vel, tristique nec, turpis. Nulla condimentum euismod arcu. Nulla leo. Sed tincidunt tortor. Curabitur massa dolor, ornare ac, viverra faucibus, placerat a, nunc. Vestibulum leo. Duis erat eros, accumsan vitae, ornare ut, tempus ac, justo. Nulla sollicitudin, nisl ac congue dapibus, turpis enim cursus augue, eget mattis mauris elit eget nunc. Nullam ut magna.</p>

<p>Phasellus fermentum, augue ut gravida tincidunt, urna mauris hendrerit odio, eget blandit metus enim nec mauris. Aliquam ac felis quis elit faucibus tincidunt. In vitae metus. Etiam tincidunt facilisis nisi. Donec eu lectus. Suspendisse orci est, placerat a, porta sed, convallis ut, lectus. Etiam blandit lectus tristique eros. Pellentesque pellentesque purus eget risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed risus arcu, condimentum id, elementum sit amet, rutrum suscipit, urna.</p>
</div>



<br style="clear: both;"/>
</div>
</div>

</body>
</html>

effpeetee
01-02-2008, 05:30 PM
Is this what you are after?


ul#sidecontent {display:inline-block;
width: 115px;
list-style-type:none;
margin: 0px 0px 0px 10px;
padding: 0px;
float: left;

}


Frank

Sorry Harbinger. I have cross posted I see.
Have a look at this.

http://www.maxdesign.com.au/presentation/liquid/example13.htm

moss2076
01-02-2008, 05:32 PM
Thanks for the help, I think I will try another div instead of a UL. I have been reading CSS Mastery by Andy Budd and in the book he shows how you dont need to use Divs for menus. The "left" div doesnt have to be a div at all, nor does the "right" div in your example.

I think I was maybe trying too hard with the right faux colum by placing it inside a UL. I will try it with a div and see how it goes.

The first line in my html quotes the doctype - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

ahallicks
01-02-2008, 05:34 PM
harbingerOTV, exactly! Much simpler and only uses three main divs (plus the outer two) as they should be to divide the page into it's proper sections! Not sure I like the odea of the clear in the br tag though... you could put overflow: hidden; on the containing div to clear the floats...

moss2076
01-02-2008, 05:38 PM
Is this what you are after?


ul#sidecontent {display:inline-block;
width: 115px;
list-style-type:none;
margin: 0px 0px 0px 10px;
padding: 0px;
float: left;

}


Frank

Sorry Harbinger. I have cross posted I see.

Yes but with the right floated faux column. I will give it ago with another div how harbingerOTV suggested.

Everyone is very helpful!! Thanks so much!

harbingerOTV
01-02-2008, 05:42 PM
Actually only 1 outer div is nessecary. You could give the body one of the background images instead and achieve the same 100&#37; height look. I do like the overflow:hidden way of clearing as well, and seeing as this is a 100% height fluid layout it should not (oops ;) )conflict with anything down the line.

moss- your right the left and right don't need top be divs, but if you ever want to add non-list items in either one, it would be better so as your not trying to nest block level elements inside a UL. If you don't want to use divs but you think you might be adding more than just links down the road, look into using Definition Lists instead. They can be styled just like an OL or UL and allow for block level elements to be nested inside them.

moss2076
01-02-2008, 05:52 PM
Actually only 1 outer div is nessecary. You could give the body one of the background images instead and achieve the same 100% height look. I do like the overflow:hidden way of clearing as well, and seeing as this is a 100% height fluid layout it should not (oops ;) )conflict with anything down the line.

moss- your right the left and right don't need top be divs, but if you ever want to add non-list items in either one, it would be better so as your not trying to nest block level elements inside a UL. If you don't want to use divs but you think you might be adding more than just links down the road, look into using Definition Lists instead. They can be styled just like an OL or UL and allow for block level elements to be nested inside them.

Thankyou for your advice, I really do appreciate it! As Im quite new to it all I havent actually used Definition Lists yet, but it will be something I will look into in the near future.

Thanks :thumbsup:

effpeetee
01-02-2008, 06:08 PM
display:inline-block;
on your faux div seems to work in IE7 FFox and Opera.

Worth a try before you get too involved in a major rewrite.

Frank

moss2076
01-02-2008, 06:16 PM
display:inline-block;
on your faux div seems to work in IE7 FFox and Opera.

Worth a try before you get too involved in a major rewrite.

Frank

I have changed the right faux UL into a DIV and now it seems ok in both IE and FFox.

I wont do a rewrite, just some tweaks of the css to clean it up and short-hand it a bit more and also re-name some of the divs I have used as I hadnt named them too well.

effpeetee
01-02-2008, 06:28 PM
Moss2076,
It has been an enjoyable episode with you and the other coders . I am glad that you seem to now be on the right road. It has been a valuable learning experience for me too. My knowledge of CSS is very patchy.

Happy coding.

Frank

moss2076
01-02-2008, 06:41 PM
Thankyou!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum