Problem with button placement

I just had the same issue while experimenting with that theme. You may be able to change this:

#header #menu ul li.page_item a {
width: 98px;

to –

#header #menu ul li.page_item a {
width: 86px;

and it will be okay, but you can see the problem returning if you add another tab or change the labels. Maybe someone with a sharper eye will see a better way around it.

Good luck.

So I just checked your CSS and according to the CSS, your menu’s location is floated to the right with a top margin (vertical space to the top of the header) of 70px and a right margin (horizontal space to the side of the header) of 80px which is why it’s located kinda-sorta in the middle of your header space.

#header #menu {
	float: right;
	margin: 70px 80px 0 0;
}

To move the location of the menu (the row of buttons), change your margin values to something different.

Cheers!

PS: Neat site! ??

Wait a second… nix my earlier response. Will repost when I go fiddle.

‘yep. that seems to do it much better.

#header #menu {
float: right;
margin: 70px 5px 0 0;
}

I changed the values and nothing happened?

oh, oh…

??

I actually thought your solution worked better EMG. Mine skewed the page tab highlighting slightly to one site by shortening the tab.

I gracefully bow out to the pros on this one!

zach1288,

sometimes you need to force a browser refresh (reload the style sheet) after a change.

Ctrl+F5

I did that and nothing changed?

Can you send me the CSS file that worked for you?

Never mind i figured it out. Thank you!

The change you made looks fine from here in Firefox, however, I can’t get your site to load at all in IE 7. Maybe you have something else going on there.

Okay, I believe the problem is this:

Your blog title, menu buttons, and searchform are all supposed to be aligned at the top of the header. However, there is ONLY enough space at that area (pixels of space horizontally) to fit a certain number of items.

Because the menu loads AFTER the searchform, it gets shoved down a row and gets floated and margined according to the CSS rules.

So it’s moved because all of the buttons don’t fit into the alloted space available.

There are a couple of things you can do to solve this problem, including changing the width of the buttons to make them all fit, but what I would suggest is taking your blog title and setting it in its own separate div OUTside of the header div and formatting the CSS for the blog title accordingly.

So instead of the div order in your template being wrapper -> header -> blog title, it would be wrapper -> blog title -> header.

What this will do is set your blog title outside of the header div which opens up a bunch of space for the menu buttons.

… This theme is great, but it’s also a great demonstration on why fixed widths can sometimes be problematic.

@claytonjames:

Your method deals with the problem at hand – sum of widths of all items on the header is greater than the width of the header which shoves the last rendered div to a new row. ?? So, actually, you ARE/were correct in saying that changing the widths of the tabs helps.

However, to me as a theme junkie, forcing size changes to make things fit is not the way I generally do things because the actual problem is not being addressed.

In this case, the problem was/is that the total width of everything – blog title, menu, searchform – was greater than the (typically) alloted space width on the header.

The minute either of you two adds a new page which adds a new button, you will probably experience the same problem again like you said, but in all honesty, that is just the reality of such a layout situation.

For me, then, the solution is to open up more room for more buttons in the future, which is why my suggestion (which I am not completely positive works or not as I haven’t hard tested it out) was to move one of the items in the header area (the blog title was my choice) out of the line and move it up.

Hopefully I didn’t confuse everyone. ??

Check out the site now in IE and Firefox and tell me if its working.

Yeap. It sure is on both Firefox and IE6. ??

Now another question: Do you need to add any more pages and what happens to your menu if you do?

I do not plan on adding anymore pages. But if i need to i will cross that bridge when i come to it. Haha.