2
Hello,
I've read numerous posts & guides on this subject but i'm still having problems. I'm writing some HTML for the company intranet and all our browsers are currently (you guessed it) IE6.
In most of the guides that I've read you can "fix" this problem in IE6 by nesting a series of divs inside each other and fiddling the margins. However this only seems to work when you know the size of the content you're putting in. It also seems to run into trouble when your container is inside a table (as is the case with me). Just to add further insult I'm also working in flow layout (or whatever the term is, NOT absolute :) )
I've got a table containing link buttons (represented as DIVs inside Anchor Tags). This is immediatly a problem as IE6 apparently doesn't supports divs in anchors but it seems to work. I'm using Javascript for the rollovers since IE6 doesn't seem to like aligning the text on Hover when I use pseduo classes.
The problem is that I'd like to vertically center the button text inside the div. Everything I've tried thus far hasn't worked. I could next another div inside and specify a "top" value manually but I'd like to avoid manually setting each one if I can.
Could anyone make any suggestions?
example code (excluding my failed attempts at vertical align) to follow, cheers,
Olly
CSS:
DIV.buttonOff
{
background-image:url(myImage1.png);
background-repeat:repeat-y;
background-position: top left;
width:100px;
height:60px
}
DIV.buttonOver
{
background-image:url(myImage2.png);
background-repeat:repeat-y;
background-position: top left;
width:100px;
height:60px
}
Script:
function doOver (element)
{
element.className = "buttonOver";
}
function doOff (element)
{
element.className = "buttonOff";
}
Html:
<table>
<tr>
<td valign="center" align="center"><a href="myRef.com"><div class="buttonOff" onmouseover="doOver(this)" onmouseout="doOff(this)" align="center">My Multi Line Quite long Button text</div></a>
</td>
<td valign="center" align="center"><a href="myOtherRef.com"><div class="buttonOff" onmouseover="doOver(this)" onmouseout="doOff(this)" align="center">short btn txt</div></a>
</td>
</tr>
...etc...
</table>
