Image border links
Posted: Fri Aug 31, 2012 5:41 am
I am trying to get my image links to ignore all previous link statements in my css file (basically to remove the border) but I can't seam to get this silly thing to work. No matter what I do, the images still take the original border settings that were set in the same css file.
My css file looks like this:
My regular links are styled correctly, no issues. The problem is that my images still get the dotted bottom border. How can I set it so that _no_ images get a border without explicitly saying that it should?
My css file looks like this:
Code: Select all
/*
Main stuff
*/
body
{
background: #f8f8f8;
font-family: Ebrima, Arial, Helvetica, sans-serif;
}
#bodyWrapper
{
width: 60%;
margin: 0 auto;
}
#mainColumn
{
float: right;
width: 88%;
}
#header
{
border-left: 1px solid #dfdfdf;
height: 80px;
}
#navigation
{
float: left;
width: 7%;
}
#content
{
border-radius: 15px;
border: 2px solid #dfdfdf;
background: white;
padding: 15px 15px 15px 15px;
}
a:link
{
color: black;
text-decoration: none;
border-bottom: 1px black dotted;
}
a:visited
{
color: black;
text-decoration: none;
border-bottom: 1px black dotted;
}
a:hover
{
text-decoration: underline;
border: none;
}
a img
{
border: none;
text-decoration: none;
}
/*
Header
*/
#logo
{
float: left;
width: 25%;
position: relative;
}
#logo img
{
float: left;
}
#logo span
{
font-size: 1.3em;
font-weight: bold;
position: absolute;
bottom: 0;
padding-left: 10px;
}
#logout
{
float: left;
}
#companySwitch
{
float: right;
padding-right: 5%;
}
#headerLinksContainer
{
float: right;
border-radius: 15px;
border: 2px solid #dfdfdf;
background: white;
height: 85%;
width: 25%;
text-align: center;
}
#headerLinksContainer #headerLinks
{
float: left;
position: relative;
left: 50%;
top: 3px;
}
#headerLinksContainer #headerLinks .headerLink
{
float: left;
position: relative;
right: 50%;
margin: 0px 20px 0px 20px;
}
/*
Primary navigation
*/
#navigation ul
{
list-style-type: none;
}
#navigation ul li
{
position: relative;
width: 85px;
}
/*#navigation ul li a:link
{
text-decoration: none;
color: black;
border: none;
font-weight: bold;
}
#navigation ul li a:visited
{
text-decoration: none;
color: black;
border: none;
font-weight: bold;
}*/
#navigation ul li img
{
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
}
.caption
{
position: absolute;
top: 69px;
width: 100%;
text-align: center;
font-weight: bold;
}
/*
Secondary navigation
*/
.secondaryNav
{
margin: 0px 0px 10px 0px;
text-align: right;
}
/*
Forms
*/
.searchForm
{
padding: 10px 5px 10px 5px;
font-weight: bold;
color: white;
margin-bottom: 10px;
border-radius: 7px;
background: #999999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#333333'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#333333)); /* for webkit browsers */
background: -moz-linear-gradient(top, #999999, #333333); /* for firefox 3.6+ */
}
.searchForm input
{
border-radius: 7px;
}
.manageForm
{
}
.errors
{
color: red;
}
/*
Data tables
*/
table.data
{
width: 100%;
border-collapse: collapse;
}
table.data thead td
{
height: 30px;
vertical-align: top;
padding: 5px 5px 3px 5px;
color: white;
font-weight: bold;
border-right: 2px solid white;
text-align: center;
background: #999999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#333333'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#333333)); /* for webkit browsers */
background: -moz-linear-gradient(top, #999999, #333333); /* for firefox 3.6+ */
}
table.data tbody td
{
border: 1px solid black;
}
table.data tbody tr:nth-child(odd)
{
background-color: #e8e8e8;
}
table.data tbody tr:nth-child(even)
{
background-color: white;
}
table.data tfoot tr
{
text-align: center;
}