Can't select text... why...

March 1, 2009 3:16 PM

I have a css/html question. Usually when I have a css question I google it and find that 100 people have already asked and answered it. In this case I'm having a hard time even figuring out what to put into Google or what to search on here in AskMe. Is there any reason why, on a webpage I coded up, the text cannot be selected and the links can't be clicked on or hovered over? I have never seen anything like this before.

I don't think I can post a link to the page because it's a site I'm coding up for someone else and it's still under development. I hope I can describe it well enough that it's something somebody recognizes.

The doctype is HTML 4.0 transitional. It's a pretty simple design. There's a top div, which has the nav div layered over it. There's a sidebar div which overlaps the top div and floats to the left. The middle div is directly under the top div and slides under the left-hand sidebar div so its bg color pokes out on the far left. It does use some absolute positioning and some z-index stacking by necessity. However the divs that have the text and the links have the highest z-index numbers so they should be "on top"..right?
And when I say "by necessity" I mean that it took me forever to inch all the different pieces together until they sat right and sat consisently so if I have to unravel everything and piece it together again for the umpteenth time I'm going to be mad. (Not at you, just at the fact that this is so frustrating)

Browsers:
Opera, you can select the text but not click or hover on the links.
Firefox, you can't select any text or click or hover on the links.
In IE6 you can only select the sidebar text, AND the links work.

If you had asked me to make it so that text and links can't be selected, I would have no idea how to do it. From the googling I was able to do, I kind of have a feeling this has to do with the z-index and the absolute positioning, but I really need help figuring this out.

If it will help I've included the relevant CSS:

html {height:100%;}
body {margin: 0 auto; background-color:#ffffff; text-align:center; height:auto; width:970px;}

#wrapper { position:relative;
top:20px;
text-align:left;
width:970px;
height:300%;
margin:0 auto;
background-color:#ffffff;
z-index:-1;
}

#top {position:absolute;
height:213px;
width:970px;
top:0px;
left:0px;
z-index:-1;
display:block;
background-image:url('_img/bgtop.jpg');
background-repeat:none;
text-align:left;
}

#nav {position:relative;
height:46px;
width:970px;
top:190px;
left:0px;
z-index:0;
background-image:url('_img/bgnav.jpg');
}

#navlinks {position:relative;
height:44px;
width:615px;
left:330px;
top:7px;
z-index:1;
}


#left {position:relative;
width:300px;
height:100%;
left:20px;
top:-230px;
margin:0px;
z-index:3;
text-align:left;
padding-left:10px;
float:left;
}



#middle {position:relative;
top:190px;
left:20px;
width:950px;
text-align:left;
z-index:0;
padding:0px;
background-color:#EAEBDB;
height:100%;
}

posted by amethysts to computers & internet (5 comments total)

Does the HTML validate?
posted by robtoo at 3:19 PM on March 1, 2009

Looking at it, is there a reason you're set on absolute positioning? I see nothing in the code you've posted to suggest that the absolute positioning of the css is required.

If I were asked to lay out a page with header, navbar, et cetera, I'd make extensive use of floats and clears... I tend to stay away from absolute positioning and z-indexes as a rule, unless I'm trying to do something special. (I Am A Web Developer, I Am A CSS Specialist).

Basically, build the top bar with a width of 100%, then use float:left and float:right to make right and left columns... then clear:both to set a footer.

Mefi mail me if you want to get into the details of it, I'd be happy to help out.
posted by frwagon at 3:29 PM on March 1, 2009

Hmmm. Yes, the html and css both validate.

And wow, I feel like an idiot now. I went through and took out all of the z-indexes, and everything started working again. I thought they were necessary to make everything layer the way I wanted it to instead of randomly or unpredictably (the sidebar should sit on top of the top, rather than starting below it, and the middle slides underneath the side). But I guess the positioning takes care of that on its own somehow. Ohh what a relief.
posted by amethysts at 3:39 PM on March 1, 2009

It sounds like you have a div obscuring the div your are linking to - messing with z-index can be the answer to this - I notice you're already individually setting the z-index for each of your divs so maybe that's not the answer?
posted by Artw at 3:40 PM on March 1, 2009

This is a side comment, but I'd really advise using a CSS framework like blueprint. I know _exactly_ what you mean by "it took me forever to inch all the different pieces together until they sat right and sat consisently". When I took the time to use the framework, and realized that floating/sidebarring/making endless columns/centering columns/centering content was really simple and made everything css compliant and cross-browser to boot -- it was a revelation of sorts.
posted by suedehead at 5:57 PM on March 1, 2009 [1 favorite]