CSS - Border 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

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.

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>

I'm a little puzzled by this weird display bug by IE7, this bug doesn't occur in IE6. It had to do with the DIV's CSS's border-style.

If you set it to double then you notice some random bugs with it. Some of the time, the border is displayed without a problem. Some of the time, it is displayed with some gaps in the line as if it is not being drawn upon. Some of the other time, it is not displayed at all.

I noticed if I switch from one tab to another then back, the border appeared as if nothing had happened. I also noticed that if I open the view source that overlapp the web browser then closed it, the border appeared as if nothing had happened.

How do you fix that problem?

Thanks...

I would like to set up a table with a different border than the cells inside it. Here's my code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	TABLE {border: 1px solid black; border-collapse: collapse; width: 200px}
	TD {border: 1px solid #ccc}
</style>


</head>

<body>
<table>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

That's all hunky dory in (gasp!) IE, but good browsers...they only show the lighter gray color. How do I get the table border to be different?

Hi,

This used to be my solution:
Code:

<table border=1 bordercolorlight='#CCCCCC' Bordercolordark='#FFFFFF'>

But this only works well on IE - not Mozilla

Now I want to use CSS:
Code:

	.results {
	  	border: 1px solid #CCCCCC ;
	}

Code:

<table class='results'>

---------------

The problem is, with CSS, only the TABLE acquires the border property. The cells within it don't.

If I specify
Code:

<td class='results'>

for all the cells in the table, this also won't work, because the cell borders overlap each other and some border lines seem thicker than others (because of overlapping).

Is there any simple way I can specify the border property for the table - in ONE declaration? I want the table and td borders all to be a simple 1px width ...is that possible in one declaration?

Thanks a lot!

How do you create an inner border around a table in css, rather than a "solid" border which creates a border line around the table on the outer half. The border needs to butt up against an image, rather than leaving a pixel space.

This is the coder I have so far. Nothing big:

Code:

.solid {
border: solid 1px #000000;
}

Thanks.

Im just curious, what are the advantages of using css to import all your images (that arnt dynamic) as apposed to inserting them into your html using the <img> tag?

Hi, I'm a total newbie when it comes to .. well everything. HTML, CSS etc ...

I'm working on a little site, but I have a problem on (apparantly I can't post the link to my site because I'm a new user.. )




In Firefox everything is OK. But in IE when I hover over the bottom Div's (delphi.exe file) and (Delphi-files) I get a solid border instead of a dashed border as I wrote down in the CSS.

Any idea what the problem is? Is it needed for me to post the CSS file? Might be a little bit embarrasing as it's probably the most rediculous CSS file you've ever seen.

Thank you for your time.

hi, i was wondering if it is possible to assign images for each border. something like

border-top:5px dotted black; background-image:url(horBrdr.gif);
border-left:1px solid red; background-image:url(verBrdr.gif);
border-right: 2px groove green; background-image:url(horBrdr.gif);
border-bottom:3px dotted #3399CC ; background-image:url(horBrdr.gif);
vertical-align:middle; padding:1em;}

of course this doesn't work. thanks for the help...

Hi,
I am using blueBox class that makes a border.

code:
Code:

<div class="blueBox"  
<table bgcolor="#FF3300"><tr><td>	
<div id="my_title" style="position: relative; width: 200px; height: 20px;" ></div>
</td></tr>
<tr><td>...

My problem is that
<div id="my_title"
is causing right border of <div class="blueBox" disappear.

When I change
<div id="my_title" style="position: relative;
to
<div id="my_title" style="position: absolute;

border is right where it should be.

I do not want to use absolute positioning. What can I do about it?

What is the problem? I can see that red background of the
<table bgcolor="#FF3300">
does not even reach half of
<div class="blueBox"
Something is obviously pushing or covering right border of <div class="blueBox"

I'm making a dashed border, and I was wondering how can I change the pixel size and color of the border? It's been awhile for me since I've used CSS or HTML but here's what I have(I know this isn't the proper formatting, but it's for a xanga site so the way it's entered doesn't really matter =\)

<style="text/css">

#box
{
border-style:dashed;
width:700px;
position:absolute;
}

</style>

<div id="box">
<div id="da"><p>Da..daa...da da Da</p>
</div>
<div id="muh"><p>muh numa nah</p>
</div>
</div>

Hey everyone!

So I'm trying to make a site. I'm not using any tables, and I want to have a border for each side of the page. I can't use a background because the page changes width based on the users browser width.

