As I assist my brother in setting up a website for his business, we encountered an issue. In some browsers, hyperlinks appear as white and therefore invisible. Interestingly, the hyperlink is white in Firefox, but not when browsing in incognito mode, see this screenshot. (1) (Initially, I thought the problem was resolved, but it was due to cache flushing issues.) Although the link is functional and clickable if you know where to find it, it remains unseen.
Here is the HTML code for index.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Albin's Ice Cream and Delicacies</title>
</head>
<body>
<img alt="Albin's Ice Cream and Delicacies" src="images/albinsicecream.gif" style="width: 320px; height: 175px; display: block; margin: 0 auto;"/>
<div class="menu">
<ul class="menu">
<li><a href="index.html">Home</a></li><li><a href="products.html">Products</a></li><li><a href="schedule.html">Schedule</a></li><li><a href="contact.html">Contact</a></li>
</ul>
</div>
<p>Welcome to <i>Albin's Ice Cream and Delicacies</i>, your local ice cream truck with delicious Swedish quality ice cream from <i>Engelholm’s Glass</i> and tasty locally-produced cheesecake!</p>
<p>The ice cream is made in Ängelholm by the Swedish family company Engelholms Glass. They prioritize highest quality and produce cream-based ice cream with the best ingredients. <a href="http://www.engelholmsglass.se" target="_blank">Read more about Engelholms Glass here.</a></p>
<p>The cheesecake comes from <i>Stella's Cheesecake</i> in Pilås! <a href="http://www.stellasostkaka.se" target="_blank">Read more here.</a></p>
</body>
</html>
Below is the CSS code for the site:
body {
max-width: 960px;
margin: 0 auto;
float: none;
font-family: "Arial", Arial, sans-serif;
}
a:link, a:visited {
text-decoration: none;
}
a:hover, a:active {
color: #FF9595;
}
.menu a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #00AEEF;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
font-family: "Times New Roman", Times, serif;
}
.menu a:hover, a:active {
background-color: #0066CC;
}
b {
font-weight: bold;
}
c {
text-align: center;
}
i {
font-style: italic;
}
p {
margin: 10px;
overflow: visible;
}
div.menu {
margin: 10px auto 25px;
width: 536px;
}
ul.menu {
list-style-type: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
.menu li {
display: inline;
float: left;
}
The website under discussion can be accessed here (in Swedish):
Please note that there seems to be a restriction on new accounts regarding the inclusion of more than two links. Here's a pastebin link containing the mentioned four links.
Live long and prosper!