Topic: CSS flyout menu not working in IE6/Win

Can someone take a look at this and tell my why it's not working in IE6?

I am using the menu from here.

When I specify the menu being in the id, it crashes, but if I take it out it works. So in the CSS you will see :

#left ul{
		margin: 0;
		padding: 0;
		list-style: none;
		width: 150px; /* Width of Menu Items */
		border-bottom: 1px solid #000;
		font:normal 10px Verdana, Geneva, Arial, Helvetica, sans-serif;
	}
	#left ul li{
		position: relative;
	}

If I take the "#left" out of it, it works but that will screw up the menu at the top. Any suggestions?

Thanks in advance!!!

Later,

C:\

quote:

---

CPrompt said:

If I take the "#left" out of it, it works but that will screw up the menu at the top.

---

I'm not seeing this - could you be more specific?

hmmm...well I made a post last night with a bit more information but I got an "Internal Server Error" so it didn't go through.

Yesterday when I was working on it, I would take the "#left" out of that section and the flyout menu would work but the menu at the top screwed up. Now, what I did yesterday doesn't seem to be doing the trick either. Doesn't help that I left the freakin file on my home computer and didn't bring it to work with me

I would like to keep the list items for the menu as :

#left{
	float: left;
	width: 150px;
	margin: 0;
	padding:0;
	}	
	#left ul{
		margin: 0;
		padding: 0;
		list-style: none;
		width: 150px; 
		border-bottom: 1px solid #000;
		font:normal 10px Verdana, Geneva, Arial, Helvetica, sans-serif;
	}
	#left ul li{
		position: relative;
	}
	#left li ul{
		position: absolute;
		left: 149px; 
		top: 0;
		display: none;
	}
	#left ul li a{
		display: block;
		text-decoration: none;
		color: #fff;
		background: #e38336; 
		padding: 5px;
		border: 1px solid #000;
		border-bottom: 0;
	}
	#left li:hover ul{
		display:block;
	}
	#left ul li a:hover {
		color: #fff; 
		background: #003333; 
	}		
	#left li ul li a {
		padding: 2px 5px; 
	}
	#left li:hover ul, #left li.over ul { display: block; }

Just so if somewhere down the page I need to use more lists. Plus, it would help me out in the future to know what that section is for.
But when I use the #left, it doesn't work in IE6. Is that clear as mud now ?

Later,

C:\

OK...I got it to screwup the menu on top again.

Here's the deal. If I leave off the #left on each one of the styles above, it keeps the menus looking correct. But, the flyout menu doesn't work in IE6. If I take the "#left" off each one of them the menu works, but it changes the color of the upper menu. Here is the culprit:

#left ul li a{
		display: block;
		text-decoration: none;
		color: #fff;
		background: #e38336; 
		padding: 5px;
		border: 1px solid #000;
		border-bottom: 0;
	}

If you notice, there is a background:#e38336 listed. For some reason IE doesn't like to have "background-color" there it has to have background. That screws up the menu on the top.

I could have sworn that I had it fixed while I working on it at home last night but like I said, I left the damn file there.

Later,

C:\

not exactly sure what it was but somehow I fixed the problem. It works in IE6 fine now.
Thanks for taking a look at it reisio.

Later,

C:\

Hah. Good job. Sorry, day jobs really dig into forum whoring.

quote:

---

reisio said:

day jobs really dig into forum whoring.

---

yeah no kidding!

Later,

C:\

Now that you've gotten your problem solved... I'm going to hijack this thread for a moment.

CPrompt, I was looking at the code for the page you were working on and I'd like to ask a question. I see when you did the 3 columns you floated #left and #right and then just used margins to position #center. Is this the accepted way to do this? I would have just made all 3 a float: left and then set a small left and right margin on #center to get white space needed inbetween (or something to that affect). I would appreciate any enlightenment that you (or anyone else) might like to share.

Thanks

- Butcher -

hmmm. Well, I don't know about *accepted*, but it works. Just the way that I do a three column layout I guess.

That's the good and the bad thing about anything computer related. There's a million and two ways of doing it. I used to use text-align:center on the body to get the container to center in the middle of the page, that's now been replaced though If it works in the most used browsers, then I'm good.

I would like to see use eventually have one person make a mock page and then have others code it in CSS. One user makes a page in PS or whatever with blocks for the sections and then off and code it. Make sense? Good practice and good to see how others do things.

Later,

C:\

I'm with you on the "if it works it's good" part.

The reason I was enquiring about how you did it is because I'm realizing that my code (CSS, HTML) is very heavy handed. Your code looked nice and lean and clean so I wanted to take some lessons from you to allow me to better what I do.

I also think your idea about having a mockup that everybody takes a shot at coding to compare and learn would be a cool idea.

Thanks for the reply.

- Butcher -

(Edited by butcher on 02-04-2007 04:04)

thanks. I took the advice of an ALA article on how they redid Slashdot one time. Strip everything out and then add the style to it. Seemed so simple but I never thought of it that way.

I actually took the mockup that the designer did and made it into almost an outline like you would do in school. Seeing it that way helped me figure out what goes where. Doing it that way made the styling that much easier.

Let's do the CSS thing. Be kind of like the signature thing.

Later,

C:\

Cool

Should we actually have somebody mock up something in PS (I suck at designing layout btw) or just find a layout we think would work well that's already on the www some where and screen cap that to use? I'm thinking maybe we should start simple with the layout's complexity and get harder as we go? Or maybe we could even start out doing certain page elements... something like one of the navs from this page, or just a multi-columned layout boxed out. I'm sure you have some better ideas for it than I, but I'm definitely up for helping put this in motion.

What thinks ye?

- Butcher -

This whole idea reminds me what Dan Cederholm did a while ago on SimpleBits. For months he asked questions on his blog about how to best markup and style different things and compiled the results in Web Standards Solutions.

quote:

---

butcher said:

Should we actually have somebody mock up something in PS (I suck at designing layout btw)

---

Mock up in PS. Doesn't have to be anything special. Just a black box here with text that says "header" or something. Black box here that says "nav" That kind of thing would be fine I would think.

quote:

---

butcher said:

I'm thinking maybe we should start simple with the layout's complexity and get harder as we go?

---

Always a good idea

quote:

---

butcher said:

something like one of the navs from this page

---

That's not a bad idea either. Just a "navigation" section for starters? I would like to see it in the beginning be something very basic.
Something like



And specify if something is 100% width or whatever. Make sense?

quote:

---

poi said:

and compiled the results in Web Standards Solutions.

---

Cool Maybe we can sell a book based on our efforts

Later,

C:\

Oh Sweet!! Then we could have them display our book right next to Wes's book in the stores!!

quote:

---

CPrompt said

I would like to see it in the beginning be something very basic.

---

I was just wondering... To keep this moving along with some type of consistent theme (framework, main idea, however you want to put it) should we design the "complicated ending mockup" first and then just dole it out in bits and pieces as we go along? I would think that would make it easier to keep it flowing.

- Butcher -

that's not a bad idea either butcher.

So you are saying make a somewhat complicated mockup first as "this is what the end product will look like" and just work out the bits and pieces?

Later,

C:\

Well, yes and no.

I wasn't actually suggesting we should have it done to "show" at the beginning. I was actually just suggesting having the complicated layout done before we start, and then put it out in pieces starting with just the basics and moving into the more complicated elements of the layout as we go. For the first one we could put out the basic sections blocked out as you suggested (header, nav, content) and then maybe do the actual nav or other header elements for the next part to be accomplished and so on until we're finished.

I guess I was just thinking it would make the process for running it easier if the complete layout with all the page elements was done ahead of time instead of trying to come up with them as we go along. It probably isn't a big deal either way though.

The only other thing I was wondering about was should we have everybody that wants to try just plunk their code in the designated thread or put them up some where and let everybody view source? If we want to do the later I have some web space doing nothing that I could put the submissions up on.

- Butcher -

quote:

---

butcher said:

If we want to do the later I have some web space doing nothing that I could put the submissions up on.

---

That's good to know. I am actually using the site for our company, which I can't use for long.

I think what you are talking about is a good idea as far as the layout goes. As far as everyone just posting their suggestion, that is what I envisioned at first. I am not sure if that's a good idea or not. The initial idea was to see the many different ways of doing something. One thing that I have found with CSS is that if you plunk out one section and then go to add a new section, you have to go back and redo what you've already done. Which is not bad, just makes you learn more

Later,

C:\

I think we need to come up with a framework as you suggested. Maybe an outline form of here's what's going to be submitted as the layout. Here's what CSS rules need to apply (CSS2?) can we use any of the css hacks? What browsers must it be compatible with? That sort of thing. After those are decided, then we just need to come up with the initial layout. Are we going to mess with putting actual graphics in there? I don't think that would be necessary. The black and white blocks "should" suffice.

Later,

C:\

quote:

---

CPrompt said:

Maybe an outline form of here's what's going to be submitted as the layout. Here's what CSS rules need to apply (CSS2?) can we use any of the css hacks? What browsers must it be compatible with? That sort of thing.

---

That sounds good. I don't consider myself educated enough to make the call as to CSS 1 or 2 but I'll throw my thoughts out. As for hacks, I'm okay with that but I think it would depend on what direction we think this should go. If we just want to see all the different ways that people would accomplish the task then hacks would be acceptable. If we take a more purest approach and expect the code submitted to validate then hacks would be out. I had been wondering about the browser thing as well. I would like to say FF, Opera and IE but IE is so different from version to version and PC to Mac that it's hard to expect everyone to be able to check it for all of them so I'm not quite sure on that point. I don't think graphics are necessary for the layout we supply for everyone to work from, but if they want to put them in for their own sake I don't think it matters. The other thing I'm wondering about is how rigid are the specs for the initial layout going to be? When we say "nav here" are we going to tell them exactly what kind of nav, or give them a general description of what the nav should display and allow them to do it anyway they want as long as it fits in the given space?

I think I cause more questions than I answered so I'll stop now and see what you (or anyone else) has to say.

- Butcher -

quote:

---

butcher said:

or give them a general description of what the nav should display and allow them to do it anyway they want as long as it fits in the given space?

---

yes. that. I think that as far as giving them "exactly" everything, would take a little of the fun out of it. For the graphics, that's cool. General mockup, no images. As for what the user does with it, that's fine.

For browsers, FF and Opera are good. IE maybe just stick with 6 and above. Mac IE I couldn't care less about, it sucked from the beginning Safari does a good job on CSS for the most part. I would like to see the code validate though, but working with that many browsers might be a problem. Although there are many sites that don't have a problem with it.

Keep on with the questions. These are things that I haven't thought about. When I first posted that it was just a general idea and never thought out.

I'll make a list of some stuff tomorrow. My eyes are bugging out right now from looking at a computer screen all day. If you would like to do the same that would be cool. Then we can compile a list of everything. I have to make lists, otherwise I can't keep track of everything LOL.

Later,

C:\

quote:

---

CPrompt said:

I'll make a list of some stuff tomorrow. My eyes are bugging out right now from looking at a computer screen all day. If you would like to do the same that would be cool.

---

Sounds good.

- Butcher -

(Edited by butcher on 02-07-2007 00:10)

Whoops!!

My first double post ever.

(Edited by butcher on 02-07-2007 00:11)

sorry man. I'll be back on this in a couple of days. My day job just got busier again

Later,

C:\

No problem

I got side tracked myself with jury duty. I'll get my list up as soon as I can.

- Butcher -