|
CSS - Css Table Problem
Hello,
If you visit http://www.tombraiders.net/katie/ccjc/serving.html user: letme pass: in You'll see the mess I've made with my sad attempt at using CSS instead of tables! :P It's supposed to be a 2 column table, with "The Well" in the left, "Annual Reports" in the right, etc, but it's gone crazy on me. I have NO idea how to even attempt to fix this Similar TutorialsI have a dynamic table that is in the cell of another table. For the life of me I cant get it to stick to the top of the cell. It wants to sit at the midline of it vertically. Thanks for reading. I have a CSS defined table that is giving me a problem in IE. In Firefox, the table cells have no space between them, but I can't get rid of the space between cells in IE. It's only a couple of pixels between each cell but this is messing up the look of the page. [code] CSS #tabnav { position : absolute; left: 28px; top: 7px; } #tabnav tr td { position: relative; float: left; margin: 0px; padding: 1px; border-collapse: collapse; border-style: solid; border-width: 1px; border-color: black; width: 100px; height: 35px; text-align: center; vertical-align: middle; } [code] I'm working on this site: www.wirelessguy.net I have this coded into my css file for the table in the iFrame: Code:
table#welcome
{
border:1px dotted red;/*testing out table*/
height:100%;
width:100%;
}
The html looks like this for the table: Code:
<table id="welcome">
<tr>
<th id="welcome">Welcome to the American Communications Web Site</th>
</tr>
</table>
The table will not fill up the iframe, and it's not lining up in the middle. Anyone have any ideas? Ok, so I'm making a website using tables and css since I personally hate using <div>. Anyway, it's going fine except for one problem. There is air between my cells. I wanted to show a SS of it, but apparantly I'm not allowed to post either links to the picture nor attach pictures to my thread, so I'll try to explain it. Now, the html code for the tables looks like this: Quote: <table class="center"> <tr> <td class="top"> <img src="img/top.jpg" alt="top" /> </td> </tr> <tr> <td class="horizontal"></td> </tr> </table> The is air between my two cells here. My horizontal border wont connect to my top cell containing the top.jpg. The CSS code for trying to make the cells connect looks like this: Quote: table.center { width: 590px; margin-left: auto; margin-right: auto; border-spacing: 0px; border-collapse: collapse; } tr, th { padding: 0px; } td.horizontal { width: 590px; height: 2px; background: #28847F; padding: 0px; } td.top { width: 590px; height: 91px; padding: 0px; } How come the two freakin' cells wont connect? Why does this look right in IE and not in FF3? My cells should have spacing between them. http://www.coleman-designs.com/portfolio.html I've used my standard reset.css and controlled the elements I need. Code:
------------------HTML---------------------------
<table border="0" cellspacing="10" cellpadding="0" class="portgal">
<tr>
<td><a href="images/portfolio/portfolio1.jpg" rel="lightbox"><img src="images/portfolio/portfolio1_thumb.jpg" align="absmiddle"/></a></td>
<td><a href="images/portfolio/portfolio2.jpg" rel="lightbox"><img src="images/portfolio/portfolio2_thumb.jpg"/></a></td>
<td><a href="images/portfolio/portfolio3.jpg" rel="lightbox"><img src="images/portfolio/portfolio3_thumb.jpg"/></a></td>
</tr>
<tr>
<td><a href="images/portfolio/portfolio4.jpg" rel="lightbox"><img src="images/portfolio/portfolio4_thumb.jpg"/></a></td>
<!-- <td> </td>
<td> </td> -->
</tr>
</table>
----------------CSS-----------
table {
border-collapse: separate;
}
.portgal td { background:none; border:solid; border-width:5px; border-color:#FFF; height: 160px; width: 180px;}
.portgal { margin-left:-29px; }
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 This code results in a DIV box with 1 pixle borders, with tabs at the top. Code: <html>
<head>
<title>Untitled</title>
<style type="text/css" media="screen">
/* Top Tab Menu */
#navlist
{
border-bottom: 1px solid #ccc;
margin: 0;
padding-bottom: 19px;
padding-left: 10px;
}
#navlist ul, #navlist li
{
display: inline;
list-style-type: none;
margin: 0;
padding: 0;
}
#navlist a:link, #navlist a:visited
{
background: #E8EBF0;
border: 1px solid #ccc;
color: #666;
float: left;
font-weight: normal;
line-height: 14px;
margin-right: 8px;
padding: 2px 10px 2px 10px;
text-decoration: none;
}
#navlist a:link#current, #navlist a:visited#current
{
background: #fff;
border-bottom: 1px solid #fff;
color: #000;
}
#navlist a:hover
{
color: #666;
background: #fff;
}
/* Big Box Below Tabs */
#content_box {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
body {
margin: 10px;
}
</style>
<title>Test</title>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Test One</a></li>
<li><a href="#">Test two</a></li>
<li><a href="#">Test three</a></li>
<li><a href="#">Test four</a></li>
<li><a href="#">Test five</a></li>
</ul>
</div>
<div id="content_box">
<table width="100%" border="0" cellpadding="5">
<tr>
<td>
Test<br />Test<br />Test
</td>
</tr>
</table>
</div>
</body>
</html>
In it, is a table with 100% width which will hold row data from a database. It works very well if Firefox. But in IE, the right edge of the DIV box is pushed to the right by two pixles. I believe it is the table doing this. I'm not understading how to have the non fixed width DIV contain a non fixed width table. See the real thing at Siliconsatan.com/example.php See a close up image below. Hi I've been converting my site to start using CSS and am currently working on a transistional layout. It works perfectly in Firefox, but IE 6 has other ideas. At the moment its a fairly simple table, with a Logo at the top and nav bar, content, and then a footer. I want this to fill 100% of the height of the screen (which its doing), how ever there is a mysterious gap under the nav bar , where by the cell decides not to size to the 151px i have told it to do. Instead it creates a hefty gap (i've colour this gray for clarity). I'm not sure if it's something to do with the way I have handled the Nav bar using a list. The link is http://www.cartagteam.co.uk/xhtml2.php to the page with the problem. Thanks 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 have a table which i want to have cellpadding of 6. when i view it in ie it works perfectly, but when i view it in firefox it adds about 12 and makes the padding huge. any ideas whats wrong? i've found that firefox seems to screw alot of css things up. heres the code im using: Code: <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-top: 1px solid #C0C0C0; border-bottom: 1px solid #C0C0C0" bordercolor="#111111" width="100%" id="AutoNumber1" background="network_bg.jpg"> <tr> <td width="100%"> <table border="0" cellpadding="6" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" id="AutoNumber2" align="right" width="947"> <tr> <td> </td> <td> I have managed to make a work around for the nasty old table, but I am having a problem with my text's vertical align in the header part of the code. You can see what it is doing he www.crxgames.com/spade/portal/profile.php?mode=view Here is the css: Code:
/*CSS: FAKING THE TABLE :)*/
.css_table {
border: 1px solid #2555B4;
background-color: #FFFFFF;
margin: 0px;
}
.css_table ul {
margin: 0px; padding-top: 1px; padding-bottom: 1px; padding-left: 1px; LIST-STYLE-TYPE: none;
}
.css_table li {
margin-left: 0px;
}
.css_table ul li {
margin-left: 0px;
}
.css_table_header {
background-color: #4382C0;
background-image: url(images/cellpic_th.gif);
height: 24px;
color: #FFFFFF;
font-size: 11px;
font-weight: bold;
}
.css_table_footer{
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: dashed;
border-top-color: #8BA5BE;
border-right-color: #8BA5BE;
border-bottom-color: #8BA5BE;
border-left-color: #8BA5BE;
background-color: #ECE9D8;
background-image: url(images/cellpic_td.gif);
background-position: bottom;
background-repeat: repeat-x;
height: 24px;
padding-bottom: 0px;
padding-top: 0px;
}
and here is the html Code: <div class="css_table"> <div class="css_table_header"> Boo! Did it work?</div> <ul> <li>sadf</li> <li>asdfasdf</li> </ul> <div class="css_table_footer"> </div> </div> Does anyone know how to fix this? Hi again, Can anyone let me know if they have encountered this problem before. Its caused me around 12hrs of headaches so far.. The problem is that in Firefox this works perfectly, but in IE7 i cannot get it to be 100% of the browser window, it always takes 100% of the gif image. A good test is with a browser window of 800x600 If I change class test to fixed width for example width:614; instead of width:100%; then it seems to work perfectly again. Many thanks in advance. G. -----SNIP <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <style> .test { z-index:1; width:100%; overflow: auto; } </style> </HEAD> <BODY> <table width="100%" border="1" cellpadding="0" cellspacing="0"> <tr> <td><img src="(URL address blocked: See forum rules)" width="169"></td> <td width="100%"> <div class="test"> <table><tr><td><img src="(URL address blocked: See forum rules)"></td></tr></table> </div> </td> <td><img src="(URL address blocked: See forum rules)" width="169"></td> </tr> </table> </BODY> </HTML> ------- I see my images have been removed, the two outer cells are just a 169 wide spacer The inner image was 850 wide, just add any image of this size to try. Thanks again. G Hi all! I am stuck with writing my first CSS style based website. First you should know that I'm using a external CSS script. What do I have? I have a page with a background image. Then I need text right? Well I need to align the text, to do so, I created this (for the index page): Code: <div id="content"> <div id="colOne"> <p></p> </div> <div id="colTwo"> <p></p> </div> </div> To style it with CSS, I wrote this in my external STYLE.CSS script: Code:
#colOne {
float: left;
width: 500px;
}
#colTwo {
float: right;
width: 184px;
}
This all works, I have 2 'tables' almost next to each other. Well now you know how my script works, it may help you find a solution for my question: ----- Because my background has light and dark colours, I want to create a 50% invisible background for my table, so the text is more visible and I am still able to see the background. I found out, that I have to use a image and use this code: Code: <div style="width:250px;margin:0 auto;"> <span style="float:left;filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;"> <img src="image.gif"></span> </div> Let say image.gif is a black image100*100, when you apply this code, you will be able to look trough the image. so I thought I could use it onto my tables, take a small black image, make it the background, let it repeat it so the whole table would be black, and then apply the code... but I don't know how, because the script is not written for a external CSS script, and I don't know how to use a image as a table background. Can anyone please tell me how to do this? I prefer that you complete my script(A) Thanks for helping me out, Stef I have a table and whatever background i put in it it only shows a part of the background at the bottom of the table. if i put another table in the excisting one and then put a background in the new one then it works , But this way it ruins the layout . <tr> <td colspan="4" background="images/Untitled-3.s_12.gif" bgcolor="#FFFFFF"></td> </tr> by removing the bgcolor i get the same result.. CSS is simple and includes : body { background-image: url(images/bg.gif); } .style4 {color: #000000} .style5 { color: #FF0000; font-weight: bold; } .style6 {font-size: 10px} --> Regards , Kevin sorry for posting this in HTML forum also. 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>
So does anyone use div tags only and no tables at all? Not even for tabular data? Hey all, I'm working with a table in which the top row serves as column headers. Each column header can have a label-link as well as two graphics representing options for selecting an ascending or descending sort. The images are done through CSS so to allow use of :hover for mouse-over image swapping. My problem is that I can't figure out a combination of CSS to make it so that, should a person's resolution be too low or should they narrow their browser window to the point where it attempts to reduce column width, that the text and images remain side-by-side. A sample of the problem can be found he http://www.weblifenetwork.net/sample.html In this sample the first cell has a small, secondary table within it for the purpose of demonstrating the behavior I'm after. The second cell is kind of my current test cell (and the closest I've gotten to the correct behavior as of this post), and all other cells are using the same problematic CSS. As you enlarge/reduce the width of your browser, you should notice this behavior: First Cell: No wrapping. No display anomalies. Second Cell: Unwanted wrapping. No display anomalies. Other Cells: No wrapping. Images begin flowing over text. Text extends into neighboring cell. Any help in duplicating the behavior of the first cell using only CSS would be greatly appreciated. I've spent over a day in a CSS IRC channel to no avail. Hello, I was hoping somebody can help me. I have been playing around with the problem, but I can't seem to figure it out. It is regarding my navbar not aligning properly in firefox. If you view this section of my site . com/musicians/ In IE it looks as it should, however in firefox it's way off on the right. I am using 2 stylesheets for this page; . com/wp-content/themes/WP-Genius/style-music.css . com/musicians/skins/Nova/Nova.css If anybody can provide me some insight on how to fix this, that would be greatly appreciated Thanks! hi, In my site, I'm trying to make the menu in a table. The table has many images, which only some are links. I did it so that hovering over a link cell, changes the image in the cell (and actually all of the link images are from one file, which everytime I show a different part of him). Now, everything seems to be working fine in Firefox and IE7, however, naturally IE6 doesn't work. Actually only the first cell, "Home", works, and the others don't. Any idea how can I fix it? here is the html for the menu: <div id="menu"> <table width="679" border="0" cellpadding="0" cellspacing="4"> <tr> <td class="link" id="nav_home"><a href="../home/index.htm" title="home">home</a></td> <td background="../../images/1.jpg"> </td> <td background="../../images/2.jpg"> </td> <td class="link" id="nav_about"><a href="../about/main.htm" title="about">about us</a></td> <td background="../../images/3.jpg"> </td> <td background="../../images/4.jpg"> </td> <td background="../../images/5.jpg"> </td> <td class="link" id="nav_recruit"><a href="../recruit/" title="recruit">recruit</a></td> <td background="../../images/6.jpg"> </td> </tr> <tr> <td background="../../images/7.jpg"> </td> <td background="../../images/8.jpg"> </td> <td class="link" id="nav_company"><a href="../company/outline.htm" title="company">company</a></td> <td background="../../images/9.jpg"> </td> <td background="../../images/10.jpg"> </td> <td class="link" id="nav_clients"><a href="../clients/clients.htm" title="clients">clients</a></td> <td background="../../images/11.jpg"> </td> <td background="../../images/12.jpg"> </td> <td class="link" id="nav_contacts"><a href="../contacts/contacts.htm" title="contacts">contacts</a></td> </tr> </table> </div> and here is the css: /* Regular menu items */ #nav_company {background: transparent url(../images/menu.jpg) 0 0 no-repeat;} #nav_about {background: transparent url(../images/menu.jpg) -71px 0 no-repeat;} #nav_clients {background: transparent url(../images/menu.jpg) -142px 0 no-repeat;} #nav_recruit {background: transparent url(../images/menu.jpg) -213px 0 no-repeat;} #nav_contacts {background: transparent url(../images/menu.jpg) -284px 0 no-repeat;} #nav_home {background: transparent url(../images/menu.jpg) -355px 0 no-repeat;} /* Hovered menu items */ #nav_company a:hover {background: transparent url(../images/menu.jpg) 0 -62px no-repeat;} #nav_about a:hover {background: transparent url(../images/menu.jpg) -71px -62px no-repeat;} #nav_clients a:hover {background: transparent url(../images/menu.jpg) -142px -62px no-repeat;} #nav_recruit a:hover {background: transparent url(../images/menu.jpg) -213px -62px no-repeat;} #nav_contacts a:hover {background: transparent url(../images/menu.jpg) -284px -62px no-repeat;} #nav_home a:hover {background: transparent url(../images/menu.jpg) -355px -62px no-repeat;} /* Active menu items */ body#company #nav_company {background: transparent url(../images/menu.jpg) 0 -62px no-repeat;} body#about #nav_about {background: transparent url(../images/menu.jpg) -71px -62px no-repeat;} body#clients #nav_clients {background: transparent url(../images/menu.jpg) -142px -62px no-repeat;} body#recruit #nav_recruit {background: transparent url(../images/menu.jpg) -213px -62px no-repeat;} body#contacts #nav_contacts {background: transparent url(../images/menu.jpg) -284px -62px no-repeat;} body#home #nav_home {background: transparent url(../images/menu.jpg) -355px -62px no-repeat;} I really need help... Thanks a lot!! 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?! |
|||||||