IE6 issues with DIV's in template.html

[uk_martin]

Hi again

There seems to be a problem with my template, in that it does not display correctly in IE6

I've got a basic design based on a div at the top that takes the header and menu on board, then below there are supposed to be two columns, one for the menu and one for the gallery. They are supposed to sit side by side, as you can probably see in a decent modern browser - www.brummiesfans.com/coppermine

The problem lies with the 20%-25% of folk out there who will be seeing this in IE6, where the <div id="main"> is lying below the menu <div>. The code that I am using at the moment is:

CSS

Code Select Expand

#main{
        float: left;
width: 695px;
top: 0px;
right: 0px;
padding-left:5px;


HTML

Code Select Expand

...
        <div id="main">
        <div class="clearer"></div>
<br />
            <p>
<!-- Start standard table -->
<table align="center" width="100%" cellspacing="1" cellpadding="0" class="maintable ">
...


I have tried using "position : relative" and "position : absolute" in the CSS but these don't solve the problems. Can anyone suggest anything else that can get around the problem and make it a bit more IE6 bullet proof?

Thanks

Maritn

[phill104]

20-25%? Are you really sure? - http://www.w3schools.com/browsers/browsers_explorer.asp

IMHO, let IE6 RIP.

[uk_martin]

It's been coming down but on my site (maybe it's a target audience "thing") but it was 20.1%. It may be distorted by the fact that where I live, the largest employer in the area (Birmingham City Council, with 60,000 machines) is stuck with IE6 due to interoperability issues with other corporate software systems.

As you say though, the sooner IE6 is killed off, the better.

[floridaflatlander]

Have you tried to float #main right?
IE6 needs 3-4 extra pixs in floats(on the left side I think) so add up your padding, margins and px to see if you have extra blank space.
There are hacks to work with IE6, it's 5:30a here so I look again later when I get time.
Is tableh1 foated left?

[uk_martin]

Consider "Columns" to be the "container" with "left" and "main" sitting inside it...

CSS

Code Select Expand

#columns {
position: relative;
width: 880px;
}
#left {
float: left;
width:165px;
top: 0px;
left:0px;
padding-left:10px;
padding-right:5px;
}
#main{
float: left;
width: 695px;
top: 0px;
right: 0px;
padding-left:5px;

Columns = 880px
165+10+5+695+5 = 880px

float: right - WILL push the "main" div to the right, but it is then below instead of beside the left div.

Will be interested to see what the solution is going to be.

Thanks

Martin

[floridaflatlander]

Columns = 880px
165+10+5+695+5 = 880px

I see your using all of your space. Now IE6 adds pixels to floated divs and I think its on the left that it adds them and I think it adds to the padding. I'm recalling from memory but IE6 sees it like this (I think) 3+165+10+5+695+5 = 883px

I'll try to play with it later today, I have x-mas stuff todo.

In the mean time try

#left {
   float: left;
   width:165px;
   top: 0px; /*I don't know if you need this*/
   left:0px; /*I don't know if you need this*/
             margin-left: 5 or 10px;
}


main{
   float:right;
   width: 695px;
   top: 0px; /*Again I don't know if you need this*/
   right: 0px;
             margin-right: 5 or 10px;

}

or

#left {
   float: left;
   width:165px;
   top: 0px; /*I don't know if you need this*/
   left:0px; /*I don't know if you need this*/
            margin-left: 5 or 10px;
}

main{
   width: 695px;
   top: 0px; /*Again I don't know if you need this*/
   right: 0px;
             margin-left: 175 or 180px;
}

You can add or remove padding and margin as you see fit.
If you float main right and it drops that means you have to many pixes, in other words remove your padding and margins then add as need.

Also
*html #left {
   display: inline;
}

May get rid of the extra px problem with IE6 but still been extra space

[uk_martin]

Thanks. I've tried both of the options but both have had to be rejected. The "Main" content still does not move up alongside the "left" content in the first of the options, and the second one pushes "main" down below "left" in Firefox, so making the situation worse.

Like you, I'll be looking at this again tonight to see what alternatives there are that can be made to work. I'll only have tomorrow to test on an IE6 machine, until I go back to work again in 2011, so lets hope for some luck.

[Jeff Bailey]

If you really want to support ie6 I would suggest conditional statements.

Code Select Expand


<!--[if lte IE 6]>
<table>
 <tr>
   <td>
<![endif]-->
<div id="left">
...
</div>
<!--[if lte IE 6]>
   </td>
   <td>
<![endif]-->
<div id="main">
...
</div>
<!--[if lte IE 6]>
   </td>
 </tr>
</table>
<![endif]-->


untested as I don't use ie6 and usually put a warning forcing an upgrade.
You might have to add additional styling.

[uk_martin]

Thanks Jeff, I like that idea. I'll give it a try and let you know tomorrow (when I'm back at work) how it goes.

There's a MOD to phpBB called "ie6nomore_v1-0-3" which I'm adapting over to my theme. If it works I'll send a screenshot.

Cheers

Martin

[uk_martin]

Thanks again Jeff

Just a little addition of valign="top" and the job was a good one!. The "ienomore" div worlkd too -

File 1 - the look of the site with borders and header
File 2 - the look of the gallery without borders and header - which is now a matter of getting pngfix to work - http://forum.coppermine-gallery.net/index.php/topic,69228.0.html

Merry Christmas

Martin