HTML - Picture And Cell Problems!!

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

For the site that I am currently in charge of I removed a slideshow because it took too long to load. In it's place i tried to add just a picture, but it will not work. I uploaded the picture to the site, have the correct html, and placed the html where the code for the slideshow used to be but it doesn't appear on the page. It doesn't even give one of those X's to show you the picture isn't loading. Here is some of the code surrounding where I'd like the picture to be.

<div id="text6" style="position:absolute; overflow:hidden; left:22px; top:628px; width:929px; height:205px; z-index:5">
<div class="wpmd">
<div><font face="Times New Roman" class="ws16">Mission Statement</font></div>
<div><font face="Times New Roman" class="ws16"><BR></font></div>
<div><font face="Times New Roman" class="ws16">A collaborative team including individuals impacted by neurological conditions, providers who serve them, members of communities in which they live, advocates, and researchers who investigate these impairments will identify, develop and disseminate information and strategies, and maximize resources to improve outcomes and quality of life. <a href="http://www.karrn.org/SCIRehabProgram.pdf">2010 SCI Rehab Conference Program</a></font></div>
<div><font face="Times New Roman" class="ws16"><BR></font></div>
</div></div>




<div id="shape1" style="position:absolute; overflow:hidden; left:698px; top:248px; width:310px; height:320px; z-index:7"><img border=0 width="100%" height="100%" alt="" src="images/shape3078289.gif"></div>

<div id="text5" style="position:absolute; overflow:hidden; left:19px; top:591px; width:238px; height:25px; z-index:8">
<div class="wpmd">
<div><font color="#000000" face="Times New Roman" class="ws18"><B>Welcome to our site</B></font></div>
</div></div>

The blank area there is where the code for the slideshow was. All I need is a simple picture. Anyone know why it's not working? Thanks ahead of time!

Hi! I'm working on adapting a we-based system called OTRS (open ticket request system) for our offices here and I've just finished modifying all the headers and css and stuff for our needs. Now, I did it in Firefox and I'm brand spanking new to this game so when one of the header logos didn't appear in IE7, it took me about an hour to figure out maybe it was IE7 that was the problem, and it turns out it is... so would someone mind having a look at this below?

It's very basic, but what's happening is that the picture 'HeaderCropped' isn't displaying, the border outlines don't even show, only that funny little graphic that appears when a picture is missing ( I don't know what it's called). Obviously I'd like to be able to see the picture in both FF and IE7, but will this take a major overhaul of this code? (It took me quite a while to do this little bit!)

Thanking you in advance!

-Emily
_________________________________________________________

# include Copyright.dtl
$Include{"Copyright"}

# set some html variables
#<dtl set $Env{"Box0"} = "&gt;&gt; ">
#<dtl set $Env{"Box1"} = " &lt;&lt;">

# check refresh
<dtl if ($Data{"Refresh"} ne "") { $Data{"MetaHttpEquiv"} = "<meta http-equiv="refresh" content="$Data{"Refresh"}">"; }>

<html>
<head>
$Data{"MetaHttpEquiv"}
<title>$Config{"ProductName"} $QData{"TitleArea"}</title>
$Include{"customer-css"}
</head>

<a name="top"></a>
<body>
#<!-- start CI layout -->
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" class="header"><img style= width: 454px; height: 109px; "src="/otrs-web/images/Standard/HeaderCropped.jpg">
</td>
<td width="100%" class="header" title="www.alliedpensions.com"><a href="http://www.alliedpensions.com"><img border="0" src="/otrs-web/images/Standard/APTLogo.jpg" width="150" height="100"></a></td>
</tr>
<tr>
<td colspan="2"><hr align="left" width="100%" height="2"><!-- end CI layout --><!-- end header --></td></tr></table></body></html>

After re-structuring the whole website, i got some problems with my pictures. As you see on theese 2 pics i can't get the pictures centered, even with the <center> tag!

(images removed)

before re-structuring i couldn't center the pictures neither, so it isn't because of the new structure. Please take a look on this Code and tell me if you know how to fix this problem.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
	<title>Urne's Website - Community</title>
	<link rel="stylesheet" type="text/css" href="style/style2.css">
</head>

