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

Discussion in 'Web Design and Development' started by pelsar, Nov 26, 2010.

  1. macrumors regular

    Joined:
    Apr 29, 2008
    Location:
    israel
    #1
    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
     
  2. elppa, Nov 26, 2010
    Last edited: Nov 26, 2010

    macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #2
    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.
     
  3. pelsar, Nov 26, 2010
    Last edited: Nov 26, 2010

    thread starter macrumors regular

    Joined:
    Apr 29, 2008
    Location:
    israel
    #3
    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>
     
  4. elppa, Nov 26, 2010
    Last edited: Nov 26, 2010

    macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #4
    I can't say for sure, but IE 7 and above definitely supports :hover for non anchor elements.


    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.
     
  5. thread starter macrumors regular

    Joined:
    Apr 29, 2008
    Location:
    israel
    #5
    i certainly would appreciate that bit of code.....
     
  6. elppa, Nov 26, 2010
    Last edited: Nov 26, 2010

    macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #6
    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:
    <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 142010 </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;
    }
    
     

    Attached Files:

  7. thread starter macrumors regular

    Joined:
    Apr 29, 2008
    Location:
    israel
    #7
    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>
    ---------------------
     
  8. macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #8
    Good to see it working!

    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 062009  </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 052009  </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.
     

Share This Page