Reputation: 85
I know this a rather specific question and basic html question, but it's been happening on a few of my pages now, and I'm curious as to what exactly is going on.
I have a series of div boxes lined up vertically on a page, each one contains a picture that is a link to a different page on the website. The problem is when I add more than 3 of these div boxes, suddenly all the links on above the bottom three stop working.
http://webstage.emich.edu/dining-new/locations/easterneateries.php
I've tried the same code in jsfiddle, as seen below:
.locationsbx {
position:absolute;
width: 540px;
height:70px;
z-index:5;
margin-left: auto;
margin-right:auto;
background-color: #363636;
margin-top:110px;
}
.primetriangle {
border-top:25px solid green;
height: 0;
position:absolute;
width: 0;
z-index:3;
border-right: 25px solid transparent;
height: 0;
position:absolute;
width: 0;
z-index:5;
border-top-color: #CCC;
}
<div class="locationsbx" style="position: absolute; width: 100%; height: 100px; margin-top: 20px;">
<div class="primetriangle" style="z-index: 4;"></div> <a href="/dining-new/locations/eateries/estreetgrill.php"><img style="width: 85px; margin-left: 5px; margin-top: -18px;" src="/dining-new/images/eateries/estreet.png" alt="" /></a>
<div class="text" style="margin-left: 100px; margin-top: -35px; width: 430px;">text</div>
<div style="position: absolute; margin-left: 270px; margin-top: 45px; width: 320px;">
<img style="height: 35px;" src="/dining-new/images/open.png" alt="" />
<img style="margin-left: 2px; height: 35px; display: inline;" src="/dining-new/images/menu.png" alt="" onmouseover="this.src='/dining-new/images/menu_hover.png';" onmouseout="this.src='/dining-new/images/menu.png';" />
<img style="margin-left: 2px; height: 35px; display: inline;" src="/dining-new/images/nutrition.png" alt="" onmouseover="this.src='/dining-new/images/nutrition_hover.png';" onmouseout="this.src='/dining-new/images/nutrition.png';" />
</div>
</div>
<div class="locationsbx" style="position: absolute; width: 100%; height: 100px; margin-top: 130px;">
<div class="primetriangle" style="z-index: 4;"></div> <a href="/dining-new/locations/eateries/sunsetstrips.php"><img style="width: 85px; margin-left: 5px; margin-top: -18px;" src="/dining-new/images/eateries/sunsetstripslogo.png" alt="" /></a>
<div class="text" style="margin-left: 100px; margin-top: -35px; width: 430px;">text</div>
<div style="position: absolute; margin-left: 270px; margin-top: 45px; width: 320px;">
<img style="height: 35px;" src="/dining-new/images/open.png" alt="" />
<img style="margin-left: 2px; height: 35px; display: inline;" src="/dining-new/images/menu.png" alt="" onmouseover="this.src='/dining-new/images/menu_hover.png';" onmouseout="this.src='/dining-new/images/menu.png';" />
<img style="margin-left: 2px; height: 35px; display: inline;" src="/dining-new/images/nutrition.png" alt="" onmouseover="this.src='/dining-new/images/nutrition_hover.png';" onmouseout="this.src='/dining-new/images/nutrition.png';" />
</div>
</div>
<div class="locationsbx" style="position: absolute; width: 100%; height: 100px; margin-top:240px;">
<div class="primetriangle" style="z-index: 4;"></div> <a href="/dining-new/locations/eateries/freshens.php"><img style="width: 85px; margin-left: 5px; margin-top: -18px;" src="/dining-new/images/eateries/sunsetstripslogo.png" alt="" /></a>
<div class="text" style="margin-left: 100px; margin-top: -35px; width: 430px;">text</div>
<div style="position: absolute; margin-left: 270px; margin-top: 45px; width: 320px;">
<img style="height: 35px;" src="/dining-new/images/open.png" alt="" />
<img style="margin-left: 2px; height: 35px; display: inline;" src="/dining-new/images/menu.png" alt="" onmouseover="this.src='/dining-new/images/menu_hover.png';" onmouseout="this.src='/dining-new/images/menu.png';" />
<img style="margin-left: 2px; height: 35px; display: inline;" src="/dining-new/images/nutrition.png" alt="" onmouseover="this.src='/dining-new/images/nutrition_hover.png';" onmouseout="this.src='/dining-new/images/nutrition.png';" />
</div>
</div>
<div class="locationsbx" style="position: absolute; width: 100%; height: 100px; margin-top: 350px;">
<div class="primetriangle" style="z-index: 4;"></div> <a href="/dining-new/locations/eateries/uppercrust.php"><img style="width: 85px; margin-left: 5px; margin-top: -18px;" src="/dining-new/images/eateries/sunsetstripslogo.png" alt="" /></a>
<div class="text" style="margin-left: 100px; margin-top: -35px; width: 430px;">text</div>
<div style="position: absolute; margin-left: 270px; margin-top: 45px; width: 320px;">
<img style="height: 35px;" src="/dining-new/images/open.png" alt="" />
<img style="margin-left: 2px; height: 35px; display: inline;" src="/dining-new/images/menu.png" alt="" onmouseover="this.src='/dining-new/images/menu_hover.png';" onmouseout="this.src='/dining-new/images/menu.png';" />
<img style="margin-left: 2px; height: 35px; display: inline;" src="/dining-new/images/nutrition.png" alt="" onmouseover="this.src='/dining-new/images/nutrition_hover.png';" onmouseout="this.src='/dining-new/images/nutrition.png';" />
</div>
</div>
and it's working fine there- so I'm confused as to what might be some of the reasons why putting the code on the actual server would be causing problems with disabling the links.
**NOTE: I am well aware that it is not in good form to have inline styles, especially when I have the external CSS sheet anyways. However, the inline styles are just there until I can resolve the actual problem with the links. ** ALSO: The link to the page is very obviously under construction still. I have been dealing with the disabled links over multiple pages now and am much more concerned with why they're disabling than the rest of the page
Upvotes: 0
Views: 170
Reputation: 59
I went to check the source of your page you linked to and you're not closing the <div
> with the class="locationsbx"
on your page. I think you're doing in the code you pasted above but not on the actual page.
EDIT: Not really a complete answer. I would have just left a comment but I need 50 points for that, I don't have those.
Upvotes: 1