CSS - Annoying Border Around Linked Images

I use the following CSS for my links, and use a border-bottom to give them a dashed underline...

Code:

a { 
color: #AC4870; 
border-bottom: 1px dashed #DDDDDD; 
text-decoration: none; 
} 
a:hover { 
color: #DDDDDD; 
border-bottom: 1px dashed #AC4870; 
text-decoration: none; 
} 

This underline also shows up under my images that are used as links. How would you write CSS that would remove this dashed border-bottom from my image links?

Thanks

Firefox is putting a gray border on most of my images. The border is sometimes on the bottom or off to the right. If I add padding to the images sometimes the border will go away. The images are not links. I have basically covered every option in CSS to eliminate the problem with no prevail my CSS:

Code:

body img{ padding: 0; border:none; -moz-border-radius: 0; -khtml-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; -webkit-box-shadow: 0 0 0 #000;   -moz-box-shadow: 0 0 0 #000; text-decoration: none; outline:none; overflow: hidden; }

Hopefully someone has encountered this before or has some information to help?

Sorry about the vague description, but I'm wondering how to achieve an effect like the ones on this page:

http://www.csszengarden.com/?cssfile=/196/196.css&page=0.

I've seen the effect on many other websites, but I can't find them at the moment. On the page the content div grabs your attention effectively because its borders make it pop out from the background. How are the border images and divs setup to achieve this effect?

All,
I have a header on this page backup.whiteslimo.com with 3 images inserted into it listing the company name, service, and contact info. My problem is that when they are displayed there is a thin white border on the bottom and right hand sides of each image. But the image doesn't have these borders. If you are in Firefox/Mozilla and you right click on the individual images and select View Image, you will see that the image itself does not have these borders. I am thinking that somewhere along some attribute is being added that is causing this but since I am a CSS neophyte (This is still my first week lol) I am not sure. Any help is much appreciated.

This problem just started happening, but frustratingly I can't remember what I was changing when it started happening.

The problem is that (almost) all the images on the site seem to be "bumped" 1px out of place, with a black border showing on the top and left hand sides of the images. This is not showing up with ALL images, however. I've embedded an image and you can see the effect on the logo, on the graphics in the body text, and on the sub-menu items (with the 'empty' box icons). However the effect does not occur on the menu items with the 'full' box icons.

OK, apparently, I CAN'T EMBED AN IMAGE. Or a link to an image. Or a link to the site in question. SO I have no idea how I am actually supposed to get help for this problem.

If someone can PSYCHICALLY DEDUCE what the problem might be without being able to view the site or an image of the problem, that'd be ACE!

GAAAAH

Alright, let's see if we can do this with JUST the CSS & HTML. Here is the CSS:
Code:

html {
margin: 0;
padding: 0;
min-height: 100%;
height: auto;
}
 body {
margin: 0; 
padding: 0; 
background-color: #FFFFFF;
background-image:url('background-index.gif');
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #666666;
min-width: 900px;
min-height: 100%;

}

img {
border:0;
}

a:link {
text-decoration: none;
color: #0096db;
}

a:hover {
text-decoration: underline;
}

a:visited {
color: #00abc7;
text-decoration: none;
}

#header {
width:900px;
height:80px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #0096db;
}

#logo {
float:left;
width:140px;
margin:0;
padding:0;
}

#head_nav {
width:760px;
position:relative;
float: right;
background-color: #ebf9ff;
height: 80px;
margin:0;
padding:0;
}

#clear_both {
clear:both;
}

#sidenav {
float:left;
width:100px;
padding-left:10px;
padding-top:0;
margin-top:0;
}

#content_wrap {
float:right;
width:760px;
background-color: #ebf9ff;
background-image:url('content-background.gif');
}

#content {
float:left;
width:500px;
}

#content h1, h2, h3, ul {
padding-top: 15px;
padding-left: 15px;
}

#content p {
padding-left: 15px;
}

#focus_box {
width:260px;
float: right;
margin-top:0;
padding-top:0;
}

#focus_box h1 {
padding-top:15px;
}

#focus_box p, h1, ul {
padding-left:15px;
}

table.blue_highlight {
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#0096db;
margin-left:15px;
margin-right:15px;
padding-top:15px;
padding:0;
margin:0;
}


#menu2 {
float: left;
width: 200px;
}

#main {
float: right;
}

p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	color: #666666;
}

ul {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	color: #666666;
}

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: 700;
color: #0096db;
}

h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11pt;
color:#666666;
font-weight: bold;
}

a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
color: ;
}

/*!!!!!!!!!!! MENU STYLES FOR LEVEL1MENU !!!!!!!!!!!*/

#level1menu {
position:absolute;
bottom:0px;
padding-left:60px;
}

#sitemap li {
margin-left: 15px;
}

#sitemap ul {
margin-bottom:15px;
}

#sitemap ul li ul {
margin-left:15px;
}

And here is the HTML:
Code:

<%@ LANGUAGE="VBSCRIPT" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)" lang="en" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


	<title>BB Group Homes</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "(URL address blocked: See forum rules)">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">@import "style.css";</style>
</head>
<body class="developments">
<div id="header">
<div id="logo">
<!--#INCLUDE FILE="logo.asp" -->
</div>
<!--END LOGO-->
<div id="head_nav">

<!-- #INCLUDE FILE="menutop.asp" -->

<!-- END MENU_TOP -->
<div id="level1menu">
<!-- #INCLUDE FILE="level1menu.asp" -->
</div>
<!--END level1menu-->
</div>
<!--END HEADER -->
<div id="clear_both"></div>
<div id="sidenav">
<!-- #INCLUDE FILE="menu_developments.asp" -->
</div>
<div id="content_wrap">
<img src="banner_developments1.png">
<div id="focus_box">
<!-- #INCLUDE FILE="focus_boxes.asp" -->
</div>
<div id="content">
<h1>Developments</h1>
<table class="blue_highlight">
<tr>
 <td><a href="golfsociety.asp"><img src="Golf_society_residence_logo.gif"></a></td>
 <td><h2>Golf Society Residence</h2>
<p>The Golf society project was initiated for a variety of reasons, some of which include the scenic environmental landscape, increasing trend of Bodrum as a holiday destination for tourists and natives, the beach and the close proximity to the airport.</p>
<p><a href="golfsociety.asp">-> More</a></p></td>
</tr>
</table>
<table class="blue_highlight">
<tr>
 <td><a href="thevillage.asp"><img src="thevillagelogo.gif"></a></td>
 <td><h2>The Village Bodrum - Tuzla</h2>
<p>You will find everything you have dreamed of at Vita Park Golf Resort, a world-c1*** destination in the heart of the peninsula Bodrum, the famed pearl of the Aegean Sea. </p>
<p><a href="thevillage.asp">-> More</a></p>
</td></tr></table>
<table class="blue_highlight">
<tr>
 <td><a href="bluemarina.asp"><img src="bluemarinalogo.gif"></a></td>
 <td><h2>Blue Marina Bodrum - Yalikavak</h2>
<p>Blue Marina Apartments, overlooking the spectacular view of Yalıkavak amongst the centeranian olive trees, designed for all year long living, your comfort and every desire is planned to the finest detail.
</p>
<p><a href="bluemarina.asp">-> More</a></p>
</td></tr></table>
<table class="blue_highlight">
<tr>
 <td><a href="bluelife.asp"><img src="bluelifelogo.gif"></a></td>
 <td><h2>Blue Life Bodrum -Yalikavak</h2>
<p>Each villa has a magnificent sea view which can not be blocked. They has own entrance & garden, swimming pool with 40 sqm, wooden terrace with 40 sqm for sunbathing, garage for 2 cars and is 100 metres distance to the sea. The living  rooms have high vault ceilings.</p>
<p><a href="bluelife.asp">-> More</a></p>
</td></tr></table>
<table class="blue_highlight">
<tr>
 <td><a href="bluelife.asp"><img src="bluelifelogo.gif"></a></td>
 <td><h2>Kalkan Luxus Villas</h2>
<p>Each villa has a magnificent sea view which can not be blocked. They has own entrance & garden, swimming pool with 40 sqm, wooden terrace with 40 sqm for sunbathing, garage for 2 cars and is 100 metres distance to the sea. The living  rooms have high vault ceilings.</p>
<p><a href="bluelife.asp">-> More</a></p>
</td></tr></table>
<p></p>
</div>
</div>

