/    Sign up×
Community /Pin to ProfileBookmark

IE Block Anchors

This is interesting, its a new problem that I haven’t come across before. For helping me with this you will need firefox and either IE7 or IE6 (because my problem behaves the same way in both IEs right now).

So here’s the link:

[url]http://www.bh-wbpastoralcharge.net/memories/limousines.php[/url]

In firefox, you will notice that any of the divs are clickable links.

In either of the IEs, I have tweaked this using conditional stylesheets so that both behave almost identically – there is a block level anchor that starts at the beginning of the div and it’s properties make it displayed block level so that if you hover over any part of the div, it becomes a clickable link: HOWEVER…the block level elements that are in the div, other than the anchor get in the way of the clickable link so that the div is only a clickable link if you hover over a part of it that does not contain a block level element such as a p or an img. How can I resolve this??

This will no doubt take a little time to solve, you can look at my source to gain access to my stylesheets. Thanks again, anybody who can solve this will be a big help. Much appreciated.

to post a comment
CSS

4 Comments(s)

Copy linkTweet thisAlerts:
@KravvitzNov 01.2007 — Remove the left margin and add top:0 and left:0.

Try moving the <a> after the other elements in the parent <div>.

What happens if someone visits the page with stylesheets disabled?

Why are you using a <br> before each <p class="prices">? You should put a top margin or some top padding on the <p> instead.

Doesn't that look like a [i]list[/i] of limos to you?
Copy linkTweet thisAlerts:
@aj_nscauthorNov 01.2007 — Thanks for all the helpful tips on what I'm messing up on the site.

Try to remove the <br /> using the webdeveloper tool bar in firefox and see what happens

I tried moving the anchor to the end, but that makes absolutely no difference and doesn't answer my question anyway. My question is, why do block level elements inside my absolutely positioned anchor block region disable the fact that your mouse is in the region in IE???

Take shots at my design skills afterwards, right now if you want to take the time to reply to this post then take the time to be constructive in helping me come up with a solution or at least determining why this won't work in IE.
Copy linkTweet thisAlerts:
@KravvitzNov 01.2007 — That's because the margin is collapsing as it should. Give p.prices padding-top:18px.

Look. IE is buggy. Sometimes there's not much else one can say.

It seems to work in IE7 but not IE6 when I apply a transparent GIF as the background image of the <a>s.

I would just use some [i]unobtrusive[/i] JavaScript to make the whole <div> clickable. And put the actual link around the text in "p.head".
Copy linkTweet thisAlerts:
@aj_nscauthorNov 01.2007 — ive done some looking around and I found out the short answer is that it cant be done with css....I can get it to work in firefox wonderfully, but it just will not work in IE no matter what so I'm going to go for the use of conditionals and reward the firefox browsers with a nice looking link display and screw the IE users by showing only p.head as a link.

i changed the limos to two unordered lists of three in two separate divs by the way, on my local machine, I havent uploaded it to the link though. it cuts back on code and css....damn IE, this was such a cool looking feature too.
×

Success!

Help @aj_nsc spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.8,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...