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
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.