Advanced search  

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Pages: [1]   Go Down

Author Topic: IE6 issues with DIV's in template.html  (Read 5618 times)

0 Members and 1 Guest are viewing this topic.

uk_martin

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Posts: 186
IE6 issues with DIV's in template.html
« on: December 22, 2010, 10:25:55 am »

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]
#main{
        float: left;
width: 695px;
top: 0px;
right: 0px;
padding-left:5px;


HTML
Code: [Select]
...
        <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
Logged

phill104

  • Administrator
  • Coppermine addict
  • *****
  • Country: gb
  • Offline Offline
  • Gender: Male
  • Posts: 4885
    • Windsurf.me
Re: IE6 issues with DIV's in template.html
« Reply #1 on: December 22, 2010, 10:48:03 am »

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

IMHO, let IE6 RIP.
Logged
It is a mistake to think you can solve any major problems just with potatoes.

uk_martin

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Posts: 186
Re: IE6 issues with DIV's in template.html
« Reply #2 on: December 22, 2010, 11:34:01 am »

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.
Logged

floridaflatlander

  • Coppermine newbie
  • Country: 00
  • Offline Offline
  • Gender: Male
  • Posts: 14
    • OutdoorUpdate.com
Re: IE6 issues with DIV's in template.html
« Reply #3 on: December 23, 2010, 11:37:54 am »

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?

Logged

uk_martin

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Posts: 186
Re: IE6 issues with DIV's in template.html
« Reply #4 on: December 23, 2010, 01:39:30 pm »

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

CSS
Code: [Select]
#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

Logged

floridaflatlander

  • Coppermine newbie
  • Country: 00
  • Offline Offline
  • Gender: Male
  • Posts: 14
    • OutdoorUpdate.com
Re: IE6 issues with DIV's in template.html
« Reply #5 on: December 23, 2010, 03:35:23 pm »

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
Logged

uk_martin

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Posts: 186
Re: IE6 issues with DIV's in template.html
« Reply #6 on: December 23, 2010, 04:22:14 pm »

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.
Logged

Jeff Bailey

  • Dev Team member
  • Coppermine addict
  • ****
  • Country: us
  • Offline Offline
  • Gender: Male
  • Posts: 1322
  • Fishing relaxes me.
    • Bailey Family Co.
Re: IE6 issues with DIV's in template.html
« Reply #7 on: December 23, 2010, 06:49:34 pm »

If you really want to support ie6 I would suggest conditional statements.
Code: [Select]
<!--[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.
Logged
Thinking is the hardest work there is, which is probably the reason why so few engage in it. - Henry Ford

uk_martin

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Posts: 186
Re: IE6 issues with DIV's in template.html
« Reply #8 on: December 24, 2010, 01:26:21 am »

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
Logged

uk_martin

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Posts: 186
Re: IE6 issues with DIV's in template.html
« Reply #9 on: December 24, 2010, 10:20:32 am »

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
Logged
Pages: [1]   Go Up
 

Page created in 0.022 seconds with 20 queries.