Menu Pops up behind

[KWiK]

I am a newbie in the process of trying to learn about CSS and html etc.

I have setup a pretty basic 3 column css layout. If I make all the columns float, my dropdown menu (that I got the outline for from here http://www.w3schools.com/dhtml/tryit...rydhtml_menu10)works fine.

But as the window width is sized down the right column jumps down below the first two fairly quickly and the second does the same as the window gets smaller. I am guessing it is because I have some fixed width items inside the columns?

Anyhow I tried switching to a combination of absolute and relative columns, but now my menu expands behind the columns instead of in front. I have tried playing with adding z-order to various elements, but it hasn't helped.

I appreciate any help or advice anyone can give me.

[mcdougals4all]

Welcome KWiK, posting the relevant code or a link to your page is the best way to get a timely and useful response. Your problem sounds relatively easy to fix but we'll have to see what you're working with.

[AaronW]

Are you attempting a liquid CSS layout? Otherwise it sounds to me like your layout might be a victim of the CSS's liquid-unfriendly box model. If you apply so much as a border, or margin, or padding to your columns, and they have relative widths (%) you're going to run into problems.

If your layout isn't liquid, then you're going to have the problem if you haven't given your columns a common container.

<div id="container">
  <div id="col2"></div>
  <div id="col1"></div>
  <div id="col3"></div>
</div>

Something to that effect.

But a link to your layout would be very helpful in specifically diagnosing the problem

[KWiK]

Thanks for the response guys. As I said I am a beginer at most of this stuff, and have been trying to teach myself with the trial and error method so I am sure it is all going to look real sloppy to most of you.

Here is a example of the page that the columns drop down when shrunk.
http://www.kwikmcad.com/iparts/pems.asp

Here is a page I put together simply for example that show the menu going behind.
http://www.kwikmcad.com/temp/behind.asp

I believe this should be all the relevent stuff from the style sheet for the behind.asp file. Thanks all.

/* Nav Menu Location and size */
#Menu {
HEIGHT: 30px;
TOP: 290px
}

/* Menu Main Row */
table.TopMenu {
font-size:110%;
font-weight:Bold;
/* outline color */
background:black;
position:absolute;
/* Table Menu Location */
top:100
}

/* Menu Main Row back Color */
tr.topmenu {background:blue}
a.TopMenu:hover{colorrange}
a.TopMenu{color:White}
a.topmenu:visited{color:#00ffff}
font.topmenu{color:White}


a:hover{color:Black}
a{color:#0000FF;text-decoration:none;FONT-SIZE:14px}
a:visited{color:#000080}
table.CascadeMenu {
font-size:100%;
/* Cascade menu frame outline color */
background:black;
position:absolute;
visibility:hidden;
height: 100
}

/* Cascade Menu Background Color */
td.CascadeMenu{background:#0066CC}

.leftcol {
position:absolute;
left:0;
top:130px;
padding:0;
width:200px;
height:100%;
color:#333;
background:#eaeaea;
border:1px solid #333;
}

.midcol {
position: relative;
top:40px;
margin-left:220px;
margin-right:220px;
margin-bottom:20px;
color:#333;
background:#ffc;
border:1px solid #eaeaea;
padding:0 10px;
}

.rightcol {
position:absolute;
right:0;
top:130px;
padding:0;
width:130px;
height:100%;
color:#333;
background:#eaeaea;
border:1px solid #333;
}

[mcdougals4all]

On the second example where the menu is behind the other page elements, I edited the following rule and the dropdown appeared on top:

table.CascadeMenu {
font-size:100%;
/* Cascade menu frame outline color */	
background:black;
position:absolute;
visibility:hidden;
height: 100px;
z-index:100000;
}

On a separate note, your coding overall isn't too off. But you may want to keep a few things in mind as you go to make things easier down the road, for instance this snippet:

<DIV class=rightcol>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

It's a good practice to use lowercase for html elements, div instead of DIV. For the sake of consistency and readability consider closing your attribute values in quotes, class="rightcol". And I'm sure someone will correct me if I'm wrong, but I've never seen meta tags anywhere but between the head tags. Finally, determine the best doctype for your needs and drop it in, it may expose some previous errors you weren't aware of, but once you iron out the kinks it will help your pages to function and display as you intend.

[AaronW]

Without a complete doctype, your site will render in quirks mode in all modern browsers. You'll be much better off having them in standards-compliant mode with a strict XHTML 1.0 doctype (transitional will be "almost standards" mode for Mozilla)

[KWiK]

Originally Posted by mcdougals4all

On the second example where the menu is behind the other page elements, I edited the following rule and the dropdown appeared on top:

z-index:100000;
}[/code]

Thanks, but I just added this to the css file and the menu is still behind the columns.

Originally Posted by mcdougals4all

I've never seen meta tags anywhere but between the head tags. Finally, determine the best doctype for your needs and drop it in, it may expose some previous errors you weren't aware of, but once you iron out the kinks it will help your pages to function and display as you intend.

Thanks for the tips. The meta tag in that section was a mistake. I had taken the original page which was using a ASP Include to bring in the sepearte menu asp page, and when I cut and pasted I accidently included it.

So far I really haven't paid any attention to the doctype stuff, so it sounds like it is time for me to do some studying. I have never been too sure if on a asp page that is being brought in by a include if it should have the doctype and a <head> etc. But I guess that is a subject for another section of the forum.

[KWiK]

Originally Posted by AaronW

Without a complete doctype, your site will render in quirks mode in all modern browsers. You'll be much better off having them in standards-compliant mode with a strict XHTML 1.0 doctype (transitional will be "almost standards" mode for Mozilla)

Sounds like I need to do some studying on doctype. To be honest I had pretty much ignored it up to this point. Thanks.

[KWiK]

A little more messing around and I got it to work. I had to add z-indexes to the columns also in order for it to work. I had tried using z-index previously but I don't know if I was doing something else wrong, or if just having that large of number did it?

Also thanks for the heads up on the doctype. Adding that exposed a lot of little problems. I am still working through some of them, and may not be able to figure everything out well enough to use the "Strict" version but I am trying