|
HTML - Strange Table Problem
On another forum I posted this:
Quote: Originally Posted by Originally Posted by Turbohog Well, my site: http://www.freewebs.com/turbohog/ only seems to work correctly in full window in firefox. If you make the window smaller words from one column will start going to other columns and stuff! And it flat out doesn't work in IE or Opera. I want the words to stay in their proper column when you change the window size, I know it's possible. Please help. Then someone replied: Quote: Originally Posted by Originally Posted by Someone When you float (read: align="left" etc) an element like a table to the left or right, it'll always be as far left as it can go in the constraints. In this case, the constraint is the actual window, meaning your left and right-floated tables are always going to be on the left and right of the window. Since you've created those two tables first, they take priority over the center table, causing your overlapping tables. "Fixing" it isn't all that difficult, and it involves creating an invisible frame around your three table layout to keep them organised. Take out the align="whatever" crap, and, around the three tables, make another table with no border which has a width of 100%. Make one row with three cells in this table, and put each of your column tables in them. Align one cell to the left, one to the center and one to the right, and you have your frame. Then I posted: Quote: Originally Posted by Originally Posted by Turbohog Thanks, but I think I messed up. How can I get it so all the tables are spread out like they are in full window in firefox and the middle is a bit messed up: Code:http://turbohog.wordpress.com/?p=9 Use http://www.freewebs.com/turbohog/ as a reference, I appreciate the help! And no one replied, I desperately need the help and it would be highly appreciated! Similar TutorialsI've been running into a bit of trouble trying to get a tabular setup working in XHTML using some limited CSS stuff. I've been working with a new layout for my existing site. The main idea is he http://www.etherealdivine.com/newsite/new.html As you can see, there are some issues with the menu text staying where it should. Here's the code for that page: 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>Ethereal Divine</title>
<style type="text/css">
body {
font-family: Croobie, Comic Sans MS;
}
</style>
</head>
<body style="border: 0; margin: 0; color: red; background-color: black;">
<div style="display: table; width: 100%;">
<div style="display: table-row; width: 100%;">
<div style="display: table-cell; width: 100%; text-align: center">
<h1>Ethereal Divine</h1>
</div>
</div>
<div style="display: table-row; width: 100%;">
<div style="display: table-cell; width: 100%;">
<div style="display: table; width: 100%;">
<div style="display: table-row; width: 100%;">
<div style="display: table-cell; width: 30%;">
<b>Menu</b><br/><br/>
Page 1<br/>
Page 2<br/>
Page 3<br/>
Page 4<br/>
Page 5<br/>
Page 6<br/>
Page 7<br/>
Page 8<br/>
Page 9
</div>
<div style="display: table-cell; width: 70%;">
<div style="display: table; width: 100%;">
<div style="display: table-row; width: 100%;">
<div style="display: table-cell; width: 100%;">
<img src="border.jpg" alt="Header Image" width="100%"/>
</div>
</div>
<div style="display: table-row; width: 100%;">
<div style="display: table-cell; width: 100%;">
Welcome to Ethereal Divine<br/><br/>
News<br/>
News<br/>
News<br/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="display: table-row; width: 100%;">
<div style="display: table-cell; width: 100%;">
</div>
</div>
<div style="display: table-row; width: 100%;">
<div style="display: table-cell; width: 100%;">
© Amber & Brendan 2008
</div>
</div>
</div>
</body>
</html>
Strangely, if the image-containing div has just text in it, everything works the way it should: http://www.etherealdivine.com/newsite/new_text.html Any tips would be helpful, I just can't figure out what I'm doing wrong. Both pages have been validated using validator.w3c.org. Thanks in advance. I am working on a new site layout, and for some reason in IE6/IE7 if you go directly to the webpage I am working on, it doesn't load correctly (won't load my background gradient, and doesn't format the site properly) when I try to reload the page, I get the same problem. if I go to any site (with css, without css, etc) and then go to my page it loads properly. the source code is the same when it loads properly and when it doesn't so I have absolutely no idea how to fix this problem. Regards, David King I designed a site using HTML and CSS. The site works fine on all browsers except on the client's pc. He has IE 7. When I try it on my computer using the same browser IE7 it works fine. I told him to try the site on FFox and it worked ok. He wants the site to run on his pc using IE. I tried asking him to clear all cookies... doenst work. Any ideas want can be the problem? THANKS! hi, I have a css popup window (a lightbox) for videos, opened by javascript. If I want to close it, I've to select the white overlay on the background. On Windows, everything works very well in Firefox, IE and Safari. On Mac, I can't use the flash player controls because when I click on it, the video is closed (I guess because the overlay is selected even if it is behind the video). Isn't strange ? thanks This is driving me nuts!! Is anyone able to see the difference in the logo postion on these two pages: http://www.i3design.com/ Compared with this page: http://www.i3design.com/services/index5.html Ive tried this on two computers, and two browsers (Chrome and firefox). These pages are 9px out on every computer I try. Ive totally stripped out the footer, extra css, javascript etc and it is STILL 9px out. Hello all! I created a form the other day with a few fields in it: [LINK REMOVED]. If I click the textarea (Agency Notice. section), the cursor keeps jumping up to the subject. What the heck is going on here? lol Thanks in advance! This is a problem that is not really a problem. With one of my websites, the flash does not display properly when I view the site from a file on my computer. When I view the site online, everything is properly displayed. When viewing the file (when I test the page with my CoffeeCup html editor) in the browser, flash items such as video players, news feeds, and audio players, show with the bottom and right hand portions clipped off. Again, when viewing the page on the web, everything is normal. I have coded the flash on this page the same way I have coded it on my other websites, and on the other sites there is no problem. I have gone over the stylesheet for the page and found no errors. I have been unable to find any html coding errors that might account for this. Anyone else ever run into this sort of thing? Hey guys I am creating this website http://www.upfrontdesigns.co.uk/build/services.html but when you click on the click here for more info click it more down to the correct section but the header disappears in firefox. Its ok in IE tho Any Ideas? Hi, For some reason on my website ( http://www.the-undefined.net/index.php ) a random "<" keeps popping up in one of two places on the screen. It either appears in the very top corner of the screen, the top corner of the central table of the page OR not at all... This isn't a HUGE problem or anything but it is slightly annoying... AND I can't get rid of it and I have no idea... The site is for a webcomic and uses PHP Inclusion to add content (e.g. index.php?id=ep1 is the page for episode one) Here's the coding of the index.php page: HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>the-undefined.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css">
<script type="text/javascript">
function getURL(val){
base = 'http://www.the-undefined.net/index.php?id=ep';
location = base + val;
return false;
}
</script>
</head>
<body bgcolor="#2A2A2A">
<table align="center" width="650" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right" colspan="2">
<table width="450" border="0" cellspacing="5" cellpadding="0"><tr>
<td id="nav-top"><a href="index.php?id=home" title="the home">home</a></td>
<td id="nav-top"><a href="index.php?id=story" title="the story">the story</a></td>
<td id="nav-top"><a href="index.php?id=eplist" title="the ep list">ep list</a></td>
<td id="nav-top"><a href="index.php?id=omake" title="the omake">omake</a></td>
<td id="nav-top"><a href="index.php?id=site" title="the site">site</a></td>
<td> </td>
</tr></table>
</td>
</tr>
<tr>
<td height="350" valign="top" align="left" colspan="2" style="border: 15px solid #f0f0f0;">
<?php
// checks if $z is defined
if($id) {
$x = basename($id);
// Adds an extension to $z. E.g., if $z was main, then after this line, $z becomes main.php
$id .= ".php";
// Checks if $z is in the current directory
if (is_file("./$id")) {
// Includes $z
include($id);
} else {
// If $z is not in the current directory, an error comes out
echo "<center><br><br><b>404 Error:</b><br><br>The page you are looking for, <b>$id</b> doesn't seem to exist!</center>";
}
} else {
// Include main.php if $z is not defined
include("home.php");
}
?>
</td>
</tr>
<tr>
<td align="left">
<table width="170" border="0" cellspacing="5" cellpadding="0"><tr>
<td> </td>
<td id="nav-bottom"><a href="index.php" title="the domain">the undefined</a></td>
</tr></table>
</td>
<td align="right">
<table width="200" border="0" cellspacing="5" cellpadding="0"><tr>
<td id="nav-bottom"><a href="index.php?id=ep1" title="the first ep">first ep</a></td>
<td id="nav-bottom"><a href="index.php" title="the last ep">last ep</a></td>
<td> </td>
</tr></table>
</td>
</tr>
</table>
<center><br><br><br><br><br><br><br><font color="#444444"><b>© Copyright 2006<br>All Rights Reserved</b></font></center>
</body>
</html>
And for example an episode page is: HTML Code: <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr><td> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="625" height="350"> <param name="movie" value="001.swf"> <param name="quality" value="high"> <embed src="001.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="625" height="350"></embed> </object> </td></tr> <tr><td style="background-color: #f0f0f0; color: #000000; font-family: Verdana; font-size: 11px; text-align: right; padding: 5px;" valign="center"> <table width="200" border="0" cellspacing="0" cellpadding="0" align="right"> <tr><form id="form1" name="form1" method="post" action="" onsubmit="return getURL(this.url.value)" style="padding: 0px;"> <td style="background-color: #f0f0f0; color: #000000; font-family: Verdana; font-size: 11px; text-align: right;"> « <s>Prev</s> | </td> <td style="background-color: #f0f0f0; color: #000000; font-family: Verdana; font-size: 11px; text-align: center;"><input name="url" type="text" style="background-color: #ffffff; color: #000000; text-align: center; border: 1px solid #000000; width: 30px; height: 16px; font-size: 11px; font-family: Verdana; vertical-align: middle;" class="form" /></td> <td style="background-color: #f0f0f0; color: #000000; font-family: Verdana; font-size: 11px; text-align: left;"> | <a href="index.php?id=ep2" title="the next" style="color: #000000;">Next »</a> </td> </form></tr> </table> </td></tr> </table> And it keeps randomly appearing everytime I refresh the page! Can anyone help...? Thanks, Spedman975 P.S. Sorry if this isn't where I should post this but I'm new to this! Hello to everyone. I have very strange problem with html. This is the page link http://www.mrgole.net/Mobiflirt When you open the page the secound image field in main content is empty, but when you refresh and wait 1 sec, repeating this until the picture is showen. I really don't know whay this is happening. And I also noticed with firebug when picture is displayed html code is ok, but when the picture isn't the html code add ''href'' tags. Example: This is the right code when picture is dispayed: Quote: <div id="content_box"> <a href="#"> <div id="box_img"> </div> <div id="box_title"> <span class="name_title">JanjaXxX</span><br> <br> <br> <span class="p_content">Starost: 23 let Regija: Dolenjska išče moškega </span> </div> </a> </div> And this is the code when picture is not dispayed, and browser or somebody adds the new ''href'' tag. Quote: <div id="content_box"> <a href="#"> </a> <div id="box_img"> </div> <a href="#"> </a> <div id="box_title"> <span class="name_title">JanjaXxX</span><br> <br> <br> <span class="p_content">Starost: 23 let Regija: Dolenjska išče moškega </span> </div> <a href="#"> </a> </div> The problem only expose in Firefox. I have a a site that is builded with divs.Here is the structu Code: <div id="container"> <div id="header"> </div> <div id="slideShow"> </div> <div id="sideAdvs"> </div> <div id="articles"> </div> <div id="footer"> </div> </div> Although the footer in my code is inside the container div, on the browser arrives outside of it..I really don't know what to do and i'm a click away of ruinning my pc P Hello, I am newbie, just has started my adventure with html. I tried to make an easy static site, without any additional thingd, but it occured a problem. 1. I mean, as I put table in table because I did know how to to id in different way, to make buttons on the left stay up while text on the right is moving- if I do normal table with 2columns and on the left lets say 5rows for buttons, on the right I unite all rows to make one big sort of box for contents, as I go down and try to write something morre, the rows from the letf were enlarging too If the size of explorer or firefox is nor full screen, the text in contents is going away (like now in lycos server, where screen is not full, but "cut" by advertise) 2. I have highlighted buttons, but not always works, why? (i mean it works, but darker buttons are charging so slow- maybe it is so because i saved them in pgn instead in gif, and each one is about 50kb?) -probably it is not this- because I have just changed into gif, and it is still the same 3. Another problem, as I post the site, I have notice, that in firefox I can not navigate with buttons, while in explorer yes, is it a fault of my coding, or of server where I put website? Here I post my website: http://members.lycos.co.uk/aniaacolgate/ Could someone take a look on the code, and will be so kind to correct me? It is a basic easy site of very begginger I just wanted to make a shape like this: - top: a banner - buttons in horizontal and vertical way - under buttons: contents (sincerly would like to put frames, but do not know how to put them there, is on the left there r buttons Thank you so much in advance for reply Sorry for mistakes in language Hi, I have a problem with my tables. I made 1 table with 3 TD/tables in them. And have text them. The problem though is that in the first two tables the text begins in the middle. I want it to start at the top like the third does which also contains most text and fills up the whole 3rd table. How can I solve it? Thanks. I've created my site using mainly Netscape and Mozilla. It looks fine, even though the code is a little messy. But one page won't display properly in IE, only in Mozilla: http://kukla.tv/cbs.html The top tables are constrained to the browser width in both browsers, but not the large bottom table (the list of films). I even made the bottom table 997 pixels rather than 100% of page width, but it still does not wrap the text in IE, only in Mozilla. What do I need to do? Thanks, Mark I have a table problem where in table (A) and any tables under gets longer, links and content in table (B ) doesn't stay aligned to top, the whole content in table (B) and any others appears away from the top, even in the middle so the top part becomes blank I'd like the content in A as well as B stay on the top and no blank spaces appear on the top of them I'll appreciate any quick fix for this issue kind regards Here's the problematic table I have Quote: <table width="79%" height="100%" border="0"> <tr> <td width="63%" scope="col">A</td> <td width="37%" rowspan="3" >B<br /> </td> </tr> <tr> <td> </td> </tr> <tr> <td scope="row"><table width="100%" border="0" > <tr> <td width="230"> </td> <td width="230"></td> <td width="230" border="0"></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table></td> </tr> </table> I am having a problem getting a table to render properly in IE (including version 7): Test Page Why does extra padding show up to the right of the "+ Select" button? I want the table to collapse to the size of the content, but I can't find ANY combination of CSS that forces IE to do this. Firefox renders the page OK. OK Look I Have This Code: HTML Code: <table align="center" width="1010" border="1" cellpadding="0" cellspacing="0" name="table"> <tr> <td background="http://www.imageshack.com/up/mywyjwz3m4.png" width="1010" height="952" style="background-repeat:no-repeat;;background-position:center"> <img src="full.jpg" style="position:absolute;left:0px;top:0px;"> </td></tr> Now, What I Wanted To Know If With This Code: HTML Code: style="position:absolute;left:0px;top:0px;" Can I Move The Object Just In The Table If I Will Give Him For Example: HTML Code: left:0px;top:0px; So It Will Be Like That: And No Like That: Please Help Me! Hi, I have a table layout (I know I should be using CSS ... but it was a quick site!) I have table width 100% and then 2 columns with td both set to 50% There are many text and images / tables & tr & td within both of the above. I have ensured no table or td within the 50% ones have any width measurements. However, when I minimise the window it doesn't seem to be keeping them 50/50 the left column seems to stay the same size. From the looks of it (images etc) it should re-size far more before it stops. Can anyone advise of typical things i should be looking for in my code that may be causing this? Cheers, d |
|||||||