I have noticed a strange effect with the sidebar. The main content section of the "Home" page seems to be 1 pixel further to the left after the bottom of the sidebar. It is hardly noticeable but I've been unable to solve this problem in the CSS files. Does
anyone know why this happens? I have tried a number of things, so I don't think it is as simple as the margin-left attribute of the main content area being 1 pixel too small, as I've tried all sorts of margin-left values. I think this may be a bug in IE but
I could be wrong.
Here is a simple example HTML page with CSS file to demonstrate this problem. I am very keen to get to the bottom of this so any help would be much appreciated. Thanks in advance.
Okay, I've got another clue for you all. I viewed the exact same page in Mozilla Firefox and the problem went away. It is clearly some sort of box model rendering bug in my version of Internet Explorer (6.0.2900.2180 xpsp_sp_gdr.050301-1519). Don't you just
love Micro$oft - you would have thought their browser would fully support all css recommendations and standards by now!
Never mind, I've managed to get an answer to this on another forum. Strange that no one here spotted it.
The problem is apparently known as the "3 pixel text-jog bug" and is unique to IE6 (I think). Here is the work-around that you need in your default.css file in case anyone else is irritated by this problem.
A slight correction for anyone who decides to try the above code.
I discovered that because #content occurs as an ID on different pages, some with the floating sidebar and some not, the above CSS causes problems in the other pages. To avoid this, just use two different IDs as follows and only apply the bug fix to the one
that goes with the floating sidebar.
Scouser0712
Member
85 Points
17 Posts
Sidebar problem
May 13, 2006 12:09 PM|LINK
Scouser0712
Member
85 Points
17 Posts
Re: Sidebar problem
Jun 03, 2006 12:50 PM|LINK
Here is a simple example HTML page with CSS file to demonstrate this problem. I am very keen to get to the bottom of this so any help would be much appreciated. Thanks in advance.
http://www.asbi80.dsl.pipex.com/test.html
Scouser0712
Member
85 Points
17 Posts
Re: Sidebar problem
Jun 03, 2006 04:22 PM|LINK
Okay, I've got another clue for you all. I viewed the exact same page in Mozilla Firefox and the problem went away. It is clearly some sort of box model rendering bug in my version of Internet Explorer (6.0.2900.2180 xpsp_sp_gdr.050301-1519). Don't you just love Micro$oft - you would have thought their browser would fully support all css recommendations and standards by now!
Does anyone know a work-around?
Scouser0712
Member
85 Points
17 Posts
Re: Sidebar problem
Jun 10, 2006 08:20 AM|LINK
Never mind, I've managed to get an answer to this on another forum. Strange that no one here spotted it.
The problem is apparently known as the "3 pixel text-jog bug" and is unique to IE6 (I think). Here is the work-around that you need in your default.css file in case anyone else is irritated by this problem.
#sidebar
{ float: left;width: 214px;
}
#content
{ margin-left: 256px;}
/* Hide from IE5-mac. Only IE-win sees this. \*/
*
html #sidebar { margin-right: 42px;}
*
html #content { height: 1%; margin-left: 0px;}
/* End hide from IE5-mac */
Scouser0712
Member
85 Points
17 Posts
Re: Sidebar problem
Jun 10, 2006 08:29 AM|LINK
I think I should post that again as it didn't come out the way I expected. Here it is again.
#sidebar {
float: left;
width: 214px;
}
#content {
margin-left: 256px;
}
/* Hide from IE5-mac. Only IE-win sees this. \*/
* html #sidebar {
margin-right: 42px;
}
* html #content {
height: 1%;
margin-left: 0px;
}
/* End hide from IE5-mac */
Scouser0712
Member
85 Points
17 Posts
Re: Sidebar problem
Jun 10, 2006 01:04 PM|LINK
A slight correction for anyone who decides to try the above code.
I discovered that because #content occurs as an ID on different pages, some with the floating sidebar and some not, the above CSS causes problems in the other pages. To avoid this, just use two different IDs as follows and only apply the bug fix to the one that goes with the floating sidebar.
#sidebar {
float: left;
width: 214px;
}
#contentf #content{
margin-left: 256px;
}
/* Hide from IE5-mac. Only IE-win sees this. \*/
* html #sidebar {
margin-right: 42px;
}
* html #contentf {
height: 1%;
margin-left: 0px;
}
/* End hide from IE5-mac */