Centering A Div Containing Image. I have a logo I need centered in a aujustable width page

[sonesay 7]

http://forums.xisto.com/no_longer_exists/

Just a new layout I'm working on, Any ideas how I can get the logo to be centered? At the moment I can only float it left or right. I think is possible to get it done in tables but I would prefer to stay away from them in layouts. Any insight appreciated.

by the way source code and css is at

http://forums.xisto.com/no_longer_exists/index.html
http://forums.xisto.com/no_longer_exists/

thanks

[darran 0]

You can always use the following code:

div.yourclass {margin: 0 auto 0 auto;}

Hope that helped you.

[jlhaslip 4]

The above suggestion works to centre a div, but you have been using 'Min-width' which is not universally accepted, and also, you are trying to float:left a centred div, which will not work, either, so adjust the css to give it a width, drop the float, and apply the margin: 0 auto as per below.

#header_center {background-image: url('si_07.png');background-repeat: no-repeat;margin: 0px auto;width: 270px;min-height: 140px;}

Tests in FF2 okay, haven't tried IE7 or IE6 yet.

[sonesay 7]

You are the man Jlhaslip. I'll test it on other broswers and update this post.works under safari, IE7 and Oprea as well.

Edited February 15, 2008 by sonesay (see edit history)

[jlhaslip 4]

Sonesay,Upload the new css file and then someone else could check this using IE6 and report back here as to whether it centres the Header Image.... thanks.

[sonesay 7]

with that current css and html code IE 6 fails. the only thing that will show up is the main tiling background.heres the screenshot I have on my win xp machine running IE 6.

[jlhaslip 4]

Try adding text-align: center for IE6's benefit...

#header_center {background-image: url('si_07.png');background-repeat: no-repeat;margin: 0px auto;text-align:center;width: 270px;height: 140px;}

and delete the "min-" on the height.

[sonesay 7]

with that current css and html code IE 6 fails. the only thing that will show up is the main tiling background.heres the screenshot I have on my win xp machine running IE 6.

I've updated that part and removed all other min-width min-height to just height and width, and it seems to show up in IE 6 OK now. I will just change and boot into my windows with IE 7 to double check again. Safari and FF still works.

By the way you said earlier you had both IE 6 and IE 7 was that on the same windows or on different installations?

thanks again.

[jlhaslip 4]

I have both IE6 and IE7 running on Windows XP using this link: http://tredosoft.com/Multiple_IE

 

IE6 will sometimes look okay, but it behaves the same as IE7. Internet Explorer was not designed to allow different versions running on the same machine, so, expect a 'problem' or two with the pages once in a while. It will appear that a page is Okay in IE6, but when a real IE6 Browser finds the page, it will display "normally" (for IE6) and be messed up still, so I do not depend on the IE6 I have installed. Who does?

 

On the positive side, IE6 is losing it customer base as IE7 and Vista gain strength. And Firefox/Opera, too...

Check the Stats over at the w3schools site and see the 10% reduction in IE6 for the last year or so. About 50% of what it was 4 years ago.

 

http://www.w3schools.com/browsers/default.asp

 

Of course, these Stats are skewed by the nature of the people who visit the site. Many 'web-aware' Designers and Coders use alternative, more standard compliant Browsers, so you would expect the numbers to be higher for the non-IE browser because of that. At a Forum I run, the IE Browsers are still at 70+% but the Users are content with what they have.

Many Users have the original browsers (IE) they received with the machine. So be it.

[sonesay 7]

new css html layout
http://forums.xisto.com/no_longer_exists/

I did the orginal http://forums.xisto.com/no_longer_exists/ with the template css of a 2 column fixed with and tried to work it into a expandable one which I had serious trouble with so I looked on the web and found a 3column expandable one that worked out better for what I wanted to do. It was simple enough too but just took time to rework it all. By the way photoshop slicing does suck alot renaming my slices on adjustments made it a night mare to update on the html.

the template for 3 col css expandable content.
http://forums.xisto.com/no_longer_exists/

can anyone recheck if my new layout displays ok in IE 6/7 my computer is bust again.

Edited February 16, 2008 by sonesay (see edit history)