 Uneven Cells In Table, Cells won't go 50/50 in HTML. |
  |
| Stoneface |
 Dec 24 2011, 12:41 AM
Post
#1
|
|
Newbie  Group: Members Posts: 12 Joined: 24-December 11 Member No.: 16,137  |
I'm below a a novice at web design and can basically enter text, embed photos and build tables. Not much else, but I do alright with what I know. I train dogs and am working on a site before I set up shop again, but my homepage is jacking up. I want the header to span the width of the table then the to cells in the second row to each span half of the table. They do it when I totally remove the top row, header and all, but when I put it back in then the cells in the second row go back to this. Can someone help me?
 CODE <table width="75%" align="center" border="1" bordercolor="2"> <tr> <td colspan="2"> <img src="heading.jpg" align="center" height="119" width="1003" alt="Lone Tree Shorthairs"/> </td> </tr> <tr> <td width="10%"> <img src="moxy_2.jpg" align="center" height="438.345" width="273.103" alt="Lone Tree Shorthairs"/> </td> <td valign="top"> <i><p class="nav"><a href="index.html">what we do</a></i></br> <i><p class="nav"><a href="Pricing.html">pricing</a> </i></br> <i><p class="nav"><a href="Facilities.html">about the behaviorist</a></i></br> <i><p class="nav"><a href="Our Dogs.html">contact</a></i> </td> </tr> </table> |
  |
 
|
| pandy |
Dec 24 2011, 12:53 AM
Post
#2
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Well, this won't help.
 CODE <td width="10%"> Make both cells in the second row 50% wide. |
