HTML - Tables And Cell Spacing

Hi, I can make basic websites but I am not very skilled in web design. I am in need of help.

Since I made the website inside Photoshop using slices, I need to create a table at the center of the website. Since the center of the website is made of slices of jpeg images, I cannot create a table nor add any text here without disturbing the images.

I can get around this by making the pictures part of the cell background, but when I try and remove the images in the center after, the cell background images repeat over and over, and the whole website is unaligned and a big mess! Below is a picture of what I mean...



I have included a zip file containing my html pages and image folder. Please download it he

http://homepage.ntlworld.com/stephan.../Portfolio.zip

The file I need help with is work.html. I can ensure you it's virus free. I want to show my photoshop work off on a website, this is the reason why I am making this website.

Hi everyone:

Any help appreciated.

Objective: To have three equally sized and spaced images arranged horizontally, with their size set automatically by the size of the window.

Development: I'm using a Mac, and I don't have ready access to a PC to experiment.

What I tried:
Code:

	<table>
		<tr>
			<td><img src = "a.png" style = "width: 100%" /></td>
			<td><img src = "b.png" style = "width: 100%" /></td>
			<td><img src = "c.png" style = "width: 100%" /></td>
		</tr>
	</table>
	<p class = "caption">A caption for the 3 images</p>
	<p class = "legend" >A legend for the three images</p>

What happened: This works perfectly in Safari and Firefox (Mac) and Firefox under Vista, but in Internet Explorer under Vista , the images are HUGE - the unscaled size of the originals.

What I think is the reason: IE is taking 100% to be relative to the width of the body element, not the td element.

What I don't want to have to do: Use fixed sizes or calculate the sizes on the fly.

What I'm trying now: removing the table and using a div, and inside that, setting the image width to 33% and floating one right and one left.

What's the trick to get around this IE "gotcha" please?

Thanks from a newbie.

hi,
i have a jsp page, in this page i am displaying data retrieved from mysql database. Now the problem is i must color table cell based on cell value. how to implement this.please give me an sample or working code foe this problem.( any code is accepted) preferably html or javascript.
i.e
if cell value is "late" then display that cell in red color
else
display the cell in green color
please help me.

Thanks ad Regards
Akash

Hi

Normally, when you have more than one table in your code, the tables will be placed one under each other.

Example:
<table>
...
</table>
<table>
...
</table>

When you want the tables to be placed next to each other, you need to set the align attribute.

Example:
<table align="left">
...
</table>
<table align="left">
...
</table>

BUT: When you do it like in the 2nd example (tables next to each other), in Firefox, the tables will wrap to a new line if there is no more space. In Internet Explorer, the tables will not wrap. The result is a horizontal scrollbar or "hidden tables".

Why this? How can I make the tables wrap also in Internet Explorer as it does in Firefox? Is it possible with a special CSS definition or with a special DIV/SPAN tag?

Thanks for your help
praiser

Hey everyone, I'm new to these boards. Somewhat a newbie at web design, but I know basics. I'm looking to put 2 tables adjacent to each other inside another table. My problem is I can't get the tables to line up the way I want them to. I'll post a picture of how I want it to look, how it looks now and my code.

How I want it to look:


How it looks now:


I want the tables to line up at the top and re-size according to each other so they're always aligned at the top.

Code: coming in next 2 posts

Hey folks...

I've searched and searched for an answer for this, but with no luck. Probably because I don't know how to exactly describe my problem. Anyway, the issue is my page is displaying differently in IE and Firefox (surprise!). The spacing between the top image and the body divs are different. I'm not sure if it's an HTML issue or a CSS one.

The page in question is: http://www.project-43.com/

The CSS file is he http://project-43.com/images/style.css

It displays the way I want it too in Firefox. If you look at it in IE, you'll see the top image looks short, but that is because the spacing between the left menu area and the body on the right is too big.

I appreciate any pointers that you might be able to offer.

Thanks!

Hello Everyone: I am a novice HTML user - I use it to create a Help file (for an MS/Access database), using HTML Help Workshop. My question concerns line spacing, using the following code:

<b><u>Server:</u></b>
<ul>
<li>First List item...</li>
</ul>

Using this code, there will be a blank line between "Server" and "First List item...". Is it possible to eliminate this line and have the list start in the next line after "Server"?

Thanks. . .

Tony N.

Alright i'm having a little trouble. When I add stuff to the side boxes, they are farther down then i want them to be, here is a pic:



I'm wanting to move it up some, but I don't know how, I have been trying for a long time though.

Here is the HTML Code:
Code:

<div class="box2 margin1">
						<div class="tail-right">
						<div class="corner-right-bottom">
						<div class="corner-left-bottom">
						<div class="corner-right-top">
						<div class="corner-left-top">
							<div class="indent">
								<h3><span><span>Partners</span></span></h3>
								<div class="indent2">
								<center><a href="http://www.elitepvpers.de"><img src="http://img230.imageshack.us/img230/2364/31421454.png" border="0"></a></center>
					<center><a href="http://www.4botters.com"><img src="http://img814.imageshack.us/img814/2599/88029646.png" border="0"></a></center>
								
									<div id="vent"><div style="font-weight: bold; font-size: 12px; text-align: center;"><a href="ventrilo://94.75.238.76:4696/servername=EQGVent" style="text-decoration: none;"></a></div></div>
								</div>
							</div>
						</div>
						</div>
						</div>
						</div>
						</div>
					</div>

Here is the CSS:
Code:

