|
CSS - Css Table Border Color Problem
I have a problem with applying a style for tableborders that is needed at the client I work at.
The client works with IE6 / IE7 only. In a portlet (JSF) content is loaded into a table that is automatically generated on the basis of CSS. The "house-style" in this company for using tables is set to the following: - The outer borders for the table are not visible - The border under the top-row is orange (#F60) - The borders under all other rows are grey (#808080) - The vertical borders are all orange (#F60) An example of what I mean is seen here (sketch from MS paint, poor quality and wrong colors!!!) : URL Anyone with suggestions on how to tackle this? I have found one solution that seems to work, but as soon as I change it (size, nr of rows etc) the right border shows again. I do not fully understand the code and there are no comments added. See below: 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" xml:lang="en" lang="en">
<head>
<title>Table with css</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html,body{text-align:center;}
* {margin:0;padding:0;}
html{font-size: 75%;}
body{background:#ccccff;font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;}
.tbla caption,.tbla,.tbla th,.tbla td{
border-color:#0099cc;
border-style:solid;
font-size:1em;
}
.tbla{border-collapse:collapse;}
.tbla th,.tbla td{padding:.5em;}
.tbla caption{background:#9999ff;border-width:1px 1px 0 1px;font-weight:600;padding-top:.7em;padding-bottom:.3em;}
.tbla th{text-align:center;font-weight:600;font-style:italic;}
.tbla{border-width:1px 0 1px 1px;width:100%;}
.tbla td{border-width:1px 1px 0 0;font-style:normal;}
.tbla th{border-width:0px 1px 0 0;color:#000000;font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;}
.tbla col{width:33.3%;}
.tbla .a{background:#ffccff;text-align:right;}
.tbla .b{background:#99ccff;text-align:left;}
.tbla .c{background:#ccffff;text-align:center;color:#ff0000;font-family:"Comic Sans MS", sans-serif;}
head+body .tbla tr td {background:#ffccff;text-align:right;}
head+body .tbla tr td + td {background:#99ccff;text-align:left;}
head+body .tbla tr td + td + td {background:#ccffff;text-align:center;color:#ff0000;font-family: "Comic Sans MS", Geneva, sans-serif;}
.x{width:64em;margin:1em auto;}
.tbla th:first-letter {color:#fe7807;}
.tbla th{text-transform:capitalize;}
</style>
</head>
<body>
<div class="x">
<table cellspacing="0" summary="aa" class="tbla">
<caption>table</caption>
<col class="a" /><col class="b" /><col class="c" />
<thead>
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
</thead>
<tbody>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one x</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>FF needs a Div to center ?</td>
<td>it detaches the </td>
<td>caption ?</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Similar Tutorialshi all. is there a way to change the css border-color attribute of a table with onmouseover? so the table, where the mouse is on, is highlighted in a new color? thanks. j0sh just getting into the css world for real, and im using it for the borders of a table: border:1px solid #000000; except this only does the outside border of the table, and not the borders for the rows/columns do i need to have another .cell in my css to get each one to work? Hi, I am having problem with the following table. It displays red border (#ff0000) around table in Internet explorer. In Firefox red border does not show at all. It is just #ccc. What can I do to have red border displayed in Firefox too? Code:
<table class="maintable">
<tr>
<th scope="col" nowrap>City</th>
<th scope="col">State</th>
<th scope="col">Zipcode</th>
</tr>
<tr><td align="center">London</td>
<td>England</td>
<td>12345</td>
</tr>
<tr><td align="center">Berlin</td>
<td>Germany</td>
<td>6789</td>
</tr>
</table>
.maintable {
line-height: 2.5em;
border: 1px solid #ff0000;
border-collapse: collapse;
}
.maintable th, .maintable td { padding: 0 5px; }
.maintable th {
border: 1px solid #ccc;
}
.maintable td {
border: 1px solid #ccc;
}
Thank you So I know that tables are a no-no now-a-days, but I am trying to help troubleshoot this problem without having to rebuild the site. So this problem only occurs in IE, of course! When you go to this page: http://dysonracing .com/company/news/archive.php?archive_year=2010 The grey box on the left that displays the news/events nav get a bit out of wack. What I mean by that is that the grey background on the table does not totally flow anymore. The left and right edges of the table dislay white at the top, then the grey about 1/2 way down and then black at the bottom, when the whole thing should be grey. It has a repeating background image. Even if I remove the image and just us the #333333 for the background color, issue is not solve. It is strange because this problem only happens if you are viewing one of the archive links at the bottom of the page. If you just click News+Events from the main nav, it looks fine. But go to an archive link and it get funky. Any ideas why this is displaying this way...and only in IE?! I'm building a site (still sort of a novice) using CSS and I can't seem to get the border colors to display correctly. I would like the top-border to be the same color as right and left. When viewed in Dreamweaver, the border appears orange but when viewed in browser, the border is black. How do I get the top border to be orange? Here is my CSS: Code: #right_body {
width: 708px;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
display: inline;
border-top: 3px;
border-top-style: solid;
border-top-color: FF6A00;
border-left: 2px;
border-left-style: solid;
border-left-color: #FF6A00;
border-right: 2px;
border-right-style: solid;
border-right-color: #FF6A00;
}
And my HTML: Code: <div id="left_side">left</div>
<div id="right_body"> middle </div>
<div id="right_side">right</div>
Like many programmers I use a combination of a bunch of different things to provide me the website I want. I use php, css, sql . . . more than one thing. I have a utility written in '04 by Patrick Fitzgerald (http://www.barelyfitz.com/projects/csscolor/) I use on almost every site I code. I don't put it in the page, I put it in the css file like this: Code:
<?php
header("Content-type: text/css");
include_once("../inc/csscolor.php");
include('inc/settings.inc');
$basea = new CSS_Color($darka);
$baseb = new CSS_Color($darkb);
?>
Then in the css I use something like Code:
.cart_button {
border:1px solid #<?= $baseb->bg['+2']; ?>;
padding:2 4;
background-color:<?= $baseb->bg['+3']; ?>;
color:black;
margin-bottom:-6;
}
#basket {
float:right;
width:140px;
border:1px solid <?= $baseb->bg['+3']; ?>;
padding:10px;
}
td.cart, th.cart {
border:1px solid <?= $baseb->bg['+3']; ?>;
padding:6px;
}
to display the color of elements. So here's my conundrum. I have elements with borders that aren't displaying. I'm pretty sure it's a compatibility issue. It renders in IE but not in FF. Thoughts? HeadElf i am trying to get rid of the border in IE9 or have the border color to match with the background color so that it doesn't look like there is one. This code works on google chrome but doesn't work on IE9. on the css i have: div.menu ul li a, div.menu ul li a:visited { background-color:#3a4f63; border: 1px #4e667d solid; color: #dde4ec; display: block; line-height: 1.35em; padding: 4px 20px; text-decoration: none; white-space: nowrap; border-color:#3a4f63; } on the asp page I have: <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal"> <Items> <asp:MenuItem Text="About Us"> </asp:MenuItem> <asp:MenuItem Text="Freight Services" Value="Freight Services"></asp:MenuItem> <asp:MenuItem Selectable="False"></asp:MenuItem> <asp:MenuItem Selectable="False"></asp:MenuItem> <asp:MenuItem Selectable="False"></asp:MenuItem> <asp:MenuItem Selectable="False"></asp:MenuItem> <asp:MenuItem Selectable="False"></asp:MenuItem> <asp:MenuItem Selectable="False"></asp:MenuItem> <asp:MenuItem Selectable="False"></asp:MenuItem> <asp:MenuItem Selectable="False"></asp:MenuItem> <asp:MenuItem Text="Customers" Value="Customers"></asp:MenuItem> <asp:MenuItem Selectable="False" Text="Carrier Corner" Value="Carrier Corner"> <asp:MenuItem Text="Carrier Setup" Value="Carrier Setup" NavigateUrl="~/Account/Register.aspx?ReturnUrl=~/Carrier.aspx&TypeOfUser=Carrier"></asp:MenuItem> </asp:MenuItem> <asp:MenuItem Text="Contact Us" Value="Contact Us"></asp:MenuItem> </Items> </asp:Menu> How can I use CSS to specify the color I want for the image borders on the page? 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>
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! 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> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </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? Alright, this is probably a simple fix but I can not find the solution anywhere. I'm trying to highlight a table cell with a 2px solid red border when it is clicked. Is there a way to get this to happen with out changing the size of the cell? I hope this makes sense. Basically the cell is expanding by 1 px causing movement in the table. I have an HTML table that contains a lot of data, so I want to separate the rows and columns with a grid. Nothing out of the ordinary. Basically make it look like an excel spreadsheet. A grid. The basic HTML border=1 property works, but I want to make the border thinner, just 1px, using CSS. I'm very new to CSS though so I don't know how. I tried style="border: 1px solid" but that just makes a border around the outside of the table. I want every cell to be isolated. Any ideas? Thanks. with border: 1px solid #FFFFFF; in css i got border only around the table I want the border to surround every cell of the table as it is with <table border="1" bordercolor="#FFFFFF" > how? Hi, I am making a website for my friend that lost her myspace acount becuase of here small uncle. So I want to make a website for her that is simmular to myspace. So my question is: How do I add in text up the top in the border that is 15xp? Thank you. I am having two problems with my tables right now: Within the style sheet, I have the following: table { border: thin #0000CC; } If I am not mistaken, this should make all tables that have a border of 1 or greater to automatically be thin and blue. This is not working... Why not? D Hello: I am building a ecommerce site, there are featured product on frontpage, I want to make a square border for each product, I have done top border and bottom border, but I don't know how to make the vertical lines on the right and left to make a nice square border with rounded corner the html structure is as followings table-----for the top border table-----to display product image and price, all that table-----for the bottom border I know by putting in css code for the middle table will be able to close this border could anyone tell me how? Hi I have a css file stating the following: A:link { color: #71828A } A:visited { color: #71828A } A:active { color: #71828A } ... of course this is applied to the whole page. I would like to set different link colors inside table data: #BottomTable TD A:link { color: #CCCCCC } ... but this doesnt work! Any ideas, please? Can this be done? My table is 4 columns with about 400 rows. I want to style the background color across each row but in fixed blocks/rows. i.e rows 1-55 red rows 55-60 green rows 61-100 red rows 121-158 green etc just using two colors. Any pointer in how it could be done? like you see in pic table rows are different color. but i wanna block this for popup. this is popup html Code: <tr> <td class="td_popup"><div class="f1">First Name :</div></td> <td class="td_popup"><input name="firstname" id="firstname" type="text" /></td> </tr> js for css Code:
$(document).ready(function() {
zebraRows('tr:odd td', 'odd');
$('tbody tr').hover(function(){
$(this).find('td').addClass('hovered');
}, function(){
$(this).find('td').removeClass('hovered');
});
//default each row to visible
$('tbody tr').addClass('visible');
css Code:
th:hover {
cursor:pointer;
}
.td1
{
background:#666666;
height:25px;
text-align:left;
font-weight:bold;
font:arial;
font-size:12px;
line-height:10px;
color:#FFFFFF;
padding:2px;
margin-left:auto;
margin-right:auto;
text-indent:3px;
}
td.odd {
background-color:#F0F0F0;
}
.td_popup{
background-color:#DDD;
}
|
|||||||