Webpage Alignment problem In IE6!

by 5 replies
7
Hey guys, I'm new to all this so spare my Non-geekiness

I just installed a WP blog at Fitness Blog

It works fine in Firefox but when I check the same in IE6, the entire sidebar, on every single page of website (except the homepage), goes at the bottom of the page and sits there for god knows what!

Its really frustrating to see this when I've recently found some success in transferring the WP blog from my localhost to my webserver. This is driving me to the edge of insanity!

Any help would be appreciated.
Thanks in advance!
#website design #alignment #ie6 #problem #webpage
  • C'mon guys ! Help me out with this. I'm offering a free thanks
    • [1] reply
    • howudoin, I'm answering your question as my first post on Warrior Forum. I probably spent more time than I should have figuring out how to fix your CSS layout issue, but I thought I'd make my first post memorable. I'm a professional web designer with 11 years experience, so I knew almost immediately the 2 or 3 things that could be causing your IE6 layout issues. Bottom line is some of your elements in the left column were too wide, made wider by IE6's buggy CSS support. Replace two of your style entries (.postarea and .breadcrumb) in this file:
      /Fitness_Demo/wp-content/themes/church/style.css

      ... with my code below, which uses standard CSS hacks to fix these common IE6 issues. Enjoy.

      Code:
      .postarea {
    display:inline;
    background: #FFFFFF url(images/homepagetop.gif) no-repeat scroll center top;
    float: left;
    margin: 0px 10px 10px 10px;
    padding: 8px;
    border: 1px solid #DDDDDD;    
    width: 598px;
    voice-family: ""}""; 
    voice-family: inherit; 
    width: 580px; 
    }
html>body .postarea {
    width:580px; 
    }
.breadcrumb {
    float: left;
    width: 580px;
    font-size: 11px;
    margin: 0px 0px 20px;
    padding: 0px 0px 3px;
    border-bottom: medium double #EAEAEA;
    }
      • [ 1 ] Thanks
  • Thanks for the answer Steve, I really appreciate putting your valuable time in this.

    But unfortunately this hasn't worked for me.

    I updated the css file as you directed.(You can check the source)

    Anything else you might recommend
    • [1] reply
    • howudoin, I've definitely got a fix for you now. There were two additional issues that caused my first fix not to work:
      1) The forum did not properly display my hack code because it displayed my escaped quotes as quotes instead of just writing out the backslash. Therefore the code you copied from my post was not what I intended.
      2) There were at least 6 other CSS validation errors where the style declarations were missing semicolons and using non-standard values for attributes like "normal" instead of "none" on "text-transform" or "no repeat" instead of "no-repeat" on "background". See this list from the W3C validator:
      Code:
      80       #navbar       Value Error : color  attempt to find a semi-colon before the property name. add it
149     #nav li li a, #nav li li a:link, #nav li li a:visited     Value Error : text-transform normal is not a text-transform value : normal
589         Parse Error }"";
593         Parse Error : inherit; width: 580px; } html>body .postarea
637     .comment     Value Error : border attempt to find a semi-colon before the property name. add it
877     #l_sidebar     Value Error : background Too many values or values are not recognized : #ffffff url(images/leftsidebartop.gif) no repeat scroll center top
889     #l_sidebar .widget     Value Error : background Too many values or values are not recognized : #ffffff url(images/leftsidebartop.gif) no repeat scroll center top
939     #r_sidebar     Value Error : background Too many values or values are not recognized : #ffffff url(images/rightsidebartop.gif) no repeat scroll center top
      I will PM you and send you the corrected CSS file as an attachment to be sure you get it correctly.

      Wow, you really have to buy me a soda if we ever meet in real life.
  • Banned
    [DELETED]
  • Thanks for the answer lumbardi.
    So, do you mean that whereever there is "IFrame" in the code, I should change it with "div"
Join the discussion

Next Topics on Trending Feed