|
|
|
| Stoneface |
Dec 24 2011, 01:54 AM
Post
#3
|
|
Newbie Group: Members Posts: 12 Joined: 24-December 11 Member No.: 16,137 |
I'm sorry, I should have fixed that before I posted. I actually had both cells set to 50%, but changed the one to 10% to see if it would have any bearing on anything. It doesn't matter what I set the cells to, they don't change their size. Any ideas?
|
|
|
|
| Stoneface |
Dec 24 2011, 01:57 AM
Post
#4
|
|
Newbie Group: Members Posts: 12 Joined: 24-December 11 Member No.: 16,137 |
This yields the same results.
CODE <table width="75%" align="center" border="1" bordercolor="2"> <tr> <td colspan="2"> <img src="heading.jpg" align="center" height="119" width="1003" alt="Lone Tree Shorthairs"/> </td> </tr> <tr> <td width="50%"> <img src="moxy_2.jpg" align="center" height="438.345" width="273.103" alt="Lone Tree Shorthairs"/> </td> <td valign="top" width="50%"> <i><p class="nav"><a href="index.html">what we do</a></i></br> <i><p class="nav"><a href="Pricing.html">pricing</a> </i></br> <i><p class="nav"><a href="Facilities.html">about the behaviorist</a></i></br> <i><p class="nav"><a href="Our Dogs.html">contact</a></i> </td> </tr> </table> |
|
|
|
| Christian J |
Dec 24 2011, 07:35 AM
Post
#5
|
|
. Group: WDG Moderators Posts: 9,648 Joined: 10-August 06 Member No.: 7 |
Seems the width of the table element causes this. A width in percent may also cause the heading image to spill out of the table in narrow browser windows.
You might prevent it by adding CSS "table-layout: fixed", and by not specifying the table width in percent: CODE <table width="1010" align="center" border="1" bordercolor="2" style="table-layout: fixed;"> (I assume you don't know CSS, so I put it in the STYLE attribute above. Otherwise it's usually more practical to put all CSS in a proper stylesheet.) |
|
|
|
| pandy |
Dec 24 2011, 11:18 AM
Post
#6
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
What browsers do you guys see this problem in? I see no problem at all with the 50% width. This is the way many fluid layout were made back in the day.
QUOTE(Christian J @ Dec 24 2011, 01:35 PM)  Seems the width of the table element causes this. A width in percent may also cause the heading image to spill out of the table in narrow browser windows. And with a fixed width you'll get a scrollbar. Why is table-layout: fixed needed though? Stoneface, I didn't notice before. You have specified the dimensions of moxy_2.jpg with three decimals. There really is no point in this. |
|
|
|
| Stoneface |
Dec 25 2011, 12:34 AM
Post
#7
|
|
Newbie Group: Members Posts: 12 Joined: 24-December 11 Member No.: 16,137 |
QUOTE(Christian J @ Dec 24 2011, 08:35 AM) Seems the width of the table element causes this. A width in percent may also cause the heading image to spill out of the table in narrow browser windows. You might prevent it by adding CSS "table-layout: fixed", and by not specifying the table width in percent: CODE <table width="1010" align="center" border="1" bordercolor="2" style="table-layout: fixed;"> (I assume you don't know CSS, so I put it in the STYLE attribute above. Otherwise it's usually more practical to put all CSS in a proper stylesheet.) Where do I put the "table-layout: fixed"? This is the entire page: 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" lang="en" xml:lang="en"> <head> <title>Stoneface Kennels</title> <style type="text/css"> body { background-color: white; color: black; font-family: "vladimir script"; font-style: italics; } h5 {color: black; font-family: "baskerville old face"; font-style: italics; } p { font-size: 1.3em; text-align: left; color: #000000; font-family: "times new roman"; font-style: italics; } .nav { font-size: 1.3em; font-family: "papyrus"; } tr {background-color: #FFFFFF;} a { text-decoration: underline; color: #000000; } #footer { font-family: "Baskerville Old Face"; font-style: italics; } </style> </head> <body> <center> <table width="75%" align="center" border="1" bordercolor="2"> <tr> <td colspan="2"> <img src="heading.jpg" align="center" height="119" width="1003" alt="Lone Tree Shorthairs"/> </td> </tr> <tr> <td width="50%"> <img src="moxy_2.jpg" align="center" height="438.345" width="273.103" alt="Lone Tree Shorthairs"/> </td> <td valign="top" width="50%"> <i><p class="nav"><a href="index.html">what we do</a></i></br> <i><p class="nav"><a href="Pricing.html">pricing</a> </i></br> <i><p class="nav"><a href="Facilities.html">about the behaviorist</a></i></br> <i><p class="nav"><a href="Our Dogs.html">contact</a></i> </td> </tr> </table> <pid="footer"><h5>Web Design by Rowdy Harris, Rowdy.Harris@yahoo.com.</br> Copyright © 2011, Stoneface Kennels</h5> </center> </body> </html> |
|
|
|
| Stoneface |
Dec 25 2011, 12:41 AM
Post
#8
|
|
Newbie Group: Members Posts: 12 Joined: 24-December 11 Member No.: 16,137 |
Something else I just figured out was when I remove the image of the dog and keep the cells at 50%, the cell where the photo was just collapses and the cell with the nav in it takes up about 95% of the row. It's like the percentages I'm including aren't even having any effect.
|
|
|
|
| pandy |
Dec 25 2011, 12:52 AM
Post
#9
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
QUOTE(Stoneface @ Dec 25 2011, 06:34 AM) Where do I put the "table-layout: fixed"? In the table tag, as Christian showed you. But I still don't see how this will help. If you make the table smaller than it's content, images will definitely stick out in some browsers and be chopped off in others. The full markup you posted results in two 50% columns in every browser I tried. Again, what browser gives you trouble? |
|
|
|
| pandy |
Dec 25 2011, 12:55 AM
Post
#10
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
QUOTE(Stoneface @ Dec 25 2011, 06:41 AM) Something else I just figured out was when I remove the image of the dog and keep the cells at 50%, the cell where the photo was just collapses and the cell with the nav in it takes up about 95% of the row. It's like the percentages I'm including aren't even having any effect. Empty cells behave like that in many browsers, maybe all, I don't know. But you are going to have content so that doesn't matter. |
|
|
|
| Stoneface |
Dec 25 2011, 12:56 AM
Post
#11
|
|
Newbie Group: Members Posts: 12 Joined: 24-December 11 Member No.: 16,137 |
I'm using IE 9. I keep getting the same thing. If I take away the header and top cell, the problem goes away and the two cells go 50/50. If I remove the top cell, but leave the image up there then the two cells go 50/50, but when I blow up screen to, say, 150%, the table stays way to the left of the screen and the header starts at the left and spans way to the right.
|
|
|
|
| Stoneface |
Dec 25 2011, 01:03 AM
Post
#12
|
|
Newbie Group: Members Posts: 12 Joined: 24-December 11 Member No.: 16,137 |
Alright, I think I've got it licked. I went in and reduced the size of the header image. When I took it down from 1003 to 800, the cells in the second row lined up perfectly 50/50. So, I guess what happened was the header was pushing the table perimeter outward and, for some reason, drawing the the cell on the right hand side with it, extending the width of the left hand cell. I wonder why?
I don't understand what you guys are saying about the table not showing up right in smaller displays. Can someone break down what you mean and how to fix it? |
|
|
|
| pandy |
Dec 25 2011, 01:26 AM
Post
#13
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
I think Christian meant that the table will shrink but the images will not.
OK. I don't have access to IE9, so I can't try. |
|
|
|
| Stoneface |
Dec 25 2011, 03:21 PM
Post
#14
|
|
Newbie Group: Members Posts: 12 Joined: 24-December 11 Member No.: 16,137 |
Okay, what I did was set the header image width to 100%, so, now, no matter what size the monitor is, the header will match it and I doubt anyone will be looking at the page with a small enough display to shrink the left cell smaller than that photo. Thanks for everyone's help!
|
|
|
|
| Christian J |
Dec 25 2011, 04:47 PM
Post
#15
|
|
. Group: WDG Moderators Posts: 9,648 Joined: 10-August 06 Member No.: 7 |
QUOTE(pandy @ Dec 24 2011, 05:18 PM) What browsers do you guys see this problem in? IE9 and Chrome (Iron). QUOTE QUOTE(Christian J @ Dec 24 2011, 01:35 PM) Seems the width of the table element causes this. A width in percent may also cause the heading image to spill out of the table in narrow browser windows. And with a fixed width you'll get a scrollbar. Hard to avoid with the wide top row image... QUOTE Why is table-layout: fixed needed though? It's a known bug-fix. Don't know what it actually is doing.  |
|
|
|
| Christian J |
Dec 25 2011, 04:54 PM
Post
#16
|
|
. Group: WDG Moderators Posts: 9,648 Joined: 10-August 06 Member No.: 7 |
QUOTE(Stoneface @ Dec 25 2011, 07:03 AM) Alright, I think I've got it licked. I went in and reduced the size of the header image. When I took it down from 1003 to 800, the cells in the second row lined up perfectly 50/50. That only works when I zoom out the browser window (which should be the same as using a very large window). QUOTE So, I guess what happened was the header was pushing the table perimeter outward and, for some reason, drawing the the cell on the right hand side with it, extending the width of the left hand cell. Could be. What's strange is that it starts to happen even before the heading image has used up all width. |
|
|
|
| Darin McGrew |
Dec 25 2011, 05:23 PM
Post
#17
|
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
QUOTE It's a known bug-fix. Don't know what it actually is doing. ninja.gif Ah, that sounds familiar. It's one of the workarounds for MSIE's hasLayout behavior. |
|
|
|
| pandy |
Dec 25 2011, 06:28 PM
Post
#18
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
I've missed that.
|
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 16th April 2024 - 02:10 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC