[SOLVED] active display block not working in I.E

[shadiadiph]

I have a block that links to another page it works fine in opera firefox google chrome but not in I.E it displays as a block the correct size but only one pixel to the left of the block in the center seems to go to the link in I.E any ideas?

 

my css

 

#headsignup {
width: 95px;
height: 25px; 
position: relative;
top: 51px;
left: 55px;
border: 0px solid #ff0000;
background: transparent;
}
#headsignup > a{
display: block;
width: 95px;
height: 25px;
border: 1px solid #ff0000;
padding: 0px 0px 0px 0px;
}

 

html

<div id="headsignup">
<a href="accounts/index.php"></a>
</div>

[Axeia]

I'm guessing you're talking about ie6?

 

It does not support the direct descendant selector.

Easiest way around it would be removing the '>' sign. If however you have other links in the same #headsignup you don't want to the styling to apply to you'll have to work around it. I'd stick the links in a span, give it the class ie6hack and then apply the styling to #headsignup .ie6hack a

[shadiadiph]

mm actually I am using I.E 7 but removing the > makes no odds tried it it still only allocates one pixel as the link and not the whole block which is display: block. this is really annoying me i hate I.E thsi seems to be working fine in the other browsers

[shadiadiph]

if i use position:absolute it works but then it isn't positioned properly using position relative it doesn't work??

[shadiadiph]

works with position relative if i use a background color such as background :#fefefe; but if i use background: transparent;

it doesn't work???

[shadiadiph]

got it working i just had to make a transparent gif the size of the block

 

in I.E posiion relative will not display an active block with a transparent or no background for some reason

 

#headsignup {
width: 95px;
height: 25px; 
position: relative;
top: 51px;
left: 47px;
background: transparent;
}
#headsignup > a{
display: block;
width: 95px;
height: 25px;
background: url(../pix/spacer.gif) no-repeat left bottom;	
}

[Axeia]

Good to see you figured out, if you want to keep it IE6 compatible you might still want to implement my suggestion.

If not you might want to display somewhere "This site is best viewed in a modern browser such as etc".

 

If it's just a one pixel difference that has been bugging you, you could use

*:first-child+html #headsignup>a
{
    /* Apply your ie7 specific markup here,
    +1px width, or margin-left: -1px or something. */
}

I'm quite fond of validating CSS hacks myself

[shadiadiph]

thanks Axeia