homepage Welcome to WebmasterWorld Guest from 54.167.179.48
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Need help aligning pictures in table
aligning pictures in table
fendy

5+ Year Member



 
Msg#: 3226551 posted 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+ Year Member



 
Msg#: 3226551 posted 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

5+ Year Member



 
Msg#: 3226551 posted 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

5+ Year Member



 
Msg#: 3226551 posted 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

5+ Year Member



 
Msg#: 3226551 posted 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

5+ Year Member



 
Msg#: 3226551 posted 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 or 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

5+ Year Member



 
Msg#: 3226551 posted 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">

<html xmlns="http://www.w3.org/1999/xhtml">

how to fix them?

Setek

5+ Year Member



 
Msg#: 3226551 posted 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

5+ Year Member



 
Msg#: 3226551 posted 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

5+ Year Member



 
Msg#: 3226551 posted 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!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved