18 replies [Last post]
richy240
richy240's picture
Offline
Regular
Last seen: 16 years 10 weeks ago
Timezone: GMT-6
Joined: 2005-11-20
Posts: 28
Points: 0

I created a table-less site using CSS, and I cannot get my links to become clickable in IE. Please refer to http://www.ironedgegroup.com/new/ for the site itself.

I cannot seem to click the links I created for validation purposes, nor any links I place in the childContentLayer00 DIV.

Please help! I have seen an article on this topic before, but I was unable to read it because I didn't have time.

Thanks in advance.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Re: Links in body not available to click?

richy240 wrote:
but I was unable to read it because I didn't have time.

Shock

I have a feeling this isn't the right forum for you. Most people here are pretty busy and expect posters to at least try to help themselves, not sit around waiting for free handouts.

Still you might get lucky.

richy240
richy240's picture
Offline
Regular
Last seen: 16 years 10 weeks ago
Timezone: GMT-6
Joined: 2005-11-20
Posts: 28
Points: 0

Links in body not available to click?

I guess I forgot to include that I also forgot to bookmark the article for viewing later... Had I done this, I never would have posted in here... Trust me - if I was just lazy, I would have posted a lot more questions in here, most of which would be more basic than this one.

Anyway, is this another layer covering my links or something? I have tried the z-index property of the layers, and a few other things, but I just can't sigure it out.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Links in body not available to click?

For me you have much bigger problems in IE than a few links that don't respond to hovering. It looks like a hasLayout issue. There are too many divs for me to work out which one.

Try adding zoom:1 to all display:block elements within parentContentLayer

richy240
richy240's picture
Offline
Regular
Last seen: 16 years 10 weeks ago
Timezone: GMT-6
Joined: 2005-11-20
Posts: 28
Points: 0

Links in body not available to click?

Oh my god... I did some research on layout, or hasLayout rather, and I don't think I am getting it. From the three or four essays I read on it, and the countless forum posts I scanned, I still don't even understand what it is!

Can anyone enlighten me?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Links in body not available to click?

It's not rocket science.

An element essentially for IE is either defined to have structure or it isn't without being defined an element is prone to being flakey due to not understanding itself and it's true nature, define that element and it is then happy and secure in itself and can behave according to some clear rules to govern it's rendering, it is deemed to be defined once it has some width or height or is a floated element or positioned absolute or displayed as an inline-block or zoomed .

The problems occur with how an element that has hasLayout treats certain proscribed standards rules such as how elements are meant to collapse margins an element with hasLayout gets this badly wrong at times amongst other things but essentially more goes wrong when an element is left as hasLayout=false.

Re-read the links a few times the ones about collapsing margin handling can be a tad confusing.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Links in body not available to click?

Hugo, I thought I understood hasLayout, then I read your post above. Now I know I have no idea.

Laughing out loud

richy240
richy240's picture
Offline
Regular
Last seen: 16 years 10 weeks ago
Timezone: GMT-6
Joined: 2005-11-20
Posts: 28
Points: 0

Links in body not available to click?

Hugo wrote:

An element essentially for IE is either defined to have structure or it isn't without being defined an element is prone to being flakey due to not understanding itself and it's true nature, define that element and it is then happy and secure in itself and can behave according to some clear rules to govern it's rendering, it is deemed to be defined once it has some width or height or is a floated element or positioned absolute or displayed as an inline-block or zoomed.

Uhh...

I have read Microsoft's explanation of layout as a concept, and I think I am starting to understand it - at least understand it the way Microsoft wants me to understand it.

I guess I'll just have to experiment to see the implications layout has on my problem. I still don't really get it, I guess.

I get the whole rendering itself according to some clear rules that govern its rendering, but how that affects neighboring elements is where I get thrown.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Links in body not available to click?

Chris..S wrote:
Hugo, I thought I understood hasLayout, then I read your post above. Now I know I have no idea.

Laughing out loud

Laughing out loud And thus did Hugo reign confusion and unsettle even the mightiest of faiths.

I thought that was quite clear really!

To paraphrase then; an IE element has two states: hasLayout=false and hasLayout=true.

An element without hasLayout relies on it's parent for it's sizing and arranging of it's content (it knows not it's own nature ) on the other hand an element that hasLayout set to true defines it's own positioning and layout and context (it knows it's own true nature)

An element with hasLayout is a more stable element in that it knows more about what it is that it has to do, but it does set a new context for child elements that do not have hasLayout to follow (this is not the same as the normal understanding or use of 'context' in reference to the stacking order of elements, or is it).

It ought to be remembered that this construct was not necessarily by design but rather as a by product of the way in which the code was written, hence the fact that for a long while nothing was known of this behavior and that MS themselves have never really been able to provide a hard and fast explanation of it's existence.

Retrospectively MS have jumped in with an explanation that to my mind is designed to give the impression that this is a deliberate construct and attempt to lend credence to it's existence, problem being that it is not part of any accepted specification of elements.

A number of elements are defined to be flagged to hasLayout=true by default these are elements that by their nature inherently need definition i.e image, position absolute, body, floats.

The above explanation is not designed to make it any easy to work with this construct, that is fundamentally not possible due to the subtle problems introduced by it. One just has to wrestle with those when encountered, it causes problems with collapsing margins that can to a certain extent be unsurmountable and dreadful problems where height is concerned. Yet a large amount of problems found with IE can be corrected by ensuring that an element does indeed require to be set to hasLayout=true and can be done so in the vast majority of cases without too many attendant problems arising.

