The-Reviewer.net

This is for the bloggers out there.  I know not everyone here is a blogger, but this issue has to be posted.  It is an issue with IE6 and IE7 and I need to post it somewhere for people to find.   

Bloggers using 3CK2 that are having a problem with their sidebars, I will tell you how I fixed the issue….

IE sucks completly as we all know.  It has a problem with proper spacing of padding for columns.  This can add extra space between columns.   Or for us, sidebars.  This will lead to your sidebar appearing below the rest of your content.  I assume this has happened to regular K2 people as well.  So what can we do about it.  Well what I did, is create a whole new theme for IE6, which is now also covering IE7.  But Mikey, how can you have two themes running at the same time.   Well in the header, you can do a check, for IE, and if it is a certain IE, it will call a different theme style sheet.  So first put this in your header.  In the head portion of your header.php

   <!– compliance patch for microsoft browsers –>
  <!–[if lt IE 8]>
  <link rel="stylesheet" title="IEsucks" xhref="http://www.the-reviewer.net/wp-content/themes/3ColumnK2/styles/ IEsucksthereviewer/iesucksthereviewer.css" type="text/css" media="all" />  <![endif]–>

This is going to check what browser you are using and if I find someone using IE 7 or less, it uses iesucksthereviewer.css instead of my normal css.  So then the hard part.  Create a folder in your styles folder called whatever you want, I used IEsucksthereviewer.  Put in it a copy of your main css and anything else that is in your normal switch folder, or whatever folder you use for your style.   This is the css and folder you use to call when your header finds someone using IE.  Make sure the above code that you put in the header, matches the naming convention of your folder and css sheet.  

Next we will see the code differences I changed between the main .css and the IE one to make them both work.  

First in my normal .css  For the #primary call.  

#primary { /* Left and Right margins to the primary content */
    margin: 0 20px 0 20px !important;
    }
 

Now the IE css

#primary { /* Left and Right margins to the primary content */
         width: 500px !important;
         _width: 500px
         margin: 0 25px 20px 25px !important;
            }

See here I made sure to set the width and used the backup _width that IE seems to love so much, I also widended the margins and put a bottom margin on there.   

I also did the same for .secondary, .lsidebar and .rsidebar.  Here are the differences for those as well.

Normal css.

.secondary { /* CSS for the margins to the sidebar and the whole sidebar width */
    margin: 0 20px 20px 545px !important;
    width: 455px !important;
        _width: 455px !imporant

.lsidebar { /* CSS for left sidebar */
    margin: 0 9px 0 9px;
    width: 220px !important;
    float: left !important;
    padding: 0 20px 0 9px !important;
    }
   
.rsidebar { /* CSS for right sidebar */
    margin: 0;
    width: 170px !important;
    float: right !important;
    padding: 0 20px 0 10px !important;
    }    

And my IE css

.secondary { /* CSS for the margins to the sidebar and the whole sidebar width */
    margin: 0 0 20px !important;
        width: 430px !important;
        _width: 430px;
        float: right;
    }

.lsidebar { /* CSS for left sidebar */
    margin: -10px 3px 0px 0px;
    width: 200px !important;
        _width:200px !important;
    float: left !important;
    padding: 0px 10px 19px 9px !important;
    }
   
.rsidebar { /* CSS for right sidebar */
    margin: -10px 3px 0px 5px;
    width: 200px !important;
        _width: 200px !important;
    float: right !important;
    padding: 0px 3px 19px 0px !important;
    }    

These are all the differences between my two css sheets that call to either IE or any other good browser.   Now these values that I have changed are going to only work for me, based on the widgets and images that I use.  You all will have to work your own values to get your alignment working correctly.   Good luck,  I will try to answer any questions you have. 

If you want a way better written and far more detailed explination of these changes check out Nektros who is where I learned how to do this. She is way smarter than I am about CSS.

If your a normal reader, this is what us bloggers have to go through to get IE to work.  So please get firefox, there is a link on my sidebar, check it out, it is an awesome browser, and with your help, we would not have to write as much code and could bring you a lot more content.