HTML - Weird Problem With Table Rows

Hi there, I'm a bit of a noob to HTML, and I'm working on creating a site for my webcomic.

The main portion of the layout has a simple table with a header and footer at the top and bottom rows. It's supposed to look like



Instead it looks like



The code for the table is this:
Quote:
<table align="center" cellpadding="0" cellspacing="0" border="0" width="725">
<tr>
<td width="725" valign="bottom" border="0">
<img src="/images/header.png" width="725" height="33" /></td>
</tr>
<tr>
<td width="725" bgcolor="0099CC" align="center">
<p>***todays_comics***<p>***first_day*** ***previous_day*** ***next_day*** ***last_day***
</td>
<tr>
<td width="725" valign="top" border="0">
<img src="/images/footer.png" width="725" height="33" /></td>
</tr>
</table>
Whenever I put the code into an HTML test bed, it works fine, but for some reason refuses to work when I upload it to my FTP. It's driving me crazy. If you could help, I'd really appreciate it. Thanks.

Afternoon everyone,

I have a table with many rows and a checkbox in the first cell of each row. I want the user to be able to click anywhere on the row and activate the checkbox, so I'm using a label tag in front of each row. The following code works in IE7, but not Firefox or Chrome. Any ideas how to make it work cross-browser?

Code:

<table>
    <label for="X">
    <tr>
        <td>
            <input type="checkbox" id="X"/>
        </td>
        <td>
            THIS TEXT SHOULD ACTIVATE THE LEFT CHECKBOX
        </td>
    </tr>
    </label>
</table>

Thanks!

I am working on a layout for a website, I'm not new at all to HTML, it's just been a while. I have a banner taking up the first row of the table(colspan=2), and for the 2nd row, I have a menu and a text region. This 2nd row always has a small space between it and the 1st, even if cellspacing=0. Is there any way to do this with a simple <table>??? Someone told me that using a table would be less effective than using <div>, is this true? If so, how would I do this using <div>. Thank you for any suggestions.

Can anyone tell me why there is a space at the bottom of my page between the images in the middle and the bottom image? The page looks fine in Firefox and I cannot figure out why there is a space in IE7. Any suggestions would be greatly appreciated. Thanks

Frank

http://www.spartafitness.com/home.htm

Hi All,

Am a bit of a newbie here. I'm having a little problem with a table that I created on Wordpress. After creating the table, the image below shows how it looks like on the Wordpress editor:



But, once published, the row alignment is a bit off. Here's the url: http://runfest.my/?page_id=346

Appreciate some advice on what went wrong and how I can fix it. Thanks a bunch!

I am working on an application within a website.

Most of the HTML for the entire site, I did not create myself, just some HTML and CSS for a specific application. Even in that application, I imported some of the text (which contains HTML tags) from a previous application. So, I only did a small portion of the HTML/CSS.

My problem is that when users print out this page in IE6, some of the rows of the main table are missing from the printout.

For example, this page:

http://www.northcarolina.edu/pe_test/sample_pe.php

Does any one have any knowledge of a bug that would cause IE6 not to print some rows? Does any one see any reasons why some rows in the tables (the ones with class='workplan') would skip rows when printing?

Thank You.

Can someone please check my site in IE6? I think the text in the navigation menu on the left doesn't shows up besides "Pictures"... I saw this problem on my client's computer (yikes! ). It was really weird, the boxes were just green with no writing until you hovered over them. I don't have access to 6 myself and I'd really really appreciate it if someone could check this: http://www.salemnhconservation.org

Let me know if this problem happens with you!

Thanks!!!

Here is my CSS:
Code:

#awardcontainer {
	width: 700px;
	margin-top: 20px;
	margin: auto;
	padding: 0;
}

#blueheader {
	background: url('http://www.forumbuff.com/fpacolor1top.png') no-repeat;
	width: 700px;
	height: 50px;
	margin: 0;
	padding: 5px;
}

#bluecontent {
	background: yellow;
	max-width: 700px;
	margin: 0;
	padding: 2;
}

#bluefooter {
	background: url('http://www.forumbuff.com/fpacolor1bottom.png') no-repeat;
	width: 700px;
	height: 50px;
	margin: 0;
	padding: 5px;
	float: left;
}

Here is my HTML:
HTML Code:

<html>
<head>
		<title>Test</title>
		<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="awardcontainer">
	<div id="blueheader">
	
	</div>
	<div id="bluecontent">
	Testing 1 2 3
	</div>
	<div id="bluefooter">
	
	</div>
</div>
</body>
</html>

