...

View Full Version : CSS centering - cross browser problems



WillGibson
02-17-2005, 09:00 PM
I am in the process of becoming a "reformed unholy" (I used tables for layout) now I'm learning to do it with CSS and lighter html. ;)

I'm having 2 issues with centering elements. Will you look over my shoulder on this please?

First one is on /*link removed*/ at the bottom of the page is a grey box I'm trying to center but text-align:center is not doing the trick. I also tried <center> and <div align="center"> which worked in IE, FF and Moz but not in Opera.

Second one is on /*link removed*/. Its a thumbnail view in which the links and thumbnails should center in their cells and in Opera it looks perfect but IE, FF and Moz will not center the cell content :( :confused:

Any suggestions?

Thanks for looking

Will

chilipie
02-17-2005, 09:04 PM
1. <center> and align="" are deprecated. Find the element you want to center (lets say a div, with the id of center).


#center {
width: /* No. Here */;
margin: auto;
}


2. Everything looks fine for me (FF 1.0, Win. XP Pro. SP2).

WillGibson
02-17-2005, 09:28 PM
Thanks Chilipie :)

margin:auto got the first one

The second centering problem is very slight. If you look at the 3rd row, the one with only one image, its more noticeable. That image (floor plan) should be centered but its left justified. The only way you really notice it on the other two rows is looking at the right hand space compared to the left hand. Its slight but noticeable. Its even easier if you look at it side by side in Opera and (IE or FF or Moz).

I tried margin:auto for it too but it didn't work.


table.thumb {
text-align: center;
padding: 0;
background: #336699;
width: 600px;
margin: auto;
}
table.thumb tr {
width:600px;
margin: auto;
}
table.thumb tr td, table.thumb tr td a {
text-align: center;
color: #ffffff;
background-color: #336699;
text-decoration: none;
white-space: nowrap;
width: 100px;
margin: auto;
padding: 0;
display:table-cell;
}


Will that not work with table elements.

chilipie
02-17-2005, 09:31 PM
If it's the contents of the table cell, text-align: center; should work. If not, try display: block; and margin: auto; (images and text are displayed inline by default).

WillGibson
02-17-2005, 10:22 PM
using block made everything look like one long col...

display:table-cell seems to be the root of the centering problem but I need an effect it gives me. :(

With out display:table-cell the <a> do not take up the full height of the table cells with images and I end up with a mouse over color change that looks like an underline.

Ok, lets try from a different direction and remove display:table-cell...now the question is...

How can I make the image mouseovers look correct? Currently they look like underlines and I want them to look like a box around the image (which was what display:table-cell did for me but at the cost of centering). /*link removed*/

Please note they look incorrect in FF, Moz and Opera

Thanks again
Will

WillGibson
02-17-2005, 10:52 PM
OK, I got the mouse over to work by adding another mouseover to image tag!

But then I looked at it in IE... :mad: Its not centering... :(

Anyone have ideas on an IE fix?

Thanks much

Will

whizard
02-17-2005, 11:18 PM
Take a few steps back, to where you were saying you could fix it, but that would ruin your :hover feature. There is a way to make things other than <a> hover, but IE (of course) doesn't work with them. A behavior is necessary to get IE to work with them, and it is very simple, but the jury is still out (as with most things) as to wheter they are a good idea. I like it, but I'll let you decide. Check out these threads:

http://www.codingforums.com/showthread.php?t=52164 (by me)
and
http://www.codingforums.com/showthread.php?t=52562

These discuss the IE browser hack.

If you decide to use this method, than just add :hover in your CSS to anything that you want, and it will work across all browsers once you install the browser behavior for IE, which is easy and outlined in the first article.

Dan

WillGibson
02-17-2005, 11:52 PM
The hover works (and worked) just fine in IE, it was the other browsers (FF, Moz, Opera) that it flaked out in. Sorry if I was not too clear there. I'm back to centering problems and still trying stuff fix it. Before it only centered correctly in Opera but now its correct in Opera, FF and Moz...that just leaves IE to whip in line...theres a cheery visual...whipping IE :D

Thank you
Will



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum