|
HTML - Imageready Colspan/table Problems
Hope someone can help with this. I think I have a colspan problem, though I'm not entirely sure. Here's what is happening -> websiteproblem.jpg
Here's the code for what is happening -> websiteproblemhtml.jpg And would anyone know why I am not able to post text over my background image (images/OHDGwebsitebanner7_06.jpg)?? Would this be easier to do in Macromedia Dreamweaver? Thanks for all of your help! Similar TutorialsHi, I'm really new to HTML and CSS, but I'm trying to teach myself. Maybe you can help with this problem: I have a table on my homepage that contains 3 columns. I want the first column to have multiple rows (each at 75px high), but I want the 2nd and 3rd column to only have 1 row, and have variable height. I used a colspan tag in the HTML, which seemed to work, in Safari. But I'd like it to look the same in all browsers. In Safari, my first column, top cell, is displayed at the top of the table. And in Firefox and Chrome, that first cell is displayed at the bottom of the table. How can I get the cells to start at the top of the table (each 75 px high) and build from the top-down. For example, This is a screen-shot of what I'd like to have in all browsers: http://toddk.org/table-css-help.png Here is my site: http://toddandjill.com/ CSS: http://toddandjill.com/tkstyles.css These are the CSS properties for my table (also in the CSS file above): HTML Code: .home-table {
margin: 20px auto 0px auto;
border-spacing: 8px 0px;
}
.home-table .row1 {
width: 316px;
height: 0px;
NOborder: 3px dotted;
vertical-align: text-top;
}
.home-table .row2 {
width: 316px;
height: 75px;
border-bottom: 2px dotted #c1c1c1;
vertical-align: text-top;
}
Any help would be greatly appreciated, thanks!! Todd I'm trying to create a table that looks like this: Code: ============ || || || || || || ======= || || || || || ============ I use this code: Code: <table border='1'> <tr> <td>Text</td> <td rowspan='2'>&nbsp;</td> </tr> <tr> <td colspan='2'>Text</td> </tr> </table> But it comes out looking like this: Code: ============ || || || || || || =======----- || | || || | || ============ with 2 of the lines continuing. I can't seem to get it like the first picture. Any help is appreciated. This might be a very simple problem to fix but I am struggling to find a solution. Basically this is the code for my table: HTML Code: <table cellpadding="0px" border="0px" > <tr><td rowspan="6" width="290px" height="375px"><img width="286px" height="371px" src="test.png"></td> <tr><th>Title</th></tr> <td colspan="2" width="450px">Content 1 <td width="75px"><img width="75px" height="75px" src="test.png"> </td></tr> <td width="75px"><img width="75px" height="75px" src="test.png"> <td colspan="2" align="right" width="450px">Content 2 </td></tr> <td colspan="2" width="450px">Content 3 <td colspan="2" width="75px"><img width="75px" height="75px" src="test.png"> </td></tr> <td width="75px"><img width="75px" height="75px" src="test.png"> <td align="right" width="450px">Content 4 </td></tr> </table> Basically the problem I have, is I want the 'content 4' box to be the same as the 'content 2' box (Stretched to the full width of the table.). Does anyone know what I'm doing wrong, I'm sure it's really obvious. Any help will be greatly appreciated. Ok i have this pretty much setup they way I want it but the text
Quote: Please enter the hours your establishment is open for business. is all bunched up. How do I have that text all show on a single line but keep my boxes and eveything else where it is? Here is a pic so you can see what im talking about... Here is my page. It is ok in IE. I want exactly as in IE. But in Firefox it is displaying the columns differently. In 2nd row the col2 (Actually 2 and 3 colspan) starting from 3rd column where it shud start from 2nd col (As in IE). (I cannt use fixed width). How to fix this. <!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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <body> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="2" bgcolor="#999999"> cols 12</td> <td width="7%" bgcolor="#CCCCCC">col 3</td> <td width="10%">col 4</td> <td width="8%">col 5</td> <td width="8%">6</td> <td width="6%">7</td> <td width="6%">8</td> <td width="6%">9</td> <td width="6%">10</td> <td width="6%">11</td> <td width="7%">12</td> <td width="6%">13</td> <td width="8%">14</td> </tr> <tr> <td width="4%" bgcolor="#996666">col 1</td> <td colspan="2" bgcolor="#99CCFF">cols 23</td> <td>col 4</td> <td>col 5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td colspan="2" bgcolor="#999999">cols 12</td> <td bgcolor="#CCCCCC">col 3</td> <td>col 4</td> <td>col 5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td colspan="2" bgcolor="#999999">cols 12</td> <td bgcolor="#CCCCCC">col 3</td> <td>col 4</td> <td>col 5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td bgcolor="#996666" width="4%" >col1</td> <td colspan="13" bgcolor="#FFCCCC">cols 234567891011121314</td> </tr> </table> </body> </html> If I specify widths for all cols It is OK. Then If I give a value like 'fdgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfg' in first row in Col12 2nd row col1 width increasing. It shud be fixed. I hope u understand. Thanks in advance. Please help, I have taken my website from fireworks and exported it to Dreamweaver. In my editable html text area I can't change the H1 to a h2 tag with out the entire table changing due to colspan and rowspan automaticly being added by either fireworks or by dreamweaver. If I delete the colspan code the table collapes??? The tutorial I am following allows the instructor to change on his with ease. Firworks cs3 and dream cs3 Thanks you in advance. Yes im a begginner...lol Ok, this is the strangest quirk I think I have seen in IE. It seems that when I combine a right-aligned TD with a UL in the following row in a TD with a colspan of "2", where the content of the right-aligned TD is a word with no spaces, IE goes into spasms. In Opera, Google Chrome, Firefox, and Safari, all is well. Yet in IE, right-padding seems to get automatically added to the right-aligned TD. If I either remove the UL, get rid of the first column in the first row, or break up the long word, it displays fine. Yet, if all those things remain in place, IE just doesn't seem to be able to get its act together. Anyone? Here is my code: HTML Code: <?xml version="1.0" encoding="UTF-8"?>
<!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" xmlns:xhtml="http://www.w3.org/1999/xhtml">
<head>
<title>Stupid IE</title>
<style type="text/css">
td{
font-family:Garamond;
}
table.Experience{
width:635px;
margin-bottom:14px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
}
tr.expHeader{
font-weight:bold;
font-size:10pt;
}
td.expDate{
width:130px;
}
td.expCo{
width:205px;
}
td.expLoc{
text-align:right;
width:505px;
}
td.expList{
font-size:11pt;
text-align:justify;
}
td.expList ul{
margin-top:3px;
list-style-type:square;
margin-bottom:6px;
}
td.expList ul li{
margin-bottom:2px;
}
</style>
</head>
<body>
<table class="Experience" cellpadding="0" cellspacing="0">
<tbody>
<tr class="expHeader">
<td class="expDate">Here is a td</td>
<td class="expLoc">Averyveryreallylonglongwordthatislonger</td>
</tr>
<tr>
<td class="expList" colspan="2">
<ul>
<li>
This is a bullet item. Such as those that you may see in various lists around the world.
The most famous bullet item, the semi-bollesque bullet field of 1997, gained notoriety
for the fact that it was the first publicly known bullet item with the ability to break
the sound barrier.
</li>
</ul>
</td>
</tr>
</tbody>
</table>
<table class="Experience" cellpadding="0" cellspacing="0">
<tbody>
<tr class="expHeader">
<td class="expDate">Here is a td</td>
<td class="expLoc">This time I broke it up a little bit. See what happens?</td>
</tr>
<tr>
<td class="expList" colspan="2">
<ul>
<li>
This is a bullet item. Such as those that you may see in various lists around the world.
The most famous bullet item, the semi-bollesque bullet field of 1997, gained notoriety
for the fact that it was the first publicly known bullet item with the ability to break
the sound barrier.
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</body>
</html>
i've got a little problem with an html table (sorry if i bothered you by adding colors to the table rows) Quote: <table border="1" width="900px" align="center"> <tr> <td bgcolor="#e6e6e6"> </td> </tr> <tr> <td bgcolor="#d2d2d2" width="900px" height="15px"> </td> </tr> <tr> <td bgcolor="#ff0000" width="900px" height="130px"> </td> </tr> <tr> <td bgcolor="#0024bf" width="900px" height="25px"> </td> </tr> <tr> <td bgcolor="#339df6" width="200px" height="340px"> </td> <td bgcolor="#ffcc00" width="700px" height="340px"> </td> </tr> <tr> <td bgcolor="#d2d2d2" width="900px" height="30px"> </td> </tr> </table> the table should look like this This page works correctly in Firefox and Chrome, but not IE. What can I do to fix it? Many thanks. http://pivotanimator.net/faq.html Basically I'm in the process of creating a website and things aren't going down so well on the coding front. http://blazeshare.net/ (temp URL) As you can see part of the table becomes stretched or w/e. I am in a rush so I've just used Dreamweaver and can't think for the life of me why its doing this. I tried valign on like every row/column in the damn code in another version to no avail, might have something to do with the way I sliced it. Been a while since I've attempted something like this so I'm a bit stuck. table code : http://blazeshare.net/nbdistro.txt As I said, messy coding because rushed using dreamweaver to make things easy. But apparently not.. lol. Anyone know the reason for this? Hi Guys: I am editing a html page for my boss but am having problems with the images stacking instead of being properly aligned. I can't figure it out for the life of me: http://www.nyu.edu/fas/dept/chemistr.../testpage.html Can anyone provide any advice on how to fix this? I am editing this page with Adobe Golive. Thanks! Okay so i was trying to do a site using photoshop then dreamweaver but it always messed up during the coding. So a nice fella here in htmlforums told me to try tables so okay i tried it and well it worked out really well for the most part. but it's just that it is my first time trying tables and this is what i want http://www.og-guild.com/ and this is what i currently have www.da-nexgen.com dont think im stealing their stuff it's a commonly used layout for guild websites. But in my site you can see things are not really all set fine for example my navigation menu has spaces between them when hey should be real close together. and the biggest problem i have is that i want to have all the site stuff in the middle in 800w and the outer background a different color sort of like the one in og-guild.com. can you guys please help me Hello all. Im totally green and just started last night on making a website. i am at the moment trying te make a nice layout but cant get the links in my menu bar to open up in the content table. can someone plz help me out?!? this is my code so far: index.htm <html><head></head> <frameset rows="20%,*"> <frame name="title" src="banner.gif"> <frameset cols="30%,*"> <frame name="menu" src="menu.htm"> <name="content" src="content.htm"> </frameset> </html> menu.htm <html> <head> <title>Frame Menu</title> <base target="content"> </head> <body bgcolor="#0099DD"> <tr><td><a href="content1.htm"><img border="0" src="homeknap.gif" width="80" height="21"></a></td></tr> <tr><td><a href="content2.htm"><img border="0" src="aboutknap.gif" width="80" height="21"></a></td></tr> <tr><td><a href="content3.htm"><img border="0" src="joinusknap.gif" width="80" height="21"></a></td></tr> <tr><td><a href="content4.htm"><img border="0" src="contactknap.gif" width="80" height="21"></a></td></tr> </body> </html> content.htm <html><head> <base target="content"> </head> ... </html> i can only get it to open my buttons in new windows, not on the main page as i want.... plz help me out. My site is not on the internet yet and wont be before its done sometime in the future. hope someone can help me out! 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? I'm actually having the same problem I've seen wandering about, and I've already considered all the given advice and nothing seems to be working. The background image is split into a 3x3 table for easier loading, and now I'm getting a small gap between the rows themselves. This is the page: http://akito.clavis-sama.com/ I don't have any <p> tags and my margins are all set to 0 already. Yet I have those lines in the middle of my table for the header image. Any clue as to what the problem could be? Hi, and thanks in advance for those who have a look at this issue. As an amateur webmaster, this question may seem extremely simple, but after working on it a while I have not been able to make it work. What I have is a solid bar running down the left side of the page, and I only want it to take up 20% of the page, I would like to then create the main page contents to the right of that bar taking up the remaining 80% with a white background. I was able to get the table set up for the side bar, but could not seem to start another one for the rest of the page. Like I said, this is an amateur speaking, so the answer may be very simple. Here is the html I have written so far: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style href>a {text-decoration: none} </style> <title></title> <body bgcolor="#FFFFFF" text="#000000" link="#D8F0E3" vlink="#246B44" alink="#9ED9B8" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <style type="text/css"> body {text-align: left; } </style> <table width="20%" border="0" cellspacing="0" cellpadding="10" height="3" bgcolor="#006699"> <td align="center" valign="middle"> <font face="Verdana" size="4" color="#FFFFFF">Round Table Quotes Association <br> <style type="text/css"> body {text-align: left; } </style> </head> <br> <font face="Verdana" size="2"><a href="about.html" target="_blank">About</a><br><br> <font face="Verdana" size="2"><a href="cv.html" target="_blank">Authors Index</a><br><br> <font face="Verdana" size="2"><a href="submit.html" target="_blank">Submissions</a><br><br> <font face="Verdana" size="3" color="#FFFFFF">Table of Contents<br><br></font> Can someone tell me the code I will need to created the field to the right of the bar which will be inline with the bar and its contents, but filling up the remainder 80% of the page? Thanks so much, htmldad I 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 Hello, I have been fighting with this for several months. I am trying to get this to work across the board with IE and FF and was hoping I could get some help that I might be over looking. Please bare with me on this as it is detailed. Ok, this is a page that outputs Christmas displays users submit. Here is a sample page. http://www.mesquitechristmas.com/loc...y.php?id=%2021 Yes this page is XHTML Valid before we even start. Only problem I have in FF is that the Google Map will not center, but in IE6,7 it does. I have a div class assigned to it just to center it. Now I can assign a div align="center" but that will not validate. Code: div.c1 {text-align: center}
Other then that it renders and looks perfect in FF as usual because of it being a superior browser. Now in to my IE problems.... First, in both IE 6,7 if you look at the table that says "About this display..." you will notice a red line dividing each row. In FF this looks fine and works. But in IE if their is not content the line does not show in the entire row. What could be causing this? I would like this line to show regardless if there is content or not like it shows in FF. Lastly in IE6 only Below the "return to list" button their is a HUGE gap that does not show up in IE7 or FF. I have been trying to fix this for months and can not get it right. Any idea why this is happening? I am running out of time and could greatly use the help and suggestions. If you need me to post some code for these isolated problems I would be glad to. Otherwise you can just view source of the code to see it. -Thanks Hi everyone, My website, currently at http://www.mlcprop.com/index2.html , is having issues. They a 1.) There is lots of extra space at the bottom when viewed in IE. 2.) The drop-down menu (click "apartments") doesn't display properly in IE; there is supposed to be a green background. It displays fine in Safari/Firefox/Opera however. 3.) I'm having trouble getting the bottom section to work properly. There's supposed to be a green gradient background for the content area that fades out to the page's brown background color. I did this by creating a central table cell with a tiling background image of the green gradient that's very tall and narrow. However, some pages are VERY long... such as thisone. How do I account for this? I tried matching the cell's background color to the image but it doesn't seem to match, or should I just make my tiling green background super long to account for this? I didn't want the file size to be huge. The lower left table cell ("footl") doesn't seem to display properly either. There's supposed to be an image there, a subtle shadow effect. It displays fine on the right ("footr"). Can anyone help with any of these? Thanks so much, Tatiana |
|||||||