Jump to content

layout doesn't center in internet explorer

- - - - -

This topic has been archived. This means that you cannot reply to this topic.
9 replies to this topic

#1
Ravenfire

Ravenfire

    Newbie

  • Members
  • PipPip
  • 13 posts
Hey everyone, I'm brand new to css and was wondering if anyone could help me out with this. I've checked the page in Firefox, Safari, Netscape and Internet Explorer and it works great in all except Internet Explorer.

<table class="center">


table.center {

		border: none;

		width: 760px;

		margin-left: auto;

		margin-right: auto;

                text-align: center;

}

with this code the layout is all messed up. If I take out text-align: center, it will just all line up at the left. Does anyone know how I can get this to center in IE?

Here are the links in case anyone wants to look at the full code.

Raven's Avatars
http://angiebowen.co...atars/style.css

#2
Lop

Lop

    Speaks fluent binary

  • Members
  • PipPipPipPipPipPipPipPip
  • 1,172 posts
I think this is just IE 6 flaws in CSS. Try setting the <body> tag to use the center class. This may be what you are looking for.

#3
Ravenfire

Ravenfire

    Newbie

  • Members
  • PipPip
  • 13 posts
I tried that as well and it didn't work (I also upgraded to IE7 and it still doesn't work). If my only problem is that the layout will be left aligned instead of centered in IE, I think I can live with that. Thanks so much for the help!

It's also really strange because sometimes when I refresh the IE page, it does center but on the next refresh it goes back to left.

#4
TcM

TcM

    Writes binary right handed and hex left handed

  • Members
  • PipPipPipPipPipPipPipPipPip
  • 11,147 posts
I have your same problem.. It would not centralize a table with CSS.. I dont know why. so perhaps it's just an IE bug.. nothing new.

#5
Gabriel

Gabriel

    Learning Programmer

  • Members
  • PipPipPip
  • 39 posts
yea I always align tables in the HTML. I"ve never had a problem with IE6 or 7 but I'm a microsoft guy so I know how to tweak it for the most part...
I'm an angel. I kill firstborns while their mamas watch. I turn cities into salt. I even, when I feel like it, rip the souls from little girls, and from now till kingdom come, the only thing you can count on in your existence is never understanding why.
-
Do you know how you got that dent, in your top lip? Way back, before you were born, I told you a secret, then I put my finger there and I said "Shhhhh!"
-
Quotes taken from The Prophecy (1995)

#6
Lop

Lop

    Speaks fluent binary

  • Members
  • PipPipPipPipPipPipPipPip
  • 1,172 posts
You can always just revert back to old school and put the <center> </center> tags around it. This would work in IE as well as FF.

#7
TcM

TcM

    Writes binary right handed and hex left handed

  • Members
  • PipPipPipPipPipPipPipPipPip
  • 11,147 posts
Well usually I like to use CSS files and not the tags attributes.. because with one slight modification it changes all my pages! Although my business directory has a bunch of useless and extra tags/code.. it really needs a clean up and use CSS more.

#8
Ravenfire

Ravenfire

    Newbie

  • Members
  • PipPip
  • 13 posts
I finally got it to center but now the middle part of the layout is skewed a bit to the left (but still only in IE).

I've been trying to set up an IE specific stylesheet but IE doesn't seem to be recognizing it. Has anyone else ever tried one of these before and gotten it to work?

Here's my code (the site has moved, it's at Raven's Avatars). The styleie file is empty so that I would see right away if it was working or not.

<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="styleie.css" />
<![endif]-->

#9
Ravenfire

Ravenfire

    Newbie

  • Members
  • PipPip
  • 13 posts
Okay, I fixed it. I gave up on the separate stylesheet and ended up solving the problem just by floating my header and footer left like the middle.

Thanks for all the help on this everyone!

#10
Death Slaught

Death Slaught

    Newbie

  • Members
  • PipPip
  • 20 posts
Here's how you do it:

<html>


<head>

<style type="text/css">


.center {

  border:none;

  width:760px;

  position:absolute;

  left:130px;

  top:200px;

  text-align:center;

}


</style>

</head>


<body>

<table class="center">

  <tr>

    <td>text</td>

  </tr>

  <tr>

    <td>text</td>

  </tr>

</table>

</body>


</html>
Hope it helps, Thanks, Death