WordPress.org

Ready to get started?Download WordPress

Forums

Sidebar Issues (18 posts)

  1. wealthontap
    Member
    Posted 7 years ago #

    My sidebars are loading fine in Firefox but can't seem to get my right sidebar to align to the right in IE7, it keeps aligning left over the top of my left sidebar. I have validated my xhtml and css so that is all fine.

    http://www.wealthontap.com/blog

    Any suggestions,
    Mike.

  2. DianeV
    Member
    Posted 7 years ago #

    Is it actually set to float:right in your CSS?

    (This is where it gets fun with IE.)

  3. wealthontap
    Member
    Posted 7 years ago #

    Yep I sure do this is the section of my CSS which relates to the alignment.

    div#container {
    
    	float: left;
    
    	width: 100%;
    
    }
    
    div#content {
    
    	margin: 0 222px;
    
    }
    
    div.sidebar {
    
     	background: #E7DBD5;
    
    	border: 1px solid #ccc;
    
    	overflow: hidden;
    
     	width: 195px;
    
    }
    
    div#primary {
    
           float: left;
    
    	margin: 0 0 0 -100%;
    
    }
    
    * html div#primary {
    
    	left: 20px;
    
    	position: relative;
    
    }
    
    div#secondary {
    
    float: right;
    
    	margin: 0 0 0 -100%;
    
    }
    
    * { padding: 0; margin: 0; }
    
    body {
    
     font-family: Arial, Helvetica, sans-serif;
    
     font-size: 13px;
    
    }
    
    #wrapper { 
    
     margin: 0 auto;
    
     width: 922px;
    
    }
  4. Root
    Member
    Posted 7 years ago #

    Its all those fancy negative margins. Completely unnecessary.

  5. wealthontap
    Member
    Posted 7 years ago #

    So what should they be?

  6. aymie
    Member
    Posted 7 years ago #

    Why not try: margin-right: 0px; or for IE
    html>body margin-right: 0px;

    That way FF and IE read it as no margin on the right.
    Or you can do this:

    margin-left: 780px; (depending how wide your template is), that positions your sidebar left or right, the higher the px the more right, the lower the px the more left.

  7. Root
    Member
    Posted 7 years ago #

    I always use this (adjust as necessary):

    #wrapper {width: 800px; margin: 10px auto}
    #content{width: 600px; float:left}
    #menu{width:200px; float: right}
    .clear{clear:both}

    That is it.

  8. wealthontap
    Member
    Posted 7 years ago #

    Thanks for all your help guys. I have tried doing it like that in the past and can not seem to get my content to align in the middle. If I float the content right both sidebars align to the left and vice versa. I want a sidebar either side of the content and the only way I have been able to that is with the code I posted above.

  9. jrawle
    Member
    Posted 7 years ago #

    Can't you do it using absolute positioning rathe than floats? Try:
    #primary { position: absolute; left: 0px; width: 195px; }
    #secondary { position: absolute; right: 0px; width: 195px; }
    #content { position: absolute; left: 222px; right: 222px; }

  10. wealthontap
    Member
    Posted 7 years ago #

    hmmmm well that placed the content in the middle and the sidebars either side although the sidebars and the content box detached themselves from the header. See screenshot http://www.wealthontap.com/images/screenshot.gif

  11. Root
    Member
    Posted 7 years ago #

    For 3 columns you need:

    #wrapper {width: 800px; margin: 10px auto}
    #main {width:600px; float:left}
    #content{width: 400px; float:right}
    #sidebar1{width:200px; float: left}
    #sidebar2{width:200px; float: right}
    .clear{clear:both}

  12. wealthontap
    Member
    Posted 7 years ago #

    Ok well it's getting closer although I still have the same problem with the two sidebars aligning on one side instead of either side of the content. Maybe it's just the way Scott has coded the theme? New screen shot http://www.wealthontap.com/images/screenshot.gif

    Current code

    div#wrapper {width: 922px; margin: 10px auto}
    div#main {width: 922px; float:left}
    
    div#content {
     width: 456px;
     float:right;
     color: #333;
     border: 1px solid #ccc;
     background: #F2F2E6;
    }
    
    div.sidebar {
     	background: #E7DBD5;
    	border: 1px solid #ccc;
     	width: 195px;
    }
    
    div#primary {float: left}
    
    * html div#primary {
    	left: 20px;
    	position: relative;
    }
    div#secondary {float: right}
    
    .clear{clear:both}
    
    * { padding: 0; margin: 0; }

    Thanks again for all your help hopefully I can figure this out soon.

  13. aymie
    Member
    Posted 7 years ago #

    for your secondary, try:

    margin-right: whatever%;

    e.g. margin-right: 10%;

    instead of float...may help

  14. wealthontap
    Member
    Posted 7 years ago #

    No I am afraid that didn't work either. It's strange how the CSS works fine on my home page in both browsers but as soon as I try and incorporate it into the Sandbox Theme it doesn't work. Thats why I thought perhaps it's the way the theme has been coded. Unfortunately Scott is not replying to my emails.

  15. ronchicago
    Member
    Posted 7 years ago #

    When I now select a theme the first place I test is on IE. I have avoided using themes that have IE issues after not being able to solve the problem. Research led me to this site though I have not used the info. It is a fun read!

    http://cavemonkey50.com/2005/12/the-ultimate-ie-hack-guide/

    Please let us know when you solve it...

  16. DianeV
    Member
    Posted 7 years ago #

    Actually, I test in Opera and Firefox first (to ensure the code is correct), and then deal with IE.

    But that's just my preference ... I'd rather tweak correct code for IE than create incorrect code that I must then fix for browsers that display more standardly.

  17. jabecker
    Member
    Posted 7 years ago #

    Poor IE... it get so confused.

    You might try creating a div that contains your left sidebar and your center column. That will give the right sidebar something solid to float against.

  18. shannon124
    Member
    Posted 6 years ago #

    Please help!
    My sidebar dividers are floating over the rest of my blog.
    http://www.eleganteventsbyshannon.ca/blog/

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.