Member Avatar for bikeit

I have a piece of HTML/CSS code that works fine in IE8 but in Chrome some of the <A HREF> and <SPAN TITLE> tags inside a <div id> section are ignored. Can anyone advise if there is a workaround for this behaviour or if my coding is incorrect.

Here is the HTML

<body>
<div id="event_wrap">
<div class="event_title">

** The following link doesn't work in Chrome **

<b>Official Club <a href="../getcourse.php?cid=103" target="_blank">Time Trial on Course H10/3</a> at 10:00</b> <br>
</div>

** The following <SPAN TITLE> tooltip doesn't work in Chrome **

<div class="event_person">
<i><font color="darkred">Official Club Event</font> - Organiser
<SPAN TITLE="01234 567890" >Fred Smith</i></SPAN><br>
</div>

<div class="event_do_comment">

** The following link DOES work in Chrome ! **

<b><a href="insert_event_comment.php?aid=2502">&nbsp&nbsp;[Add a Comment]</a></b><br>
</div>

<div class="event_comment"><b>The following Club Members have listed themselves as intending to ride this event.</b><br>

<div class="event_rider">Harry Smith<br>#
</div>

<br><b>Comment&nbsp;:</b>&nbsp;<i> Added by Fred Smith on 15/12/2010</i><br>I'll be riding this one, if there's no snow !<br><b>Comment&nbsp;:</b>&nbsp;<i> Added by Harry Smith on 15/12/2010</i><br>I'll be riding this one, if there's no snow ! And if there is snow, we'll ski the course<br><br>
</div>

</div>

</body>

My CSS contains the following:

#event_wrap {
	width: 70%;
	float: left;
	margin-right: auto;
	margin-left: 200px;
	margin-top: 210px;
	text-align: left;
	font-size: 10pt;
	font-family: arial;
	word-wrap: break-word;

}

.event_title {
	float: left;
	width: 60%;
	padding-left: 10px;
	font-size: 12pt;
	font-family: arial;
	
}

.event_person {
	float: left;
	width: 60%;
	padding-left: 10px;
	font-size: 10pt;
	font-family: arial;
	
}

.event_do_comment {
	float: right;
	width: 20%;
	font-size: 10pt;
	font-family: arial;

	
}

.event_comment {
	float: left;
	width: 99%;
	margin-left: 15%;
	
}

.event_rider {
	float: left;
	width: 99%;
	margin-left: 5%;
	
}

Thanks for any help

  • 3 Contributors
  • 5 Replies
  • 1K Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by bikeit

Dani AI

Generated

As discovered, the problem was not a Chrome bug but a layout issue: a table was positioned above the link elements so mouse events hit the table instead of the anchors. Different browsers can handle hit‑testing and stacking slightly differently, so Chrome prevented the clicks while the page still appeared to work in IE. Before changing markup, inspect the stacking and hit areas with DevTools to confirm which element is covering the link.

Common, reliable remedies:

  • Verify which element overlaps by using the Elements panel and hovering nodes (the highlight shows the covering box). Temporarily give suspect elements an obvious outline or translucent background to confirm the cover.
  • Make the clickable container sit above overlays by giving it a positioning mode and a higher stacking order. For example:
.event_title { position: relative; z-index: 10; }
  • If the overlying element is purely decorative, allow clicks through it (where supported) with:
.overlay { pointer-events: none; }

Notes and final tips: z-index only applies when an element is positioned (not static), and changing layout flow (margins/positioning) is usually more robust than relying on pointer-events. Also validate the HTML and close any missing tags (as and noted), since unbalanced markup can create unexpected stacking contexts and layout shifts.

Recommended Answers

All 5 Replies

Member Avatar for jlego

put a </div> after the event_comment

make your <br> into <br />

http://validator.w3.org/ to make sure you didnt forget anything else

Member Avatar for shaya4207

I copy/pasted your code without changing anything, and it works fine on IE Firefox and Chrome

Member Avatar for jlego

ya i aint find anything wrong with it either. just a few missed tags ect.

Member Avatar for shaya4207 
<body>
    <div id="event_wrap">
        <div class="event_title"> <b>Official Club <a href="../getcourse.php?cid=103" target="_blank">Time Trial on Course H10/3</a> at 10:00</b> <br>
        </div>
        <div class="event_person"> <i><font color="darkred">Official Club Event</font> - Organiser <span title="01234 567890" >Fred Smith</i></span><br>
        </div>
        <div class="event_do_comment"> <b><a href="insert_event_comment.php?aid=2502">&nbsp&nbsp;[Add a Comment]</a></b><br>
        </div>
        <div class="event_comment"><b>The following Club Members have listed themselves as intending to ride this event.</b><br>
            <div class="event_rider">Harry Smith<br>
                # </div>
            <br>
            <b>Comment&nbsp;:</b>&nbsp;<i> Added by Fred Smith on 15/12/2010</i><br>
            I'll be riding this one, if there's no snow !<br>
            <b>Comment&nbsp;:</b>&nbsp;<i> Added by Harry Smith on 15/12/2010</i><br>
            I'll be riding this one, if there's no snow ! And if there is snow, we'll ski the course<br>
            <br>
        </div>
    </div>
</body>

Short of the fact that he/she wrote the 'span' & 'title' in CAPS, I don't see anything wrong. As far as the <br> tag that you said, if they're not coding in 'Strict' then it's not absolutely necessary to close it with a '/'...

Member Avatar for bikeit

Thanks to all those that took the time to check my code. I have now found the problem.
I have a table on the page (not given in the code I posted because I didn't think it was involved in the problem) that was using a different css positioning tag. When viewed in the browser it all looked fine but it turned out that the table was overlaying the link tags that weren't working. This didn't seem to matter to IE but Chrome objected. As soon as I adjusted the css to move the code further down the page the link tags worked fine in both browsers. Once again thanks to those that posted help.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.