Jump to content

Anyone see a way to fix this demo in IE6?


PicnicTutorials

Recommended Posts

Anyone see a way to fix this demo in IE6? http://ww'>http://ww w.visibility inherit.com/projects/tabs4.html (remove spaces)

 

The hidden divs are "in-flow" with position relative. IE6 does not like the position relative. The only way I have been able so far to fix IE6 is to position the hidden divs with position absolute. But, I'd rather not do that, as it defeats the whole point.

 

e.g.

 

I already have a nice one I did that has a fixed height, and works everywhere. http://w ww.visibility inherit.com/projects/tabs2.html (remove spaces) But now I'm trying to get this one to play ball, and I'm out of ideas, well, good ones at least...

 

PS: I also have two other demos that use an anchor (mainly for IE6), but then you can't place links or block level elements in the hidden divs.

 

Thanks! :)

Edited by Eric
Link to comment
Share on other sites

OK, here's one solution. I don't have it yet, but when and/or if someone could provide me with the JS then I would have a solution I think. IE6 already relies on JS to work for this demo so it's no biggy. Here is a little test code I threw together.

 

I need a script (sort of like a matching columns script) that will match the height of the li to the height of the absolutely positioned . Then, it should provide the same effect. The content below, would move down in relation to the auto height sized div (or "b" in this test case). Thank you!

 

{ visibility: inherit; } Test

 

I want this text to move down when the li grows to match the position absolute height of the hidden <b>? Thanks!

Link to comment
Share on other sites

Hi Eric :)

 

I'm only just now having a look at it. You know, I was thinking of putting that hover list that billyboy perfected for me to good use as my next move if the suckerfish thingy wasn't going to make it, but as things stand I am getting it centered, though there is quite a lot about it I don't understand.

 

Anyway, why not take a look at that hover list. Maybe there's something in the code that you can re-use...

 

http://www. macrankin.co.uk/ web_projects/smart_lists/bb_hoverlist.html (remove spaces)

 

 

In the meantime, maybe I'll give your code a look over and see if I can improve (mutilate) it. :lol:

Link to comment
Share on other sites

I look forward to viewing it in IE6. :D

 

Erm, in the meantime, feast your eyes on this sucker...

 

http://www. macrankin.co.uk/ menus/new_sf_01.html (remove spaces)

 

I'll certainly need to have another go at this, as IE6 & IE7 aren't really displaying all levels correctly. It's getting late. Maybe I'll have another go at it in the morning, which will be soon if I don't get some sleep. :o

Link to comment
Share on other sites

Nice MacRankin! :)

 

Paul did fix it with a pure CSS method, but I not quite sure if I'm going to highlight that method or not. It's pretty complicated! I'm not a big fan of complicating all browsers for the sake of one shitty browser. I'd rather make it more complicated for one browser. I'll show it as a possibility, but I believe I'm going to use some JS instead. Raffles gave me a script that enlarges the LI (static position) to the height of the position absolute block. That keeps it in-flow. That is, as long as js is on. However, think about it? Anyone still in the dark ages and still using ie6 is probably not surfing with JS off. Those are probably mostly FX people.

Link to comment
Share on other sites

Blimey, if it's any more complicated than that htc file, I don't want to know. I thought I was in Gobble-de-gook city. :o:P

 

Erm btw, that suckerfish menu that I was trying to center... Well, I did get it to center, and work in most browsers known to man, but I just couldn't get the mutha to display its 3rd and final level in IE6. So, if peeps are using that browser they'll be missing out of some links.

 

Hopefully, I can strip down this mutha to use as a single level, centered, drop-down menu, as I've got my mind on building a web page or two for a friend.

 

Anyway, I have uploaded it for anyone to use...

 

http:// www. macrankin.co.uk /menus/new_sf_01a.html (remove spaces)

 

P.S. After this, I'm heading straight for my jQuery book. :D

Link to comment
Share on other sites

 

Link1
  • Choosing a quality childcare provider is one of the most important decisions a parent will ever make. It can also prove to be one of the most difficult decisions to make. We encourage families to be fully informed about their options. To choose child care wisely you need an awareness of what quality child care is, how to recognize it, and how to find it. To help you meet this challenge, we at Building Blocks Home Daycare offer parents with the following resources to help guide you. We urge parents to take advantage of the resources provided, by using the following helpful information when searching for a childcare provider; as each and every word herein was written with your child?s safety and happiness in mind, and with his or her best interests at heart. The following information is a complete and thorough step by step process to finding, eventually selecting, and keeping a quality family home daycare.

 

Link2
  • Diabetes, as it relates to blood sugar, has always captured my interest because of its direct effect on one?s body composition. Diabetes is the result of problems with the pancreatic hormone, insulin. Insulin controls the amount of glucose, otherwise known as sugar, in the blood and the rate at which glucose is absorbed into the cells. The cells need glucose to produce energy. In people with diabetes, glucose builds up in the bloodstream instead of being taken into and used by the cells, leading to abnormally high levels of glucose in the blood. Eventually, hyperglycemia (high blood sugar), leads to damaged blood vessels, which in turn may cause eye disease, heart disease, nerve damage in the limbs and internal organs, and kidney disease.

 

Link3
  • Hello! My name is Eric Watson and amoung other things I am a male model. I also built this website, so I am not just a "pretty face". And as you can see by my portfolio, I've been around the bush as it were. Therefore, it's safe for you to assume that I know what I'm talking about when it comes to the world of modeling. My hope is that this article helps you on your journey to become a successful model, or at the very least, helps you navigate through it's merky waters!

    Hmmm... male modeling, where should I begin? First I will assume those reading this are aspiring models themselves. Either that or you?re looking for information on how to further your carrier as a model. In this article I will try and explain what this vague subject of male modeling is, and what it is not. I will explain how I became a successful model, and I will suggest ways that will help you do the same. We will examine the do's-and-don'ts of this often superficial and shady world. We will also go over what you should expect and what you should not expect; be it your own success or your failed attempt. And lastly, I will briefly get in to what I enjoyed about modeling and what I didn't.

    First let?s get into the attributes one must first have to even have a chance of being a model in the first place. Misconception number one: you have to be good looking - false! Sure it helps to be attractive, but it is not a necessity. A model can either be good looking, or equally as valuable if not more, unique looking! Or of course a combination of the two, like myself fore instance (just kidding, Ha Ha, He He). Misconception number two: you have to be tall - true and false! Modeling agencies, and clients alike, prefer their models to be between 6'0" and 6'2" and boast a 40 regular suit size. However with that said, there are plenty of exceptions to that rule as well...

 

Link4
  • Welcome, my name is Eric and I am the owner and landlord of this unique triplex located in the heart of beautiful Carlsbad, CA. I take great pride of ownership in my property, and I believe it shows.

    If there happens to be a unit available at the time you are reading this, and you feel like you may be interested in taking a closer look, then great! Contact me and we can set-up a time to view the unit that works for you. If you like what you see, but there are no units currently available, you may place yourself on a waiting list by submiting your information via my contact form. Thank you very much, and I look forward to meeting with you!

 

Link5
  • Restless legs syndrome (RLS) otherwise known as the ?wiggly legs?, plagues thousands of people each and every night. Most of us have experienced this at least a couple times in our lifetime.You?re laying there in bed trying to go to sleep, but your legs have a completely different agenda - sound familiar? Your legs may feel wiggly, itchy, or a tickling sensation, and you may feel this overwhelming need to move them. This is Restless legs syndrome. Well, if you?re bothered by this problem and you?ve happened to have stumbled across this article, you?re in luck; I?m going to fix it for you! Or even if you don?t suffer from RLS, but you find that you have trouble sleeping for what ever reason, the following tips will work wonders for you as well!

    Magnesium is a natural mineral found in lots of the foods we eat. Magnesium is what I rely on to give me my restful night's sleep. Simply put, magnesium relaxes muscles! (Note: therefore, if your muscles are relaxed your brain will follow. Equally, the opposite will usually hold true as well. If your brain is relaxed, your muscles will follow). Adversely, calcium contracts muscles. Therefore, when taking either it?s always a good idea to take them in conjunction with one another, and at a ratio of 2 to 1. That is, 2 parts calcium and 1 part magnesium. That?s why, when purchasing either of these minerals at the store you will usually find this ratio. It?s common to see them somewhere in the neighborhood of 500mg calcium to 250mg magnesium. I?ve been told by a nutritionist that you could actually give yourself a heart attack by taking too much of one and not the other over a long period of time (remember, your heart is a muscle too). I don?t know if this is true or not, but either way - don?t do that...

 

Link to comment
Share on other sites

shelfimage, centering that 'Superfish' worked first time, then second time with IE6. :lol:

 

On the matter of Eric's hover text-devider menu thingy, I really do think that re-using that old dl hover list may work simpler. Maybe after I've mucked around with this superfish, I'll get started on an alternative version for the both of you. :D

Link to comment
Share on other sites

Ok, I think I may have something of some use now. It's not 100% there yet, but I feel it's good enough...

 

Centered Superfish

http:// www. macrankin.co.uk/ menus/superfish/superficial_01.html (remove spaces)

 

 

Admittedly, it did cross my mind to use this. But, then again, if I had not tried to center that suckerfish I might not have found the way to center this super sucker. :lol:

Link to comment
Share on other sites

I believe so, but I'm not 100% sure. I'm never am. :o

 

The only other time I've been messing around with a suckerfish was when Susie was having a real fun time with that major e-commerce website she was working on.

 

If there's a single-level drop-down menu knocking around somewhere that you know of, and that can be centered, I'd like go get it.

 

 

Erm, btw... I know this might sound impossible, but I'm still thinking of using that hover dl list to create an alternative for that original idea of yours'... But, err, don't hold your breath. :lol:

Link to comment
Share on other sites

Thanks John, but I have a independent JS solution that uses my same markup. I believe I have all the bugs worked out now. There where a lot of them! I'll post it when complete.

 

I originally did this with a fixed height container in mind (like in my first post). This was sort of just to see if I could. Not "really" all that practal, that is, if used as originally intended. Personally, I don't want all "my" content that follows launching down the page each time the link is hovered over. But I'm sure it will come in handy someday, when someday I get a paying job...

Link to comment
Share on other sites

If it's floated, then you should be able to use position relative to center it. Then you only need two containers - a div and the outer ul. Like this http://www.search-this.com/2007/09/19/when-is-a-float-not-a-float/ If it's not floated then it should be even easier.

 

Err, but those aren't drop-down menus. And besides, I've already created a centered dl menu a few years back...

 

http:// www. macrankin.co.uk/ web_projects/navigator/blah_dl_8.html (remove spaces)

 

 

...A centered menu that was also perfected by billyboy. Wherever you are billyboy or bill, best of luck to you. :)

Link to comment
Share on other sites

OK, all done for the most part. Tomorrow morning I'm still going to change the show/hide method to something that's better for bots and screen readers (i.e. left:-999em). Forgive me, but I'm going to have to brag for a sec. There are only two things like this (pure CSS) on the web (in practical as it may be) - mine and Stus. That I was able to find... Thanks Tim for the help with the JS!

 

Stus did it in 160 lines of CSS, with completely different code for IE, and a mess of HTML. Granted, it was written a while ago, so not a completely fair comparison.

 

Here is his put together

http://www.visibilityinherit.com/projects/stus.html

 

Here it is on his site

http://www.cssplay.co.uk/menu/one_page

 

 

I did mine in 90 lines of CSS and clean html.

 

Simple code for all and JS for IE6

http://www.visibilityinherit.com/projects/tabs4.html

 

Or done with pure CSS (IE6 too) (still 90 lines), but a little too complicated for my taste

http://www.visibilityinherit.com/projects/tabs3.html

Edited by Eric
Link to comment
Share on other sites

Well this is timely because I need something like that. I already have it coded, but will try yours to b/c with a sticky footer, mine is not flowing downwards and pushing footer downwards to accommodate. Probably b/c of sticky footer,

 

But, what about having the first tab open to show its content on page load?

Link to comment
Share on other sites

Cool! I just messed with it some and was unable to figure out a way to make that work. Making it present on page load is easy enough. But then making it disappear when the others are hovered over is a different trick altogether. You probably need some JS for that. The JS would have to make the first link active and it's content, and make it all go back to non-active once any other link is hovered over. If any of you JS experts could do that, that would be a cool add...

 

Otherwise, you could add a place holder to this one. It using position absolute, so hiding it is no problem. But if you want the first link active on page load, then that's probably JS again. But you can just add a place holder. Like "hover here for info!"

 

You can place block level and link in here. Only JS for hover for IE6

