Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Dec 2003
    Location
    At work...still
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question CSS centering - cross browser problems

    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

    Any suggestions?

    Thanks for looking

    Will
    Last edited by WillGibson; 02-18-2005 at 06:37 PM.
    Why?
    Ok, but Why?

  • #2
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    1. <center> and align="" are deprecated. Find the element you want to center (lets say a div, with the id of center).
    Code:
    #center {
    width: /* No. Here */;
    margin: auto;
    }
    2. Everything looks fine for me (FF 1.0, Win. XP Pro. SP2).

  • #3
    New Coder
    Join Date
    Dec 2003
    Location
    At work...still
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Code:
    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.
    Why?
    Ok, but Why?

  • #4
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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).

  • #5
    New Coder
    Join Date
    Dec 2003
    Location
    At work...still
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by WillGibson; 02-18-2005 at 06:37 PM.
    Why?
    Ok, but Why?

  • #6
    New Coder
    Join Date
    Dec 2003
    Location
    At work...still
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK, I got the mouse over to work by adding another mouseover to image tag!

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

    Anyone have ideas on an IE fix?

    Thanks much

    Will
    Why?
    Ok, but Why?

  • #7
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    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
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #8
    New Coder
    Join Date
    Dec 2003
    Location
    At work...still
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

    Thank you
    Will
    Why?
    Ok, but Why?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •