CSS - Css Borders - What Am I Doing Wrong

While styling table I would like to have black row border all the way, but currently cell borders (grey) overlay them (1px, but still) - like in the image:


Bellow is my css. What do I change? Thanks.

Code:

.list_f  {

	padding: 0px;
	margin: 0px;
	
	border-width: 1px;
	border-style: solid;
	border-color: #F1EFE2;
	border-collapse: collapse;
	empty-cells: show;

	border-top: 0px; 
	border-bottom: 0px;
	border-left: 0px;
	border-right: 0px;
	
			
}

.list_f th {
	text-decoration:none;
	font-weight:normal;
	background-color:#F3F3F3;
		
	margin: 0px;
	padding: 2px;
	/*	text-align: left;*/
	vertical-align:middle;
	height:22px;

	border-collapse: collapse;	
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000000;
	border-right-color: #CCCCCC;
	border-bottom-color: #000000;
	border-left-color: #CCCCCC;
}

.list_f td {
	margin: 0px;
	padding: 2px;
	border-collapse: collapse;
	vertical-align:middle;
	height:22px;
	

	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000000;
	border-right-color: #EBEBEB;
	border-bottom-color: #000000;
	border-left-color: #EBEBEB;

}
.list_f tr {
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #000000;
	border-bottom-color: #000000;
}

I'm sure there is a simple solution, but I'm drawing a blank. I'm trying to line up absolute divs but running into an issue where IE includes the border in the width and Netscape appears to tack the borders on - so if I have a div with a width of 100px and a border of 5px, IE diplays 100px, inclusive of the border. Netscape appears to dispay a div with a total width of 110px.

<div align="center" class="box" style="top:49px; left:111px; width:100px; height:100px"><br>Test<br></div>

.box {position:absolute; border: 5px double black; font: 200 9px arial}


Havn't been able to find the property that may control this.

????

I am learning CSS and wish to put a border around selected tables using the following code:

table.sidebar
{
border: 2px black;
padding: 50px

}


Something similar to this code was working OK earlier today, but now it won't. The cell padding command works, but other tags like border, width, etc., are not. I have tried disabling all other table styles in the CSS.

Any ideas? I am using MS FrontPage 2002. Also, whys is it that when I apply a style to a table, like the one above, FrontPage puts in the following HTML code:

<table class="sidebar" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0">

If I go to remove it to
<table class="sidebar">
all of the formatting is lost. Seems like this is defeating the whole purpose of CSS

Thanks,

Keith

hi all,

hoping someone could help me with an issue i'm having in css involving borders (sort of). hopefully this is the appropriate place for this question, as it does involve some html.

i have a page divided into three vertical frames (i know, i know...frames are not ideal. but i would like to keep the page in this format for specific reasons). the border is set to "0" in each frame, but on the left and right frames i use a bit of css code to create a colored border on the right hand side for the left frame, and on the left hand side for the right frame (it creates a kind of vertical outline for the middle frame). hopefully this makes sense. after completely finishing the website and uploading it to my ftp, i found that it works perfectly, except when opened in firefox or navigator. when opened with either of these browsers, the content and most of the design loads fine, but the colored borders in the outer frames are offset from their sides maybe a quarter of an inch. i can't figure out what's causing it, but i know it has something to do with the border code.
as i would like this site to be as compatible as possible with most popular browsers, i'd like to try and fix this somehow. i've posted my code following this message in hopes that someone could offer suggestions. any advice would be greatly appreciated.


frames created in index.htm:
Code:

<frameset cols = "25%, 50%, 25%" border = "0">
<frame name = "side1" src = "blankleft.htm" scrolling = "no">
<frame name = "middle" src = "main.htm">
<frame name = "side2" src = "blankright.htm" scrolling = "no">
</frameset>

colored border for the left frame (side1):
Code:

<style type = "text/css">
body 
{ 
border-left: 0px solid #607046;
border-right: 2px solid #607046;
border-top: 0px solid #607046;
border-bottom: 0px solid #607046;
}
</style>

colored border for the right frame (side2):
Code:

<style type = "text/css">
body 
{ 
border-left: 2px solid #607046;
border-right: 0px solid #607046;
border-top: 0px solid #607046;
border-bottom: 0px solid #607046;
}
</style>

Hi

I'm currently testing my code within the firefox browser and have found that no borders appear whatsoever.

I was using the dotted border however changed it to solid to see if that made a difference however this did not help.

The css I use for the <div> is as follows:

Code:

.div_surround {
	width:185px;
	min-height:200px;
	float:left;
	margin-top:5px;
	margin-right:5px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
	border-left-style: solid;
	border-left-color: #CCCCCC;
	border:1px;
}

I know a lot of people dont like the width to be specific pixels however unless this makes a difference to my situation, please ignore this for the time being. I am looking to change it in the future.

By the way this code works fine in IE where I see a box with a bottom and left border.

Thanks in advance for any help.

Billabang!

Hey, searched so don't give me crap.

I have 2 images, searchleft.jpg (looks like { ) and searchright.jpg (looks like } )

I only posted the Doc type just incase, I validated my webpage(www.gameyin.com) and nothing that could hurt this has happened. Anyway I want the rounded borders on the left center, for searchleft.jpg and a roundedborder for searchright.jpg on the right center. I hope I have been very clear. All the searches need 4 images...anyway...

PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css">
html {
    height: 100%;
    overflow: scroll;
}
body {
    font-family: tahoma, arial, sans-serif;
    font-size: 11px;
    background: #DEDEBA;
    margin: 0px 0px 0px 0px;
    color: #DEDEBA;
}
input, option, select, textarea {
    font-family: verdana, tahoma, arial, sans-serif;
    font-size: 11px;
}
.search {
    margin: 0px;
    padding: 5px 5px 5px 7px;
    width: 366px;
    height: 24px;
    float: right;
}
.input-search {
    width: 259px;
    margin: 0px 5px 0px 0px;
    padding: 5px;
    background: #DEDEBA;
    border-color: #666666;
    float: left;
    text-shadow: 808080;
    color: #808080;
}
</style>
    <script type="text/javascript" src="webfunctions.js"></script>
</head>
<body>

            <div class="search">
     <form action="search.php" method="post" style="display:inline;">
            <div>
<input type="text" name="search" class="input-search" value="Enter your Search Query" onblur="if(this.value=='') this.value='Enter your Search Query';" onfocus="if(this.value=='Enter your Search Query') this.value='';" />
<input type="image" src="images/search.gif" /></div>
</form>
</div> 

if someone would, check out my testing grounds website... jon.endysis.org

there are 3px #fff double borders going along each side of the layout (you can see them on either side of the space shuttle background) that are supposed to extend all the way down the layout, but only go until the end of the shuttle. I've learned that if I just have html br /'s after the the shuttle part they extend down for those, but for some reason don't extend down for my div class="contentleft" and my div class="contentright".

if anyone wants to check my source, div id="racingstripes" is the layer that has the stripes, and it has ONLY the stripes.

my css is:
#racingstripes{
border-right:3px #fff double;
border-left:3px #fff double;
}

any ideas please? i can't figure it out. thanks for any help!

I have a onMouseOver event that draws a top border over text. This works fine with Mozilla/Firefox, but it doesn't render in IE. I think I know why -- it's because I used CSS to position the text beforehand, and in IE it doesn't bother drawing the top border because it's out of the text's bounding box, right?

So, how do I fix this so it works in IE?

I've posted a sample page with the problem he
http://aaron.verge-rpg.com/vergebrd/test.html

Any help would be appreciated.

I am trying to make a nice thin border around a table and all the table cells. It need to work on both windows and macs...
If I add this to my table tag [ style="border-collapse: collapse" bordercolor="#808080" ] it give me a nice border in IE, but not so great on a mac (big and thick). I also want to be able to add it into a style sheet and just add the style tag to the table, but I can't seem to get any of it to work. Anyone have any examples or advice?

Thanks!

how can i use:

css Code:
Original - css Code .t {background: url(../images/dot.gif) 0 0 repeat-x; width: 20em; width:80%; left:50%; margin:20px; } .b {background: url(../images/dot.gif) 0 100% repeat-x} .l {background: url(../images/dot.gif) 0 0 repeat-y} .r {background: url(../images/dot.gif) 100% 0 repeat-y} .bl {background: url(../images/bl.gif) 0 100% no-repeat} .br {background: url(../images/br.gif) 100% 100% no-repeat} .tl {background: url(../images/tl.gif) 0 0 no-repeat} .tr {background: url(../images/tr.gif) 100% 0 no-repeat; padding:5px; } .t-exif {background: url(../images/dot.gif) 0 0 repeat-x; width: 20em; width:200px; right:0px;} .b-exif {background: url(../images/dot.gif) 0 100% repeat-x} .l-exif {background: url(../images/dot.gif) 0 0 repeat-y} .r-exif {background: url(../images/dot.gif) 100% 0 repeat-y} .bl-exif {background: url(../images/bl.gif) 0 100% no-repeat} .br-exif {background: url(../images/br.gif) 100% 100% no-repeat} .tl-exif {background: url(../images/tl.gif) 0 0 no-repeat} .tr-exif {background: url(../images/tr.gif) 100% 0 no-repeat; padding:10px; }

  

  .t {background: url(../images/dot.gif) 0 0 repeat-x; width: 20em; width:80%; left:50%; margin:20px; }


 .b {background: url(../images/dot.gif) 0 100% repeat-x}


 .l {background: url(../images/dot.gif) 0 0 repeat-y}


 .r {background: url(../images/dot.gif) 100% 0 repeat-y}


 .bl {background: url(../images/bl.gif) 0 100% no-repeat}


 .br {background: url(../images/br.gif) 100% 100% no-repeat}


 .tl {background: url(../images/tl.gif) 0 0 no-repeat}


 .tr {background: url(../images/tr.gif) 100% 0 no-repeat; padding:5px; }


  


  


  .t-exif {background: url(../images/dot.gif) 0 0 repeat-x; width: 20em; width:200px; right:0px;}


 .b-exif {background: url(../images/dot.gif) 0 100% repeat-x}


 .l-exif {background: url(../images/dot.gif) 0 0 repeat-y}


 .r-exif {background: url(../images/dot.gif) 100% 0 repeat-y}


 .bl-exif {background: url(../images/bl.gif) 0 100% no-repeat}


 .br-exif {background: url(../images/br.gif) 100% 100% no-repeat}


 .tl-exif {background: url(../images/tl.gif) 0 0 no-repeat}


 .tr-exif {background: url(../images/tr.gif) 100% 0 no-repeat; padding:10px; } 

to make my exif info box appear on the right of the image?
i have tried using right:0px but it doesn't work, any ideas?
current display page

I'd like to have a class in my style sheet that gives a table a 1 px border, something like this:

Quote:
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
<tr>
<td width="100%">test</td>
</tr>
</table>


But I'm unsure how to do it.

I have a site that uses many tables to display lists of data. I would like to use CSS to clean up these tables. In particular I want to put round corners around each table as a border. The tables vary in width and height so how can I do this?

Hi Guys,

Beat with me because ive just started using CSS for positioning etc and im giving it a whirl before I try it for a live project.

I have an annoying problem though which I cannot seem to solve whereby the border doesn't show fully in IE but in Mozilla it does?

I tried vary the code a bit in the CSS and I would either lose the top border, bottom border or both...? Bizarre.

Here is the code it is very simple and you can see where I am going with it.

I appreciate the help. Thanks!

<style>

body{
background-color: white;
color: #0083D7;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
margin: 0;
padding: 0;
text-align: center;
}

#wrapper{
width: 770px;
color: white;
margin: 10px auto;
text-align: left;
color: #666666;
}

#logo{
height: 70px;
}

/**
* Top Navigation Under Logo.
**/

#nav{
margin: 0;
padding: 0;
}

#nav ul{
padding: 0;
margin: 0;
}

#nav ul li{
display: inline;
padding: 0;
margin: 0;
}

#nav ul li a{
font-size: 90%;
color: #0083D7;
font-weight: bold;
text-decoration: none;
text-align: left;
border: 1px solid #0083D7;
padding: 4px;
line-height: 25px;
}

#nav ul li a:hover, #nav ul li a:focus{
background-color: #0083D7;
color: #FFEF00;
}

</style>

</head>

<body>

<div id="wrapper">

<div id="logo"></div>

<div id="nav">
<ul>
<li><a href="#">Holidays</a></li>
<li><a href="#">Flights</a></li>
<li><a href="#">Accommodation</a></li>
<li><a href="#">Ski</a></li>
<li><a href="#">Cruise</a></li>
<li><a href="#">Holiday Insurance</a></li>
<li><a href="#">Travel Guides</a></li>
</ul>
</div>

</div>

</body>

How do i apply visible and formated border to a certain cells without afecting the entire column or row?

Im using the border properties like:

border-buttom-style
border-top-style
border-left-style
border-right-style
border-width
border-color

etc, etc, but when apply the style the colum or the row is affected entirely, this makes my top sliced image (header) with the separators visible. Im new to css and need some help in doing this. Thx

I have this code:

Code:

<html>
<head>
<style type="text/css">

body {
	font-family: arial, helvetica, serif;
	font-size: 100%;
	background: white;
	padding: 2em;
	margin: 0;
}

#content {
	width: 34em;
	background-color: #ffffff;
	padding: 1em 0;
	border: 6px double #6DA9CA;
	margin: auto;
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 32em;
}
html>body #content {
	width: 32em;
} 

a {
	text-decoration: none;
}

a:link {
	color: #080;
}

a:visited {
	color: #790;
}

a:active {
	color: red;
}

a:hover {
	text-decoration: underline;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  }
	
li {
	float: left;
	position: relative;
	width: 10em;
	text-align: left;
	cursor: default;
	background-color: white;
}
	
li ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	font-weight: normal;
	padding: 0.5em 0 1em 0;
	border: solid 1px #6DA9CA;
}

#submenu li ul {
	border: solid 1px #6DA9CA;
}

li>ul {
	top: auto;
	left: auto;
}

#nav a {
	color: black;
}

#nav a {
	text-decoration: none;
}

#nav li li a {
	display: block;
	font-weight: normal;
	color: #060;
	padding: 0.2em 10px;
}

#nav li li a:hover {
	padding: 0.2em 5px;
	border: 5px solid #6DA9CA;
	border-width: 0 5px;
}
	
li:hover ul, li.over ul{ display: block; }
	
</style>
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;
</script>
</head>
<body>

<ul id="nav">
  <li><a href="">Home</a></li>

  <li><a href="">Guiding Principles</a></li>

  <li>Background & Qualifications</a>
    <ul>
      <li><a href="">Biography</a></li>
      <li><a href="">Dispute Resolution</a></li>
    </ul>
  </li>
	
  <li>Developments
    <ul>
      <li><a href="">International</a></li>
			<li><a href="">Specialty & Agrichemical News & Regulations</a></li>
			<li><a href="">Archive</a></li>
    </ul>
  </li>
	
	<li><a href="">Other Resources</a></li>
</ul>

</body>
</html>

And I like it - but I have one problem - I want there to be lines between each of the <li>s in the submenus - meaning between Biography and Dispute Resolution I want a line - I know there is no border-middle value - so how do I do this?