PDA

View Full Version : Div rollover-links-wk in Safari, Chrome-but not IE7




pelsar
Nov 26, 2010, 05:04 PM
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
Nov 26, 2010, 05:42 PM
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.

pelsar
Nov 26, 2010, 06:04 PM
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.
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>

elppa
Nov 26, 2010, 06:07 PM
would that be causing the "link problem?

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


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?

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.

pelsar
Nov 26, 2010, 06:12 PM
I can't say for sure, but IE definitely supports :hover for non anchor elements.


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


i certainly would appreciate that bit of code.....

elppa
Nov 26, 2010, 06:28 PM
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:
<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:

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;
}

pelsar
Nov 27, 2010, 02:24 AM
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
Nov 27, 2010, 09:23 AM
Good to see it working!

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"

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.


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