Grow your CSS skills. Land your dream job.

Vanishing Content in IE6

  • # August 11, 2009 at 9:31 am

    Greetings CSS fans,

    For some time now, I’ve been beating my head against Micro$oft’$ wall over a CSS display issue.
    Being the genius that I am, I’ve come to the conclusion that such a method for solving display issues simply is not productive.
    In addition, I think it might have something to do with my horrible headaches.

    Therefore, I am appealing to you for insight.

    http://www.unioncitycc.org/about.html

    My issue is that, when viewed in ie6… a cursor movement on the page causes the content to vanish, only to reappear after page refresh. Then, if you move your cursor again… *Viola*… vanishing content.
    Neat little magical trick, but I’d like my content to stick around.

    I’m creating this site for my Church & really need to finish it for them.

    Any solutions?

    I anxiously await your cure for my headache.
    DD

    # August 11, 2009 at 12:22 pm

    My Goodness, that’s an impressive one !

    quick glance at the css and the issue and its clear that the content is being punted down the 3000 pixels you are defining in your bottompadding/-margin affair. Not 100% sure why you did it this way, or what’s pushing it down, just yet. Something like the bolding of your mouseover kicking it 1 pixel over the width limit and it being listed one line down, which just happens to be 3000 pixels !

    That would be my guess, I’ll have to look at it in a little more detail for you.

    May I ask why you built it with the rather odd 3000 pixel offsets?

    just as an experiment, disable the bolding on all of your hover states, and give it a whirl.

    # August 11, 2009 at 12:31 pm

    Greg,

    I played with creating columns that extend the total height of the page even if the column does not contain enough content to allow it to extend full height. The 3000 pixels allow me to accomplish this.

    I hadn’t considered this being the issue, but it does make sense.

    Now, I’m wondering if there is an alternative way of creating faux column height without employing a radical pixel command.

    Any thoughts?

    Regards
    DD

    # August 11, 2009 at 12:46 pm

    OK…

    I got rid of the bold lettering on the mouse over for the remote navigation on the right side, however, it’s still bumping the content off page.

    In addition to this issue, I’ve noticed that ie6 is displaying the center column text in an odd way. The text is displayed fine so long as it does not extend below the navigation links in the left column. As soon as the text in the center column exceeds the text in the left column, it spills from the center into the left column.

    And… my remote nav is acting odd by displaying portions of the remote that should not be displayed.

    Argh!

    # August 11, 2009 at 1:00 pm
    "DataDude" wrote:
    Greg,

    I played with creating columns that extend the total height of the page even if the column does not contain enough content to allow it to extend full height. The 3000 pixels allow me to accomplish this.

    I hadn’t considered this being the issue, but it does make sense.

    Now, I’m wondering if there is an alternative way of creating faux column height without employing a radical pixel command.

    Any thoughts?

    Regards
    DD

    If I’m reading the site correctly, from what I can see the easier way to fake up the colum effect would be simply to sample a full width cross section of the background bar, and apply it to your columnwrap div. So essentially your columns are floating over the top of the background making it totally irrelevant how far they reach down the page.

    This however is scuppered by the fact you are using a fluid layout (boo hiss) and I think one of the fundemental headaches of the fluid layout is the restriction it brings to not only your design but the pain of marking it up correctly too.

    Personally I would have built the layout on a set width, and used the parent div of the columns to repeat the background, so that it looked like the columns were stretching to the height of whichever one has the most content.

    I mean you can also go as far as to use a little bit of javascript to dynamically update the heights of the columns so they are in fact always pulled to the bottom without having to resort to the potentially unstable css rules.

    at the very least, because the problem is occuring on mouseover, get into your CSS and comment out EVERY hover even in there. that should kill the bigger problem at least until we can localize the specific culprit, which i would wager to be the left hand menu.

    I’m gonna install XP, and see if i cant get ie6 working so i can get a better picture.

    I do feel though that the way in which you have laid the page out could have at least been a bit simpler :)

    # August 11, 2009 at 1:19 pm

    Greg,

    "greg.mcausland" wrote:
    I do feel though that the way in which you have laid the page out could have at least been a bit simpler

    Agreed!

    I have a wonderful method of web layout… make it impossibly difficult. ;)

    My love/hate relationship with the fluid layout has always been an issue in my designs. I have to admit that this design employs a much more difficult layout than any sites I’ve designed in the past. I’m much better on the graphic side of design than the code side, so… I envision what I want, layout in Photoshop & then worry about the code. Probably not the nest approach.

    I really like the way it looks & feels in FF, and would like to get it to work. However, I’ve been playing with this design for far too long, so I may be forced to simplify.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".