Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
-
CommentAuthoradjustafresh
- CommentTimeMar 29th 2006
While developing a new website I ran into a nasty IE rendering bug that I have never tangled with. Basically, if the hover state of an anchor element is styled with a background property, it will cause the entire sidebar of the site to vanish when a user rolls over the link.
I suspect that the issue has something to do with the infamous peekaboo bug, but I've tried all of the suggested fixes to no avail.
My layout is based upon the Holy Grail article published recently in ALA.
Show me what you've got! Please take a look at the example page in IE6 and help me tackle this bad boy; I've tried to strip out most of the superfluous code.
Thank you,
Scott -
-
I don't think it's specific to those links, it's doing it for me on pageload it seems.
Okay, I take that back. In IETab in firefox it was doing it on pageload. In full IE (which is the same rendering engine so it should be the same, right?) it's doing it when you hover over those links.
It's eerily similar to a problem I had with some stuff that was floated in containers but I don't think it was the proper peekaboo bug. I know I found it documented somewhere on PositionIsEverything, but (of course) I never bookmarked it.
Long story short: I'd say try adding zoom:1; to the various bits and pieces in yr #left div in IE and seeing if that manages to clear any of it up. -
Umm.. just wait a sec. I had this same problem and I fixed it.. Had to take a lot of rounds with it but I came through as a winner.. But the weirdest thing was that my layout was working just fine in IE5 and IE5.5.. LOL. :D
There's few other minor things that I noticed with this bug. The layout doesn't break if you change the links color on hover but changing the background will. Odd.
This fixes the IE5.* problems: * html #left { left: -191px; lef\t: 191px; } (It need negative value on the left to sit where it should)
I removed all the paddings from #left, #center and #right and also the #right { margin-right: -190px; } became #right { margin-right: -100%; }
Here's the complete code if it helps ya out. I used couple of wrapper divs to achieve the "equal height columns" effect without the bugs that the huge padding causes in different browsers. And the inner #mainwrap_r div has a .clearfix class too. Hope you can get your layout working.. it's pretty damn nifty bug to fix... I know. =)
#mainwrap_l { background: url(../i/leftbg.gif) scroll repeat-y left top; }
#mainwrap_r { position: relative; background: url(../i/rightbg.gif) scroll repeat-y right top; }
#main { position: relative; padding: 0 191px; }
#main .column { position: relative; float: left; }
#content { width: 100%; padding: 0; }
#left {
width: 191px; right: 191px;
margin-left: -100%; padding: 0;
}
#right {
width: 191px; padding: 0;
margin-right: -100%;
}
#footer { clear: both; } -
-
CommentAuthoradjustafresh
- CommentTimeMar 30th 2006
Nifkin - You're right - the sidebar doesn't appear when opening the page sometimes. There's really no rhyme or reason to it. I've found it often doesn't appear when using the View in IE Firefox extension, or if I open the page directly from my fiel structure (rather than linking to it).
"There's few other minor things that I noticed with this bug. The layout doesn't break if you change the links color on hover but changing the background will. Odd."
McJay - EXACTLY! You can change the color, text-decoration, etc., but it the background property is used (not just background-image) things go hay-wire!
I'm glad that I'm not the only one to have experienced this freaking bizarre behavior! Of course the site works like a champ in Firefox. I'm trying to implement an Ajax-ish modular drag & drop feature for the homepage (like the personalized Google homepage), but I need to take care of the vanishing sidebar first.
Thanks guys! I'll keep you posted. -
-
-
CommentAuthoradjustafresh
- CommentTimeMar 30th 2006
SO, I've implemented the code the best I could, and evidently, I'm not interpreting your help correctly. McJay, if you've got this working, would you mind showing me how you set up the HTML as well - the #content DIV for instance? Where are you placing that? Are you placing the mainwrap DIVs around the #left and #right DIVs respectively, or using them differently?
Thanks! -
-
Now I found it but I'm not quite sure which causes it.. Let me try to explain.
My code for main content area:
<div id="mainwrap_l">
<div id="mainwrap_r" class="clearfix">
<div id="main">
<div id="content" class="column">
<p>Content goes here</p>
</div><!-- #content ends -->
<div id="left" class="column">
<p>Left!</p>
</div><!-- #left ends -->
<div id="right" class="column">
<p>Right!</p>
</div><!-- #right ends -->
</div><!-- #main ends -->
</div>
</div><!-- #mainwraps end -->
This works perfectly in all browsers.. but ALAS.. if I move my .clearfix class to #main div it does that weird #left column throw-off in IE.
Okay. Now I tried few variations. My layout works without the clearfix and without the #mainwrap divs (a tad uglier tho =). I'm starting to be a little confused cause in my layout the links in #left broke my layout.. yours are in #main and my #main links worked always fine. This one obviously belongs to the X-Files. -
Still more testing.. I have this line in my IE-only-CSS:
* html #main { height: 1%; display: block; he\ight: auto; }
And if I remove the he\ight: auto; the layout starts bugging again. But IE5 and 5.5 need that 1%. =) -
Still an update.. Did ya check this article yet?
http://www.communitymx.com/content/article.cfm?cid=C37E0 -
-
CommentAuthoradjustafresh
- CommentTimeApr 5th 2006 edited
Update:
I was having waaaaay to much trouble shoehorning this template into what I needed since IE was being IE.
I rebuilt. You can see the finished site when we launch the 2006 edition of e3insider toward the end of April.
Thanks for your help! -
1 to 9 of 9