The error can be found at: http://zenrer.com/fptest/awards.html

I have never seen this problem before, the gap between the header and the content. Can someone help me please.

Hi. I'm working on a fairly complicated web form and need to align input boxes horizontally across a lefthand column, a multi-row nested table, and a righthand column. This works OK (as long as cellpad and cellspace are set to 0) except that at one point I need to put text in the right-hand column instead of an input box, and this throws the alignment out. The simplified code below shows what I mean. As given below the boxes are aligned properly. But if you comment out the version A row and substitute the version B row, the alignment goes.

Can anyone explain why this happens, and whether there's a way round it ? The form in question does have to be a table, by the way. Would be grateful for any suggestions !

Thanks

Dedge

<form>
<table width='100%' cellspacing='0' cellpadding='0' border='0'>
<tr>
<td>Item name</td>
<td rowspan='5'>
<table cellspacing='0' cellpadding='0' border='0'>
<tr>
<td><input name='i1' id='i1' size='1' maxlength='1'></td>
<td><input name='i2' id='i2' size='1' maxlength='1'></td>
</tr>
<tr>
<td><input name='i3' id='i3' size='1' maxlength='1'></td>
<td><input name='i4' id='i4' size='1' maxlength='1'></td>
</tr>
<tr>
<td><input name='i5' id='i5' size='1' maxlength='1'></td>
<td><input name='i6' id='i6' size='1' maxlength='1'></td>
</tr>
<tr>
<td><input name='i7' id='i7' size='1' maxlength='1'></td>
<td><input name='i8' id='i8' size='1' maxlength='1'></td>
</tr>
<tr>
<td><input name='i7' id='i7' size='1' maxlength='1'></td>
<td><input name='i8' id='i8' size='1' maxlength='1'></td>
</tr>
</table>
</td>
<td>Item name</td>
<td><input name='ia' id='ia' size='1' maxlength='1'></td>
</tr>
<tr>
<td>Item name</td>
<td>Item name</td>
<td><input name='ib' id='ib' size='1' maxlength='1'></td>
</tr>
<tr>
<td>Item name</td>
<td>Item name</td>
<td><input name='ic' id='ic' size='1' maxlength='1'></td>
</tr>
<!--VERSION A-->
<tr>
<td>Item name</td>
<td>Item name</td>
<td><input name='ic' id='ic' size='1' maxlength='1'></td>
</tr>
<!--END OF VERSION A-->
<!--VERSION B-->
<!--<tr>
<td>Item name</td>
<td colspan='2' align='right'>SOME TEXT</td>
</tr>-->
<!--END OF VERSION B-->
<tr>
<td>Item name</td>
<td>Item name</td>
<td><input name='ie' id='ie' size='1' maxlength='1'></td>
</tr>
</table>
</form>

Hi

I've got a weird problem. Basically, I've created an effect where an image (designed to look like the front of a record sleeve) flips when clicked, and then shows a different image (which looks like the reverse of the same sleeve). There are nine "albums" on the page, however, the effect only works on one image at any one time (by default "album1", but delete this album and the effect will work exclusively on "album2" and so on). Changing "div id" to "div class" throughout the HTML document, style sheet etc. doesn't help, it only rearranges the images. I've pasted the relevant code below. I can't understand the problem, and it's creating a serious roadblock. Any ideas?

Thanks

- Chris

HTML:

<!-- Album pictures (front sleeve on left, zig-zag sleeve reverse on right) -->

<div id="album1"> <a class="opacity"/> <img id="flip1" img src="Top_16/Album1.png" /> <!-- Flip --> <img id="flip2" img src="Top_16/Reverse.png" </div>
<div id="album2"> <a class="opacity"/> <img id="flip1" img src="Top_16/Album2.png" /> <!-- Flip --> <img id="flip2" img src="Top_16/Reverse.png" </div>
<div id="album3"> <a class="opacity"/> <img id="flip1" img src="Top_16/Album3.png" /> <!-- Flip --> <img id="flip2" img src="Top_16/Reverse.png" </div>
<div id="album5"> <a class="opacity"/> <img id="flip1" img src="Top_16/Album5.png" /> <!-- Flip --> <img id="flip2" img src="Top_16/Album2.png" </div>
<div id="album6"> <a class="opacity"/> <img id="flip1" img src="Top_16/Album6.png" /> <!-- Flip --> <img id="flip2" img src="Top_16/Album2.png" </div>
<div id="album7"> <a class="opacity"/> <img id="flip1" img src="Top_16/Album7.png" /> <!-- Flip --> <img id="flip2" img src="Top_16/Album2.png" </div>
<div id="album9"> <a class="opacity"/> <img id="flip1" img src="Top_16/Album9.png" /> <!-- Flip --> <img id="flip2" img src="Top_16/Album2.png" </div>
<div id="album10"> <a class="opacity"/> <img id="flip1" img src="Top_16/Album10.png" /> <!-- Flip --> <img id="flip2" img src="Top_16/Album2.png" </div>
<div id="album11"> <a class="opacity"/> <img id="flip1" img src="Top_16/Album11.png" /> <!-- Flip --> <img id="flip2" img src="Top_16/Album2.png" </div>

