Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts

    Faux column problem, double margin in IE?

    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

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    Last edited by effpeetee; 01-02-2008 at 10:46 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    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.

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    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!
    Last edited by moss2076; 01-02-2008 at 04:00 PM.

  • #6
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    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

    Edit: Plus, YOU HAVE NO DOCTYPE. I would suggest you put one in!
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #7
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,788
    Thanks
    8
    Thanked 131 Times in 129 Posts
    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:
    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">
    <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>
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Is this what you are after?

    Code:
    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/presenta.../example13.htm
    Attached Thumbnails Attached Thumbnails Faux column problem, double margin in IE?-screenhunter_01-jan.-02-16.27.jpg  
    Last edited by effpeetee; 01-02-2008 at 04:47 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    moss2076 (01-02-2008)

  • #9
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    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">
    Last edited by moss2076; 01-02-2008 at 04:34 PM.

  • #10
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    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...
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #11
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by effpeetee View Post
    Is this what you are after?

    Code:
    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!

  • #12
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,788
    Thanks
    8
    Thanked 131 Times in 129 Posts
    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.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #13
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by harbingerOTV View Post
    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

  • #14
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #15
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by effpeetee View Post
    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.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •