Overlapping tabs/buttons

[tomkins]

I have a problem of buttons and tabs not being positioned properly, as you can see it varies from browser to browser:

Safari: 

Firefox:

I think this might have something to do with not using the latest version of hobo? Any suggestions are welcome.

Thanks.

[Vivek Sampara]

tom,

Firefox and IE have less web area compared to safari and chrome. Make sure you reduce the padding/margin of each item or reduce the text size of each or make sure you split the navigation into 2 menus .

Vivek 

--
You received this message because you are subscribed to the Google Groups "Hobo Users" group.
To view this discussion on the web visit https://groups.google.com/d/msg/hobousers/-/dEbIHCxuUM8J.
To post to this group, send email to hobo...@googlegroups.com.
To unsubscribe from this group, send email to hobousers+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/hobousers?hl=en.

[Bryan Larsen]

Your firefox image is considerably narrower than the safari image, so the results you see aren't surprising.   Are you on OS X?     OSX has strange window sizing behaviour, and Firefox on OSX doesn't have the aggressive chrome minimization it has on Windows (or at least, it didn't used to, haven't checked recently).  Your results will be much more comparable on Windows or Linux.

If you're using Hobo 1.4, you could check out http://cookbook-1.4.hobocentral.net/api_plugins/hobo_bootstrap, https://github.com/suyccom/hobo_bootstrap

That's a much more modern theme which behaves much better at different browser widths.   It's still fairly alpha, not all Hobo components are properly styled, but it's pretty nice.

cheers,

Bryan

--

[tomkins]

Yes, I am on Mac OS X, I tried IE 9 on windows: The tabs are correct but the white buttons still overlap.

The images are different width because that's the way I took the screenshot, resizing the window has no effect, and there is plenty of width on my screen for the tabs.

How can I find out which version of hobo I am using (It's deployed on Heroku, doesn't run locally)

[kevinpfromnm]

With that many items you might want to go with a vertical nav layout anyway.

[tomkins]

I noticed the tabs are being moved because of the search bar being different in different browsers:

Safari:

 Firefox:

The Firefox search is wider, which causes the tabs to be pushed down.

As for the other buttons, I brought them down with <br>, not the best fix but it will do.

[Bob Sleys]

On one of my apps I increased the header height a bit to allow the buttons to slide under the search box giving me a bit more room.  I forget what css I played with at the moment but I think I shortened the search box div a bit and increased the overall header height.

Bob

[tomkins]

I changed some CSS in public/hobothemes/clean/stylesheets/clean.css too and now I roughly have what I desire.