|
HTML - Problems With Table Layout
I am trying out a couple of layouts for presenting some information in
table format. Basically, two tables side by side. Table 1: 3 rows, one column fixed width. table 2: A calendar format with 3 rows. In FF they are displayed as I want them. Even if I include an overflow to force a horizontal scrollbar. Ok I know. But if horizontal scrollbars are not desired, then why do we have them? In IE the overflow is totally ignored. Should I happen to have in table 1, a 4th line of text, then the <hr> I use as a seperator, shows up floating beside table 1, not underneath it as it should. Easily fixed with a <br> but I feel that should not be necessary. In IE, A horizontal scroll bar is not displayed until the data is forced way beyond the edge unlike in FF. Then table 2 drops below table 1 which is not where I want it. In another format, I simply place table 2 under table 1. Which is ok but just doesn't look right. Anyone have a site that discusses this problem and how to work around it so that the browsers are satisfied and the tables show as I want? Similar TutorialsI am making a table layout and am having a problem. There are two pictures enclosed.. one is how is should look (minus text) and the other is how it shows up in InternetExplorer Table Code: <body text=#FFFFFF LINK=#FFFFFF ALINK=#FFFFFF VLINK=#FFFFFF> <table width="770" valign="top" border="0" cellpadding="0" cellspacing="0" align="center" alt=""> <tr> <td colspan="4"> <img src="images/header_01.png" width="770" height="185" alt=""></td> </tr> <tr> <td colspan="2" valign="left" width="446" height="71" alt="" style="background: url('images/header_02.png') no-repeat; padding-top: 0px; padding-left: 446px; padding-right: 0px; padding-bottom: 0px;"> </td> <td colspan="2" valign="right" width="324" height="71" alt="" style="background: url('images/header_03.png') no-repeat; padding-top: 12px; padding-left: 10px; padding-right: 535px; padding-bottom: 0px;"> <!---------------------------------News-----------------------------------> <p class="marquee"> <Marquee direction="left" scrollamount="2" scrolldelay="50"> News at 11! </Marquee></p> <!---------------------------------News-----------------------------------> <td> <tr> <td width="229" colspan="1" valign="top" alt="" style="background: url('images/header_04.png') repeat; padding-top: 0px; padding-left: 80px; padding-right: 225px; padding-bottom: 5px;"> <!---------------------------------Navigation------------------------------------> <p class="nav">Main</p> <p class="li"> = <a href="index.html">Home</a><br> </p> <!---------------------------------Navigation------------------------------------> </td> <td class="padding" colspan="2" valign="top" width="282" alt="" style="background: url('images/header_05.png') repeat; padding-top: 40px; padding-left: 3px; padding-right: 3px; padding-bottom: 5px;"> <!----------------------------------Content--------------------------------------> <center>*insert title*</center> <!----------------------------------Content--------------------------------------> </td> <td colspan="1" valign="top" width="257" height="21" alt="" style="background: url('images/header_06.png') repeat; padding-top: 8px; padding-left: 0px; padding-right: 0px; padding-bottom: 5px;"> <!------------------------------------Info---------------------------------------> <center>Hey!</center> <!------------------------------------Info---------------------------------------> </td> </tr> <tr> <td colspan="1" valign="top" width="770" height="118" alt="" style="background: url('images/header_07.png') no-repeat; padding-top: 50px; padding-left: -1px; padding-right: 0px; padding-bottom: 30px;"> <!-----------------------------------Credits---------------------------------------> <center> Site is Copyright © of Concord Cosplay Group 2007<br> Layout by Joel Watson </center> <!-----------------------------------Credits---------------------------------------> </td> </tr> </table> </body> I'm using the Nifty Corners Cube engine to make a 3-column layout (obviously also with rounded corners ). It works fine except for one thing- the columns have no spacing between them no matter what margin I assign to the left, right or center columns (or even padding). The site is at http://www.clanzephyr.uni.cc. Any suggestions? Hello - I have a couple of layout problems in IE 6 & 7 with a website I'm working on. This is the page: http://www.suecorr.com/painting.html I have a class on every fourth thumbnail to get rid of the border on the right hand side, I need the border on all the other ones apart from the ones on the right. This causes problems in IE6 and 7. This is the HTML for the begining of the gallery Code: <div id="gallery"> <ul> <li> <a href="images/Paintings/painting-1.jpg"> <img src="images/Paintings/th-1.jpg" width="185" height="100" /> </a> </li> <li> <a href="images/Paintings/painting-2.jpg"> <img src="images/Paintings/th-2.jpg" width="185" height="100" /> </a> </li> <li> <a href="images/Paintings/painting-3.jpg"> <img src="images/Paintings/th-3.jpg" width="185" height="100" /> </a> </li> <li> <a href="images/Paintings/painting-4.jpg"> <img class="right" src="images/Paintings/th-4.jpg" width="185" height="100" /> </a> </li> And the CSS for the gallery: Code: #gallery{
width: 800px;
height: 100%;
min-height: 100%;
background-color:#FFFFFF;
padding: 20px 50px 20px 50px;
margin: 0 0 0 0;
display: inline;
clear: both;
float: left;
}
#gallery img{
margin: 10px 23px 13px 0;
float: left;
}
#gallery img.right {
margin: 10px 0 0 0;
padding: 0 0 0 0;
}
#gallery ul {
list-style: none;
margin-left: 0;
}
#gallery li {
padding: 0 0 0 0;
}
#gallery ul li {
display: inline;
padding-right: 0;
}
#gallery ul img {
border: 0;
border-width: 0;
}
#gallery img {
-webkit-transform: scale(1);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 300ms;
}
#gallery img:hover{
-webkit-transform: scale(1.05);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 300ms;
}
Thanks for any advice. Dyfrig Hello, I have few problems with layout: 1 In all IE versions fields marked with number 1 move left and right in other browser's it works good. 2 I have marked round corners, this work only in FF browser, chrome, opera doesn't display. Image (for better understand): http://utorrentz.projektas.lt/kita/problem.png My .css: Code: .pagebody {
background: transparent url(box.png);
color: #FFE2AD;
padding: 15px 10px 15px 10px;
text-align: left;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomleft: 6px;
-moz-border-radius-bottomright: 6px;
border-radius: 6px
margin: 0 0 5px;
}
Is there any solution for that ? I've been making a page layout based on www.hardcoder.com. I wrote the code myself, but the only problem is that is shows correctly only in IE7 and sometimes it doesn't show correctly in that either (how is that even possible? very strange...). I've only been coding for three days so there are most probably some mistakes in the code. If you can help I would very much appreciate that. Only the main page is included, but that should be enough. If you run this page in both IE7 and Firefox you should see my problems. Thanks in advance if you got the time to help me! Hi, I am trying to sort out my layout on my site: http://www.dogula.co.uk/index3.php I would like to start adding new pages very soon with a new layout but there is a few things I would like to get sorted first. As you can see the dots continue way off the page, how could I change it so whatever i type only stays in that div box? I am using php require and css stylesheets so I can change everything quickly in one go but there are some things I am not using with php such as everything in the head, would it be ok to use php require for that or is there another way to change it at a later date? I tried using a google search bar as a seach box for my site, but nothing is appearing, they do appear if I use the google site though, does anyone know what I am doing wrong? Most of all as I am going to be making a lot of pages and I don't want to be changing each page one by one, is there anything wrong with the template that could not be changed via style sheets later? Please help me with any questions you can answer, thank you in advance to anyone who can help. I am having problems getting my site to be viewable with IE 7. I have been using IE for years until recently and now I just test my html in firefox. I didn't use any strange methods(that I am aware of) to code this new layout that I designed but for some reason it wont even show up in IE. Here is a link to the layout I am having trouble with and you should be able to view its source from the http://bakavillage.com/layout5/index.php?id=news.php One of the things I thought might have been the cause has to do with some roll-over images I have. Those I have never used before and I tried commenting them out but that did not solve the problem. Thanks in advance to all those reading this. Hello, i'm having a problems of HTML layout on my website, anyway out there can helps me? i don't know how to uploaded images to show you guys but i already post it in my new blog i wish all of you can login and have a look on my problems.http://dubspro.blogspot.com/ Below is my coding i wish u guys can help me out thank you. <body> <table width="100%" cellpadding="" cellspacing="" border="0"> <tr> <td width="50%"> </td> <td> <table cellpadding="" cellspacing=""> <tr> <td colspan="3"> <img src="Final Year Project/heading.jpg" width="780" height="52" /></td> </tr> <tr> <td> <img src="Final Year Project/heading1.jpg" /></td> <td> <img src="Final Year Project/heading2.jpg" /></td> <td> <img src="Final Year Project/heading3.jpg" /></td> </tr> <tr> <td colspan="3"><img src="Final Year Project/heading4.jpg" /></td> </tr> <tr> <td colspan="3" > <table cellpadding="0" cellspacing="0" border="0"> <tr> <td><img src="Final Year Project/heading5.jpg" /> </td> <td><img src="Final Year Project/button1.jpg" /> </td> <td><img src="Final Year Project/heading6.jpg" /> </td> <td><img src="Final Year Project/button2.jpg" /> </td> <td><img src="Final Year Project/heading7.jpg" /> </td> <td><img src="Final Year Project/button3.jpg" /> </td> <td><img src="Final Year Project/heading8.jpg" /> </td> <td><img src="Final Year Project/button4.jpg" /> </td> <td><img src="Final Year Project/heading9.jpg" /> </td> <td><img src="Final Year Project/button5.jpg" /> </td> <td><img src="Final Year Project/heading10.jpg" /> </td> <td><img src="Final Year Project/button6.jpg" /> </td> <td><img src="Final Year Project/heading11.jpg" /> </td> </tr> </table> </td> </tr> <tr> <td colspan="13" b><img src="Final Year Project/heading12.jpg" /> </td> </tr> </table> </td> <td width="50%"> </td> </tr> </table> </body> </html> Hi This is my first post and hopefully I am in the correct place to receive some help. I am totally unsure how to layout my page correctly. Firstly, is there a recommend width, and if so I do I correct the script accordingly. I seem to have different cells at various widths and do not know to to correct. Essentially, the page needs headers and footers covering the whole width, with 2 cells for text and picture in yhje main body section. What I am attempting to do is add text to the cells with images so as the images stay in place and the text wraps around the image. I would be grateful if someone could take time to look at the page script and make some recomendation towards improvement in the layout, or better still post back somre changes. This is my site http://www.janitorman.net/rions/info.htm I hope I have explained with enough detail. Regards Ludo Hi Guy's, First time poster and newbie designer. I am trying to put a three column template together for a content site, I want to have the text in the middle, nav on the left and adsense on the right hand column. Problem is that I simply can't get the elements to align correctly, when I add the text, the images on the left and right are pushed down to the middle of the left and right columns and if I push up the left image using text and white space it pushes the text in the middle column out of alignment!!! It's incredibly frustrating and I have tried lots of alignment settings to get it to work but I can't and I am sure I am just missing some real basic things. Please can you look at the page and help me to find what I am doing wrong http://www.blueballoonshopping.info/3colprob.html Thanks SEE IMAGE How can I get these two tables on the same row? Do they have to be in one whole table altogether? Or can they be separate tables. At the 'mo they're different tables. Thanks This is pretty basic, i am trying to make a layout using tables to include a header, nav bar, left, main and right columns(tables) and a footer, so far i have this(below), the header and nav bar work ok, after that the tables align to the left out of postion with the header etc, how do i get the left table to be flush with the header and nav bar tables and then the middle table and right tables(cols) to be in the right place??... any help here....? HTML Code: <table width = "80%" border = "1" align = "center"> <tr> <td> Header </td> </tr> <table width = "80%" border = "1" align = "center"> <tr> <td> Nav bar</td> </tr> </table> <!-- i can't get this table to be flush with the header and nav bar tables --> <table width = "20%" border = "1" align = "left"> <tr> <td> Left col </td> </tr> </table> </table> This is what i am trying to achieve, It figures it's the easy things that are getting me..lol. For some reason I just can't seem to get the table to match what I am looking for. Could be I am up too late trying to get this to work but if anyone could provide the table code I would need to get the following it would be much appreciated!! I don't need any of the width attributes or anything, just the basic table structure to get this layout!! Thank you in advance for the help!! A crude drawing but hopefully gets the idea across..lol I designed a page using tables with background images to create borders around photos. Click here to view the page. The page renders correctly in Firefox, but does not in IE7. The lower right hand corner border of the photo in the 2nd and the 4th testimonials is off track for some reason. I double checked all of my widths and they are consistent. Can someone please tell me what I'm missing. Thanks in advance for your help! I have a template that is being used for a forum and the tables are not working out and everything looks distorted. PHP Code: <script language="JavaScript" src="modules/Forums/bbcode_box/add_bbcode.js" type="text/javascript"></script> <table border="0" cellpadding="3" cellspacing="1" width="100%" class="forumline"> <!-- BEGIN switch_username_select --> <tr> <td class="row1"><span class="gen"><b>{L_USERNAME}</b></span></td> <td class="row2"><span class="genmed"><input type="text" class="post" tabindex="1" name="username" size="25" maxlength="25" value="{USERNAME}" /></span></td> </tr> <!-- END switch_username_select --> <!-- BEGIN switch_privmsg --> <tr> <td class="row1"><span class="gen"><b>{L_USERNAME}</b></span></td> <td class="row2"><span class="genmed"><input type="text" class="post" name="username" maxlength="25" size="25" tabindex="1" value="{USERNAME}" /> <input type="submit" name="usersubmit" value="{L_FIND_USERNAME}" class="liteoption" onclick="window.open('{U_SEARCH_USER}', '_phpbbsearch', 'HEIGHT=250,resizable=yes,WIDTH=400');return false;" /></span></td> </tr> <!-- END switch_privmsg --> <tr> <td class="row1" width="22%"><span class="gen"><b>{L_SUBJECT}</b></span></td> <td class="row2" width="78%"> <span class="gen"> <input type="text" name="subject" size="45" maxlength="60" style="width:450px" tabindex="2" class="post" value="{SUBJECT}" /> </span> </td> </tr> <tr> <td class="row1" valign="top"> <table width="100%" border="0" cellspacing="0" cellpadding="1"> <tr> <td><span class="gen"><b>{L_MESSAGE_BODY}</b></span> </td> </tr> <tr> <td valign="middle" align="center"> <br /> <table width="100" border="0" cellspacing="0" cellpadding="5"> <tr align="center"> <td colspan="{S_SMILIES_COLSPAN}" class="gensmall"><b>{L_EMOTICONS}</b></td> </tr> <!-- BEGIN smilies_row --> <tr align="center" valign="middle"> <!-- BEGIN smilies_col --> <td><img src="{smilies_row.smilies_col.SMILEY_IMG}" border="0" onmouseover="this.style.cursor='hand';" onclick="emoticon('{smilies_row.smilies_col.SMILEY_CODE}');" alt="{smilies_row.smilies_col.SMILEY_DESC}" title="{smilies_row.smilies_col.SMILEY_DESC}" /></a></td><!-- END smilies_col --> </tr> <!-- END smilies_row --> <!-- BEGIN switch_smilies_extra --> <tr align="center"> <td colspan="{S_SMILIES_COLSPAN}"><span class="nav"><a href="{U_MORE_SMILIES}" onclick="window.open('{U_MORE_SMILIES}', '_phpbbsmilies', 'HEIGHT=300,resizable=yes,scrollbars=yes,WIDTH=250');return false;" target="_phpbbsmilies" class="nav">{L_MORE_SMILIES}</a></span></td> </tr> <!-- END switch_smilies_extra --> </table> </td> </tr> </table> </td> <td class="row2" valign="top"><span class="gen"> <span class="genmed"> </span> <table width="450" border="0" cellspacing="0" cellpadding="2"> <tr align="right" valign="middle"> <td> <p dir="rtl" style="margin-top: 0; margin-bottom: 0" align="left"><span class="gen"> <span class="genmed"> <span lang="ar-sy"> </span></span></span></span><p dir="rtl" style="margin-top: 0; margin-bottom: 0"> <span class="genmed"><span style="font-size: 5pt"> </span></span></td> </tr> <span class="gen"> <tr> <td width="100%"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <p dir="ltr" align="left"><span class="gen"> <span class="genmed"> <span lang="ar-sy"> </span></span></span></td> </tr> <tr> <td dir="rtl"> <p align="right" dir="rtl" style="margin-top: 0; margin-bottom: 0"> <span style="font-size: 5pt"> </span><p align="left" dir="ltr" style="margin-top: 0; margin-bottom: 0"><span class="gen"> <span class="genmed"> </span></td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td colspan="9"> <span class="gensmall"> <input type="text" name="helpbox" size="45" maxlength="100" style="width:450px; font-size:10px" class="helpline" value="{L_STYLES_TIP}" /> </span></td> </tr> <!-- Canned MOD Begin --> <tr> <td colspan="9">{S_CANNED_SELECT}</td> </tr> <!-- Canned MOD End --> <tr> <td colspan="9"><span class="gen"> <textarea name="message" rows="15" cols="35" wrap="virtual" style="width:450px" tabindex="3" class="post" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);">{MESSAGE}</textarea> </span></td> </tr> </table> </span></td> </tr> <tr> <td class="row1" valign="top"><span class="gen"><b>{L_OPTIONS}</b></span><br /><span class="gensmall">{HTML_STATUS}<br />{BBCODE_STATUS}<br />{SMILIES_STATUS}</span></td> <td class="row2"><span class="gen"> </span> <table cellspacing="0" cellpadding="1" border="0"> <!-- BEGIN switch_html_checkbox --> <tr> <td> <input type="checkbox" name="disable_html" {S_HTML_CHECKED} /> </td> <td><span class="gen">{L_DISABLE_HTML}</span></td> </tr> <!-- END switch_html_checkbox --> <!-- BEGIN switch_bbcode_checkbox --> <tr> <td> <input type="checkbox" name="disable_bbcode" {S_BBCODE_CHECKED} /> </td> <td><span class="gen">{L_DISABLE_BBCODE}</span></td> </tr> <!-- END switch_bbcode_checkbox --> <!-- BEGIN switch_smilies_checkbox --> <tr> <td> <input type="checkbox" name="disable_smilies" {S_SMILIES_CHECKED} /> </td> <td><span class="gen">{L_DISABLE_SMILIES}</span></td> </tr> <!-- END switch_smilies_checkbox --> <!-- BEGIN switch_signature_checkbox --> <tr> <td> <input type="checkbox" name="attach_sig" {S_SIGNATURE_CHECKED} /> </td> <td><span class="gen">{L_ATTACH_SIGNATURE}</span></td> </tr> <!-- END switch_signature_checkbox --> <!-- BEGIN switch_notify_checkbox --> <tr> <td> <input type="checkbox" name="notify" {S_NOTIFY_CHECKED} /> </td> <td><span class="gen">{L_NOTIFY_ON_REPLY}</span></td> </tr> <!-- END switch_notify_checkbox --> <!-- BEGIN switch_delete_checkbox --> <tr> <td> <input type="checkbox" name="delete" /> </td> <td><span class="gen">{L_DELETE_POST}</span></td> </tr> <!-- END switch_delete_checkbox --> <!-- BEGIN switch_lock_topic --> <tr> <td> <input type="checkbox" name="lock" {S_LOCK_CHECKED} /> </td> <td><span class="gen">{L_LOCK_TOPIC}</span></td> </tr> <!-- END switch_lock_topic --> <!-- BEGIN switch_unlock_topic --> <tr> <td> <input type="checkbox" name="unlock" {S_UNLOCK_CHECKED} /> </td> <td><span class="gen">{L_UNLOCK_TOPIC}</span></td> </tr> <!-- END switch_unlock_topic --> <!-- BEGIN switch_type_toggle --> <tr> <td></td> <td><span class="gen">{S_TYPE_TOGGLE}</span></td> </tr> <!-- END switch_type_toggle --> </table> </td> </tr> {ATTACHBOX}{POLLBOX} <tr> <td class="catBottom" colspan="2" align="center" height="28"> {S_HIDDEN_FORM_FIELDS}<input type="submit" tabindex="5" name="preview" class="mainoption" value="{L_PREVIEW}" /> <input type="submit" accesskey="s" tabindex="6" name="post" class="mainoption" value="{L_SUBMIT}" /></td> </tr> </table> <table width="100%" cellspacing="2" border="0" align="center" cellpadding="2"> <tr> <td align="right" valign="top"><span class="gensmall">{S_TIMEZONE}</span></td> </tr> </table> </form> <table width="100%" cellspacing="2" border="0" align="center"> <tr> <td valign="top" align="right">{JUMPBOX}</td> </tr> </table> {TOPIC_REVIEW_BOX} Could somebody take a look at that and see what I'm missing or need to add. Thanks Im creating a site using a table based layout. I have one table and many different cells. I also have a lot of different content. The problem I'm having is when I put a picture inside a cell, it screws up the entire layout. It doesn't stay "still", it just affects all the other cells. I always have this problem, yet can't find a solution. Hi there. Can anybody help me fix this issue. At this test url you will see a simple table layout that I have built in Dreamweaver http://www.mediaminx.com/development/ The css can be viewed here http://www.mediaminx.com/development/pages/test.css The problem is not Firefox as this renders the layout perfectly - as does 3 other popular browsers. The problem is IE - it just wont render the layout correctly. All the table cells are out of proportion and the css just isnt controlling. Note that when the middle cell isnot split into may cells ie will render the table correctly - as in 3 columns with the middle one at 760pix and the two outer set to auto and the height set to 100%. But as soon as I start splitting that middle column it throws IE out? Any ideas out there please? So I had a friend who owed me some work layout my new website. He did it in a table format and probably used a template. I hate working with tables and I've been trying to get a nav bar underneath the main picture, but I don't remember how to do it in tables. I wish he would have done the whole layout in CSS. So the question is: can I place a nav box absolutely on the page even though it's a table layout? Or what if it scrolled down with the reader? That's javascript right? I kinda like the layout so I don't want to muck too much with the look and feel (plus I have to build about 15 more pages of information before I can put too much work on layout). You can see the website he http://www.hollywood-script-reader.com I started a navigation box in my CSS, but it either puts it right at the top or below the whole layout. Thought I'd let the masters tell me why I suck at this! Thanks everyone. I feel like I have this forum on speed dial. Roberto Hello, I cannot seem to get my css menu to work in harmony with my html table. Here is where the problem lies: http://www.beta.iquorum.net It looks fine sometimes when the page is maximized. However, when you resize the browser to a smaller size, it distorts the alignment. I know it does this because the layer that the menu resides in has a fixed coordinate position, while my table is aligned via the align tag in my HTML code. Is there a way to somehow put the menu inside of the cell of my table? Every time I try, it completely ruins the layout of the page and prevents the menu from functioning correctly. Is there a way to possibly define a fixed coordinate position for a table rather than using the align="center" tag? Just a thought. Thanks for any suggestions. Hello, I made a very simple table layout (with photoshop and imageready) and its my very first time making this type of layout so I'm having a little trouble with the coding. I haven't added a style.css file to it, except for maybe the css that wraps my navigation to a certain width. Here is the url: http://rezina.awardspace.com/layout01 I can't seem to align the images correctly. My friend told me that one of the images was not sliced correctly, so I sliced it but .. it kind of fixed the right side, and not the left. Also, the extra.jpg (which is the outside background-the stripes) seems to repeat itself both vertically and horizontally, is there a way to fix that? Thanks. =)) oh. oops. I just read the rules, sorry for the vague title. I would try changing it to be more specific but I don't know how.. |
|||||||