My CSS and HTML are verified. Anyways, for the right and left borders, this is the code I have:

HTML:
Code:

	<!-- Border -->
	
		<div id="left_border"></div>
		<div id="right_border"></div>
		
		<div id="left_border_top"></div>
		<div id="right_border_top"></div>
	
	<!-- End Border -->

and for the CSS I have this:
Code:

/*Site Border Full*/

#right_border{
	background-image: url(img/layout/site_right_border.jpg);
	background-repeat: repeat-y;
	width: 3px;
	height: 100%;
	float: right;
	position: absolute;
	right: -3px;

}

#left_border{
	background-color: #94aec5;
	width: 1px;
	height: 100%;
	float: left;
	position: absolute;
	left: -1px;
}

#right_border_top{
	background-image: url(img/layout/header_right_border.jpg);
	background-repeat: repeat-y;
	width: 3px;
	height: 74px;
	float: right;
	position: absolute;
	right: -3px;
	z-index: 1000;
}

#left_border_top{
	background-color: #496986;
	width: 1px;
	height: 74px;
	float: left;
	position: absolute;
	left: -1px;
	z-index: 1000;
}


/*End Site Border Full*/

Here's the results I'm getting in Firefox:


As you can see the border displays until you get to the content area (with the text below). It seems to be because for the content area, I set the height to 100%. When I change that to a definite number (ie. 300px) the border displays.

And here's how it displays in Internet Explorer 7:


There's no border at all on this one!

Here's my entire code for the site:

HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Site Beta</title>
	<style type="text/css">
	<!--
	@import url("layout.css");
	-->
	</style>
</head>

<body>

	<div id="container">
	
	<!-- Site Head -->
	
		<div id="header">
			<div id="banner"></div>
			<div id="header_user">
				<div id="head_user_container">
					<div id="head_avatar"><img src="img/layout/avatar_test.jpg" alt="User Avatar" /></div>
					<div id="head_user_info">Welcome <a href="">Mike Jensen The Awesome Man </a>(<a href="">Sign Out</a>)<br /><a href="">Edit Profile</a><br /><a href="">Message Center</a></div>
					<div id="head_user_end"></div>
				</div>
			</div>
		</div>
		
	<!-- End Site Head -->
	
	<!-- Border -->
	
		<div id="left_border"></div>
		<div id="right_border"></div>
		
		<div id="left_border_top"></div>
		<div id="right_border_top"></div>
	
	<!-- End Border -->
	
	<!-- Menu -->
	
		<div id="menu">

		</div>
	
	<!-- End Menu -->
	
	<!-- Start Top Ad Banner -->
	
		<div id="top_ad">
		
		</div>
	
	<!-- End Top Ad Banner -->
	
	<!-- Main Content Container -->
	
		<div id="main_content_container">		
			<div id="main_content">woo hoo</div>
			<div id="right_content">right poop</div>
		</div>
	
	<!-- End Main Content Container -->
		
	</div>

</body>
</html>

and CSS:
Code:

/*Basic Elements*/
body {
	font-family: "trebuchet MS", calibri, verdana, arial, sans-serif;
	font-size: 13px;
	color: #303030;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding: 0 20px;
	background-color: #d8d8d8;
}
p {
	margin-top: 10px;
	text-align: justify;
	font-family: "trebuchet MS", calibri, verdana, arial, sans-serif;
	font-size: 13pt;
	line-height: 10pt;
	}
a:link { 
	text-decoration: underline; 
	color: #417cb3;
	}
a:visited { 
	text-decoration: underline; 
	color: #417cb3;
	}
a:hover, a:active { 
	text-decoration: underline; 
	color: #5e9cd5;
	}
acronym {
	font-weight: bold;
	border-bottom: 1px dotted #417cb3;
	}

/*Specific DIVs*/

#container {
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;	
	padding: 0px;
	max-width: 1200px;
	min-width: 950px;
	text-align: left;
	position: relative;
	background-color: #d8d8d8;
	}
	
/*- Banner -*/

#header{
	background-color: #417cb3;
	height: 74px;
	width: 100%;
	clear: both;
	float: left;
}

#banner{
	background-image: url(img/layout/banner.jpg);
	background-repeat: no-repeat;
	float: left;
	width: 284px;
	height: 74px;
}

#header_user{
	height: 66px;
	float:right;
	position: relative;
	margin-top: 4px;
	margin-right: 7px;
}

#header_right_border{
	width: 3px;
	height: 74px;
	background-image: url(img/layout/header_right_border.jpg);
	background-repeat: repeat-y;
	float: right;
	position: absolute;
	right: 0px;
}



/*End Banner*/

/*Head User Info*/

#head_user_container{
	clear: both;
	height: 66px;
	position: relative;
}

#head_avatar{
	background-image: url(img/layout/ban_avatar_bg.jpg);
	height: 66px;
	width: 64px;
	float: left;
	background-repeat: no-repeat;
	padding-top: 1px;
	padding-left: 1px;
}

#head_user_info {
	background-image: url(img/layout/logged_info_bg.jpg);
	background-repeat: repeat-x;
	min-width: 225px;
	max-width: 500px;
	float: left;
	height: 66px;
	margin-left: -1px;
	font-family: "trebuchet MS", calibri, verdana, arial, sans-serif;
	font-size: 13px;
	color: #FFFFFF;
	padding-top: 4px;
	padding-right: 3px;
	padding-bottom: 0px;
	padding-left: 5px;
}

#head_user_info a:link { 
	text-decoration: none; 
	color: #5dbdfa;
	}
#head_user_info a:visited { 
	text-decoration: none; 
	color: #5dbdfa;
	}
#head_user_info a:hover, a:active { 
	text-decoration: none; 
	color: #7fc9f8;
	}

#head_user_end {
	float: left;
	background-image: url(img/layout/logged_info_end.jpg);
	background-repeat: no-repeat;
	height: 66px;
	width: 3px;
}

/*End Head User Info*/

/*Site Border Full*/

#right_border{
	background-image: url(img/layout/site_right_border.jpg);
	background-repeat: repeat-y;
	width: 3px;
	height: 100%;
	float: right;
	position: absolute;
	right: -3px;

}

#left_border{
	background-color: #94aec5;
	width: 1px;
	height: 100%;
	float: left;
	position: absolute;
	left: -1px;
}

#right_border_top{
	background-image: url(img/layout/header_right_border.jpg);
	background-repeat: repeat-y;
	width: 3px;
	height: 74px;
	float: right;
	position: absolute;
	right: -3px;
	z-index: 1000;
}

#left_border_top{
	background-color: #496986;
	width: 1px;
	height: 74px;
	float: left;
	position: absolute;
	left: -1px;
	z-index: 1000;
}


/*End Site Border Full*/

/*Menu*/

#menu{
	background-color: #417cb3;
	background-image: url(img/layout/menu_bg.jpg);
	background-repeat: repeat-x;
	height: 34px;
	width: 100%;
	clear: both;
}

/*End Menu*/

/* Top Ad Banner*/

#top_ad{
	background-color: #ededed;
	height: 109px;
	width: 100%;
	clear: both;
	max-width: 1204px;
	clear: both;
}

/*End Top Ad Banner*/

/* Main Content */

#main_content_container{
	background-color: #ffffff;
	background-repeat: repeat-x;
	height: 100%;
	width: 100%;
	clear: both;
}

#main_content{
	background-color: #cbe5ea;
	float: left;
	width: 77%;
	height: 100%;
	clear: both;
}

#right_content{
	background-color: #b6c984;
	float: right;
	width: 23%;
	height: 100%;
	clear: right;
	
}

/* End Main Content */

/* Border Pull */

#border_pull{
	height: 1px;
	width: 100%;
	clear: both;
	max-width: 1204px;
	clear: both;
}

/* End Border Pull */

So, is there any way for me to border the entire site with a 1 px border on the left side, and a y-repeating 3px image "border" on the right side?

Any ideas would be GREATLY appreciated!

If you need any more info than I've given you, please ask!

Thanks guys!

Mike

Hi guys,

First, please see this page: http://www.estyles.com.au/fotest/index.html

To do the menu, I found a tutorial on the net and modified that. It works fine in firefox, however does not work in IE; there is a border between the menu and the main container. How do I fix that?

Also, I have another problem. With the menu, I made the menu item that is selected have a larger border on the bottom; I did this so that the border would go over the top of the white border around the main content area, so the white border would be invisible under the selected button. Make sense?

Well, I'm trying to do the same thing with the "Test Block" area. I want the bit where it says "Test Block" to have a border on the left, top and right. I want the bit where it says "Testing" twice to have a border on the left, bottom and right, and also on the top but not where the "Test Block" bit joins this. I tried doing the same as the menu, ie giving the "Test Block" a larger border, but this time it actually makes the div bigger rather than overlapping the second one.

Any idea how to fix that?