<body>

	<div id="container">
		
		<div id="header"></div>

		<div id="left" style="width:210px;float:left;">
			<a href="index.html"><img  alt="Home2 (15K)" src="img/Home2.png" height="50" width="200" border= "0px"/></a>
			<p><a href="Community.html"><img alt="Community (15K)" src="img/Community.png" height="50" width="200" border= "0px"/></a></p>
			<p><a href="Tracks.html"><img alt="Tracks (17K)" src="img/Tracks.png" height="50" width="200" border= "0px"/></a></p>
			<p><a href="Videos.html"><img alt="Videos (15K)" src="img/Videos.png" height="50" width="200" border= "0px"/></a></p>
			<p><a href="Images.html"><img alt="Images (15K)" src="img/Images.png" height="50" width="200" border= "0px"/></a></p>
			<p><a href="Other.html"><img alt="Other (13K)" src="img/Other.png" height="50" width="200" border= "0px"/></a><p/>
			<p><a href="Trackup.html"><img alt="Track Updates" src="img/trackup.png" height="50" width="200" border= "0px"/></a><p>
			<p><a href="Settings.html"><img alt="Settings (13K)" src="img/Settings.png" height="50" width="200" border= "0px"/></a></p>
			<p><a href="Search.html"><img alt="Search (14K)" src="img/Search.png" height="50" width="200" border= "0px"/></a><p>
			<p><a href="About.html"><img alt="About (12K)" src="img/About.png" height="50" width="200" border= "0px"/></a></p> 
		</div>

		<div id="main" style="margin-left: 210px;">
			<h1>Urne's Tracks</h1>
			<p>Here i have all the tracks i ever made for Re-Volt. Please check this one weekly/monthly, because the site will be updated at least once/month.<img alt="Smiley" src="img/Smile.gif" border= "0px"/></p>

			<a href="Bone+Island.html"><img alt="Bone Island" src="img/Bone+Island+hot.png" height="200" width="200" border= "0px"/></a>
			<a href="At+The+Farm.html"><img alt="At The Farm" src="img/At+The+Farm.png" height="200" width="200" border= "0px"/></a>
			<a href="Forgotten+City.html"><img alt="Forgotten City" src="img/Forgotten+City.png" height="200" width="200" border= "0px"/></a>
			<br>
			<a href="Cyberspace.html"><img alt="Cyberspace" src="img/Cyberspace.png" height="200" width="200" border= "0px"/></a>
			<a href="Dark+Park.html"><img alt="Dark Park" src="img/Dark+Park.png" height="200" width="200" border= "0px"/></a>
			<a href="Pisa+Grandprix.html"><img alt="Pisa Grandprix" src="img/Pisa+Grandprix+hot.png" height="200" width="200" border= "0px"/></a>
			</br>			
		</div>
	</div>

</body>

</html>

Hope this can help you!

Regards


Urnemanden

I want to create this type of a navigation utility to scroll through large amounts of pictures 5 at a time. The picture links will be stored in an array. Any suggestions as to how I should code this? I work in asp if that matters.

Code:

<table>
	<tr>
		<td style="background-color:#cccccc;border:medium inset #ececec;padding:0;">	
			<input type="button" name="first" id="first" value="First 5" />
			<input type="button" name="previous" id="previous" value="<<Prev 5<<" />
			<input type="button" name="next" id="next" value=">>Next 5>>" />
			<input type="button" name="last" id="last" value="Last 5" />
		</td>
	</tr>
</table>

Thanks in advance!

I'm having trouble fixing some bugs when viewing my site on IE 6. Here is my problem........ I have IE 6 and everything looks fine to me. But on other computers it looks messed up. So.... I was wondering if someone could help me out and take a screenshot of a page using IE 6. I want to see how it looks on other computers when the page fully loads up.

This is the page http://webtvdeluxe.com/v2/Art Show


Thank you in advance

Hi

I'm trying to make some text sit under a photo, and it works fine except in IE6, where the first word starts at the side of the photo, then the rest sits underneath.

The page is at www.bigbadroo.com.au/top-stitching/www/ - the photo is of the woman on the left.

Here's my html:

<div id="wilma"> <img src="images/wilma.jpg" alt="Wilma" ><em><strong>Over 40 years industry experience!</strong></em>
</div><!-- end #wilma -->


and the CSS:

#wilma {
float:right;
margin-top:10px;
font-size:7.5pt;
width:213px;

}


Is there anything obvious there?

Thanks for your time and help

Shaun

I'm trying to make a picture button. I have a little so far can you help with the rest.

<input type="button" onclick="javascript:alert('Noob, u fell for it!!!')" />

I was wondering if there was a simple way or script out there that anyone knows that can change a picture at a certian time?

I am doing a website for a diner and they close at 3:00pm and I was thinking about putting a sign on the website that would simply say "Open" when the diner is open and "Closed" when its obviously closed.

Thanks in advanced

Hey all got bit of a prob here!
I need the bg picture to fit the background plz help


HTML Code:

<!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" lang="en">
<head>
  <title>I-C-U - The corner inside the code</title>
  <meta name="author" content="DarkHat" />
  <meta name="subject" content=
  "anonymous, antivirus, chat, hacker, hackers, internet security, proxy, security, trading, webdesign" />
  <meta name="Description" content="Trade your secrets at I.C.U" />
  <meta name="Classification" content=
  "I-C-U is here for you and you are there for the others who needs the help with security etc..." />
  <meta name="Keywords" content=
  "anonymous, antivirus, chat, hacker, hackers, internet security, proxy, security, trading, webdesign" />
  <meta name="Geography" content="Sweden/Usa" />
  <meta name="Language" content="English, Swedish, Danish, Norwegean" />
  <meta http-equiv="Expires" content="Dec 2012 10:10:10 GMT" />
  <meta http-equiv="CACHE-CONTROL" content="NO-CACHE" />
  <meta http-equiv="PRAGMA" content="NO-CACHE" />
  <meta name="Copyright" content="DarkHat , -I.C.U-" />
  <meta name="Designer" content="DarkHat" />
  <meta name="Publisher" content="I.C.U" />
  <meta name="Revisit-After" content="10" />
  <meta name="distribution" content="Global" />
  <meta name="Robots" content="INDEX,FOLLOW" />
  <meta name="city" content="Gothenburg" />
  <meta name="country" content="Sweden" />
  <link rel="stylesheet" href="/css/style.css" type="text/css" />
  <link rel="stylesheet" href="/css/frontstyle.css" type="text/css" />
  <link rel="shortcut icon" type="image/ico" href="/favicon.ico" />
  <link rel="shortcut icon" href="/favicon.ico" />
  <link rel="icon" type="/ico" href="/favicon.ico" />
  <script type="text/javascript" src="js/jquery-1.2.6.js">
</script>
  <script type="text/javascript" src="js/startstop-slider.js">
</script>
</head>

<body>
  <div id="page-wrap">
    <div id="slider">
      <div id="mover">
        <div id="slide-1" class="slide">
          <h1>LinkerZ</h1>

          <p>LinkerZ nr.1 webpage for the hacker! There is links to different communitys,
          movie portals, radio stations, all about the interesting world thrue the
          hackers eyes</p><a href="http://i-c-u.se/LinkerZ/"><img src=
          "images/slide-2-image.jpg" alt="learn more" /></a>
        </div>

        <div class="slide">
          <h1>Designz Webdeveloper</h1>

          <p>Designz Webdeveloper! oh well the name say it all. A team of web designers
          that makes designs to a new level of creating living appearense</p><a href=
          "http://i-c-u.se/EliteDesignz/index.html"><img src="images/slide-1-image.jpg"
          alt="learn more" /></a>
        </div>

        <div class="slide">
          <h1>I-C-U Chat</h1>

          <p>The place for you that got somthing to say! A place for the sharing of
          interest off all from hacking to music to security etc...</p><a href=
          "http://i-c-u.se/icuchatter.html"><img src="images/slide-3-image.jpg" alt=
          "" /></a>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

HTML Code:

{ margin: 0; padding: 0; } body { font-family: "Lucida Grande", Arial, Sans-Serif;
  background: #000;} a { text-decoration: none; outline: none; } a img { border: none; }
  h2 { font-family: Georgia, Serif; font-size: 36px; text-align: center; font-weight:
  normal; } #page-wrap { background: black; width: 980px; margin: 0 auto; padding: 50px
  0; } #slider { background: white url(../images/slider-bg.jpg); height: 475px; overflow:
  hidden; position: relative; margin: 50px 0; } /* DEFAULT is for three panels in width,
  adjust as needed This only matters if JS is OFF, otherwise JS sets this. */ #mover {
  width: 2800px; position: relative; } .slide { padding: 40px 30px; width: 900px; float:
  left; position: relative; } .slide h1 { font-family: Helvetica, Sans-Serif; font-size:
  30px; letter-spacing: -1px; color: #ac0000; } .slide p { color: #000000; font-size:
  12px; line-height: 22px; width: 300px; } .slide img { position: absolute; top: 20px;
  left: 400px; } #slider-stopper { position: absolute; top: 1px; right: 20px; background:
  #ac0000; color: white; padding: 3px 8px; font-size: 10px; text-transform: uppercase;
  z-index: 1000; }

If you could take a look HERE and tell me how I would do the same sort of picture menu with text to the right and in line with the centre of the pic WITHOUT using a table?

The table is just giving me trouble!!

Sorry to ask so many questions BTW.

how do i put a picture on the title bar? well, some sort like the bulb on this website.

Hi everyone,

I'm new here and new to html stuff. I really need to learn it to make my website.

I've been messing around all day with the codes and so far all I got is this:

<TABLE BORDER="0" cellpadding="0" CELLSPACING="0" bordercolor="#330000" width="100%">
<TR>
<TD WIDTH="950" HEIGHT="17" BGCOLOR="#000000" VALIGN="top" align="left">
<font face="edwardian script itc" style="font-size: 65pt" color="#FFFFFF">George Gabrielle Couture
</font></TD>
</TR>
</TABLE>
<table border="0" width="20% align="right" bgcolor="FFFFFF">
<tr>
<TD BGCOLOR="#000000">
<font face="pica10 bt" color="FFFFFF" size="3">Fall/Winter</font></td>
</tr>
<tr>
<TD BGCOLOR="#000000">
<font face="pica10 bt" color="FFFFFF" size="3">Holiday</td>
</tr>
<tr>
<TD BGCOLOR="#000000">
<font face="pica10 bt" color="FFFFFF" size="3">Resort</td>
</tr>
<tr>
<TD BGCOLOR="#000000">
<font face="pica10 bt" color="FFFFFF" size="3">Baby</td>

Now I need to add some pics to the white part of the page (left-hand side). Forgive me everyone, when you answer this please treat me like I'm a 5 year-old, LOL . I am soooo html challenged. I'm only a seamstress, and sewing clothes is all I know .

Hi all i have a website banner wich i want as my signature so when someone clicks on it they go to my website i just need the html code for it if anyone can help thanx alot.

Cheers
Jacob