|
CSS - Quick Ff Vs Ie Table Problem
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; }
Similar Tutorialsfigured it out. don't know how to delete I 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. 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 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? 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? 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? 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 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. 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 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 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 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> 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 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. i have table in which i display bunch of query results. i use <table width="80%" ....background="something.gif"> when the user's screen resolution is high the table still takes 80% of the space but the background image starts repeating. is there a way to automatically extend the image width in case the user's screen resolution is high? thanks for the help in advance Hi, Have a problem with a left-hand table, the content of which is dragged down the page when the right-hand table grows in the same direction, say when filling it with content. I need to anchor that left-hand table in place but allow the right-hand table to stretch vertically. Have tried absolute CSS positioning, spacers, extra tables, 100% height - nothing seems to work. I've simplified the HTML code for readability, but the general layout is pretty much intact: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <table width="668" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="49" colspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="667" height="49"> </td> </tr> </table></td> <td width="1"></td> </tr> <tr> <td width="147" rowspan="3" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="147" height="147"> </td> </tr> </table></td> <td width="520" height="32" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="520" height="32"> </td> </tr> </table></td> <td></td> </tr> <tr> <td height="24" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="520" height="24"> </td> </tr> </table></td> <td></td> </tr> <tr> <td rowspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="517" height="419" valign="top"><div align="center">RIGHT-HAND TABLE </div></td> </tr> </table></td> <td height="91"></td> </tr> <tr> <td height="328" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="146" height="328" valign="top"><div align="center">LEFT-HAND TABLE </div></td> </tr> </table></td> <td></td> </tr> <tr> <td height="482"> </td> <td> </td> <td></td> </tr> </table> </body> </html> Thanks, Dyb I've been tweaking a bit of the site I edit for Oxford Hash House Harriers (search Google for Oxford Hash House Harriers and our site will appear at the top) and trying to get a blue bar for the left and right side bars all down the page, which I've now succeeded in doing, however in my changes something has changed because now there is a large gap between any content and a table but only in some browsers. The tables are used for actual data, not for layout. I use CSS and <div> for layout. The layout is along these lines: Code: <body> <div id="page"> <div id="banner"> <div id="leftlogo"> <!-- logo here --> </div> <div id="rightlogo"> <!-- logo here --> </div> <div id="oh3banner"><p class="pagetitle">Oxford H3</p></div> </div><!-- close div banner --> <div id="mainbody"> <div id="wrap1"> <div id="wrap2"> <div id="leftnavigation"> </div><!-- close div leftnavigation --> <div id="rightnavigation"> </div><!-- close div rightnavigation --> <div id="content"> <h1>Oxford Hash House Harriers</h1> <h2>Oxford H3 Hash Diary </h2> <div id="hashdiary"> <table summary="Oxford H3 Run Diary"> <caption>Forthcoming Oxford H3 Hashes</caption> <colgroup> <col id="date" /> <col id="postcode" /> <col id="venue" /> <col id="hare" /> <col id="beermaster" /> <col id="chef" /> <col id="run" /> </colgroup> <thead> <tr> <th scope="col">Date</th> <th scope="col">Post Code & Grid Ref.</th> <th scope="col">Venue</th> <th scope="col">Hares</th> <th scope="col">Beer Master</th> <th scope="col">Chef</th> <th scope="col">Run#</th> </tr> </thead> <tbody> <tr> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> </tr> </tbody> </table> </div> </div><!-- close div content --> </div> <!-- close div wrap1 --> </div> <!-- close div wrap2 --> </div> <!-- close div mainbody --> </div><!-- close div page --> </body> Whilst the relevant (I think) parts of the CSS look like this: DIV#page{ margin-top: 0px; } DIV#banner{ width:100%; background-color : #06168a; height : 130px; margin-left : 0px; margin-top: 0px; position : absolute; top: 0px; float : none; } DIV#oh3banner{ clear : none; background-image : url('images/oxfordh3banner.jpg'); background-repeat : no-repeat; height : 110px; margin-top: 10px; background-position : center; } DIV#mainbody{ margin-top: 130px; } DIV#wrap1{ background-color : #06168a; } DIV#wrap2{ background-color : #06168a; } DIV#leftnavigation{ width:15%; background-color : #06168a; margin-left : 0%; float: left; } DIV#rightnavigation{ width:15%; background-color : #06168a; margin-right : 0%; margin-left : 3%; float: right; } DIV#content{ width:auto; margin-left : 15%; margin-right: 15%; padding-left: 5px; padding-right: 5px; background-color: White; } I found to begin with that there was a very large gap between the table and any content on the page in all browsers until I put a <div> </div> around the actual table itself. When I did this the page looks okay in Firefox and Safari, but still looks incorrect in Internet Explorer and Chrome. It looks to me as if the table is being pushed below the content in the right sidebar in IE or the left sidebar in Chrome for some reason. I've been messing about for a while now trying to get this to work but without success. Can anybody spot where I'm going wrong? Regards, James 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>
|
|||||||