.box2 {background:#bec2c5 url(images/box2-bottom-tail.gif) bottom repeat-x;}
.box2 .tail-right {background:url(images/box2-right-tail.gif) right repeat-y;}
.box2 .corner-right-bottom {background:url(images/box2-corner-right-bottom.gif) right bottom no-repeat;}
.box2 .corner-left-bottom {background:url(images/box2-corner-left-bottom.gif) left bottom no-repeat;}
.box2 .corner-right-top {background:url(images/box2-corner-right-top.gif) right top no-repeat;}
.box2 .corner-left-top {background:url(images/box2-corner-left-top.gif) left top no-repeat; width:100%;}
.box2 .indent {padding:4px 6px 6px 4px;}
.box2 .indent2 {padding:15px 12px 0px 6px;}

Any help will be greatly appreciated.
Thank you.

Ok so I'm learning along the way by playing around with what my web designer started.

I'm having trouble working out what part of the html does the spacing between my text and the input box.

Here's what I'm stuck at:



You can see how where it says 'click for more fonts' the box isn't in line with the others.

Any help would be much appreciated.... I'm starting to go cross-eyed lol.

I have a couple of really small spacing problems.

my website is www.betdemon.com

you will see from the pic that the spacing 1# on the left hand side is different to the spacing 2# on the right hand side and looks uneven. I want spacing 2# to be the same as 1# - how do i do this?


Also you will see there is a gap between banners (3#) but this doesn't appear when viewing in Firefox - How can I make the gap appear?

Thanks in advance

So, I am working on a website for the final project for one of my classes, and while it looks fine in Firefox and Safari, there is some funky spacing in my divs/table set up with my inline frame in IE: (I have IE 7, but I would like this to work in all versions as I'm not sure what browser my professor has)

http://grandmas.host-ed.net/

in IE, you will see there is a space below the top banner and another one between the footer and the border... how can I get rid of these?

Here is my code (image map removed b/c it's long and unneeded for my question)
Code:

<html>
<head>
<title>Grandma Mae's Country Naturals</title>
</head>
<body background="bg.jpg" bgproperties="fixed"> 

<center>

<table Cellpadding="0" Cellspacing="0" border="0">

<tr><td>
<div style="border: solid 0 #a34c30; border-left-width:3px; border-right-width:3px; border-top-width:3px; padding-left:0ex 
padding-right:0ex padding-top:0ex padding-bottom:0ex">
<img src="gcn_nav2.jpg" usemap="#mymap" border="0">
</div></td></tr>

<tr><td>
<div style="border: solid 0 #a34c30; border-left-width:3px; border-right-width:3px; padding-left:0ex padding-right:0ex 
padding-top:0ex padding-bottom:0ex">
<IFRAME name="inlineframe" src="home.html" width=854 height=350 frameborder="0"></IFRAME>
</div></td></tr>

<tr><td>
<div style="border: solid 0 #a34c30; border-left-width:3px; border-right-width:3px; border-bottom-width:3px; 
padding-left:0ex padding-right:0ex padding-bottom:0ex padding-top:0ex">
<img src="footer2.jpg">
</div>
</td></tr></table>

<font color="FFCC99" size="1" face="Georgia, Times New Roman, Times, serif"><b>This site is not affiliated with Grandma Mae's County Naturals</b></font>

</center>
</map>
</body>
</html>

It's kind of improvised and I am no html expert so perhaps there is a better way to get the look I was going for? Also, I know there is some extra/unneeded code there, but it's all stuff I added when trying to fix the spacing (and it didn't work) and was too lazy to take away. haha

Thanks a ton,

Nathalie

I am having 2 issues with html coding,
First off here
****HIT MUTE OR TURN VOLUME DOWN BEFORE CLICKING****

MY tables are too close together and i can not figure out how to space them out.

Secondly on the first table (the hockey playoff bracket) I want to center the text but when i try to use the only align=center(or something like that i have it used in the table below) it clears out the next cell, removing the bracket.

Can you help me fix these 2 issues please.
Thank You
tech-chef

I'm new to HTML/XHTML, so thanks for helping me understand the spacing rules that are applying he

HTML:

Quote:
<div id="nav">
<ul>
<li><a href="index.html">Main</a></li>
<li><a href="resume.html">Resume</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact and Networking</a></li>
</ul>
</div>
CSS:

Quote:
#nav
{
height: 37px;
text-align: center;
background-color: #858585;
}

#nav ul
{
margin: 0;
}

#nav li
{
display: inline;
}

#nav a
{
padding: 9px 12px 9px 12px;
line-height: 38px;
border-left: 1px solid black;
}
Between every link in my horizontal navigation menu, there is a space (which I don't want). In order to get rid of this space, I have to change my HTML code to...

Quote:
<div id="nav">
<ul>
<li><a href="index.html">Main</a></li><li><a href="resume.html">Resume</a></li><li><a href="portfolio.html">Portfolio</a></li><li><a href="contact.html">Contact and Networking</a></li>
</ul>
</div>
...which in turn sacrifices readability. This all seems very counter-intuitive to me, since I was under the impression that I could format my code readably without having to worry about its presentation. I can only guess that my line breaks (textual line breaks, not actual <br /> tags) are being interpreted as white space within my <ul>. If this is the case, my only other option would be to display my <li>s as block elements with zero margins, float them, and then use margins to push them to the middle (which is all WAY uglier than being able to center them with text-align).

This is how I understand what's going on. If I am correct, does this mean I'm forced to sacrifice readability for functionality?

I've set up a <ul> with some breaks between each <li>. The spacing differs between FF and IE. It seems that the first <br> is ignored by IE, but not FF. Anyone know why, or a workaround? Thanks.

In static FBML (which takes HTML) how do you decrease the spacing after the </p> tag? I have a heading and a subheading that and am separating the two via </p> but the spacing is too much. I can increase, but can't decrease it.