CSS - Custom Borders, How To Modify This Example?

Is it possible to have more than one border in CSS? I want to have a grey and green border around an area of text, something like this.

So is it possible to have two or more borders in CSS and if so, how?

Hi All,

I am trying to set a style in my CSS that will show a border-bottom for an entire row. So far I can only get it to work on a per cell (<td>) basis.

I am using Dreamweaver MX 2004 and when I select an entire row and assign it a style, it just add's it to the <tr> tags at the top of those rows.

Code:

<!-- This is a Row that is at the top of the table -->
<table width="100%"  border="0" class="fullwidth">
  <tr>
    <td class="head">This is a header </td>
  </tr>
</table>

<!-- This is where I want the border-bottom attribute to show up -->
<table width="100%"  border="0" cellpadding="2" cellspacing="1" class="list">
  <tr class="list">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="list">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="list">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="list">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="list">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Here is the CSS:
Code:

table.fullwidth
{width: 100%;
background-color: #FFFFFF;
border: 0px;
border-collapse: collapse;
border-spacing: 0px;}

tr.list
{background-color: #EFEFEF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #000000;
border-bottom: 1px dotted #000000;}

Can any one suggest a better CSS script for having a border in IE
So far I have the following:
PHP Code:
 border: 1px solid #0099CC; 




The problem is that when ran in IE, the top border does not show. However it works fine in firefox. Also I get warnings on my script when I run my CSS validation tool.

Can any one help.
Thge URL is
http://pfwd.org.uk/sfd/update_test3.php

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?

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

q) In CSS or html, how can make my buttons and borders around a screen section ( created with css) have roundish borders and regular not corners

q) How can i get the colors of such buttons to be a bit more exciting eg go from ligh to dark blue instead 1 uniform color?

Hi, Im not sure what the problem is with my code, but it gives me full borders when I ask for only top and bottom. Here is my CSS.
css Code:
Original - css Code .logo{ width: 100%; border: 1px solid #FFFFFF; font-size: 32px; } .menu{ width: 150px; height: 320px; border: 1px solid #FFFFFF; text-align: left; } a.menu{ border-top: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; color: #FFFFFF; width: 100%; }

  

 .logo{


     width: 100%;


     border: 1px solid #FFFFFF;


     font-size: 32px;


 }


 .menu{


     width: 150px;


     height: 320px;


     border: 1px solid #FFFFFF;


     text-align: left;


 }


 a.menu{


     border-top: 1px solid #FFFFFF;


     border-bottom: 1px solid #FFFFFF;


     color: #FFFFFF;


     width: 100%;


 } 

Here is my html of that part.
html Code:
Original - html Code <span style="float: left"> <div class="menu"> <a href="" class="menu">asdf</a><br /> <a href="" class="menu">asdf</a><br />

  
<span style="float: left">
    <div class="menu">
    <a href="" class="menu">asdf</a><br />
    <a href="" class="menu">asdf</a><br />

Here is what it outputs. http://blacknine.net/test.html

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!

One thing I've never been able to replicate using CSS that you can do w/ tables is a simple content area with tab, where the border goes just around those areas and there's a set width for the tab but no set width to the area beneath it. I'll try to graphically depict what I mean he
_____________
|************|____________________
|*********************************|
|*********************************|
|*********************************|
|*********************************|
|*********************************|
-------------------------------------------------

Seems simple enough, right? Just imagine that's a solid border and the asterisks are the content area, and I want to create this using only CSS and divs. The tab, say, is fixed at 100px, but the area below is at some percent, say 90% of the page.

The problem ends up being the portion to the right of the tab. I need to create a div there so that the top right border is drawn, which is really the bottom border of that space. I can't simply give the area below a top border because then it would place a border under the tab, and I want the tab to be seamless with the area beneath.

CSS can't figure out what the remaining width of the div to the right of the tab (at least without using the under developed display:table-cell), so I can't specify the width of that div, which means I can't know how far to extend it to reach the right side of the area below.

So, generally, as far as I can tell, the above depiction can't be done without tables. Can anyone find a workaround? Please let me know if I'm not explaining this well enough. Thanks!

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

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> 

Hi,

Someone I know is trying to find a way of putting a border round an image (say 1px white) followed by another border around that (say 1px blue).

Anyone done this or have a good idea of a way to do it?

thanks

Hi I have built some nav buttons on my site and they looked as I wanted however when i attached links to them a border appeared around the image can someone tell me how to get rid of them please. DYNAMIC WEB DESIGN thankyou in advance.

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!

I have a page and it's a massive mess of nested tables and abs-positioned divs. Amongst these are two that become visible/invisible on the onclick of a checkbox. They start out with display:none inline.

Still with me?

There arent any floating elements in use, and pretty much everything has a width and height specified, so if there's some hasLayout freakyness going on i'd love to know what.

Anyway, in IE7 when you click said checkboxes their target divs and thier contents appear correctly - but the divs' borders are missing, re-toggling the checkbox off and on again shows the border and then again for any subsequent re-showing. it's just the initial setting of display:''

I can't post the code but it looks something ten times freakier than the attatched recreation attempt, unfortunately i can't rectreate it, but you'll get the idea.

Can anyone help? I'm going to try running some javascript after the page has loaded to do a quick double toggle to simulate the first no-border instance!