CSS - Giving My Table A Border With Space
Hi All,
I am trying to make my table do the attached, where it has a border around the entire table but has a 2px space edge... Like the attched image, any ideas? Similar TutorialsHi all, Great forum page with problem, good in firefox, bad in ie, http://www.central12.com/photosmain1.htm The images as displayed in ie appear with a small gap at the bottom of the picture. I have condensed the code, can't figure it, but using lists to layout images is new to me. Would have used individual divs previously, but have seen this technique used and it seems better, less code. I think i'm just missing a simple fix, as images and boxes are set to the same dimensions. The code in the example differs from the code on the uploaded page, been on it for a week still trying to suss it. HTML: Code: <link href="test.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="mainpic1" class="big4"></div> <div id="sidepic1"> <ul> <li class="piccys1"><a href=""><img alt="British Monuments" title="British Monuments" src="picsthums/castlehill.jpg" width="95" height="80" /></a></li> <li class="piccys1"><a href="photos.htm"><img alt="Canada" title="Canada" src="picsthums/canlake.jpg" width="95" height="80" /></a></li> <li class="piccys1"><a href=""><img alt="Plants/Flowers" title="Plants/Flowers" src="picsthums/portplant.jpg" width="95" height="80" /></a></li> <li class="piccys1"><a href=""><img alt="France" title="France" src="picsthums/francechurch.jpg" width="95" height="80" /></a></li> <li class="piccys1"><a href=""><img alt="Ievissa" title="Ievissa" src="picsthums/rockyibiza.jpg" width="95" height="80" /></a></li> </ul></div> <div id="sidepic2"> <ul> <li class="piccys"><a href=""><img alt="Sunsets" title="Sunsets" src="picsthums/safricasun.jpg" width="95" height="80" /></a></li> <li class="piccys"><a href=""><img alt="Architecture" title="Architecture" src="picsthums/majorchurch.jpg" width="95" height="80" /></a></li> <li class="piccys"><a href=""><img alt="Mountains" title="Mountains" src="picsthums/olympos.jpg" width="95" height="80" /></a></li> <li class="piccys"><a href=""><img alt="British Countryside" title="British Countryside" src="picsthums/harbscot.jpg" width="95" height="80" /></a></li> <li class="piccys"><a href=""><img alt="Ancient" title="Ancient" src="picsthums/sphinxthum.jpg" width="95" height="80" /></a></li> </ul></div> </body> </html> CSS: Code: /*Main styles----*/ body { margin: 0px; padding: 5px 0px 5px 0px; background-attachment: fixed; background-color:#000; } img{ border: 0 none; } #mainpic1 { width: 479px; height: 323px; margin:24px 0 15px 10px; float:left; } li.piccys, ul.piccys { float:right; width:95px; height:80px; margin:9px 0 0 5px; padding:0px; list-style:none; border:2px solid #fff; } li.piccys1, li.piccys1 { float:right; width:95px; height:80px; margin-top:9px; margin-right:5px; padding:0px; list-style:none; border:2px solid #fff; } #sidepic1 { width: 100px; height: 480px; margin-top:15px; margin-right:5px; float:right; } #sidepic2 { width: 100px; height: 480px; margin-top:15px; margin-right:35px; margin-left:0; float:right; } Thanks for your time, I expect there are loads of ways I could do it better, your advise is appreciated. Paul I'm so excited! I recently decided to try again (the third time) to see if I could convert my horrid table layout to divs. I was finally able to make something reletivly good in most browsers, but I am still having alot of browser-related problems! Normally I would have given up by now...but i found that my table layout was at 28 seconds over 56.6 ( :O ) and once i converted it it was only 3 seconds over (double :O ) Anyway, pretty much everything validates (including the css) when I put in the doctype, but when the doctype is in it looks like a mess in all browsers. I've been using transitional xhtml. When I take it out it looks better in all browsers, but is still really bad in all but IE. I have put together on my site two pages with the same code except one has the doctype and the other doesn't. The css for both is: Code: body { background: #EFF7FF url(bg.gif); text-align:center; padding:0; } #outer { border:5px double #234B77; width:650px; padding:0px; margin:0px; } #hdr { width:650px; height:151px; background: #21558C; } #bar { width: 650px; height:90px; background: #ADD7EF url(rainbowsitedesign_2x1.gif); border:solid #000000; border-width:0px; padding-top: 37px; text-align:left; } #bodyblock { position:relative; background: #ADD7EF url(backgroundforsite.gif); width:650px; padding:0; } #l-col { float:left; background: #ffffff url(white.gif); color: #333333; width:140px; border-left: 1px solid #234B77; border-right: 1px solid #234B77; border-top: 1px solid #234B77; border-bottom: 1px solid #234B77; margin-top:10px; margin-bottom:10px; margin-left:5px; margin-right:5px; } #coltop { height: 42px; background: #3971B5 url(tabletop.gif); color: #000; text-align: center; padding:10px; font-size: 105%; font-weight: bold; color:#1A3958; } #cont { width:485px; background: #ffffff url(white.gif); border-left:1px solid #234B77; border-right:1px solid #234B77; border-top:1px solid #234B77; border-bottom:1px solid #234B77; text-align:left; margin-top:10px; margin-bottom:10px; margin-right:5px; font-size: 100%; font-weight: normal; color:#1A3958; } #contentop { width:485px; height:42px; background: #3971B5 url(tabletop.gif); color: #333333; border-left:0px solid #234B77; border-right:0px solid #234B77; border-top:0px solid #234B77; border-bottom:1px solid #234B77; margin:0px; text-align: center; padding:10px; font-size: 105%; font-weight: bold; color:#1A3958; } #ftr { width:650px; height:25px; background:#346EB4; color: #333333; border: 0px solid #000000; margin:0; } #ftr2 { width:650px; height:25px; background:#346EB4; border: 0px solid #000000; margin:0; } #ftr3 { width:650px; height:99px; background: #346EB4 url(websitedesign.gif); border: 0px solid #000000; margin:0; padding-top: 20px; } #home { width:50px; height:10px; border: 1px solid #000000; margin:0; } p:first-letter { font-size: 120%; font-weight: bold; } a.red:link { text-decoration: none; color: #234B77; } a.red:visited { text-decoration: none; color:#ff0000; } a.red:hover { text-decoration: underline; color:#ff0000; } a.orange:link { text-decoration: none; color: #234B77; } a.orange:visited { text-decoration: none; color: #ff6600; } a.orange:hover { text-decoration: underline; color:#ff6600; } a.yellow:link { text-decoration: none; color: #234B77; } a.yellow:visited { text-decoration: none; color: #ffff00; } a.yellow:hover { text-decoration: underline; color:#ffff00; } a.green:link { text-decoration: none; color: #234B77; } a.green:visited { text-decoration: none; color: #009900; } a.green:hover { text-decoration: underline; color:#009900; } a.blue:link { text-decoration: none; color: #234B77; } a.blue:visited { text-decoration: none; color: #0000ff; } a.blue:hover { text-decoration: underline; color:#0000ff; } a.violet:link { text-decoration: none; color: #234B77; } a.violet:visited { text-decoration: none; color: #660066; } a.violet:hover { text-decoration: underline; color:#660066; } #ftr2 a:link { text-decoration: underline; color: #152F4D; } #ftr2 a:visited { text-decoration: line-through; color: #ccc; } #ftr2 a:hover { text-decoration: none; color: #88B2DC; } Here are the two pages: With doctype: http://rainbowsitedesign.com/withdoctype.html Without it: http://rainbowsitedesign.com/nodoctype.html How can I fix both my browser problems and my doctype problems? Any help is app! i have a div named #main that contains #content(float:right), #sub(float: left), and #footer(clear:both). In IE, #main's background color doesn't stretch all the way through #footer, even though a bottom border applied to #main displays below #footer. So there's a space between the background and the border! #main's background is brown/grey, and botom border is 1px green. What gives? http://www.nomadicamedia.com/temp/ Maybe I should be posting this as a reply - this is an UPDATE: I used the WC3 Validator and it found an outright error in my code. So, gosh - ignore the posting below! And, uhm, I think I'll be using that handy-dandy WC3 tool more often.... ---------- Okay - I am a CSS dope - I've been using tables and antiquated code for a long time. I'm putting together a dummy site, just for testing, and I'm trying to postiion things with DIVs, etc. Be gentle - I'm 59, and, not that damned smart... I installed Dreamweaver and have been fooling with that as it has a lot of templates with proper CSS, tips, etc. But I've never used it before, so that's another learning curve. So, I have a page on which there are some DIVs and, in one, there is an extra space - and, an extra bottom border line - in Internet Explorer. I'm not fond of IE, but that isn't the point - a lot of people use it.....and I need to know why this is happening. Here's a link to an image of what it looks like in Explorer - the line at the bottom is absent in Firefox and Chrome: Screenshot The page is just the index page at: GuyMerritt.net The CSS files looks like this: Code: body { margin: 0 0 0 0; background: #FEFEEC; height: 1000px; background: #F9F9EE; } h2 {font-family: tahoma; font-size: 12px; font-weight: normal; padding-left: 5px; padding-right: 8px; color: #777772;} #header {height: 220px; background: url(../images/header_graphics.jpg); } #left-sidebar { float:left; width:20%; padding-left: 20px; } #right-sidebar { float:right; width:20%; padding-right: 20px; } #main-content {width: 54%;float: left;padding-top: 0px; } .sidebars-2 #content { width: 54%;float: left;padding-top: 10px; } #box { border-style: solid; border-width: .05em; font-family: arial; color: #777772; font-size: 13px; padding-left: 9px; padding-right: 9px; } img.example { width: 100%; max-width: 250px; height: auto; } div#slides { width: 500px; height: 280px; overflow: hidden; } div#slides div { height: 280px; width: 500px; font-size: 100px; line-height: 200px; text-align: center; color: #fff; } ul#ticker { height: 1.4em; overflow: hidden; border: solid 1px #aaa; background: #ccc; } ul#ticker li { padding: 0.2em 0; } /* @group global */ p#links { padding-top: 50px; clear: both; } a#avatar { position: absolute; bottom: 10px; right: 10px; } a#avatar img { border: none; } h1 { color: #0094d5; } a { color: #0094d5; } a:visited, a:hover { color: #00577e; } .red { background: #e40053; } .blue { background: #0094d5; } .green { background: #43aa38; } /* @end */ At the rate I'm moving, I'll be dead before I ever figure this stuff all out! If anyone could explain what's causing this I would be very grateful. And why do so many things render differently in Explorer (from Chrome and Firefox)? Thanks again, Guy Merritt, Flint, MI 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? 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! 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 extra PHPNuke (Ravennuke 2.02) module for the start page. Several pieces of information are displayed in various cells of a table. I have a problem were there is some extra space at the beginning of a table that I cannot get rid of. I saved the output and uploaded he http://www.linux-tutorial.info/index_test3.html after the site title and before the tag line "The place where you learn Linux", there is a large space. In this example, the title is in a separate table, followed by a new table for the information blocks. If I put them in the same table the space appears before the title block. The relevant block of code looks like this: Code: <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr valign="top"> <td class="welcome_title_box" valign="top" colspan="2"> <div align="center" class="welcome_main_title"> Welcome to the <br>Linux Knowledge Base and Tutorial</div> </td></tr></table> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr><td valign="top" width="50%"> <span class="subtitle">"The place where you learn Linux"</span> <br><br> Looking for an in-depth and easy-to-understand introduction to Linux? Then look no further! <br> We don\'t just show you how to execute a handful of commands and use a few utilities. The Linux Tutorial goes beyond the basics, providing you with the knowledge necessary to get the most out of your Linux system. <br><br> Jump right in by clicking <a href="http://www.linux-tutorial.info/modules.php?name=MContent&pageid=224"> here</A>. </td> If I removed the highlighted code, the space appears before the site title. If I remove the whole DIV containing the title, I still have the space above the tag line. This says to me that it is not related to the division. It seems that this row or the table itself is pulling the formatting from somewhere else. That would be a logical consequence of the cascading aspect of CSS, but I do no see where it is gettign the space from. Admittedly I am not all that good with CSS/formatting, so it is possible (if not likely) that I overlooked something. Note that in the index_test3.html, I close the table at the end of the first row (prior to the list of news and threads) then open a new table: Code: </table><table border="0" cellpadding="0" cellspacing="0" width="100%" > If I change BGCOLOR for the first table and then change the line above to this: Code: </table>HERE<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="RED"> The space is after the word "HERE". If I remove this code, the extra space is right after the row/div with the site title and before the row with the tag-line. This all make me think that the extra space is being added before the next table, as opposed to at the end of the previous table. There are a number of posts in the CSS forum that I tried like changing the margin (style="margin: 0px"), but none of the solutions solved the problem. I have tried all sorts of combinations of spacing and alignment, but I cannot get rid of this space. I have tried loaded the page with multiple browsers (Konqueror, FIrefox, IE 6) with the same results, so I do not think it is a browser specific issue. Any and all input is greatly appreciated. In this table, the right column is displaying correct, the left column has an odd space appearing at the top. Here's the page www.scarboroughrocks.com/inthenews.htm I don't see where that space is coming from at the top of the left column. Here is the code: Code: <table width="531" border="1" cellpadding="2"> <tr> <td width="251"> <h4 align=center>NEWS ARTICLES</h4> <p><a href="http://www.worldnetdaily.com/news/article.asp?ARTICLE_ID=40550">"Joe Scarborough is one feisty guy"</a> - World Net Daily - 9/21/04 </p> <p><a href="http://www.teenspeaknews.com/vol4/issue4/issues/new_age_conservatism.html">New Age Conservatism</a> - TeenSpeakNews - Vol.4, Issue4</p> <p><a href="http://www.washingtonpost.com/ac2/wp-dyn?pagename=article&node=&contentId=A29236-2001Jul20">"Captive Parents: Scarborough shows support"</a> - Washington Post - 6/22/01</p> <p> </p> <h4 align=center>INTERVIEWS</h4> <p><a href="http://www.nationalreview.com/interrogatory/scarborough200403290839.asp">"Cuppa Joe"</a> - 3/29/04- National Review Online </p> <p> </p> <p><a href="http://www.chuckbaldwinlive.com/real2.html">Chuck Baldwin Radio Show</a> - 5/24/97 </p></td> <td width="260"> <h4 align=center>COLUMNS</h4> <p><a href="http://www.jewishworldreview.com/0804/scarborough_archives.asp">Jewish World Review Archive </a> -4/03-9/04- awesome set, 150 in all</p> <p><a href="http://www.justgivemesometruth.org">Florida Sun - "From The Pub"</a>- Must Read!! From the newspaper he created, of a more personal nature </p> <p><a href="http://www.townhall.com/columnists/joescarborough/archive.shtml">TownHall.com</a> -5/03-7/03 - Other great columnists on this site too </p> <p><a href="http://www.learnathome.com/506998.html?view=print">Crosswalk.com</a> - On human rights</p> <h4 align=center>SPEECHES</h4> <p><a href="speeches.htm#farewell">Farewell Speech to Congress</a> - 9/5/01</p> <p><a href="speeches.htm#cuba">Human Rights in Cuba</a> - 4/24/01 </p> <p><a href="speeches.htm#balancingbudget">Balancing the Budget</a> - 3/2/99</p> <p><a href="speeches.htm#freeenterprise">The Power of Free Enterprise</a> - 3/5/98</p> <p><a href="speeches.htm#castro">On the Castro Murders</a> - 2/27/96 </p> <h4 align=center>TRANSCRIPTS</h4> <p><a href="http://www.msnbc.msn.com/id/3719710/">"Scarborough Country" Transcripts</a> - Scroll to the bottom of that page to find transcripts from the previous week. </p> <p>See the <a href="scarboroughcountry.htm">Show</a> page for older transcripts. </p></td> </tr> </table> Thanks ya'll. I've been over this one so many times, and can't figure why it's behaving so strangely. I have a data table within my content div. It appears fine on my screen in several browsers, however, coworkers have a large (full screen) of white space where the table should be. They have to scroll down a full screen to get to the table. I have everything on the site set up using CSS. The table contains the dates, times and municipalities for Trick or Treat events. I have a vertical-align:top on the table. Here is the CSS: Code: table#halloween { margin-left: 2px; text-align:center; margin-right:auto; width:100%; vertical-align:top; font-size:12px; padding: 3px; width:100%; border: solid #000000; } td.halloweencell { border-color: #000; border-style: solid; } Here is a sample of the HTML : Code: <table width="100%" id="halloween" summary="Table of municipalities, date of trick or treat and times for trick or treat"> <tr> <th width="50%" class="rowcoloryellow"><strong>MUNICIPALITY</strong></th> <th width="20%" class="rowcoloryellow"><strong>DATE</strong></th> <th width="30%" class="rowcoloryellow"><strong>HOURS</strong></th> </tr> <tr> <td colspan="3"> </td> </tr> <tr> <td class="halloweencell" width="50%">City of Hartford </td> <td class="halloweencell" width="20%">October 30th </td> <td class="halloweencell" width="30%">4:00 p.m. - 6:00 p.m. </td> </tr> <tr> <td class="rowcolororange">City of West Bend </td> <td class="rowcolororange">October 30th </td> <td class="rowcolororange">4:00 p.m.- 6:00 p.m. </td> </tr> <tr> <td class="halloweencell">Town of Addison </td> <td class="halloweencell">October 30th </td> <td class="halloweencell">3:00 p.m. - 6:00 p.m. </td> </tr> <tr> <td class="rowcolororange">Town of Barton </td> <td class="rowcolororange">October 30th </td> <td class="rowcolororange">4:00 p.m. - 6:00 p.m. </td> </tr> <tr> <td class="halloweencell">Town of Erin </td> <td class="halloweencell">No Set Schedule </td> <td class="halloweencell"> </td> </tr> </table> It is located at: www.washingtoncountysheriffwi.org/halloween.php Any suggestions? Thanks! Helen 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. OK...thbbt. Situation 1 (the one that works as I want) Code: <table style="width: 100%"> <tr> <td style="width: 15em">Column 1</td> <td>Column 2</td> </tr> </table> In Situation 1, the second column expands to be all of the remaining width. This is good. Situation 2 Code: <table style="width: 100%"> <tr> <td style="width: 15em">Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> </table> In Situation 2, column 2 and 3 share the remaining space. I want column 2 to take no more than exactly the space it needs. I want column 3 to expand to take all the remaining space. The only way I've found that (sorta) works is to actually use the old HTML width="" attribute and make it a percentage that's impossible. If you make it 95% or something, then all the other columns squeeze down pretty far. The issue with this approach is that it ignores the style width of the first column and just crushes it as much as possible. Anyone have an idea? Thanks Tim 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 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? 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? 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 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. 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? I've got different CSS layout problems concerning the redesign of a website which will be dedicated to an online shop selling items for online roleplaying games. The redesigned website is planned to be set up in valid XHTML 1.0 Transitional. Though it at first validated unter Strict, too, I've chosen this doctype because the content (main text, items etc.) is generated automatically by a content management system (CMS: OScommerce) and pasted into the XHTML template I did. This PHP generated code seems to contain presentational markup such as layout tables. For I am not allowed to change the PHP-Scripts I thought Transitional would fit the best. You can reach my original template he URL (URI of the CSS file: URL) The problem now is, while beeing viewed in IE6/Win and Mozilla Firefox, the template of mine shows no mistakes concerning these browser's rendering output. After inserting the HTML code of the CMS generated content IE6 inserts about 300 pixel space between a sample table and the rest of the content. Firefox doesn't show this behaviour. An demonstration of the final HTML containing the CMS output is available he URL (URI of the CSS file: same as above) As for a second, someone also sent me a screenshot he made while displaying the first of both sites in a newer Opera Browser. The layout wasn't displayed as I wanted it to do, too (spaces between or at the top of the graphics on the left caused the layout to break). I suppose the second website shows the same behaviour, I wasn't allowed to check it, yet. I checked out different css relating websites and tried a lot, but didn't found any resolution to these problems. Would anyone help me, please? I'd be glad about responses and/or helpful css snippets! With regards, Andreas Kwiatkowski I'm having some issues with getting a table border to appear in both Mozilla and IE. I had it working at one point but now it's stopped working in IE. Basicly this is the code to control it: border:1px solid #0; but IE doesn't read it, I've checked the rest of the CSS to see if there is any conflicts but found none. Anyone know how to get the table border to appear in both IE and Mozilla? |