website alignment is off on IE 6 ?

[eatfishy]

I noticed my website www.blogoberry.com loads fine on the latest IE and latest FF, but the alignment is off on IE 6. I thought it was off due to math calculation, where the two inner table size exceeds the outter table size? I looked at my style.css again and it looks okay to me? Anyone knows what's going on?

[webmaster1]

Either you've fixed it or I don't see it. I'm viewing through Chrome and IE6.

 

Any chance you could be a little more specific? What element of your page has the discrepancy? e.g. body, navigation, left/right column, footer etc.

[eatfishy]

Sorry, I should have been more specific. In the www.blogoberry.com, you need to login in first and then click on the game section. Then click on Treasure Island. Here is the login information:

 

username:test

password:test

 

You'll notice the right side bar is drop to the bottom and does not align with the main content on IE 6.

 

 

[webmaster1]

Ah, now I see what you mean. I didn't realize I had to add a blog entry first to see the error effect. Try using screenshots when looking for assistance online.

 

Firstly, you're styling the page with style.css:

 

<link href="style.css" rel="stylesheet" type="text/css" media="screen" /> 

 

The problem seems to be occurring with or within the sidebar div:

 

<!-- start sidebar --> 
<div id="sidebar"> 
  bla bla bla
</div> 
<!-- end sidebar --> 

 

The css is asking the sidebar div to float right:

 

#sidebar {
float: right;
width: 240px;
background: url(imagestest/content/img04.gif) no-repeat;
        padding-top: 9px;
}

 

At first I was thinking that the issue was to do with vertical alignment but now it seems that it's a float issue. In my experience IE6 is a bitch when it comes to floats and is replete with many a float related glitch. I'm going to hazard a guess and suggest that the problem is to do with conflicting floats.

 

#sidebar is floating right of #content according to your style sheet:

 

#content {
float: left;
width: 610px; /*530*/
background: url(imagestest/content/img03.gif) no-repeat;
}

 

BUT you already have six other elements relying on floats in your layout:

 

#content_TI {
float: left;
width: 650px; /*530*/
background: url(imagestest/content/img03.gif) no-repeat;
}

#sidebar_TI {
float: right;
width: 200px;
/*background: url(imagestest/content/img04.gif) no-repeat; */
        padding-top: 94px;
}
#header h1 {
float: left;
        /*padding: 34px 0 0 0;*/
padding: 20px 0 0 0;
        /*color: #98C204;*/
        color: #82A204;

}

#header p {
float: right;
/*padding: 42px 0 0 0; */
        padding: 37px 0 0 0;
font-size: 1.8em;
        color: #DCA114; /*orange*/
}

#menu ul {
margin: 0;
padding: 7px 0 0 0;
list-style: none;
        float: left;
}

#content_b {
float: left;
width: 850px; /*530*/
background: url(imagestest/content/img03b.gif) no-repeat;
}

 

You're going to need to familiarize yourself with how to use "clear" in your style sheet. This property controls how the subsequent elements of floated elements should behave. Click the following link to begin your study: http://lmgtfy.com/?q=css+clear

 

It's going to take a fair amount of trial and to figure out what float is causing the problem. My advise is to temporarily delete the floats from the css of the six divs but leave the floats intact for the content and sidebar div. This will tell you straight away whether or not the issue is the result of conflicting divs.

 

Let me know how it goes. I'll check back before the weekend. 

 

 

 

 

 

 

 

 

[eatfishy]

I have decided to not spend my time on fixing the IE6 issue since most people have the latest version of IE. I think the majority of IE6 user are probably the corporate work, public school, public library, etc Even opera web browser display the side bar alignment correctly.

 

I would rather spend the time on creativity of the website. Thank you for your advice though.

[eatfishy]

I noticed the alignment is only off ine IE6 when I add a word that's too long and it happens to be the last word of the line.

[nadeemshafi9]

its very time consuming to get stuff to work in ie6 consider this browsers are force updated so everyone with windows conected to teh internet will be using ie8, and people who arnt well its up to you.