CSS:

/* Image flip code (applies to album divs, decreases then increases width and opacity, hiding one image then the other, producing a "flipping" optical illusion) */

#flip1{
position:absolute;
cursor:pointer;
width:104px;
height:104px;
}
#flip2{
display:none;
position:absolute;
cursor:pointer;
}

Wzup
Got a little issue on my site. is showing everything great in firefox. IE is a little off but i'm still working on that. but in safari i doesn't show anything.

This is the site try it out. click on the Events button in the nav bar. in FFX my stuff shows up safari it doesn't

i used div tags to show it and css sheets site created in dreamweaver. checked with w3 validator

thanks for any help
greetz robin

After fixing the code for my image maps after my question yesterday, I got an email from a user saying this:

"I just noticed one thing when viewing the site using IE. on the pages, IE is shrinking the image and rather than giving me the option to click on a link, it gives me a magnifying glass to enlarge the image. When i enlarge the image, I still can't click on the links. Instead I get the magnifying glass to shrink the image back down."

Here is an example of the code:

<img src="About.jpg" width="1100" height="825" border="0" usemap="#about" />
<map name="about" />
<area shape="rect" coords="285,29,316,50" href="http://www.com" title="HOME" alt="Home" />
<area shape="rect" coords="383,29,460,50" href="http://www.com/teachers" title="FOR TEACHERS" alt="For Teachers" />
<area shape="rect" coords="469,29,516,50" href="http://www.com/support" title="SUPPORT" alt="Support" />
</map>

It works fine with Safari and Firefox.

What could be causing that problem with IE?

Hey,

I've just recently up-loaded a new site i have put together, and i'm having a wierd problem with some of the images on the site.

Whats happening is that when i view my site, some of the images don't appear, i just get the right hand corner red cross box. And a friend of mine who viewed the site had exactly the same problems, with exactly the same images.

But two other people who viewed the site had no problems with any of the images not showing!

The other wierd thing, is that i will have an image which works on one page, but then won't work on another page, even though it's exactly the same image file. This is only the case for one image which i'm aware of, all the other images which aren't working are consitant throughout all pages.

I have contacted my hosting company and they have mentioned it's most likely something to do with my site coding. I don't understand what i could have done to have made this happen though. If one image works, the others should too... or so i would have presumed. All my images are in the same image folder and they are all either jpg or gif files.

My website is feedthefitness.com i hope it's ok i mention it on this forum. I think it would be good to be able to have a look at the site to see what i'm talking about.

Any ideas of what could be the problem would be greatly appreciated. I've tried up-loading my site a few times and it's made no difference.

Thanks in advance.

website- http://webtvdeluxe.com/home.php

It's not really a problem but an annoyance. I just set up my page so it is html 4.0.1 strict. I don't have any errors or anything. Everything is viewed perfectly on a windows computer(no matter what the browser as far as I can tell). However on a mac I get this problem....

If you have a mac, use safari or firefox to view the page. At first glance, you will say "Well what's the problem?" The bottom of the middle table below fashion expert should be the bottom of the page. However the page continues further down alittle bit. If I didn't have those tables in the middle filling that empty space, the page would still be that long. For example, on one of my pages, I only have one table in the middle but my page still scrolls down right to that spot. Even if there is no content to push the table down that far which is the weird part.

Has anyone ever encountered this? Is this possibly a bug with mac browsers? Is there maybe a fix?

Hello,

I've got a weird problem that I've never come across before...

I've created a page with a hidden div on it that is displayed at certain times (after a button is clicked). The div is displayed on top of a semi opaque div that covers the whole of the page (this is created and added to the page when the hidden div is shown). The effect is very similar to the lightbox technique. To prevent select boxes showing through the opaque overlay in IE6 I'm also using an iframe shim.

The only problem I have is that in FireFox, the text input fields on my lightbox div do not have the flashing carat in them. You can select the inputs and enter text into them, it just looks a little odd not having a carat in them when they are selected.

Anyone else come accross this?