Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Div rollover-links-wk in Safari, Chrome-but not IE7

P

pelsar

macrumors regular
Original poster
Apr 29, 2008
180
0
israel
Rather frustrating...the the rollovers and links are built in to the Divs, IE7 recognizes that its a link, but the links dont "work"


http://www.correlix.com/news1.html


the errors on the validation.w3 dont make sense to me.....

---------------------------
#news_wrapper{
width: 750px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000;
padding-left: 5px;
padding-top: 5px;
padding-bottom: 5px;
}

#news_wrapper:hover {
text-decoration: none;
color: #F60;
background-color: #ECECEC;
}
-----

yet IE doesn't link
 
elppa

elppa

macrumors 68040
Nov 26, 2003
3,233
151
Edit: You are wrapping an anchor (<a>) element around a <table>. Anchor is what is called an inline element and a table is a block element. One rule (although not applicable with HTML 5) is that you can't wrap inline elements around block level elements.

That's what all the "document type does not allow element "table" here" messages are about, which make up most of the validation errors.
 
Last edited:
P

pelsar

macrumors regular
Original poster
Apr 29, 2008
180
0
israel
elppa said:
Edit: You are wrapping an anchor (<a>) element around a <table>. Anchor is what is called an inline element and a table is a block element. One rule (although not applicable with HTML 5) is that you can't wrap inline elements around block level elements.

That's what all the "document type does not allow element "table" here" messages are about, which make up most of the validation errors.
Click to expand...
would that be causing the "link problem?

the trouble is, that the wrapping the link (<a>) around the table is the whole concept, it lets me have a two column system where the second column with its second line will wrap under itself and not under the date-and the rollover background, data and text are all working together.

my other option, i'm assuming which I really dont know how to do is two divs of different lengths within the first longer div that has the wrapping anchor-would that work?


this is the code for each section:

<div class="news_wrapper">
<a href="http://www.waterstechnology.com/sell-side-technology/news/1794308/lime-revs-raceteam-deployment" target="_blank"><table width="690" height="19" border="0"
<tr>
<td width="89" height="15" valign="top">
Oct 19, 2010
</td><td width="591" valign="top">
Lime Revs Up RaceTeam Deployment</td>
</tr>
</table></a>
</div>
 
Last edited:
elppa

elppa

macrumors 68040
Nov 26, 2003
3,233
151
pelsar said:
would that be causing the "link problem?
Click to expand...

I can't say for sure, but IE 7 and above definitely supports :hover for non anchor elements.


pelsar said:
my other option, i'm assuming which really dont know how to do is two divs of different lengths within the first longer div that has the wrapping anchor-would that work?
Click to expand...

I'll write some HTML/CSS for you. :)

That's basically the idea, but use span, not div. Because div is block level as well.
 
Last edited:
elppa

elppa

macrumors 68040
Nov 26, 2003
3,233
151
Attached is sample.txt. Rename to sample.html to view. If Finder nags you click the “use .html” button.

When you integrate this into your site there may need to be some minor changes because of other styles. But it should be ok. If you need any more help please ask.

Markup:
PHP: 
<a class="news_wrapper" href="http://www.waterstechnology.com/sell-side-technology/news/1685467/correlix-upgrades-raceteam-latency-monitoring-service" target="_blank">
	<span class="date">Jun 14, 2010 </span>
	<span class="title">Sell Side Technology - Correlix Upgrades RaceTeam Latency Monitoring Service</span>
</a>

CSS:
Code: 
a {
	text-decoration: none;
}

.news_wrapper {
	display: block; /* <a> is inline, make it block level */
	width: 750px;
	overflow: auto; /* expand height to include height of floats */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000;
	padding-left: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
}

.news_wrapper span {
	display: block;
}

.news_wrapper .date {
	/* previously the date <td> */
	float: left;
	min-height: 15px;
	width: 89px;
}

.news_wrapper .title {
	/* previously the title <td> */
	float: left;
	width: 591px;
}

.news_wrapper:hover  {
	color: #F60;
	background-color: #ECECEC;
}
 

Attachments

  • sample.txt
    2 KB · Views: 204
Last edited:
P

pelsar

macrumors regular
Original poster
Apr 29, 2008
180
0
israel
Beautiful job....

elppa
it works wonderfully

http://www.correlix.com/news.html
---

thank you so much for that bit of code....i can't say if i ever would have figured it out no matter how many hours i spent 'playing".....
(i had read about inline elements, but never came across "block elements" so thanks for the education....and the working code

from what i understand of the code you wrote: the .date (which is essentially a div) your surrounding it with span, which hides its "block characteristics"
------
.news_wrapper .date {

<span class="date">Jun 10, 2010 </span>
---------------------
 
elppa

elppa

macrumors 68040
Nov 26, 2003
3,233
151
Good to see it working!

pelsar said:
from what i understand of the code you wrote: the .date (which is essentially a div) your surrounding it with span, which hides its "block characteristics"
Click to expand...

Kind of, but not quite. The span is the inline version of a <div> (i.e. a generic container). I have made the <a> element block level, so each link starts on a new "line".

Using span makes the markup valid. Because you can put inline elements inside other inline elements. In this case we've put a <span> inside <a>.


How to make the rest of the page valid:
You have an extra closing </div> tag. If you remove it then the whole page will be valid. You can see the consequences: on your news page the footer is the width of the page. On the homepage it is the width of the wrapper.

PHP: 
<a href="http://www.automatedtrader.net/news/data-news/6050/correlix-announces-latency-intelligence-15" target="_blank" class="news_wrapper">
	<span class="date">Jan 06, 2009  </span>
	<span class="title">Automated Trader - Correlix announces Latency Intelligence 1.5<br /></span>
</a>
<a href="http://www.advancedtrading.com/showArticle.jhtml?articleID=212700536" target="_blank" class="news_wrapper">
	<span class="date">Jan 05, 2009  </span>
	<span class="title">Advanced Trading - Correlix Extends Capabilities of Latency Intelligence Solution to Increase Speed of Trade Execution  <br /></span>	</a>
<br />
<br />
<br />
</div>
</div>
<br />
<div id="footer-inner">

Remove 1 of the closing </div> before footer-inner.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom