Some Hyperlinks invisible?

jayteepics · March 15, 2012

I'd appreciate some pointers regarding a problem I have.

Environment:

localhost Apache 2 server: PHP 4; MySQL

Everything works as expected in IE9

However Comodo/Chrome; FFox and Safari all demonstrate the problem I have.

On a page with a <ul> list of items (in this case categories) when hovering over the first 5 out of 9 items the hyperlinks don't display or work BUT the remaining 4 do.

I then added the following 3 red PHP statements to echo the contents of the $cat_array;

$cat_array = get_categories();

echo '<pre>';

print_r ($cat_array);

echo '</pre>';

When tested I was able to see and click on on all 9 category items in all the browsers which previously failed (as well as see all the contents of $cat_array)

If I comment these 3 statements out I'm back to square one.

Obviously there is something very flaky here.

I would appreciate any suggestions as to what the cause of this might be please.

If I view the page source and click on the hyperlinks, ALL work ???

Many Thanks

Jamie

smerny · March 15, 2012

can you post the related source html?

jayteepics · March 15, 2012

can you post the related source html?

It's a mess but hey I obviously need help.

This is the view page source and isn't quite like the PHP that generated it...




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Welcome to Books</title>    

<link type="text/css" href="textstyles_nf.css" rel="stylesheet"></link>    

<meta http-equiv="content-type" content="text/html; charset=UTF-8"></meta>

<script type="text/javascript" src="jquery.js"></script>

<!--scripts-->

<!--menu_java-->

<script language="javascript" type="text/javascript">

/* <![CDATA[ */

function IeOver(){nua = navigator.appName;if (nua.toLowerCase().indexOf('microsoft')!=-1){if(arguments[0])arguments[1].className+=" over"; else arguments[1].className=arguments[1].className.replace(" over", "");}}

/* ]]> */

</script>

<!--/menu_java-->

