|
HTML - Table Border Problems - Help Please
For this page on my site: http://www.monkeygambling.com/new%20...ingindex.shtml I am having trouble with the borders on the central part.
I have created an external css file with these commands table.border { border-top:1px outset "gray"; border-right:1px outset "gray"; border-bottom:1px outset "gray"; border-left:1px outset "gray"; } td.border { border-top:0px inset "gray"; border-right:1px inset "gray"; border-bottom:0px inset "gray"; border-left:1px inset "gray"; } I want a border with one px width like a normal table, but I don't want the cells to have horizontal borders where the <hr> are. I have got the table to have a border around it, but I want the double line with highlighted edges like in a normal table. If that makes sense could anyone help me? thanks Similar TutorialsI am building an adwords landing page. The URL is he http://www.amanochocolate.com/adwords/dark-chocolate If you notice, I have put a text block on the right that is all black. I wanted it to have rounded corners so I used some graphics to achieve that. However, for some reason, the table cell color is showing up around the border even though I have no borders set for the table. (I.,e., border:0pt) Also, the border I don't want on the bottom is thicker for some odd reason. I've seen this before but have never figured out what causes this. I would simply like my table borders to be really clean (and gone). Any ideas? -Art this works fine in safari and fire fox but not in IE, its the links i'm having problems with, in safari and fire fox the links and the background image fit right but in IE there pushed down about 4px take a look, to see what i mean rollover the links and you will see what i mean the url is: http://nathanoconnor.co.uk/kartingchampionships/site/ thanks I'm currently working on my first blog and am trying to add a twitter hyperlink but it has a nasty border to it. I tried typing in different types of 'border=0' but it doesnt seem to work. I found the main code for the entire page post img, table.tr-caption-container { padding:4px; border:1px solid $bordercolor; if I put a zero in the border it takes it off the entire page, but I'd like my pictures to have a border and have The twitter hyperlink be without a border. This is the twitter link I want to have with no border. <a expr:href='"http://twitter.com/home/?status=Chk Out-" + data:post.title + " " + data:post.url' target='_blank'><img alt='Tweet It!' src='http://i835.photobucket.com/albums/zz275/amberink/social%20networking%20icons/th_twitter_32.png' width='20'/></a> Thanks, Ashton I am trying to make a quick fruit machine for the company I am on placement with. (see pic below) It is to be use for a one day show and I only have 20hrs to complete it. (15 already used) I'm using a table (mainly for speed) 5x3 the top and bottom center cells span 3 columns and the middle row has the usual 5 td tags 1st and 5th are for the side images and the 3 in the middle contain Iframes to display the relevent info for each reel. the functionality of the game works fine but the borders ruin the look of the page. It's not finished yet but as you can see the borders trash any looks. the ifames are set with: frameborder="0" marginheight="0" marginwidth="0" scrolling="no" and the table is set using css with: border-collapse: collapse; the border-collapse: collapse; gets rid of all the table borders perfectly without the Iframes but the once the iframes are placed in the td's it seems they extend the cell by one pixel. Does anyone know of a way to get rid of them? thanks for looking. Below is the page code if it helps. Code: <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>Fruit Machine</title>
<!--<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />-->
<meta name="robots" content="noindex,nofollow" />
<meta name="author" content="www.custompages.co.uk" />
<style type="text/css" media="all">@import "./include/admin.css";</style>
</head>
<body style="background:#FFFFFF;">
<style type="text/css">
.game {
/*background:#000000;*/
/*border: thick solid rgb(128,128,128);*/
border-collapse: collapse;
border: none;
width:960px;
}
td {
background:#FFFFFF;
border-collapse: collapse;
}
.frame {
border-collapse: collapse;
margin:0;
padding:0;
}
</style>
<table align="center" class="game">
<!--row 1 score panel -->
<tr>
<td width="240px;" ><img src="images/topl.gif"></td>
<td align="center" width="480px;" colspan="3"><img src="images/score.gif"></td>
<td width="240px;" ><img src="images/topr.gif"></td>
</tr>
<!--row 2 reels -->
<tr>
<td><img src="images/midl.gif"></td>
<td class="frame"><iframe name="f1" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src=f1r.asp?val= width="160px;" height="300px;"> </iframe></td>
<td class="frame"><iframe name="f2" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src=f2r.asp?val= width="160px;" height="300px;"> </iframe></td>
<td class="frame"><iframe name="f3" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src=f3r.asp?val= width="160px;" height="300px;"> </iframe></td>
<td><img src="images/midr.gif"></td>
</tr>
<!--row 5 play/result button -->
<form name="play" method="post" action="play.asp">
<tr style="text-align:center;">
<td><img src="images/botl.gif"></td>
<td colspan="3" style="background:url('images/button.gif');"><input type="Submit" style="width:300px; background:#0000FF; color:#FFFFFF; font-size:26px;" name="play" value="PLAY" javascript:onkeyup="play.form.submit();" ></td>
<td><img src="images/botr.gif"></td>
</tr>
</form>
</table>
</body>
</html>
In a website i'm designing, there is a slideshow I created, and instead of using flash I used Windows Media Player. For some reason the html border attribute on both the <embed> and <object> tags, when viewed in Firefox, do not work. Page with border problems here is the code, if you want it: Code: <center>
<object id="MediaPlayer"
width="800"
height="650"
classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95"
standby="Loading Windows Media Player components..."
type="application/x-oleobject"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112"
title="Pete's Mountain Road Slideshow"
border="3">
<param name="filename" value="http://www.petesmountainroad.com/PetesMountain.wmv" />
<param name="Showcontrols" value="True" />
<param name="autoStart" value="False" />
<param name="wmode" value="transparent" />
<embed type="application/x-mplayer2" src=http://www.petesmountainroad.com/PetesMountain.wmv"
name="MediaPlayer"
autoStart="False"
wmode="transparent"
width="800"
height="650"
title="Pete's Mountain Road Slideshow" />
</object>
<br />
<p class="main">If you do not have Windows Media Player, you can view the video by following
<a class="Link" href="http://www.microsoft.com/windows/windowsmedia/player/11/default.aspx" target="_blank" title="Download Windows Media Player 11">this link</a>
to download the program to your computer, then try to play it again.</p>
</center>
</body>
</html>
hello, i am getting the results in two columns after using the following code... import_request_variables('p','p_'); $connect=mysql_connect('localhost','gkkilaru','gkkilaru') or die('could not open:'. mysql_error()); mysql_select_db('gkkilaru_db'); $result=mysql_query("SELECT * FROM human WHERE $p_Searchtype='$p_Search'"); function returnResultsInColumns( $mysqlResult ) { $queryResults = NULL; if( mysql_num_rows($mysqlResult) > 0 ) { while($resultRow = mysql_fetch_array($mysqlResult)) { for ($intPos = 0; $intPos < mysql_num_fields($mysqlResult); $intPos++) { $fieldName = mysql_field_name($mysqlResult, $intPos); $currentArrayPos = ( isset( $queryResults[$fieldName] ) ? count( $queryResults[$fieldName] ) : 0); $queryResults[$fieldName][$currentArrayPos] = $resultRow[$fieldName]; } } $htmlTable = "<table>"; foreach( $queryResults as $field => $results ) { $htmlTable.= "<tr>"; $htmlTable.= "<td>" . $field . "</td><td>" . implode( ", ", $results ) . "</td>"; $htmlTable.= "</tr>"; } $htmlTable.= "</table>"; return $htmlTable; } else { return "The query returned no results."; } } // Pass the result of the MySQL query into the function. $tableLayout = returnResultsInColumns($result); echo $tableLayout; can anyone let me know the code for how to place a border or table for the result obtained? Hey guys! I have created a table with images in it and for some reason the table doesn't exactly fit (in height) the images, it has like a little 5px border at the bottom and I can't figure out why. I have attached a picture showing the problem. In the image, the gray border is supposed to be there, and is part of the images and background image. But I want the table to end directly at the bottom of the gray bar, and for some reason it has a little lip at the bottom in which the background image begins to repeat again. My code is as follows: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>QuickID | Setup Your Account</title>
<style type="text/css">
<!--
a:link { color: #777676; text-decoration: none; font: verdana}
a:visited { color: #777676; text-decoration: none; font: verdana}
a:hover { color: #3366CC; text-decoration: underline; font: verdana}
a:active { color: #777676; text-decoration: none; font: verdana}
-->
</style>
</head>
<body topmargin=0 leftmargin=0 rightmargin=0 bottommargin=0 background="images/bg.gif">
<table cellpadding=0 cellspacing=0 width=100% border=0 align=center background="images/top_bar_bg.jpg">
<tr>
<td>
<table width=980 cellpadding=0 cellspacing=0 align=center style="white-space: nowrap;" height=38>
<tr>
<td align=left>
<img src="images/top_bar_logo.jpg" border=0 height=38 ALT="logo">
<img src="images/top_bar_divider.jpg" border=0 height=38 ALT="divider">
</td>
<td align=left width=750>
hello!
</td>
<td align=right>
<img src="images/top_bar_divider.jpg" border=0 height=38 ALT="divider">
</td>
<td align=right>
<img src="images/top_bar_settings.jpg" border=0 height=38 ALT="settings">
</td>
<td align=right>
<img src="images/top_bar_logout.jpg" border=0 height=38 ALT="logout">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
Hi, I'm trying to make a border with a 50x50px image repeated around it this is the code I have so far; <html> <head> <title>div test</title> <style type="text/css"> #outer { background-image: url(http://i890.photobucket.com/albums/a...oxBorder.jpg); background-repeat: repeat; background-color: #cccccc; width:100%; padding: 3em; } #inner { background-color:#ffffff; padding: 2em; } p {margin: 0px;} </style> </head> <body> <div id="outer"> <div id="inner"> <p> Blah blah blah </p> </div> </div> </body> </html> I want the image around the border to be showing the same as it does at the top, at the bottom. And i want the size of the table to be increased when new text is added into it each time. Can somebody please help me? Thankkksss. Within the <table> tag, there is an attribute called frame. Can someone list for me the different values for the frame attribute. I know there is <table frame = rhs | lhs but I don't know what else there is other than rhs and lhs. Thanks I have an issue. I really need to get rid of the borders in a html project i'm working on. I need to get ride of the borders to make a solid line from the left to the right. My screenshot is he http://terpconnect.umd.edu/~dwallac2/Screenshot.png <?php echo("<table border='0'"); for($i=0;$i<100;$i++){ echo("<tr border='0'>"); for($x=0;$x<100;$x++){ if($i%2){ echo("<td border='0'>"); } else{ echo("<td bgcolor='blue' border = '0'>"); } echo("hi"); echo("</td>"); } echo("</tr>"); } echo("</table>"); ?> i want the blue lines to be solid w/o the white dashes. I would appreciate anything you could do for me. Thanks Dave Hi guys Attached is an image of the problem I'm having where in Firefox my table borders are not displaying correctly. I've coded using standard html as follows: Code: <table width=100% cellspacing="0" cellpadding="5" bgcolor="ffffff" border="1px" bordercolor="C0CFE2"> Any Ideas? The one on the left is the Firefox version. I have a problem on my forum, in the home page, the forum list is made up of a grid, but the spacing inbetween each spot is too big and therefore it looks kind of stupid. Any ideas? Heres the site http://techoftheweekpodcast.com/index.php Hey! I was making a navigation bar that goes to the left of the content (there is a main nav at the top and a subnavigation for the page to the left). Here's the layout |----banner------| ==========main nav ll content ll content ll content the vertical equal signs (aka L's ) on the left are the things that are troubling me. I don't want there to be a border but the page for some reason keeps coming up with a small space between the left, bottom, and top of the subnav. Here's my code for the subnav and the content: Code: <table width="100%" cellpadding="0px" style="height: 100%; align: left; background-color: #ffffff; border-left: 0px; border-bottom: 0px; border-top: 0px; border-right: 0px;" cellspacing="0px"> <tr><td> <table cellpadding="0px" cellspacing="0px" width="130px" style="height: 100%; align: center; valign: middle; background-color: #FF7F00; border-left: 0px; border-bottom: 0px; border-top: 0px; border-right: 5px solid #ff0000;"> <tr><td align="center">A Brief History</td></tr><tr><td align="center">Who We Serve</td></tr><tr><td align="center">The Difference</td></tr></table></td> <td> <table cellspacing="0px" cellpadding="5px"><tr><td><b>About Us</b></td></tr></table> <blockquote> content </blockquote> <blockquote><p>content</p></blockquote> </td></tr></table> Ok... I'm looking to create a border on the left and right of a table I have. I already have the image, but I'm curious as to how to impliment it, just on the left and right side.. Basically it'll make a drop shadow to the background of the page. The code for index.php is this: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Web Hosting, Reseller Hosting, Dedicated Servers, Web Design - Blitzkrieg Computer Technologies</title>
<meta name="description" content="Blitzkrieg Computer Technologies offers Reseller Website Hosting, Dedicated Server Hosting, Shared Website Hosting, Domain Name Registration, and Web Design at affordable prices with 24/7 support and industry-known service.">
<meta name="keywords" content="web hosting, domain names, cheap web hosting, website hosting, web page hosting, web design, ecommerce web hosting, internet access provider, web hosting provider, web hosting services, internet web hosting,dedicated web hosting, award winning web hosting, domain hosting, domain registration, registrar, cheap domains, cheap registrar, cheap domain registration, website name, dedicated hosting, dedicated server, dedicated servers, dedicated web hosting, dedicated,cheap dedicated, cheap dedicated hosting, cheap dedicated servers, cheap servers, cheap dedicated linux hosting, cheap dedicated windows hosting, dedicated windows hosting, dedicated linux hosting, dedicated red hat hosting, dedicated centos hosting,dedicated windows server hosting,dedicated windows server 2003 hosting, managed dedicated hosting,managed colo, managed colocation">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
a:link {color: #D2D2D2;}
a:visited {color: #D2D2D2;}
a:active {color: #D2D2D2;}
a {text-decoration: none;}
</style>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body background="images/bgtex.jpg"><font size="2">
<table cellpadding="0" cellspacing="0" border="0" style="width:75% " align="center" valign="top">
<tr>
<td valign="top" style="width:100%; background:url(images/top.gif) " height="144" >
<table cellpadding="0" cellspacing="0" border="0" style="width:100% " align="center">
<tr>
<td valign="top" style="width:50% " height="144"></td>
<td valign="top" width="766" height="144">
<table cellpadding="0" cellspacing="0" border="0" width="766">
<tr>
<td valign="top" width="766" height="140">
<div style="margin-top:10px "><a href="?page=home"><img src="images/m1.gif" alt="" border="0"></a><a href="?page=sharedhosting"><img src="images/m2.gif" alt="" border="0"></a><a href="?page=resellerhosting"><img src="images/m3.gif" alt="" border="0"></a><a href="?page=dedicated"><img src="images/m4.gif" alt="" border="0"></a><a href="?page=vps"><img src="images/m5.gif" alt="" border="0"></a><a href="?page=design"><img src="images/m6.gif" alt="" border="0"></a><a href="?page=contact"><img src="images/m7.gif" alt="" border="0"></a></div>
<div style=" margin-left:21px; margin-top:24px "><img src="images/logo.jpg" alt="" border="0"><img src="images/p1.jpg" style="margin-left:249px " alt="" border="0"></div>
</td>
</tr>
</table>
</td>
<td valign="top" style="width:50% " height="144"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" style="width:100%; background:url(images/2_bg.gif) " height="3" >
</td>
</tr>
<tr><td background="images/8_w1.gif"><font size="2" color="#D2D2D2">
<center>
<a href="?page=about">About Us</a> |
<a href="?page=contact">Contact Us</a> |
<a href="?page=login">Customer Login</a> |
<a href="?page=aup">Acceptable Use Policy</a> |
<a href="?page=tos">Terms of Service</a>
</center></font></td></tr>
<tr><td valign="top" style="width:100%; background:url(images/2_bg.gif) " height="3" ></td></tr>
<tr>
<td valign="top" style="width:100%; background-color:#686868" height="410">
<table cellpadding="0" cellspacing="0" border="0" style="width:100% " width="766" >
<tr>
<td valign="top" style="width:50% " height="410"></td>
<td valign="top" width="766" height="410">
<table cellpadding="0" cellspacing="0" border="0" width="766">
<tr>
<td valign="top" width="766" height="410">
<div style=" margin-left:13px; margin-top:22px; margin-right:0px; line-height:15px " class="s">
<font color="#D2D2D2" size="3">
<?php
if (isset($_GET['page'])) {
switch ($_GET['page']) {
case "home":
include ('home.php');
break;
case "thanks":
include ('thanks.php');
break;
case "sharedhosting":
include ('sharedhosting.php');
break;
case "hosting":
include ('hosting.php');
break;
case "ip":
include ('ip.php');
break;
case "domain":
include ('domain.php');
break;
case "resellerhosting":
include ('resellerhosting.php');
break;
case "domain":
include ('domain.php');
break;
case "custom":
include ('custom.php');
break;
case "design":
include ('design.php');
break;
case "speedtest":
include ('speedtest.php');
break;
case "vps":
include ('vps.php');
break;
case "about":
include ('about.php');
break;
case "construction":
include ('construction.php');
break;
case "cpanel":
include ('cpanel.php');
break;
case "tos":
include ('tos.php');
break;
case "contact":
include ('contact.php');
break;
case "login":
include ('login.php');
break;
case "testimonials":
include ('testimonials.php');
break;
case "quote":
include ('quote.php');
break;
case "emailhosting":
include ('emailhosting.php');
break;
case "dedicated":
include ('dedicated.php');
break;
case "entrydedicated":
include ('entrydedicated.php');
break;
case "smallbizdedi":
include ('smallbizdedi.php');
break;
case "enterprisededi":
include ('enterprisededi.php');
break;
case "aup":
include ('aup.php');
break;
case "customdedicated":
include ('customdedicated.php');
break;
default :
include 'home.php';
break;
}
} else {
include 'home.php';
}
?></font><br><br><br>
</div>
</td>
</tr>
</table>
</td>
<td valign="top" style="width:50% " height="410"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" style="width:100%; background:url(images/bg2.gif) repeat-x top " bgcolor="#FFFFFF" height="17">
<table cellpadding="0" cellspacing="0" border="0" style="width:100% " width="766">
<tr>
<td valign="top" style="width:50% " height="17"></td>
<td valign="top" width="766" height="17">
<table cellpadding="0" cellspacing="0" border="0" width="766">
<tr>
<td valign="top" width="766" height="17" style="background:url(images/7_p1.jpg) no-repeat top right ">
</td>
</tr>
</table>
</td>
<td valign="top" style="width:50% " height="17"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" style="width:100%; background:url(images/bottom.gif) " height="65">
<table cellpadding="0" cellspacing="0" border="0" style="width:100% " width="766">
<tr>
<td valign="top" style="width:50% " height="65"></td>
<td valign="top" width="766" height="65">
<table cellpadding="0" cellspacing="0" border="0" width="766">
<tr>
<td valign="top" width="766" height="65">
<div style=" margin-left:16px; margin-top:25px "><font size="2" color="#696969"><center>
Copyright © 2003-2009 Blitzkrieg Computer Technologies. All Rights Reserved.<br></center></div>
</td>
</tr>
</table>
</td>
<td valign="top" style="width:50% " height="65"></td>
</tr>
</table>
</td>
</tr>
</table>
</font>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-3505975-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
I think I've totally given up on this, but thought I still pick all of your brains. I'm working with a CMS that has hardcoded tables so that even when you have border="0", a border still shows up on the live page. It's absolutely driving me nuts. Here's what I'm aiming at: I want to place 5 photos going down the right-hand side of the page. The only way I have figured out how to do this is through a table, but the border shows and makes the entire page look like crap. Any other ideas on how I can accomplish this? Thanks! I drew this example in photoshop, but I know I've seen tables (or divs) set up this way before where the there is text in the border. I was thinking it was a simple script, or maybe even just a property. I've searched everywhere and can't come up with an example. See my example below. Thanks!! I'm trying to create a table border that is not continuous and leaves space for header/footer text. This is the only way I can describe it, and also see image: http://img691.imageshack.us/img691/747/tablefo.jpg Now, that was a custom vbulletin theme, which is php, obviously. Is this possible with tables and HTML, with a bit of CSS perhaps? I have (for my sins - should have read up on css earlier) a table-based site, essentially with header, footer, left and right cells and the main piece in the middle. I have used different background colours, but am wanting to highlight the middle bit. I have used a border, but that seems to centre on the edge of the cell - ie half the specified border size is inside the cell and half outside. The effect of this is that my two side pieces have whitespace before they start. Is there any way to specify a 'border' which stays totally within its relevant cell ? Thanks. Hello, I'm having trouble with the bold line in the code below: Code: <html>
<head>
<title>H&R Properties</title>
<style type="text/css">
table.master
{
height: 100%;
}
td.banner
{
height: 100px;
text-align: center;
}
span.banner
{
font-size: 24pt;
}
td.news
{
width: 200px;
padding-top: 10px;
text-align: center;
}
iframe.news
{
width: 100%;
height: 100%;
}
td.menuandcontent
{
width: 530px;
}
table.menuandcontent
{
width: 100%;
height: 100%;
}
td.menu
{
height: 50px;
background: url('menu_bg.jpg');
text-align: center;
}
td.content
{
text-align: center;
}
iframe.content
{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<table class="master" cellspacing=0 cellpadding=0 border=1>
<tr><td colspan=2 class="banner">
<span class="banner">
<img src="H&R banner.jpg" border=0></span></td></tr>
<tr>
<td class="news">
<iframe class="news" src="news.html" scrollable=yes frameborder=no></iframe>
</td>
<td class="menuandcontent">
<table class="menuandcontent" cellspacing=0 cellpadding=0 border=0>
<tr>
<td class="menu">
<table cellspacing=0 cellpadding=0 border=0>
<tr>
<td><img src="home.jpg" border=0></td>
<td><img src="properties.jpg" border=0></td>
<td><img src="about.jpg" border=0></td>
<td><img src="contact.jpg" border=0></td>
</tr>
</table>
</td></tr>
<tr>
<td class="content">
<iframe class="content" src="content.html" srollable=yes frameborder=0></iframe>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
This code produced this: http://www.shahspace.com/border1/ But if I do something as simple as set border to 0 in the bolded line above, I get this: http://www.shahspace.com/border0/ The banner is all of a sudden shifted to the right by about 20 pixels. Why is this? i have a table with a border of 0. i was wondering if it was possible to have only the very outlining border of the table be visible. |
|||||||