HTML - Line Width Problem
Hi, I am using tables in dreamweaver, making a bottom border for each cell, but I dont want it to go all the way across, I want a short bottom line, here is the code:
<td colspan="2" valign="top"style="border-bottom: 1px solid #AF0A10"> let me know how to make the bottom line at like 50% Thanks! -Sean Similar TutorialsI have found what seems to be a rather big problem in the HTML canvas When drawing circles, and I presume all shapes, the size of the circle is different based on whether one is filling it, or sketching it. If we have a circle of radius 10 and line width k, and we decide to fill it, that line width will be evenly dispersed about the perimeter of the circle such that half the line width is inside the circle, and half is outside the circle. If, however, the same circle is sketched, the line width will still be the same, but it will now be dispersed entirely on the outside of the circle, thus making it larger. If I am wrong, and this is how figures are supposed to be drawn, or if I am simply not using the right settings, please let me know =) in the past when ever I have string that is longer than the width specified in the <td>it always automatically line breaked for me. But now I am encountering an issue with the <td> stop auto line breaking, and instead just increase the width of the table to make the string fit in 1 line. if anyone know whats possibly causing this problem please reply, any thing suggestion is greatly appreciated. Thanks ok, im trying to make a shoutbox and i need the box to be a max width of 200px. But, since the shoutbox entries are going to be dynamic, theres a problem. In a table cell, if you have a string of characters without spaces, it will extend the width of the table cell (and entire table if appropriate) in order to accomodate this... The problem is, i need the table width to stay constant... 200px. Ive tried using normal width attributes and css in each of the td, table, and div (around the table) tags, but that does not work-- the table still extends horizontally in order to display the string. Is there anyway I can staticly set the table width to 200px and keep it that way? Frankly, i dont care what happens to the extra long string, short of deleting it altogether, i just need the table to stay a constant width Hi All, Im using Visual Studio 2010 to create a website, im trying to set the width to 100% so it fits the users screen, when i flick back and forth from the design to the html Code the Design is fitting the Screen 100% but when i launch the site it still remains 900px in width? heres my CSS iv also checked the .Header css and that also says 100% any ideas? HTML Code: .page { width: 100%; background-color: #fff; border: 1px solid #496077; } .header { position: relative; margin: 0px; padding: 0px; background: #4b6c9e; width: 100%; } This is the Site Master Page. HTML Code: <%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site.master.vb" Inherits="Learning.Site" %> <!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"> <head runat="server"> <title></title> <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /> <asp:ContentPlaceHolder ID="HeadContent" runat="server"> </asp:ContentPlaceHolder> </head> <body> <form runat="server"> <div class="page"> <div class="header"> <div class="title"> <h1> My ASP.NET Application </h1> </div> <div class="loginDisplay"> <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false"> <AnonymousTemplate> [ <a href="~/Account/Login.aspx" ID="HeadLoginStatus" runat="server">Log In</a> ] </AnonymousTemplate> <LoggedInTemplate> Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>! [ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ] </LoggedInTemplate> </asp:LoginView> </div> <div class="clear hideSkiplink"> <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal"> <Items> <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/> <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/> </Items> </asp:Menu> </div> </div> <div class="main"> <asp:ContentPlaceHolder ID="MainContent" runat="server"/> </div> <div class="clear"> </div> </div> <div class="footer"> </div> </form> </body> </html> Can someone try and shed some light on this please? Thanks Hi there. I am working on this site. There is a problem with a table column spacing though... if this is what it looks like in Firefox (the way its supposed to be...) and this is what happened to it in IE. (dear lord...) the left menu and the content on the right are two adjacent cells of a table. how do i fix this ? it seems ie is giving equal width to both the cells. which explains the gap. i've tried using: Code: <td width=180> and also: Code: <colgroup span="2"> <col width="180"></col> <col width="500"></col> </colgroup> but none of them work. please help me out.. the page is available at > http://ramniquesingh.googlepages.com/index.html the .css file is available at > http://ramniquesingh.googlepages.com/default_style.css thanks. Here is my current code: <TABLE width="215" border="0" cellspacing="0" cellpadding="0"> <tr> <td><TABLE width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> VARIABLE TEXT </td> <td align="left"> IMAGE </td> </tr> </TABLE></td> </tr> <tr> <td> random text that is lengthy </td> </tr> </TABLE> My problem is that I want the image to be displayed right next to the variable text . but since the variable can be any length, it is not getting displayed right next to the image. It is turning out to have a large gap in between the variable and the image. The variable can be any length... it could be "hi" or "hellooooooooo" but the image still needs to be displayed exactly to the right of it. How can I fix this? Hey i am having trouble with putting a horizontal line in. I got the line in but it doesn't go all the way across the page. It stops a bit before then end can someone please help? Hey. I have a problem. When I make a image a background image so I can write on it, I get this white line and I don't know how to get rid of it. Help please! Code: <html> <head> <title>RaptorCo</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <table id="Table_01" width="1024" height="768" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="6"> <img src="images/index_01.jpg" width="1024" height="15" alt=""></td> </tr> <tr> <td rowspan="4"> <img src="images/index_02.jpg" width="217" height="753" alt=""></td> <td colspan="4"> <img src="images/index_03.jpg" width="587" height="158" alt=""></td> <td rowspan="4"> <img src="images/index_04.jpg" width="220" height="753" alt=""></td> </tr> <tr> <td> <img src="images/index_05.jpg" width="108" height="37" alt=""></td> <td> <img src="images/index_06.jpg" width="187" height="37" alt=""></td> <td> <img src="images/index_07.jpg" width="155" height="37" alt=""></td> <td> <img src="images/index_08.jpg" width="137" height="37" alt=""></td> </tr> <tr> <td colspan="4"> <img src="images/index_09.jpg" width="587" height="12" alt=""></td> </tr> <tr> <td colspan="4"> <img src="images/index_10.jpg"><div style="position: relative;top: -500px;">text</div> </tr> </table> </body> </html> I've create the line using html tag <hr> in my php program. I modified the line style as <HR width="100%" COLOR="BLUE" SIZE="4" NOSHADE> but in the browser it doesn't show any color and line size as i modified. It only shows a line with no effect (not blue color and size is normal). When i tested it in the another php file, it works. Is it becuase of my php coding in a file?or what? My coding is HTML Code: <table id="content"> <tr><td id="content" colspan="2"><HR width="100%" COLOR="BLUE" SIZE="4" NOSHADE></td> </tr> <tr> <td align="left"><?php if ($breadcrumb != ""): ?> <?php print $breadcrumb ?> <?php endif; ?></td> <td><div align="right"><font size="1" face="Arial, Helvetica, sans-serif"><a href="http://www.yahoo.com" target="_blank">Yahoo</a> | <a href="http://www.google.com" target="_blank">Google</a></font></div></td> </tr> </table> Any idea or suggestions are welcome. Hey. I have a problem. When I make a image a background image so I can write on it, I get this white line and I don't know how to get rid of it. Help please! Code: <html> <head> <title>RaptorCo</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <table id="Table_01" width="1024" height="768" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="6"> <img src="images/index_01.jpg" width="1024" height="15" alt=""></td> </tr> <tr> <td rowspan="4"> <img src="images/index_02.jpg" width="217" height="753" alt=""></td> <td colspan="4"> <img src="images/index_03.jpg" width="587" height="158" alt=""></td> <td rowspan="4"> <img src="images/index_04.jpg" width="220" height="753" alt=""></td> </tr> <tr> <td> <img src="images/index_05.jpg" width="108" height="37" alt=""></td> <td> <img src="images/index_06.jpg" width="187" height="37" alt=""></td> <td> <img src="images/index_07.jpg" width="155" height="37" alt=""></td> <td> <img src="images/index_08.jpg" width="137" height="37" alt=""></td> </tr> <tr> <td colspan="4"> <img src="images/index_09.jpg" width="587" height="12" alt=""></td> </tr> <tr> <td colspan="4"> <img src="images/index_10.jpg"><div style="position: relative;top: -500px;">text</div> </tr> </table> </body> </html> Hey. I have a problem. When I make a image a background image so I can write on it, I get this white line and I don't know how to get rid of it. Help please! Code: <html> <head> <title>RaptorCo</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <table id="Table_01" width="1024" height="768" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="6"> <img src="images/index_01.jpg" width="1024" height="15" alt=""></td> </tr> <tr> <td rowspan="4"> <img src="images/index_02.jpg" width="217" height="753" alt=""></td> <td colspan="4"> <img src="images/index_03.jpg" width="587" height="158" alt=""></td> <td rowspan="4"> <img src="images/index_04.jpg" width="220" height="753" alt=""></td> </tr> <tr> <td> <img src="images/index_05.jpg" width="108" height="37" alt=""></td> <td> <img src="images/index_06.jpg" width="187" height="37" alt=""></td> <td> <img src="images/index_07.jpg" width="155" height="37" alt=""></td> <td> <img src="images/index_08.jpg" width="137" height="37" alt=""></td> </tr> <tr> <td colspan="4"> <img src="images/index_09.jpg" width="587" height="12" alt=""></td> </tr> <tr> <td colspan="4"> <img src="images/index_10.jpg"><div style="position: relative;top: -500px;">text</div> </tr> </table> </body> </html> Hey Guys, I just got my latest project online and finished the flash banner for it but for some reason the flash banner seems to be off by 1 pixel to the right, its hardly noticeable but it's buggin me. I dont know if this is an HTML fix or CSS but this is the site. Thanks! Until I die, I will never quite understand tables - if someome could shed some light on this it would allow me to keep what little hair I have left. I have a Table with some form inputs in it as outlined below, the problem is this, there is what looks like a 15px space on the right side and I don't know why its there. Two questions: Size="18" - 18 what? I read that these are the size of a space, but if it is, what is the size of a space? Second, width="50" - 50 what? I am assuming pixels, but with all the problems I seem to have with tables, I'm not sure. <fieldset style="width: 260px"><LEGEND class="legend"> <table width="260"> <tr> <td width="240"><input type="text" size="18" etc.> <td width="20 align="right">There is a 10 x 10 graphic here</td> </tr> </table> </fieldset> Hope I made sense, any help or guidlines that could ease my life with tables would be appreciated. Thx Hello Everyone! (hoping for quick reply.. lol) I am not sure if this should go here, or in the design section. I chose here, because it is a problem in the code itself. I have introduced myself in the introductory section, if you want to know a little bit more about what I am doing this for. I made a template design in The Gimp photo editor. I sliced it up, and opened up the HTML file in the editor Kompozer. It opened up just like it should, but I wanted a liquid type layout, so I turned the cell's widths into the corresponding percentages, though Kompozer rounded them off. (Shown below) However, when I previewed the file this time, it appeared as if it skipped every other cell, leaving a blank white space in its spot. Not even in the right percentages. I think I know what I've done wrong, looking back now that I am writing this thread. Can someone please point me in the right direction? EDIT: Code posted as comment, due to lack of character room. Morning all, I am workign on a small intranet for my department at work. In creating it, this project has slowly snowballed into a larger project. Like most anything we do in life The issue I am having, in the front screen, they would like to show our monitoring software, so at first glance you can tell if any servers are up or not etc. using iframes in design mode, it looks great. But when I view the page, the website I am calling in the iframe takes over the whole page. Below is the code, is there any fix or even so a better way of doing this? Code: table border="0" width="97%" id="table1" cellspacing="0" cellpadding="0"> <tr> <td width="1063"> <table border="0" cellspacing="5" cellpadding="5" align="left" style="border-left-width: 0; border-top-width: 0; border-bottom-width: 0; width: 74%;" id="table2" height="412"> <tr> <td style="border-right-style: solid; border-right-width: 1; border-left-style:none; border-left-width:medium; border-top-style:none; border-top-width:medium; border-bottom-style:none; border-bottom-width:medium; width: 90%;" valign="top"> <p class="MsoNormal" align="left"> <iframe src="https://btdhcp" height="400" width="800" frameborder="0" scrolling="yes"></iframe></p></td> </tr> </table> Any assistance or guidance would be greatly appreciated. Orion Hey, I'm trying to set something so simple as the TD width for 1 specific column, but it will NOT listen to me! http://www.unreal-deals.com/ebook/ad...i-showdata.php I've set the td width on the second column Item_Name to be 5000px, just to see if it would work. It does nothing. No matter if I set the table width to 100% or 300%, setting the TD width does not affect that TD... What am I missing here? Thanks Hi all, I'd really appreciate some help on this one. I have a program which outputs very long strings of text to a HTML page. At the moment the text stays on one line resulting in an annoying horizontal scrollbar. How do I get the page to automatically format the text so that it all fits within a standard width, and so there's no horizontal scrollbar? Regards, Ruth I have a very simple table that I cannot simply get to render correctly across IE, Firefox, and Opera. At first, I was using CSS to define the cell widths/heights - when that was giving me issues I got rid of all the CSS and attempted to use plain HTML. The problem persisted. Here's the code - it doesn't get much simpler than this: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <BODY> <table cellspacing="0" cellpadding="0" border="1"> <tr> <td width="15" height="33">a</td> <td>b</td> <td>c</td> <td width="15" height="33">d</td> </tr> <tr> <td colspan="4" rowspan="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td> </tr> </table> </BODY> </HTML> Appearance in Opera Appearance in IE7 Appearance in Firefox (this is what I want it to look like in all browsers) I haven't done HTML seriously in 7-8 years or so but I don't really remember having these problems with IE/Netscape. The fix I found for IE was to use style="table-layout: fixed" for the table: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <BODY> <table cellspacing="0" cellpadding="0" border="1" style="table-layout: fixed"> <tr> <td width="15" height="33">a</td> <td>b</td> <td>c</td> <td width="15" height="33">d</td> </tr> <tr> <td colspan="4" rowspan="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td> </tr> </table> </BODY> </HTML> Now IE works fine, Firefox didn't break, but Opera's cells still are not 15 pixels. IE7 Appearance fixed Here's my attempt at getting Opera to display it properly by mixing CSS and HTML: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <BODY> <table cellspacing="0" cellpadding="0" border="1" style="table-layout: fixed"> <tr> <td style="width: 15px; height: 33px" width="15" height="33">a</td> <td style="height: 33px">b</td> <td style="height: 33px">c</td> <td style="width: 15px; height: 33px" width="15" height="33">d</td> </tr> <tr> <td style="width: 100%" width="100%" colspan="4" rowspan="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td> </tr> </table> </BODY> </HTML> Opera looks even worse now This seems like such a simple table. I really don't understand why I'm having such a hard time. I believe the second row - using colspan is causing the issue. Please don't answer with - "dont use tables" or something silly like that Thank you -TableTrTd |