links not working in IE

[spookybonus]

hello, im not sure if its a problem with my css or what but my page works fine in firefox or safari but the links and my php upload form do not work correctly with IE...but what is strange is the links i made on images work, just not the ones on text...

thank you for any help

[edited by: encyclo at 1:14 am (utc) on Oct. 10, 2006]
[edit reason] no links to personal or test sites please, see forum charter [/edit]

[penders]

Hi spookybonus, welcome to WebmasterWorld... without looking deep into your code, my guess is that you have DIV containers that are covering your links and form elements, making them unclickable. In IE you can still TAB to your form and activate it via the keyboard, but not click on it.

Hhhmmm, there are differences between IE and FF (well, there are a few!)... the default stacking order of your page elements seem to vary?!

This topic has cropped up a few times recently...
[webmasterworld.com...]

[spookybonus]

hey penders thanks for the reply.
i'll look in to the div problem and try to narrow it down to that.

wow you can TAB over to the form and get it working?! this is blowing my mind. its been a long time since i had to do any web work and its the first time im dealing with php and css. arg...

all my non working links work when i use the keyboard to get to them. what could cause that? i have no idea why it would work fine in all other browsers but IE covers them up somehow. can sombody please take a look at my code and see if anything looks wrong? my head is about to explode...*

thank you very much for your help!

[spookybonus]

okay so i was messing with my css and i got it down to, if i remove

#body {
background: url(images/body_bg.png) repeat-y;
position: absolute;
top: 39px;
left: 10px;
width: 448px;
margin: 0;
padding: 0px 0 0 0;
z-index: 2;
}
my links will work, but the background behind them is gone, and it wrecks my design. does anyone know how i might be able to tell it to keep the background under my links?

its lines 108-117 on <no urls, please>

thank you!

<Sorry, no personal URLs.
See Forum Charter [webmasterworld.com]>

[edited by: tedster at 4:29 am (utc) on Oct. 10, 2006]

[penders]

...all my non working links work when i use the keyboard to get to them. what could cause that?

... imagine if you had a sheet of clear glass over your keyboard, you could not press the keys with your fingers, but if there was a little creature you could get to crawl underneath that glass for you, then maybe you could... the TAB key is that little creature! (Hhhmmm, does that help?! :)

In your case, the #body element seems to be that sheet of glass (why it's different in IE to FF, I don't know)... absolutely positioned with a z-index that is greater than (in front of) the standard page. Try lowering your z-index on the #body element. Or increasing the z-index of your links, if they are positioned (absolute/relative). Or adding your background-image to your links...?

[SuzyUK]

Don't know your source code order which could be afffecting things, but I guess I'm wondering why that div needs to be Absolutely Positioned? - do you need to position a div just to provide an aesthetic background..

If it's in the right place in the document flow (i.e. a parent/container/wrapper div as the name #body suggests) why not size and "position" it with margins.. take the z-index and layering problems away

e.g. does this work
#body {
/*
position: absolute;
top: 39px;
left: 10px;
z-index: 2;
*/

background: url(images/body_bg.png) repeat-y;
width: 448px;
margin: 39px 0 0 10px;
padding: 0;
}

[spookybonus]

hi suzy and prenders, thank you again for the help. i was unable to get it working with that code. i played with the z-in dex but nothing let the links/buttons work on top, the only way i found was to get rid of the body image, then it works fine.

is there a way in my html to tell the links to be on top somehow? or is it done in the css?

thank you

[spookybonus]

oh! i had no idea i couldnt post links to my site...here is the code from my css.
------------------------------------
body {
font-family: tahoma, helvetica, arial, sans-serif;
font-size: 10px;
text-align: center;
background: #d9d6cc url(images/page_bg.gif) top center repeat-x;
color: #868686;
margin: 0;
padding: 0px;
}

html, #wrapper, h1 {
margin: 0;
padding: 0;
}

img { border: 0; }

#wrapper {
margin: auto;
text-align: left;
width: 458px;
position: relative;
}

h1, h2, h3 {
font-size: 10px;
}

h1 {
line-height: 1;
position: absolute;
top: 0;
left: 0;
}

h2 {
margin: 0 0 5px 0;
padding: 0;
}

h3 {
padding: 4px 0 0 0;
}

.block {
display: block;
}

.clear {
clear: both;
height: 10px;
}

.left {
float: left;
margin: 5px 20px 0px 0px;
}

.right {
float: right;
margin: 0px 0px 0px 20px;
}

.readmore {
text-align: right;
}

/* page structure */

#wrapper {
background: url(images/body_t1.png) 24px 0px no-repeat;
height: 40px;
}

h1 {
position: absolute;
top: 16px;
left: 43px;
margin: 0;
padding: 0;
width: 135px;
z-index: 2;
}

#nav {
position: absolute;
top: 31px;
left: 0;
width: 31px;
margin: 0;
padding: 0;
z-index: 5;
}

#nav li {
float: left;
width: 31px;
padding: 0;
margin: 0;
list-style: none;
}

#nav img {
display: block;
}

#body {
/*
position: absolute;
top: 39px;
left: 10px;
z-index: 2;
*/

background: url(images/body_bg.png) repeat-y;
width: 448px;
margin: 39px 0 0 10px;
padding: 0;
}

#footer {
text-align: right;
margin-top: -10px;
}

.footerie {
display: none;
}

a {
color: #575e58;
font-weight: bold;
}

a:hover {
color: #b31d00;
}

[tedster]

Looks like your z-index settings might be "hiding" the links from mouse clicks by placing another div over top. Are those z-index rules required? Maybe re-think how the layout is executed.

[bluesmandeluxe]

There are SO MANY reasons why your absolute positions are not working in IE. What version of IE are you using?

If you are absolutely intent on using absolute positioning, you should learn about the various IE bugs from 5.0-5.2.3 Mac, 5.0 - 5.5 Win and 5.5 - 7.0. at www.positioniseverything.com.

You have a few hacks in your css, but I think they are cancelling out each other. Also, it looks like you intended to use the star hack but left out the star in the:

html, #wrapper, h1 {
margin: 0;
padding: 0;
}

because the next verion of #wrapper you indicate a margin:auto (always bad in IE for absolute position because where is the reference to calculate the margin" that's what left, top are for).

Is this an actual div id you use or were you trying to use the star hack again (in combination with the tantec holly hack to hide the position:absolute from IE Mac)?:

#body {
/*
position: absolute;
top: 39px;
left: 10px;
z-index: 2;
*/

background: url(images/body_bg.png) repeat-y;
width: 448px;
margin: 39px 0 0 10px;
padding: 0;
}

And one last question, I never saw using stand alone size designations for a url like:

#wrapper {
background: url(images/body_t1.png) 24px 0px no-repeat;
height: 40px;
}

What is 24px 0px? is that top/bottom right/left?

Your css doesn't look right, to me. Almost as if it is asking to blow up in IE.

But, I've written some strange css myself that works, so I could be wrong.

Dave