Jump to content

website alignment is off on IE 6 ?


eatfishy

Recommended Posts

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?

Link to comment
Share on other sites

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.

 

 

Link to comment
Share on other sites

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.  :D

 

 

 

 

 

 

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.