A simple test for whether hasLayout is needed is to use the proprietary 'zoom' property as it will not effect other browsers yet will set hasLayout to true (bearing in mind it's not a solution as it will not validate and thus is only for testing)

It is perhaps not worth getting too caught up in trying to understand this construct it's a anomaly an aberration and abhorrent in it's non standards nature.

To know of it's existence and the possible problems it can cause is the best we can do, remember that MS themselves do not really understand this either as it was never really designed.

Good people have done their best to provide some fairly detailed examples and explanations of the behavior of hasLayout and still it remains a somewhat dark and murky area :roll:

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

richy240
richy240's picture
Offline
Regular
Last seen: 16 years 10 weeks ago
Timezone: GMT-6
Joined: 2005-11-20
Posts: 28
Points: 0

Links in body not available to click?

So, an item which hasLayout is basically responsible for positioning itself in context of other elements on the page rather than allowing itself to be thrown into the flow of the document, being rendered under the control of its parent object. Ok, I get it now... I think.

So, back to my original problem - the links. So, if I am understanding this correctly, the links on my page (http://www.ironedgegroup.com/new/contact.htm) are not clickable (they seem hidden from user interaction, though they are selectable as text and you can plainly see them) because the element housing them do not have layout? Is that correct?

I think this is being caused by the right-floated div containing the image inside the main content, in the case of contact.htm is a blue-ish image of some paper and a pen. Does this seem right? I have added the zoom attribute to the sibling elements of this div, to no avail.

It would seem that there is an invisible region of this div that covers the body text of the page, but allows it to show through - almost as if the margins of this element are expanding to fill the entire parent element. I am pretty new to this, and though I am able to get most of my CSS-based designs to work, this one problem is giving me a lot of headaches.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Links in body not available to click?

Chris..S wrote:
Hugo, I thought I understood hasLayout, then I read your post above. Now I know I have no idea.

Laughing out loud

LOL - I feel that way about many of Hugo's posts Laughing out loud
That's not to say, Hugo, that you have a knack of confusing people, but more that I have a poor vernacular, and I'm in no way skilled in communication, grammar, writing, etc.

richy240
richy240's picture
Offline
Regular
Last seen: 16 years 10 weeks ago
Timezone: GMT-6
Joined: 2005-11-20
Posts: 28
Points: 0

Links in body not available to click?

His second explination made much more sense to me. Maybe it's because I am new. Maybe not...

Regardless, I cannot click, or interact with in any way, the links and other elements in the body of my pages.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Links in body not available to click?

My guess is the abundant use of absolute positioning. This is a fairly simply layout and can (should) be done without any AP. Try eliminating the AP on all 'layers' (a purely DW concept btw) and float the nav left and put a left margin on the content area equal to or just wider than the nav.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Links in body not available to click?

wolfie wrote:
LOL - I feel that way about many of Hugo's posts Laughing
That's not to say, Hugo, that you have a knack of confusing people, but more that I have a poor vernacular, and I'm in no way skilled in communication, grammar, writing, etc.


Oh it's no good trying to squirm out from under that thinly veiled sleight on my deranged ramblings that pass for intelligent discourse in my warped imagination. I most certainly do have the ability to utterly confuse it's always been a natural ability, trouble is half the time it makes no sense to me either and I've written the damned thing :?

It all made perfect sense when I was thinking about it but something strange happens in the intervening processes between mind and keyboard.

Anyway I thank you for your support Wolfcry Smile

Back to the thread and clickable links I've had a look and can't see an obvious problem so have to concur with wolfcry on all the ap stuff and that it would be best to eliminate as much as possible, it's odd because if anything IE is usually ok with masking links as it incorrectly allows links to remain clickable through overlying elements.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

richy240
richy240's picture
Offline
Regular
Last seen: 16 years 10 weeks ago
Timezone: GMT-6
Joined: 2005-11-20
Posts: 28
Points: 0

Links in body not available to click?

I guess I'll read the "Absolute Positioning Pitfalls" sticky and go from there...

So, is it generally recommended to avoid absolute positioning if at all possible? Nevermind - I'll read the sticky.

Thanks for all the help guys, and I'll post the results when I get a chance to try your recommendations.

richy240
richy240's picture
Offline
Regular
Last seen: 16 years 10 weeks ago
Timezone: GMT-6
Joined: 2005-11-20
Posts: 28
Points: 0

Links in body not available to click?

No dice.

There isn't one single absolutely-positioned element in of my documents, but the non-clickable links persist. Ahh!

So, it must be something with the insideChildContentLayer00a. Is there a better way of including this image without relying on a DIV? Or, is there a better way of positioning this DIV so it won't intrude on the P tags with which it shares space? These problems aren't evident in FF, by the way.

Also, does anyone notice an inconsistency in spacing between the link buttons' and the content region's borders? Is this something I can control in IE easily or something I'll just have to live with?

Anyone? Please?

richy240
richy240's picture
Offline
Regular
Last seen: 16 years 10 weeks ago
Timezone: GMT-6
Joined: 2005-11-20
Posts: 28
Points: 0

Links in body not available to click?

Wait, could it possibly have something to do with the JavaScript I am using to facilitate my semi-transparent PNG background within the main content DIV?

It would seem that whenever the page is refreshed the links are active (hovering over them results in a 'hand' cursor and they can be clicked) until the JavaScript is executed, causing the background image (a PNG image) to display as semi-transparent in IE. This is only evident for (literally) a second or less.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Links in body not available to click?

That is indeed the problem, just as you described for two seconds links are clickable then the javascript kicks in and links are gone.

Disabling javascript allows the links to function once more.

Why do need a alpha transparent png? are you sure it's required it looks just the same without javascript running Smile just realised it's on the div background it's not the image? so can you not use a transparent gif and loose the javascript, or place it on a div that's half the width and not covering the left hand side links.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

richy240
richy240's picture
Offline
Regular
Last seen: 16 years 10 weeks ago
Timezone: GMT-6
Joined: 2005-11-20
Posts: 28
Points: 0

Links in body not available to click?

Yeah, I noticed that just a moment after I posted the "No dice" reply above...

The JavaScript is an integral part of the design, one that the client asked for specifically (not the JS, but the feature). The semi-transparent PNG image is simply an approximately-35% transparent white image. That's it. I had to use the JavaScript to allow the PNG file to display as transparent in IE.

The background of the content DIV is evident when you see the logo at the bottom. It shows through, but is 'white' enough to allow lext to flow on top of the logo while still being readable... See for yourself here.

Does anyone know any PNG hacks that will work in this case? (Probably the wrong forum for that question, eh?)

EDIT: I took the JavaScript out, tested it, put it back in, and tested it again. It is the JavaScript causing the problem. Thanks for the help everyone. I'm off to post a question in the CSS Styling forum about this problem. Thanks again.