I am currently facing an issue with styling a button made using a div. Despite my efforts to make the text white, the styling seems to be acting in unexpected ways.
Below is the CSS section:
.button a
{
text-align:center;
display:block;
background-color: #FF0000;
height:40px;
line-height:40px;
color:#FFFFFF;
text-decoration:none;
}
.button :hover
{
background-color: #000000;
}
You can view the page here.
On inspecting the page, you might notice that the text on the button is not turning white as intended.
Interestingly, when I include a:link and a:visited types within the CSS, it causes the header layout to collapse and the style gets applied to the TripAdvisor widget in the right sidebar, displaying like this:
Image link
Here is the HTML up to the button section:
<body>
<div id="wrapper">
<header>
<a href="index.html"><img src="images/logo.png" alt="Red 16 Cafe logo"/></a>
</header>
<nav>
<ul>
<li><a href="menu.html">Menu</a></li><li><a href="specials.html">Specials</a></li><li><a href="map.html">Map</a></li><li><a href="reviews.html">Reviews</a></li>
</ul>
</nav>
<article>
<div id="articletext">
<a name="top"><h1>Our Menu</h1></a>
<br>
<div class="button">
<a href="Red16MenuFeb2014.pdf">Download .PDF for printing</a>
</div>