media query logo centering problem

I have a page with a logo. When The browser pulls in there is media query code and the css changes. The top  menu drops down to the second line and the logo is supposed to be centered. For some reason the logo is still flush left and I can't figure out why
---index-09.html
designaireAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

HagayMandelCommented:
Change the "logo" style to this:
.logo{
	width: 161px;
	height: 216px;
	margin-right: auto;
	margin-left: auto;
}

Open in new window


Another tip: Don't use the alt tag on images, use the title tag instead.
0
designaireAuthor Commented:
No, it didn't work. I think it's because of the .menuBackground style. It has a background when it's full frame but if the browser is smaller then the buttons move to the next line but it's still in a div with a class called .menubackground. I don't need it anymore and I plan to put the background to none if I didn't in the sample, but if I hide it the logo and buttons won't show up.

Thanks for the tip on the alt tag.
0
LZ1Commented:
Can you show a sample URL?  It's going to be difficult to try and see what your talking about with no images.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

HagayMandelCommented:
It works!
Checked with IE7 & 8, Chrome and Firefox.
If it doesn't work on your code, there must be something else,  so it's better to have a live page as LZ1 suggested.
0
designaireAuthor Commented:
I'll post it up later tonight. I ended up using a left margin, but if I can't get it working it centered, I'd rather do that.
0
uzzidesignCommented:
It's because of the float you have on the logo. Remove the float.

Floats remove the element from its normal relative flow in the tree and forces the adjacent elements to fill the space once occupied by it. The margin: 0 auto only works when those left and right margins can calculate themself (auto) relative to it's parent and adjacent elements, but floating it makes the element "unaware" of it's parent and adjacent elements.
0
designaireAuthor Commented:
http://designaste.com/class/__fin_04.htm

Here's the link. You have to pull the browser in befor it changes to center. I have a clear on the left in the logo. It still doesn't work.

Thanks for you help.
0
LZ1Commented:
On line 92 of http://designaste.com/class/__fin_04.htm, you have a .logo class which is still maintaining a float:left.  This is your issue.  

To the other .logo class on line 201, add float:none !important; and you should be fine
0
HagayMandelCommented:
I can only address you to my answer above (#37822355):
in the .logo class:
REMOVE:  float: left;
ADD: margin-right: auto;
          margin-left: auto;
0
designaireAuthor Commented:
It has to have float: left in the beginning before the media query otherwise it drops down too early.
0
designaireAuthor Commented:
Float: none; worked. Then margin: 0 auto or margin-left: auto and margin-right: auto.

I didn't realize there was a float none. Why doesn't Float: clear work???
0
LZ1Commented:
I'm saying to add float:none !important to the media query .logo class.

Line 201 in your page you posted above:

                  .logo{
                        width: 161px;
                        margin-left: auto;
                        margin-right: auto;
                        clear: left;
                        float:none !important;
                  }
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
LZ1Commented:
Because clear is not a valid property for float.  Clear is a separate property itself.

Clear: left, right and none.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.