Image border links

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
shiznatix
DevNet Master
Posts: 2745
Joined: Tue Dec 28, 2004 5:57 pm
Location: Tallinn, Estonia
Contact:

Image border links

Post by shiznatix »

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:

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;
}
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?
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Image border links

Post by Celauran »

By specifying 'a img' you're ensuring the image itself has no border. The anchor wrapping it still does. CSS does not have any parent selectors, so you'll need some JS.

Try

Code: Select all

$('a img').parent().css('border', '0');
or something to that effect.
User avatar
shiznatix
DevNet Master
Posts: 2745
Joined: Tue Dec 28, 2004 5:57 pm
Location: Tallinn, Estonia
Contact:

Re: Image border links

Post by shiznatix »

I had the same idea but it just seams quite strange that CSS itself wouldn't have the ability to do that itself.

Oh well. Thanks for the JS!
Post Reply