Stupid centering problem

**djadejones** · 09-13-2012 02:58 AM

I am so angry at myself for having to post this here because I would like to think with my basic knowledge I would be able to sort this out but here goes: My wrapper div won't centre!!

CSS:

Code:

*			{padding: 0; margin: 0; outline: 0; border: 0;}
body		{background-image: url('tile.png'); text-align: justify; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 11px; overflow: scroll;}
#wrapper	{width: 900px; height: 100%; margin: 0px auto; background-image: url('wrapper.png');}

Now, my impression was if an element has a width and margin: 0 auto, it should centre, but it's not!

Why?!

**tracknut** · 09-13-2012 09:59 AM

1) width 2) margin auto 3) doctype

Do you have a doctype?

Dave

**djadejones** · 09-13-2012 10:03 AM

I narrowed this down to the doctype.
I was using this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
which is the default DOCTYPE when starting a new page on Editplus...

Changed it to this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
which I got from the w3 website and it seems to work, although there is not a great difference between the two?

Really don't know why that first one didn't work, have always used that in the past.

**tracknut** · 09-13-2012 10:10 AM

Dunno for sure, but I certainly wouldn't use a frameset doctype unless you're using frames.

html4.0 was old news around 1999, so instead drop in html4.01 (transitional if you must):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Strict would be better:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Dave

**djadejones** · 09-13-2012 10:38 AM

Thanks Dave, that one works fine for me.
Can I just ask your opinion on something else quickly, I am using jQuery show/hide features on a list, so on loading the page in IE it gives you all that Active X control crap etc...
What would you do to ensure that the user has this enabled so they are viewing your page how it is meant to be viewed?

**tracknut** · 09-13-2012 10:45 AM

Is this happening with your files on a server, or just when you browse the side locally on your machine?

**djadejones** · 09-13-2012 10:47 AM

Its just local at the mo, just presumed it might have done it once uploaded too but is this not the case?

**tracknut** · 09-13-2012 10:52 AM

No, it should be fine once you're running it off a server.

**djadejones** · 09-13-2012 10:55 AM

OK Cheers Dave

**Major Payne** · 09-14-2012 05:46 PM

Originally Posted by djadejones

I narrowed this down to the doctype.
I was using this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
which is the default DOCTYPE when starting a new page on Editplus...

Changed it to this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
which I got from the w3 website and it seems to work, although there is not a great difference between the two?

Really don't know why that first one didn't work, have always used that in the past.

One is an HTML doctype that is missing the URI part: ""http://www.w3.org/TR/html4/frameset.dtd""

The other is a frameset doctype used with frame pages.

Centering:

Centering an element requires setting a width that is less than 100%, using a proper document type and using the CSS property: margin: 0 auto; This is done in the CSS that styles the element. Example:

Example as an ID:

Code:

#selector_name{
width: 90%;
height: 600px; /* optional */
margin: 0 auto;
background: #fff url(path to non-tiled image) no-repeat center scroll;
}

Thread: Stupid centering problem

Thread Tools

Display

Stupid centering problem

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions