I’m using the Kakumei Blue theme. I can’t understand how this could happen, but without my doing anything, overnight the header on my forum has changed when viewed in IE – it remains as it should when using Firefox.

A navigation button I positioned (by messing with some numbers in some CSS code that Chris kindly provided) has shifted to the right so that it is now too close to the User Name.

But most strangely, the forum name has shifted so that it now overlaps the “Login” box. This was perfect until now, as you’d expect, since it’s part of the original design – I just typed in the name of the blog in the space provided in Admin.

Here’s the link, which will make it clear what I’m saying (open with IE): http://ashb.proofreadercentral.com/bbpress/

User: tester

Password: testing123

Can anyone offer any explanation for this stuff? More importantly, how do I get the header back to what it was yesterday given that I haven’t actually changed anything in the meantime? I’m afraid that if I start tampering with the CSS again, I’ll end up messing up the header in Firefox as well!

Cheers

[@chrishajer Participant 16 years, 5 months ago]

Can you create an image showing exactly where in the header you want the button? You can just scribble on one of these screenshots, showing where you want the button to be. I am unclear on what the correct position for the button is.

Here are two screenshots, IE7 and FF3. Is either correct?

IE7

FF3

I think putting that button outside the header by using a negative margin is a bad thing to do. It also seems to me that a button is probably not a very ‘usable’ solution to return to the home page of the website. Why not a text link in the header, or in the footer?

If you are set on the button hanging off to the left of the forum in the header, then please describe which of the two screenshots is closer to or exactly what you want.

[@_ck_ Participant 16 years, 5 months ago]

You could use absolute positioning and just put that home button in position:absolute;top:0; left:0; which would take it out of the content flow.

There has to be a more natural way to layout that header though. What you might use (though more work) is a sub-menu under the header.

[@rossb Member 16 years, 5 months ago]

Thanks, guys.

Chris,

FF3 is correct.

_ck_ ,

Yes, the sub-menu idea might well be a more elegant solution. I don’t mind some work, but I don’t know how to go about it.

I’ll try your absolute positioning suggestion, but I don’t think I’ll like the look of the home nav button hard top left

[@chrishajer Participant 16 years, 5 months ago]

Ross, I created a little slice of a navbar up top, and put the link over to the right in it. Here’s how I did it:

style.css:

#navbar {

background: #A9A9A9;

height: 1.5em;

text-align: right;

font-size: 1.2em;

}

 

header.php:

<div id="navbar">

<a href="http://ashb.proofreadercentral.com/" title="Return to the ASHB website home page">ASHB Home</a>&nbsp;

</div>

 

Put that in the header right after the end of the login form and right before the end of the header div. That will give you a little slice up top in which to link to the main website. You can change the color, the height of the bar and the font size.

I don’t know why the button is tucked in so close in IE (not FF), but it seems like the negative positioning thing is probably fraught with problems, so I would avoid it.

You could also put your button to return to the main website in this nav bar, but you’d have to make it taller.

[@rossb Member 16 years, 5 months ago]

Thanks so much – AGAIN – Chris!

I ended up combining some of your previous advice with that you’ve posted above, messed with the CSS to re-position the cramped header items, and am now pretty happy with the look.

See: http://ashb.proofreadercentral.com/bbpress/

User: tester

PW: testing123

Just one little curiousity – and if it’s any sort of hassle, don’t respond, but if you can be bothered, I’d be interested in your take on the following:

When using IE as the browser, the nav link back to the ASHB home page doesn’t activate until your cursor is close to the top header border – usually, hyperlinks activate as soon as your cursor touches any part of the text. Anything that can be done about this?

NB: No such issue with Firefox!

[@chrishajer Participant 16 years, 5 months ago]

Ross, maybe this will point you in the right direction:

http://www.37signals.com/svn/posts/1048-padded-link-targets-for-better-mousing

If not, I can work on it a little later. Basically, you need to add some padding to the link inside the nav bar.

For me though, the links worked identically on IE7 and FF3. Not sure what your experience was.