center main content

Forum Moderators: not2easy

Message Too Old, No Replies

center main content

silentnetnz

8:37 am on Mar 11, 2007 (gmt 0)

This thread is following on from this post: [webmasterworld.com...] but since this is more of a css question now I am posting it here.
Why won't this code center my main content in ie?

#main_content {
/* make absolutely positioned children calculate their co-ordinates from this */
position: relative;
/* centre the site */
width: 775px;
margin: 0 auto;
}

It works fine in mozilla firefox but ie is not doing the job.
I am hoping someone knows of a workaround? I assume that i will probably have to add:-

into my html document and create a new ie5.css with a few minor changes to the #main_content code?

birdbrain

10:36 am on Mar 11, 2007 (gmt 0)

Hi there silentnetnz,

Why won't this code center my main content in IE?

If you are not using a dtd IE goes into Quirks Mode and will not recognize margin:auto;. :(

I would suggest using...

[blue]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">[/blue]

...or...

[blue]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">[/blue]

birdbrain

cmarshall

1:56 pm on Mar 11, 2007 (gmt 0)

This [wpdfd.com] was posted by an admin a couple of days ago, so I think it's safe.

It may answer your question to some degree.

penders

3:03 pm on Mar 11, 2007 (gmt 0)

IMHO, the Dead Centre [wpdfd.com] link posted above can be good for some 'flexible' layouts, but an accessible nightmare for certain 'fixed' width/height layouts (such as width:775px). Because of the use of negative margins, when the browser window is too narrow, the content is shifted out of view and you don't even have a scrollbar to get at it. But it does depend on your design.

silentnetnz

6:53 pm on Mar 11, 2007 (gmt 0)

thanks guys. I entered the code into my page above the <html> tag and it works in ie now...but in both browsers I have some gaps that have just appeared between pictures. This is a problem because most of the site consists of one big image that has been broken down into lots of smaller images all joined together. As soon as I take the code away there are no gaps between the pics again. The gap is the thickness of this line _______ but it makes the webpage look a bit odd.

penders

7:20 pm on Mar 11, 2007 (gmt 0)

...but in both browsers I have some gaps that have just appeared between pictures.

At the bottom I guess? This is likely because you are now in 'standards mode' (with a correct DOCTYPE) and not 'quirks mode' (without a DOCTYPE). In standards mode, images (inline elements), rigidly sit on the (text) baseline and consequently you can get a gap beneath the images where the descenders (tails of the 'g', 'p' etc...) would go.

It can be easily resolved however...
[webmasterworld.com...]

birdbrain

7:40 pm on Mar 11, 2007 (gmt 0)

Hi there silentnetnz,

...but in both browsers I have some gaps that have just appeared between pictures.

For further information on this problem check out this Eric A. Meyer article...

[devedge-temp.mozilla.org ]

birdbrain

silentnetnz

7:43 pm on Mar 11, 2007 (gmt 0)

ref: [webmasterworld.com...]
Thanks for your help so far penders :)

At the bottom I guess?

well no not really
here is my page <snip URL>
as you can see on the right there is a thin line near the top and also a thick white line between the starter plan,standard plan and business plan images.
I am thinking that it might be because the images are within a table that might be effecting it somehow but im not too sure. I hope I wont have to go back to the drawing board!

[edited by: Robin_reala at 8:33 pm (utc) on Mar. 11, 2007]
[edit reason] Removing URL as per TOS #13 [webmasterworld.com] [/edit]

silentnetnz

8:12 pm on Mar 11, 2007 (gmt 0)

thanks for that interesting article birdbrain. I tried everything in the article with no luck :/

Setting images to be blocks
- td img {display: block;} - no change

Using vertical alignment
- td img {vertical-align: bottom;} - even more gaps apear! so even worse.