Welcome to WebmasterWorld Guest from 22.214.171.124
Forum Moderators: not2easy
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
background-position: left top;
margin: 65px 0px 0 0;
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
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]
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="#"><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
, in others, you have the carriage return after the
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.
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">
declaration you have is throwing IE into quirks mode - and also completely unnecessary seeing as you're still serving your page as
(by the way, you really need to stick in a character set within that declaration -
is unfinished without the charset.
<meta http-equiv="Content-Type" content="text/html; charset=" />
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
to the parent element, usually proceeded by
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
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.)