</body>
</html>


</body>

</html>

A lot of the images that are showing the 1px-off problem are contained in the SSIs (I don't think anyone here wants me to post the full content of the SSIs, do they?) but quite a few of the images in the main HTML are, as well: banner_developments1.png & all the logos.

This would be a lot easier if I could show you a picture of what was going on.

Ok,

Now when I am trying to nest divs for the header bar, left column. Nothing gets put into the header div and I've tried tons of stuff to get it to work.

Heres a sample:

Code:

<HTML>
	<HEAD>
		<title>
			Page Title
		</title>
		<style>
		.defaultText {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
body { 
	margin-left: 0px; 
	margin-top: 0px; 
	margin-right: 0px; 
	margin-bottom: 0px; 
}
.titleText {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #000000;
}
.addModuleText  {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
}
.adminHeaderText {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #000000;
}
.button {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding: 2px;
	border: 1px solid #0099FF;
	font-size: 11px;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #1C4F9B;
}
.smallText {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #000000;
}
.moduleTitle {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #000000;
}
.TabBg {
    background-color: #1C4F9B;
    border-color: black;
}
.NormalTabsBg {
    background-color: #559cec;
    border-color: black;
}
.selectedTab {
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 13px;
    color:white;
    font-weight: bold
}
.normalTabs {
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 13px;
    color:gainsboro;
    text-decoration:none;
    font-weight: bold
}
.textBox {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	width: 100px;
	border: 1px #000000 solid;
	background-color: #FFFFFF
}
.largeTextBox {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	border: 1px #000000 solid;
	background-color: #FFFFFF
}

#addNewModule {
	padding-top: 10px;
	padding-left: 5px;
	padding-bottom: 10px;
}

#addNewModule a 
{
	border: 1px solid #000;
	background-color: #1C4F9B;
	padding: 5px;
}

#bodyWrapper {
	border: 1px solid purple;
	background-color: #559CEC;
	width: 100%;
}

#header {
	background: #EEE;
	border: 1px solid red;
}

#header #headerLeftColumn {
	float: left;
	width: 500px;
}

#header h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	text-align: left;
	vertical-align: top;
	color: #000;
	padding-left: 15px;
	padding-top: 20px;
	width: 100%;
}

#header #loginControl {
	float: right;
	width: 250px;
	border: 1px solid #000;
}

#container {
	float: left;
	width: 100%;
	margin-right: -260px;
	border: 1px solid red;
}

#content  {
	border: 1px solid yellow;
	margin-right: 260px;
}

#left 
{
	float: left;
	width: 250px;
	border: 1px solid #FFF;
}

#middle {
	margin-left: 260px;
	border: 1px solid orange;
}

#sidebar {
	float: right;
	width: 250px;
	border: 1px solid #000;
}

#footer {
	background: #999;
	border: 1px solid #cecea5;
	clear: both;
}

#module {
	position:relative;
	width: 100%;
	padding: 2px;
	background: #FFF;
	border: 1px solid #000000;
	font-size: 10px;
}

#title {
	background-color: #C2DBF5;
	padding: 3px;
	border: 1px solid #144678;
	text-align: left;
	color: Black;
	font-weight: bold;
	font-size: 14px;
}

#moduleItem {
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
}

#moduleItem h1 {
	font-weight: bold;
	font-size: 12px;
	margin-bottom: 0px;
}

#moduleItem p {
	margin-top: 0px;
	margin-bottom: 10px;
}

#module #footer {
	background-color: #C2DBF5;
	border: 1px solid #144678;
	padding: 4px;
	text-align: left;
	color: black;
	font-weight: normal;
	font-size: 10px;
}

body {
	color: #000000;
	background-color: #E8E8E8;
	font-family: Verdana, sans-serif;
	font-size: smaller;
	margin: 10px 10px 0px 10px;
}
		</style>
	</HEAD>
	<BODY>
		<form runat="server" ID="frm">
			<DIV id="header">
				<DIV id="headerLeftColumn">
					<h1>Site Title
</h1>
					<p>
					Paragraph left text
					</p>
				</DIV>			
				<DIV id="loginControl">
	Login buttons
				</DIV>
			</div>
			<DIV id="bodyWrapper">
							<DIV id="container">
						<DIV id="content">
							<DIV id="left">Left</DIV>
							<DIV id="middle">Center</DIV>
						</DIV> 
					</DIV>			
					<DIV id="sidebar">Sidebar text</DIV>
			</div>		
		</form>
	</BODY>
</HTML>

As a way to learn XHTML-Strict/CSS, I'm making a funny site with the goal of recruiting new people to be my friend. However, I can't seem to get rid of a horizontal bar of white space between the Title div and News & Content divs. I could fix it by making the News and Content positions absolute, but then I'd be unable to have a footer. Does anybody know why that white space exists, or better yet, how I can get rid of it? Site is http://www.kennygraham.net/index.html and CSS is http://www.kennygraham.net/perfect.css

Thanks in advance to anyone who can help.

This is REALLY basic and annoying the hell out of me.

http://www.magikwebs.co.uk/chromeborder/

This looks fine in Firefox, but in IE there is a small gap between the images in the top div and the one in the bottom.

I've tried styling the divs to remove padding, margins etc but to not avail. Can anyone tell me how to fix this for stupid IE?

Thanks,

John.

Hello all,
I've been working on a layout for a bit now and can't seem to get rid of a small space. The background image is not coming down far enough.

The background image is in applied to the body div. Both of the divs in the body are floated so I had to use a hack recommend by the people at positioniseverything, their easy clears page.

the hack applied is the following class that I apply to the body div.

.clearfix:after {
content: ".";
display: block;
height: 0;
margin: 0;
padding: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Like I say, the hack works except for that annoying little gap at the bottom.

Please take a look at it www . cocoliso ..us/blog/
Much thanks.
Jesse

Hi,

I've gone as long as I can without asking for help, but this has got me stumped.

I have a site I'm trying to make at http://joe.terrarum.net/test.html

If you resize the window so its less than 600px or so, the drop shadow starts getting clipped. I know why this is happening (the height is set to 100%, so it's just following the rule of being 100% the size of the window when the window is smaller than the inside block) but I would like it to be the same size as the block inside even when the window is smaller. Make sense?

The block is actually the block showing the background. It's 532px in length from the header. The gray box is just a simple context box (that should also push the height of the background box if it gets too big).


Anyone have any ideas?

Thanks!
-Joe

Hi guys, I'm new to this forum but the advice looks great - I hope someone can help me out!

I'm having a really weird problem with my CSS in Windows Firefox. Everything displays fine in Mac.Opera, Mac.Firefox, Mac.Safari, Windows.IE7 but doesn't display correctly in Windows.Firefox!

For some reason it's creating a gap between the menu tabs and the line below, it's coming from the padding-bottom of #ddcolortabs a .link which is 3px. However, I need this to create the right spacing between the bottom of the words in the menu and the top of the line.

I'm not allowed to put a URL in this post, which is very annoying! If you think you could help I'll send you the link in a message I guess?! Let me know if there's another way!

If anyone has any ideas for a solution I would be very grateful!

Cheers,
Andrew

Hey everyone,

I am making a design for my site, and when I use a rounded image for my background, IE shows a whitespace around it. Here is my code.
Code:

#menu_outer {
	background-image: url( menu1.png );
	background-position: top left;
	background-color: #0000000;
	width: 250px;
}

Here is an example.
Any suggestions?

Hi!

Let's consider this XHTML: (I've put the CSS in a style attr. for conciseness)

[HTML]
<div style="width:100%;height:70px;background: #D10C23;display:block;">dfsdfdsfsd <img src="haha.gif" width="1000" height="50"></div>
[/HTML]

Now, if you make the browser window in FF or Opera less than 1000 pixels wide (a horizontal scrollbar appears), and scroll to the right, you'll see that the background color doesn't span until the end of the page. Why is this?

Thanks

Dear All,

On top of my page I like to have a picture which is stretched from left to right with an gap (left/right) of 11px.

That works for IE & Opera.

BUT in Netscape & Firefox it doesn't stop 11px on the right site. ??????

Does anybody have an idea .. damn think is quite important for my design.

The call in (XHTML validated) page is.
<div id="banner">
<img class="ocean" src="/_img/headers/texture.gif" alt="" />
</div><!-- end banner -->

the CSS:
.ocean {
position:absolute;
top:12px;
width: 100%;
left:11px;
right:11px;
height: 110px;
border: 0;
}


banner
#banner {
background:#fff;
background-color: #7adaff;
height:110px;
border-top: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
border-bottom: 1px solid white;
voice-family: "\"}\"";
voice-family: inherit;
height:110px;
}
html>body #banner {
height:110px;
}

body {
margin:10px 10px 10px 10px;
padding: 0;
font: 'verdana', 'geneva', 'arial', 'sans-serif';
color : #6388ff;
background-color: tomato;
border: 1px solid white;
}

Appreciate any ideas

Jack

Hi.

Have created some simple tabs using table cells.

Active tab should have bottom-border color equal to page background-color.
Non-active tabs should have bottom-border=black.

Works fine in IE, but does not work very well in Firefox.

If I remove the border-collapse:collapse on the table, then firefox also work... but I would like to be able to keep the 1px border between each table cell.

So is there a way to make this work in both IE and Firefox...
and hopefully most other browsers...

See code below:

Code:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style type="text/css">
	a.menu_top:link {color: #000000; text-decoration: none;}
	a.menu_top:visited {color: #000000; text-decoration: none;}
	a.menu_top:hover {color: #000000; text-decoration: none;}
	a.menu_top:active {color: #000000; text-decoration: none;}
	
	td.menu_top_passive { 
		background-color: #777;
		border-left: 1px #000000 solid;
		border-right: 1px #000000 solid;
		border-top: 1px #000000 solid;
		border-bottom: 1px #000000 solid;
		
		text-align: center;
		
		cursor:pointer;
		font-weight: bold;
		
		padding: 5px 20px 5px 20px; 
		 
		margin: 0;
		 
	}
		
	td.menu_top_active { 
		
		background-color: #bbb;
		border-left: 1px #000000 solid;
		border-right: 1px #000000 solid;
		border-top: 1px #000000 solid;
		border-bottom: 1px #bbb solid;
		
		text-align: center;
	
		cursor:pointer;
		font-weight: bold;
		padding: 5px 20px 5px 20px;
		
		margin: 0;
		
	}
	

</style>

<script language="JavaScript">


function change(id, url) {
	for (i=1; i<6; i++){
		eval("document.getElementById("+i+").className='menu_top_passive'");
	}	
	eval("document.getElementById("+id+").className='menu_top_active'");
}
</script>

</head>
<body style="margin:0; padding:0; background-color:#bbb;">
<br><br>
<center>
1. Load the page.<br>
2. Click Item 4.<br>
3. Click Item 2.<br><br>
Why is the bottom border of the menuelements (table cells) not getting correct in Firefox?<br>
None-active menuelements should have a border-bottom = black, active should have same bottom-border as page.<br>
Notice that I use border-collapse on the table in order to get the cell-border 1px thick between the menuitems.<br>
If I remove border-collapse, then there is no strange behaviour in Firefox.<br>
Any way to get this working in Firefox without breaking it in IE?

</center>
<br><br><br>
	<table border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse;">
		<tr>
			<td id="1" nowrap class="menu_top_active" onClick="change('1');"><a  href="javascript:;" class="menu_top">Item 1</a></td>
			<td id="2" nowrap class="menu_top_passive" onClick="change('2');"><a href="javascript:;" class="menu_top">Item 2</a></td>	 
			<td id="3" nowrap class="menu_top_passive" onClick="change('3');"><a  href="javascript:;" class="menu_top">Item 3</a></td>				
			<td id="4" nowrap class="menu_top_passive" onClick="change('4');"><a  href="javascript:;" class="menu_top">Item 4</a></td>
			<td id="5" nowrap class="menu_top_passive" onClick="change('5');"><a  href="javascript:;" class="menu_top">Item 5</a></td>

		</tr>
	</table>
</body>
</html>