Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
fixing IE6 bugs with "height=100%" ¿has collateral damages?
Hi,
In IE6, I was having this bug/behaviour:
when hovering a link, some divs were changing they ¿height? ¿padding? ¿margin? (dont know).
This behaviour was very erratic, as I were doing some changes in the stylesheet to find the solution. Removing some paddings in the divs, temporaly fixed the bug, but I need to set paddings.
Those divs were parents divs of the hovered-link.
And usually, only one link in the “triggered” the bug. I mean, other sibling links werent triggering the bug.
At first, I think it was the Guillotine bug, but now I’m not really sure.
The only thing I can say is that I fixed them using height="100%" in the container divs of the link.
Of course, now I’m afraid, because I dont know if this will lead to something weird in the future.
At least, right now, the site looks as expected in IE6, Firefox 1.5, and Opera 8.5.
I really dont care about older IE browsers. It’s time to forget them, but dont want to start a discussion about this.
So, back to the workaround of setting height="100%" to fix, what are the collateral effects, if any, of doing that?
Thanks in advance <small>and excuse my english</small>
Offline
#2 2005-11-11 17:50:41
- NyteOwl
- Member
- From: Nova Scotia, Canada
- Registered: 2005-09-24
- Posts: 539
Re: fixing IE6 bugs with "height=100%" ¿has collateral damages?
Sounds like the style you were applying to :hover changed one or more of the following:
added padding
changed the line-height
changed the font-family
changed the font-weight
Any of the above can alter the the height of the enclosing space depending on the rest of the environment. Do you have a sample we might look at?
Obsolescence is just a lack of imagination. / 36-bits Forever! / #include <disclaimer.h>;
Offline
Re: fixing IE6 bugs with "height=100%" ¿has collateral damages?
Thanks for replying, NyteOwl <blockquote>Sounds like the style you were applying to :hover changed one or more of the following:</blockquote>
<del>No, this is not the case of :hover rules in the a element.</del> See next post
It was more like a bug, only triggered in IE6.
I did the classic debugging method of commenting big chunks of th stylesheet, and it seems to be a problem in the main layout divs.
As I said, I have fixed it right now by setting height to 100% to some divs containing the link.
<blockquote>Do you have a sample we might look at?</blockquote>No, i’m working offline, and this is one of those horrible designs (not made by me, of course) that you dont want to add to a portfolio, and also dont want to share to others, even for correcting a css bug, jijiji.
No, really, the design is not mine, and I dont like it. But I’m not a web designer either, dont even have my own TXP site. But that’s another story…
Thanks anyway!
Last edited by maniqui (2005-11-11 18:24:50)
Offline
Re: fixing IE6 bugs with "height=100%" ¿has collateral damages?
<blockquote>Sounds like the style you were applying to :hover changed one or more of the following:
added padding
changed the line-height
changed the font-family
changed the font-weight</blockquote>
Mmmmm… NyteOwl… you were right… well, not right-right, but nearly right.
I have none of this properties in the a:hover rule…
But removing the rule for a:hover seems to fix the problem…
My styles for “a” in the CSS:
a:link,
a:visited {
color: #003366;
text-decoration: none;
border-bottom: 1px dotted #666;
}
a:visited {color:#333;}
a:focus,
a:hover {
color: #060;
border-color: #060;
border-bottom-style: solid;
}
Look… there is nothing wrong with the above.
But if I remove the last rule, the “bug” is killed.
Very weird.
Any thoughs?
Offline
Re: fixing IE6 bugs with "height=100%" ¿has collateral damages?
If I left this
a:focus,
a:hover {
}
the bug is killed.
But if I add any declaration to that rule, tuc! the bug is triggered. F**king IE.
Offline
Re: fixing IE6 bugs with "height=100%" ¿has collateral damages?
maybe you can try this see if it works
<pre>
a {text-decoration: none;}
a:link,
a:visited {
color: #003366;
border-bottom: 1px dotted #666;
}
a:visited {color:#333;}
a:focus,
a:hover {
color: #060;
border-bottom: 1px solid #060;
}
</pre>
Offline
Re: fixing IE6 bugs with "height=100%" ¿has collateral damages?
I have found IE has issues with inheriting values properly in the a:pseudo-classes. I always end up specifying a base for them all so they start out teh same and then making teh changes I want for each specific one.
Shoving is the answer – pusher robot
Offline
Re: fixing IE6 bugs with "height=100%" ¿has collateral damages?
Thanks maharis, but that didnt work neither.
Offline
#9 2005-11-11 23:47:05
- NyteOwl
- Member
- From: Nova Scotia, Canada
- Registered: 2005-09-24
- Posts: 539
Re: fixing IE6 bugs with "height=100%" ¿has collateral damages?
Why are you using a border for the links instead of text-decoration: underline? Try eliminating the border and see if it fixes it. IE handles border/padding/margin interactinos differently than everyone else (re IE box problem).
I have also found an odd quirk in IE that if you specify a dotted border of 1 px you actually get dashed, but for 2 px it is actually dotted. The vagaries of IE are never ending.
Last edited by NyteOwl (2005-11-11 23:50:13)
Obsolescence is just a lack of imagination. / 36-bits Forever! / #include <disclaimer.h>;
Offline