<!--endscripts-->



            <style type="text/css">

                h2 { font-family:Arial, Helvetica, sans-serif; font-size:22px; color:#664B4A; margin-left:24px }

                body { font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#664B4A }

                li, td { font-family:Arial, Helvetica, sans-serif; font-size:13px }

                ul.ind { font-family:Arial, Helvetica, sans-serif; font-size:13px; margin-left:40px }

                ul { font-family:Arial, Helvetica, sans-serif; font-size:13px }                

                a { color:#000000 }

  #body {margin:0; padding:0; font-size:80%; font-family:sans-serif;}

  #header {display:block; width:100%;}

    #containerx {width:100%; display:table;}

     #row {display:table-row;}

       #left {width:45%; margin-left:20px; vertical-align:middle; background-color:#cecece; color:#664B4A; display:table-cell;}

       #middle {width:30%; display:table-cell; vertical-align:middle; background-color:#cecece;}

       #right {width:23%; display:table-cell; background-color:#cecece;}

    #normalcontainer   

       #normal {width:100%; display:table-row; background-color:#cecece;}

  #header2 {display:block; width:100%;}

    #container2 {width:100%; display:table;}

       #row2 {display:table-row;}

       #left2 {width:45%; margin-left:20px; vertical-align:middle; background-color:#cecece; color:#664B4A; display:table-cell;}

       #middle2 {width:30%; display:table-cell; vertical-align:middle; background-color:#cecece;}

       #right2 {width:23%; display:table-cell; background-color:#cecece;}

     

.style1 {

font-family:Arial;

font-size:small;

text-align:center;

}

.style2 {

color:#FF0000;

}

.style71 {

text-align:center;

color:#E2E2E2;

}

.style72 {

text-align:center;

color:#000000;

}

.style81 {

font-family:Arial;

font-size:xx-small;

text-align:center;

        margin-left:400px;

}

.style82 {

font-family:Arial;

font-size: x-small;

text-align:center;

} 

</style>

</head>

<body>

<div id="container">

  <div id="topbar">

    <img src="topbar.png" id="topbg" alt="" />

<ul id="mmenu"><!--mmenu-->

<li><a class="mmenu" href="default_2.php" target="_self">Home</a>

</li>

<li><a class="mmenu" href="start.php" target="_self">Collectables</a>

</li>

<li><a id="ma" class="mmenu" href="index.php" target="_self">Books</a>

</li>

<li><a class="mmenu" href="index_glass_ceramic.php" target="_self">Glass/Ceramic</a>

</li>

<li><a class="mmenu" href="index_photo.php" target="_self">Photography</a>

</li>

<li><a class="mmenu" href="index_textiles.php" target="_self">Textiles</a>

</li>

<li><a class="mmenu" href="index_pictures.php" target="_self">Pictures</a>

</li>

<li><a class="mmenu" href="index_sculpture.php" target="_self">Sculpture</a>

</li><!--/mmenu--></ul>  </div><br /><br /><br /><br />   

  <div id="containerx">

     <div id="row">  

        <div id="left" ><img src="images/cclogo6.png" alt="CleverCollecting" border="0"

                                                 align="left" height="55" width="280"></img></div>

        <div id="middle" align="left">

Total Items = 0

     Total Price = &#163;0.00</div> 

    <div id="right">

<a href="show_cart.php">

          <img src="images/view-cart.png"

           alt="View Your Shopping Cart" border="0" height="42"

           width="80"></a></div></div></div><div id="container2"><div id="row2"><div id="left2"><h2 margin-left="20px" vertical-align="text-top">Welcome to Books</h2></div><div id="middle2"></div><div id="right2">



<a href="start.php">

          <img src="images/continue-shopping.png"

           alt="Continue Shopping" border="0" height="42"

           width="80"></a></div></div></div><p>      Please choose a category:</p><ul class="ind"><li>    <a href="show_cat.php?catid=1">Archaeology</a><br>

</li><li>    <a href="show_cat.php?catid=2">Architecture</a><br>

</li><li>    <a href="show_cat.php?catid=3">Art</a><br>

</li><li>    <a href="show_cat.php?catid=4">Exhibition Catalogues</a><br>

</li><li>    <a href="show_cat.php?catid=5">History</a><br>

</li><li>    <a href="show_cat.php?catid=6">Photography</a><br>

</li><li>    <a href="show_cat.php?catid=7">Travel</a><br>

</li><li>    <a href="show_cat.php?catid=8">Fiction</a><br>

</li><li>    <a href="show_cat.php?catid=9">Religion</a><br>

</li><li>    <a href="show_cat.php?catid=10">Literature</a><br>

</li></ul><hr style="width: 70%" class="style71"><p style="height: 0px; text-align: center; " class="style82" ><strong>Thursday 15 March 2012 20:12:16</strong></p><!--    </body>

</html> -->

kicken · March 15, 2012

When I copy-paste the code and run it things seem fine, all the links in both lists activate.

Based on your description the only thing that comes to mind is maybe you have an element styled in a certain way that causes it to cover the first few links. Adding the print_r caused them to be pushed down far enough that they are not covered. In chrome try hovering over one of the non-working links, right-click it and do 'Inspect Element'. See if it brings you to the link tag or some other element.

Is it possible for you to link a live page where you see this happening?

jayteepics · March 15, 2012

That was very helpful in that visual/working HLinks take me to the proper <a href...

But the ones that are 'covered' take me to the top menu bar "topbar"..

Regarding making this live that's possible but I'll have to backup what's there first.

I think you have hit the nail regarding 'a cover up' could you please just elaborate a tad on how this 'styling' can do this from your experience please?

If I have to do the backup and put it up I will but if I can get a few pointers at where to look at this "topbar" (menu bar) styling I'd appreciate it.

Jamie

jayteepics · March 15, 2012

When I copy-paste the code and run it things seem fine, all the links in both lists activate.

Based on your description the only thing that comes to mind is maybe you have an element styled in a certain way that causes it to cover the first few links. Adding the print_r caused them to be pushed down far enough that they are not covered. In chrome try hovering over one of the non-working links, right-click it and do 'Inspect Element'. See if it brings you to the link tag or some other element.

Is it possible for you to link a live page where you see this happening?

OK all uploaded...

http://www.clevercollecting.com/default.php

Don't believe everything you see

There are Books under Art and History categories.

Try IE9 first to get an idea of how it should look (not great but hey it at least functions) then try the other browsers to see the 'cover up'

Many Thanks

Jamie

kicken · March 15, 2012

Your topbar is convering up the link in IE as well, IE is just letting the click get through for some reason (maybe a z-index difference). The issue is that you set the height of your top bar div to be 256px which makes it drop down that low. I'm not sure why you did this, disabling the height did not seem to have any effect on the page layout.

jayteepics · March 15, 2012

Your topbar is convering up the link in IE as well, IE is just letting the click get through for some reason (maybe a z-index difference). The issue is that you set the height of your top bar div to be 256px which makes it drop down that low. I'm not sure why you did this, disabling the height did not seem to have any effect on the page layout.

Thanks Kicken, I just came to that very conclusion and I'll investigate that 256px in the stylesheet asap

Jamie

jayteepics · March 15, 2012

Your topbar is convering up the link in IE as well, IE is just letting the click get through for some reason (maybe a z-index difference). The issue is that you set the height of your top bar div to be 256px which makes it drop down that low. I'm not sure why you did this, disabling the height did not seem to have any effect on the page layout.

Now working many Thanks indeed.

Inspect Element is great I've just been engrossed in NetBeans and was getting away with rubbish by testing in IE9

Lesson learned - Yes I better buy a book on HTML(5) and CSS(3) to that end could I ask another favor please?.....Is there ONE book folks would recommend I buy??

Jamie

Sign In

Some Hyperlinks invisible?

Recommended Posts

jayteepics

Link to comment

Share on other sites

smerny

Link to comment

Share on other sites

jayteepics

Link to comment

Share on other sites

kicken

Link to comment

Share on other sites

jayteepics

Link to comment

Share on other sites

jayteepics

Link to comment

Share on other sites

kicken

Link to comment

Share on other sites

jayteepics

Link to comment

Share on other sites

jayteepics

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information