ie6

Firefox centered background on the body problem
Posted by Rob CornishOctober 3, 2008
Today at work we ran into a problem with Firefox using a background on the body.
The setup was a background on the body tag to be centered with the browser window to fit behind a centered div.
Using a min-width on the body alone done nothing. IE6 and 7 with width:1024px; on the div stopped the background from moving but not in Firefox.

To fix this in Firefox we had to add the html element into the css tag.
```
html, body { min-width:1024px; background:url(image.jpg) no-repeat center 0; }
div { width:1024px; margin:0 auto; }
```
Note: You don't need to include the background here, this can just go normally on the body tag.
Tags: background, body, center, css, div, firefox, html, ie6 | Comments (0)
Lightbox blackout css javascript technique IE6
Posted by Rob CornishSeptember 30, 2008
A mate at work was running into problems with IE6 100% height.
The lightbox background height would only span the height of the current window. When you scrolled down the lightbox background just ended. Alexey Kasaev found a css javascript work around for ie6.
```
height:expression(eval(document.body.clientHeight) + "px");
```
Tags: background, css, height 100%, ie6, javascript, lightbox | Comments (0)
New IE6 PNG Fix
Posted by Rob CornishAugust 26, 2008
Came across an update of the IE6 PNG fix at Unit Interactive.
This code is simple to integrate, works like a charm and very quick!
To get started you need the unitpngfix.js.

Add the following code into the head of your document. Change the folder structure to your desired path.
```

```
On running this I ran into a couple of problems…
1 - My images had the missing image graphic over the top
2 - Links on images made some images disappear
3 - Disappearing Divs!

Looking into these problems I came up with a few solutions.

1 - Missing graphic overlaying image

For the missing images graphic over the top of my transparent image was a problem with the updated unitpngfix.js, the update stated on 08.26.08 where there was no need for the clear.gif any more didn't quite work on my IE6 browser. I changed the unitpngfix.js to have the following:
```
el.src="/media/images/clear.gif";
```
Instead of:
```
el.src="javascript:'#define x_width 1\\n#define x_height 1\\nstatic char x_bits[]={0x00}'";
```
This cleared up the missing graphic over the top of my transparent images. The clear.gif is a simple 1px x 1px blank gif sat in my images folder.
I get the missing graphic icon on their website using IE6 too! Please fix this unit interactive!!

2 - Disappearing images when using links

The next issue being links on my png images, this worked on some but not others. I solved this by adding:
```
img { display:block; }
```
The only problem with this is that you may not want all your images to be displayed like this…

3 - Disappearing div's

For the disappearing div's was an odd one. My webpage was setup with a footer div that had no css styling just normal text and an image inside. The div wouldn't display! Removing the javascript displayed the div… tad confused!
Playing with this I managed to get the div back by using:
```
#selector { display:block; position:relative; height:50px; }
```
The div almost acted similar to a floated object, by putting a height on this forced it to display.

Hope all this helps
Tags: css, hacks, html, ie6, images, javascript, png, transparency, unitpngfix.js | Comments (5)
Min-Height Fast Hack
Posted by Rob CornishAugust 7, 2008
A genius IE6 min-height fix.
```
#selector {
  min-height:500px;
  height:auto !important;
  height:500px;
}
```
Source: Dustdindiaz

Reviewing this code, there's a simpler way of doing it. Here's the other way:
```
#selector {
  min-height:500px;
  _height:500px;
}
```
IE6 should read the _height property where as all other browsers will ignore.
Tags: css, hack, ie6, min-height | Comments (0)
IE6 min-widths and min-heights
Posted by Rob CornishMay 7, 2008
Using the following code you can get IE6 to work with min-width and min-height.
```
* html #wrapper
{
     width:expression((d = document.compatMode == "CSS1Compat" ? document.documentElement : document.body) && (d.clientWidth > 1280 ? "1280px" : d.clientWidth < 1024 ? "1024px" : "auto"));
}
```
Note: Place this within an if IE 6 condition.
Tags: css, expression, hack, ie6, min-height, min-width | Comments (2)
IE6 PNG support
Posted by Rob CornishMarch 24, 2008
Using Angus Turnbull's iepngfix.htc you can add png support to IE6.

In order to make this work, you also need the blank.gif image.
Open up the iepngfix.htc in your favourite text editor and make sure the path to blank.gif is correct.

Within the css document add the following behavior:
```
img, div { behavior:url(iepngfix.htc); }
```
On using this, I've noticed that you need to add a width and height on the image for it to display correctly.

Playing with links, I ran into a few problems…
The main one being a background png called in via the css with links on top. The links were there but unclickable, I found out that the background cannot use positioning. By placing this in a containing div with the positioning on solved this problem.

On looking into the linking situation further I came across a simpler solution.
Simply by adding:
```
a { position:relative; z-index:1000; }
```
This forced the links in front of the PNG graphics.

Using the PNG as a background comes with a few issues, in IE6 you cannot use background-position or background-repeat. The attached PNG fix allows you to stretch the PNG graphic for repeating backgrounds. As long as you specify a width to this element it will work. The positioning has no work around, IE6 will completely ignore any input from this style. A work around I have used is that you place the PNG image within a div, positioned absolute behind the content div.

Please let me know if you find better ways on using this!
Tags: behavior, css, html, ie6, iepngfix.htc, png | Comments (4)
Scrolling div's and anchor links
Posted by Rob Cornish
I've just hit a browser difference that stopped me for a while!

My problem:

Text links outside a scolling div to jump the scroll view to the desired location within the scrolling div.
The scrolling div has the css overflow:auto; with a set height to enable scrolling.
Using normal anchor links and names worked for firefox but not IE6 + IE7, after researching on the net I came across a javascript equivalent.
```
document.getElementById('elmID').scrollIntoView(true);
```
This is how I used the code, by adding this line of code into the anchor tag:
```
<a href="javascript:document.getElementById('elmID').scrollIntoView(true);">
```
Using this javascript and adding ID's to the areas I needed for scroll view worked a treat!
Tags: css, div, firefox, ie6, ie7, javascript, overflow, scrolling | Comments (3)

Css hacks

Posted by Rob Cornish

Firstly always design for firefox, for this is the best standards web browser there is!

IE6

* html .myClass { color:#ff0033; }

IE7

html>body .myClass { *color:#ff0033; }
*:first-child+html #MyDiv { margin:2px; }

Using seperate css stylesheets

IE6

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="/css/ie6.css" />
<![endif]–>

IE7

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="/css/ie7.css" />
<![endif]–>

Tags: css, firefox, hacks, ie6, ie7, stylesheets | Comments (0)

dlnqntdesign was our cure