Need help aligning pictures in table

Forum Moderators: not2easy

Message Too Old, No Replies

Need help aligning pictures in table

aligning pictures in table

fendy

5:53 am on Jan 21, 2007 (gmt 0)

I have this problem aligning pictures in table

I have a table with 3 rows and 4 columns and I can not align them centered so they are aligned more to the left,

In firefox it looks fine but in ie it is not centered

#featuredcities {
/*margin-top: 15px;*/
width: 660px;
height: 510px;

background-image: url(../images/featuredcities.jpg);
background-repeat: no-repeat;
background-position: left top;

}

#featuredtable {
margin: 65px 0px 0 0;

text-align: center;
margin-left: auto;
margin-right: auto;

}

featured cities holds the background picture and the featured table is where the table is with all the pictures that are img a because they are linked to content

it can be seen on the home page of my site the green table with pictures

[snip]

so can somebody check why is it not aligned in internet explorer?

Can somebody help

[edited by: SuzyUK at 7:08 am (utc) on Jan. 22, 2007]
[edit reason] Please no site specifics for review [/edit]

Ecntrc

5:59 am on Jan 21, 2007 (gmt 0)

I am not sure why. Sometimes everything looks better in IE than FF, or the other way around. have you tried messing with the alignments? I noticed that your text alignment is center and the margins are auto, have you tried making it center? or it might have something to do with your margins. I have a problem with a clients site in FF looks diff in IE. I figure most visitors us IE but you can never be sure. Have you tried googling it? hope you get it fixed

Setek

12:56 am on Jan 22, 2007 (gmt 0)

Please remember you're not allowed to drop URIs like that - please see the Webmaster World Terms of Service [webmasterworld.com] and the CSS Forum Charter [webmasterworld.com].

About your problem though - we're talking vertical alignment here?

If you Select All (Ctrl + A or Cmd + A) you'll notice in Firefox everything lines up correctly, except sometimes there's an extra space to the right hand side of the image.

Do the same in Internet Explorer. The extra spaces coincide with the ones in Firefox, except in IE, they're displaying below the image, which makes the height of the table cell "taller", thus making the shorter cells vertically align in the middle (as default table cells are meant to do.)

Why is this occuring?
If you take a look at your code, you'll notice structure changes:

<a href="#"><img src="/images/image.jpg" width="120" height="90" hspace="6" alt="alternative description" title="This is an image" border="1" /></a><br />
<a href="#">Text</a>

Compared to:

<a href="#"><img src="/images/image2.jpg" width="120" height="90" hspace="6" alt="alternative description" title="This is another image" border="1" />
</a><br /><a href="#">Text</a>

In some, you have a carriage return after the

<br />

, in others, you have the carriage return after the

<img />

If you consistently change these to one or the other, you should have gotten around it.

As for why it's happening, sometimes IE will display extra whitespace as a carriage return in rendered HTML.

fendy

3:42 am on Jan 22, 2007 (gmt 0)

I must say you are genious

I never knew that making spaces in html would affect the content

Thanks

fendy

12:21 am on Jan 23, 2007 (gmt 0)

But still in explorer the icons in the table are not aligned to center but to the left

any help please

I am clueless

Setek

12:42 am on Jan 23, 2007 (gmt 0)

But still in explorer the icons in the table are not aligned to center but to the left

Oh, I never noticed horizontal alignment also, I just saw vertical :)

Throwing IE into quirks mode
This happens when you do not have a full and correct doctype, or there are characters preceding it. In your case, this is the first two lines of your document:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The

<?xml?>

declaration you have is throwing IE into quirks mode - and also completely unnecessary seeing as you're still serving your page as

text/html

(by the way, you really need to stick in a character set within that declaration -

<meta http-equiv="Content-Type" content="text/html; charset=" />

is unfinished without the charset.

iso-8859-1

utf-8

is fine.)

How does that stop the horizontal alignment?
Well, funnily enough, throwing IE into quirks mode will stop certain, let's say, standards-compliant features from being enabled. One of them is auto margins.

margin: 0 auto;

.. won't work. The hack around this is to use IE's misinterpretation of horizontally aligning block-level elements through inline-element controls, such as setting

text-align: center;

to the parent element, usually proceeded by

text-align: left;

on the element with the auto margins, to reset it back (though in your case this is unnecessary seeing as everything is centered anyway.)

A better, cleaner method (one that doesn't involve workarounds for two different browser groups - quirks vs. standards) is to remove the

<?xml?>

declaration and make sure your doctype starts on the first character of your document, and is full and correct. This will put IE into standards mode - auto margins will work, the box model won't be (as) stuffed, and you give yourself less headaches.

But when you do that, you might just break some things for IE that worked for you :) It might be a long road to fixing them all so they work on both browsers, but it's a cleaner solution once you're done (just remember to do it from the start next time, and you won't have to worry so much.)

fendy

1:20 am on Jan 23, 2007 (gmt 0)

So please this is my first 3 lines

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

how to fix them?

Setek

1:40 am on Jan 23, 2007 (gmt 0)

Remove the first line :)

<?xml version="1.0" encoding="iso-8859-1"?>

Make the line that starts with

<!DOCTYPE html

the first line :)

fendy

2:07 am on Jan 23, 2007 (gmt 0)

I must say BRAVO

you are clearly an expert in coding. I removed the line and it works perfect. No error found and the aligning is perfect.

But how did you know there is a problem if I must not post the url?

Did you remember from the last time.

Setek

3:55 am on Jan 23, 2007 (gmt 0)

By looking at your code, the:

#featuredtable {
margin: 65px 0px 0 0;

text-align: center;
margin-left: auto;
margin-right: auto;

.. that wasn't working in IE, it was a simple guess as to that you had your page served in quirks mode :)

*taps nose* Cheers for the compliments!