Centering an image in a table cell, New to HTML Options

[Mate de Vita]

So, basically I have this table with picture-links to other sites. But I can't get the pictures to be in the center of their respective cells (it doesn't matter whether they're vertically centered or not, I just want them to be horizontally centered).
This is the table's code:

CODE

<table border=1 cellpadding=15px cellspacing=0 style="width:100%;margin:0 auto;float:left;">

<tr>
<td><h2>Required Software</h2></td>
<td><h2>CS Mapping Tutorials</h2></a></td>
<td><h2>3D Modelling</h2></td>
<td><h2>Upload your maps</h2></td>
</tr>

<tr>
<td><a href='http://themightyatom.nl/hldownloads/hammer_v34.exe' title="Valve Hammer Editor 3.4"><img alt='Valve Hammer Editor' src='./Slike/VHE2.jpg' width=150 height=150></a></td>
<td><a href='http://www.superjer.com/learn.php' title="Superjer's CS Mapping Guide - for complete newbies"><img alt="SuperJer's CS Mapping Tutorial" src='./Slike/superjer.png' width=205 height=150></a>
<td><a href='http://twhl.co.za/tutorial.php?id=147' title="Rimrook's Tutorial to the basics of 3D Modelling"><img alt='Rimrook's Tutorial' src='./Slike/rimrook.png' width=150 height=150></a></td>
<td><a href='http://cs-maps.org/' title="CS-maps - more maps than you can eat"><img alt='cs-maps.org' src='./Slike/cs-maps.png' width=150 height=150></a></td>
</tr>

<tr>
<td><a href='http://themightyatom.nl/hldownloads/zhlt34x86final.zip' title="ZHLT Compilers 3.4 32-bit"><img alt='32-bit ZHLT compilers' src='./Slike/ZHLT.jpg' width=150 height=150></a><a href='http://themightyatom.nl/hldownloads/zhlt34x64final.zip' title="ZHLT Compilers 3.4 64-bit"><img alt='64-bit ZHLT compilers' src='./Slike/ZHLT2.jpg' width=150 height=150></a></td>
<td><a href='http://twhl.co.za/tutorial.php?cat=1' title="TWHL's extensive guide collection"><img alt="TWHL Goldsource Mapping Tutorials" src='./Slike/twhl.png' width=150 height=150></a>
<td><a href='http://twhl.co.za/tutorial.php?id=147&page=2' title="Rimrook's more advanced 3D Modelling Tutorial"><img alt='Rimrook's Tutorial part 2' src='./Slike/rimrook2.png' width=150 height=150></a></td>
<td><a href='http://www.fpsbanana.com/' title="FPS Banana - FPS Customization Community"><img alt='FPS Banana' src='./Slike/fps-banana.png' width=150 height=150></a></td>
</tr>

<tr>
<td><a href='http://themightyatom.nl/hldownloads/hammer_testbuild04.zip' title="VHE 3.5 - Executable file only"><img alt='News' src='./Slike/VHE.png' width=150 height=150></a></td>
<td><a href='http://countermap2.com/Tutorials/index.html' title="Counter-map's guide collection"><img alt='Counter-map CS Tutorials' src='./Slike/counter-map.png' width=185 height=150></a></td>
<td><a href='http://www.maprookie.com/random/gmaxandsmdplugins.zip' title="GMax - Free program for 3D Modelling"><img alt='GMax' src='./Slike/gmax.jpg' width=200 height=133></a></td>
<td><a href='http://twhl.co.za/vault.php?submit=1' title="TWHL's map Vault"><img alt='TWHL's map Vault' src='./Slike/twhl.png' width=150 height=150></a></td>
</tr>

</table>

And in my css file I have:

CODE

td {
    width:25%;
    text-align:center;
}

I've tried <td align=center> and <td align="center"> but it didn't work.

I'm using Google Chrome.

This post has been edited by Mate de Vita: Dec 31 2009, 01:09 PM

[pandy]

That should work. Can you post a link to the actual page?

[Mate de Vita]

That should work. Can you post a link to the actual page?

Unfortunately no, because it's not online, it's just a .html file on my disk.
I can upload it though (see attachments).

This post has been edited by Mate de Vita: Dec 31 2009, 01:29 PM

[west158]

looks fine in safari to me =p (windows safari)

[Mate de Vita]

looks fine in safari to me =p (windows safari)

You mean the images are centered? But for that you had to change the file, the one I posted had no align. Unless text-align works too...
I don't have firefox/opera/safari to check but it doesn't work for me in chrome and I even tried it with IE. No surprises there, it didn't work.

This post has been edited by Mate de Vita: Dec 31 2009, 03:47 PM

[Darin McGrew]

There's no doctype, so browsers are thrown into quirks mode. See http://hsivonen.iki.fi/doctype/

Our online validator reports a number of markup errors:
http://htmlhelp.com/cgi-bin/validate.cgi?u...s&input=yes

[Mate de Vita]

There's no doctype, so browsers are thrown into quirks mode. See http://hsivonen.iki.fi/doctype/

Our online validator reports a number of markup errors:
http://htmlhelp.com/cgi-bin/validate.cgi?u...s&input=yes

I put <!DOCTYPE html> at the beginning of the file now and fixed a couple of errors - updated .html file in the attachments. The validator now gives me the following errors (the picture with <td align="center"> still isn't centered):

Error: The border attribute on the table element is obsolete. Use CSS instead.
From line 29, column 1; to line 29, column 81
e</h1>↩↩↩↩<table border=1 cellpadding=15px cellspacing=0 style="width:100%;margin:0 auto;"> ↩↩<tr
Error: The cellpadding attribute on the table element is obsolete. Use CSS instead.
From line 29, column 1; to line 29, column 81
e</h1>↩↩↩↩<table border=1 cellpadding=15px cellspacing=0 style="width:100%;margin:0 auto;"> ↩↩<tr
Error: The cellspacing attribute on the table element is obsolete. Use CSS instead.
From line 29, column 1; to line 29, column 81
e</h1>↩↩↩↩<table border=1 cellpadding=15px cellspacing=0 style="width:100%;margin:0 auto;"> ↩↩<tr
Error: The align attribute on the td element is obsolete. Use CSS instead.
From line 38, column 5; to line 39, column 20
tr> ↩↩<tr> ↩ <td align="center"><a hre
Error: & did not start a character reference. (& probably should have been escaped as &amp;.)
At line 48, column 52
rial.php?id=147&page=

Do I need to put all that stuff in the css file?
And that & character is a part of the link, not a character reference start.

This post has been edited by Mate de Vita: Dec 31 2009, 04:50 PM

[pandy]

I put <!DOCTYPE html> at the beginning of the file

That's making it worse since it isn't a valid doctype. Please read the page Darin linked to. Here it is again: http://hsivonen.iki.fi/doctype/ . Read this page first: http://htmlhelp.com/reference/html40/html/doctype.html . It may explain a thing or two.

[pandy]

Look at your CSS.

CODE

a:link,a:visited {float:left;opacity:0.2;filter:alpha(opacity=20);}
a:active,a:hover {float:left;opacity:1.0;filter:alpha(opacity=100);}

You've floated all links left in the embedded style sheet. You can't use text-align on a floated box (and expect it to work).

[Darin McGrew]

Actually, it's an HTML 5 doctype declaration:
http://www.w3.org/TR/html5/syntax.html#the-doctype

Add according to http://hsivonen.iki.fi/doctype/ the HTML 5 doctype declaration triggers standards mode or almost standards mode in all browsers except NS6 (and perhaps Konq 3.2).

[pandy]

Gosh. Sounds like they want to make away with doctypes. What is the world coming to?

Sorry, Mate! You were way ahead of me there.

[Mate de Vita]

Look at your CSS.

CODE

a:link,a:visited {float:left;opacity:0.2;filter:alpha(opacity=20);}
a:active,a:hover {float:left;opacity:1.0;filter:alpha(opacity=100);}

You've floated all links left in the embedded style sheet. You can't use text-align on a floated box (and expect it to work).

Oh yeah, guess I should be more careful what I copy next time.

But now I deleted those floats and now when I put my mouse over a picture-link (the whole picture is supposed to turn opaque), only a small section at the bottom turns opaque. The rest remains transparent.



In this picture I have my mouse over the curved pipe picture.
(the two pictures in the same cell on the left are supposed to be next to each other but my resolution isn't big enough for that. If I make the pictures smaller - ctrl+mwhl down - they are next to each other and both of them have the same opacity problem)

This post has been edited by Mate de Vita: Jan 1 2010, 06:08 AM

[pandy]

Interesting. What browser do you see that in? It works as intended in the browsers I tried.

Whatever browser it is, I think it happens because A is an inline element. The images stand on the line and sort of stick out of the line box if they are higher than the line. When you style A, with for example a background, it only gets as high as the line's height. Images with their head in the air aren't considered. I'd say the same thing happens here, but I don't know if it's right or wrong when it comes to opacity. It "feels" right, but I don't know.

When an inline element is floated, it's automatically given block status and contains everything you put in it, which dexplains why that worked.

Be as it may with all that, the simplest would be to apply opacity directly to the images. You don't have any text links there, do you?

CODE

a:link img   {...}

[Mate de Vita]

I'm using Google Chrome.
Anyway, I believe you were right, that was indeed the problem. I now put

CODE

a {
    display:block
}

into my css file and it works. Might not be the best solution but with my current html skill I'd most likely just screw something up if I tried something more complex.

But again, this solution causes a new problem. This time it's not something really bad but I'd still like to fix it.
In one of the cells (as seen in the screenshot I posted above) I have two picture-links. Previously if I reduced their size, they would show up next to each other, touching (that's how I originally wanted them to be). But now even if I make their size smaller (width=40 height=40) or decrease their size using ctrl + mwhl down, they still end up one below the other. Any ideas?

On a side note, how can I put an event (like onmouseover) for img in the css file (if this is even possible)? For example if I wanted to convert this html code:

CODE

<img style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

to css (so that all the pictures I used on my website would be transparent unless the mouse was over them).

[pandy]

I'm using Google Chrome.

Ah, thank you.

Anyway, I believe you were right, that was indeed the problem. I now put

CODE

a {
    display:block
}

into my css file and it works. Might not be the best solution but with my current html skill I'd most likely just screw something up if I tried something more complex.

Centering with text-align shouldn't work with blocks...

But again, this solution causes a new problem. This time it's not something really bad but I'd still like to fix it.
In one of the cells (as seen in the screenshot I posted above) I have two picture-links. Previously if I reduced their size, they would show up next to each other, touching (that's how I originally wanted them to be). But now even if I make their size smaller (width=40 height=40) or decrease their size using ctrl + mwhl down, they still end up one below the other. Any ideas?

Because now the images are block level and the line breaks before and after them. These are the reasons I suggested you apply opacity directly to IMG. It won't change anything else.

On a side note, how can I put an event (like onmouseover) for img in the css file (if this is even possible)? For example if I wanted to convert this html code:

CODE

<img style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

You already do. ':hover' goes with anything, not only links. Only IE before, is it 7 or 8, only supports it for links.

[Mate de Vita]

Centering with text-align shouldn't work with blocks...

Well, it did.

Because now the images are block level and the line breaks before and after them. These are the reasons I suggested you apply opacity directly to IMG. It won't change anything else.

Works now, but I did it for each image separately , like this:

CODE

<td><a href='http://themightyatom.nl/hldownloads/hammer_v34.exe' title="Valve Hammer Editor 3.4"><img alt='Valve Hammer Editor' src='./Slike/VHE2.jpg' style="opacity:0.2;filter:alpha(opacity=20)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.2;this.filters.alpha.opacity=20" width=150 height=150></a></td>

Can I put this in the css so I don't have to copy this to every image's code?

You already do. ':hover' goes with anything, not only links. Only IE before, is it 7 or 8, only supports it for links.

OK, but what if I wanted some other event, like onabort or onmousedown? Or if I wanted every image to have width=150 height=150?

This post has been edited by Mate de Vita: Jan 2 2010, 07:00 AM

[Mate de Vita]

OK, but what if I wanted some other event*, like onabort or onmousedown? Or if I wanted every image to have width=150 height=150?

*event or just a normal attribute

[pandy]

Works now, but I did it for each image separately , like this:

CODE

<td><a href='http://themightyatom.nl/hldownloads/hammer_v34.exe' title="Valve Hammer Editor 3.4"><img alt='Valve Hammer Editor' src='./Slike/VHE2.jpg' style="opacity:0.2;filter:alpha(opacity=20)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.2;this.filters.alpha.opacity=20" width=150 height=150></a></td>

Can I put this in the css so I don't have to copy this to every image's code?

Be as it may with all that, the simplest would be to apply opacity directly to the images. You don't have any text links there, do you?

CODE

a:link img   {...}

OK, but what if I wanted some other event, like onabort or onmousedown?

No.

Or if I wanted every image to have width=150 height=150?

img { width: 150px; height: 150px }

[Mate de Vita]

Be as it may with all that, the simplest would be to apply opacity directly to the images. You don't have any text links there, do you?

CODE

a:link img   {...}

Got it.

img { width: 150px; height: 150px }

This works just fine if I put it in the head as an internal style sheet:

CODE

<style type="text/css">
    img {width:150px; height:150px;}
</style>

But if I put it in the css external file I'm using, all the images are 150x150 even if I set one of the dimensions to something else in the image code - like this: <img src="blah/blah" width=205>
Aren't the settings in the image code higher priority than those in the css file? I thought it was inline>internal style sheet>external style sheet...

This post has been edited by Mate de Vita: Jan 2 2010, 02:11 PM

[pandy]

But if I put it in the css external file I'm using, all the images are 150x150

That's what you said you wanted.

CODE

even if I set one of the dimensions to something else in the image code - like this: <img src="blah/blah" width=205>
Aren't the settings in the image code higher priority than those in the css file? I thought it was inline>internal style sheet>external style sheet...

No. In the beginning this was debated and browsers did it differently. Now it's clear. CSS overrides HTML. Period. The CSS in a style attribute on the other hand overrides an external or embedded style sheet.

But you should keep width and height for images in the HTML. It helps the browser when it draws the page. It can reserve space for the images and the page loads nicer.