I am attempting to include a CSS aligned link within an existing div which should function as a hotspot. However, upon rendering the page, the link is not visible (as it appears above the popup box) and its size remains at 0px X 0px even though I have specified otherwise in the CSS Stylesheet. The tutorial I followed (I do not specialize in frontend development, and after this encounter, I plan to steer clear) uses an inline stylesheet instead of an external one like we have for our setup, with plenty of CSS related to other elements on the page. Do I need to adjust the formatting of the <a> tags if using an external CSS stylesheet?
Here's my code:
<div id="KitchenOverlay" style="height: 310px; width: 267px;">
<a id="closePopup" href="#"></a>
<p>The content of this box includes an image background.</p>
</div>
The text is visible but the rectangle is not.
Kitchen Overlay:
#KitchenOverlay
{
position: relative;
left: 300px;
top: 258px;
width: auto;
height: auto;
text-align: center;
z-index: 1000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
visibility: hidden;
background-image: url(../images/Popup.png);
background-repeat: no-repeat;
}
(As mentioned, I'm not a UI developer so there may be incorrect use of ./# symbols)
ClosePopup: < This is the rectangle that doesn't display correctly.
#closePopup
{
position: absolute;
top: 40px;
left: 20px;
width: 83px;
height: 83px;
background-color: transparent;
border: 1px solid yellow;
}
Please let me know if you require additional information or code samples.