http://www.visibilityinherit.com/projects/tabs2.html

 

For instance, you would just add

 

#tabs li:hover div, #tabs #first {

visibility:visible;

background:#ccc;

}

Link to comment
Share on other sites

Actually, on second thought, you could do something like this to the tab4 example.

 

#tabs {

width:521px;

margin:80px auto 0;

list-style:none;

background:#666;

position:relative;

}

 

#tabs #first {

display:block;

position:absolute;

top:30px;left:0;

line-height:50px;

text-align:center;

}

 

  • Link1
    Place Holder

     

    But still, it's only a place holder. No link is active. And you'd have some margin issues with the below content to work out. You'd have to make space for this absolute block but not for the others. Hhmmm...?

  • Link to comment
    Share on other sites

    Well this is timely because I need something like that. I already have it coded, but will try yours to b/c with a sticky footer, mine is not flowing downwards and pushing footer downwards to accommodate. Probably b/c of sticky footer,

     

    But, what about having the first tab open to show its content on page load?

     

    I am the Fire-Starter...! Now this is truly unique - one of a kind! :cool:

     

    It's Inflow, defaults with first link open, no hacks, only IE6 needs hover JS (or you can use an anchor to get rid of the IE6 JS), works everywhere. Only drawback is that the first content has to be input twice. If anyone can find another way to do it without having to input the first link stuff twice I'd be very interested in seeing it! Making it show as default is easy! But making it disappear when the other links are hovered over, and not take up space, and stay inflow, is a whole different bag of apples! I tried with JS for a while (giving focus on the link) but I couldn't get that to fully work. But this does!

    http://www.visibilityinherit.com/code/tabs.php

     

     

    Or I also did default on this one. Which in comparison, was a piece of cake because of the fixed height container. Although, this one would still be my choice. Less movement! http://www.visibilityinherit.com/code/tabs-example2-default.php

     

    Edit - Now I just need to find a way of making some money doing it... But I guess that would take away the fun...

     

    Edit2 - updated links.

    Edited by Eric
    Link to comment
    Share on other sites

    Well this is timely because I need something like that. I already have it coded' date=' but will try yours to b/c with a sticky footer, mine is not flowing downwards and pushing footer downwards to accommodate. Probably b/c of sticky footer,

     

    But, what about having the first tab open to show its content on page load?[/quote']

     

    I am the Fire-Starter...! Now this is truly unique - one of a kind! :cool:

     

    It's Inflow, defaults with first link open, no hacks, only IE6 needs hover JS (or you can use an anchor to get rid of the IE6 JS), works everywhere. Only drawback is that the first content has to be input twice. If anyone can find another way to do it without having to input the first link stuff twice I'd be very interested in seeing it! Making it show as default is easy! But making it disappear when the other links are hovered over, and not take up space, and stay inflow, is a whole different bag of apples! I tried with JS for a while (giving focus on the link) but I couldn't get that to fully work. But this does!

    http://www.visibilityinherit.com/projects/tabs-example4-default2.html

     

     

    Or I also did default on this one. Which in comparison, was a piece of cake because of the fixed height container. Although, this one would still be my choice. Less movement! http://www.visibilityinherit.com/projects/tabs-example2-default.html

     

    Edit - Now I just need to find a way of making some money doing it... But I guess that would take away the fun...

     

     

    Yeah fixed height is the easy part. The challenge is the elastic vertical container. Interesting solution - I wouldn't have thought to use duplicate content with a

    #tabs #default {tabs-exa...ult2.html (line 86)

    left:0;

    position:relative;

    }

    Link to comment
    Share on other sites

    • 2 weeks later...

    Eric, you've done a great job on this. :cool:

     

    I didn't mention it before, mostly because I thought I could do something similar with those dodgy dl lists of mine.

     

    Erm, I did come up with something, though, but it would need some major flash trickery to even get close to anything you've done. So, i'm giving it the big elbow for now. :o

    Link to comment
    Share on other sites

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

    Guest
    Reply to this topic...

    ×   Pasted as rich text.   Paste as plain text instead

      Only 75 emoji are allowed.

    ×   Your link has been automatically embedded.   Display as a link instead

    ×   Your previous content has been restored.   Clear editor

    ×   You cannot paste images directly. Upload or insert images from URL.

    Loading...
    ×
    ×
    • Create New...