New Header Design - Feedback, Browser Issues, Etc

[archibalduk]

If you encounter any difficulties viewing the site (i.e. it doesn't display correctly), you will need to clear/empty your browser's cache: Here is a guide on how to clear/empty the cache for the various browsers (Chrome, IE, Firefox, Opera, Safari, etc): http://www.wikihow.com/Clear-Your-Browser's-Cache

Over the past few weeks I've been working on a new header design for the site. The current design was only supposed to be temporary but I got distracted by other things - hence we've have it for over 18 months!

Here's a preview of the new header design:

[nino33]

Love it! I especially like seeing the actual EHM game screenshots!

[philou21]

Yup! That's cool Archi!

[batdad]

Two useless teams. But it looks good

[archibalduk]

Two useless teams. But it looks good

Ha! Well at least the action photo in the middle of the header changes every month - so you won't have to look at it for too long.

[MWE]

Looks great.

[archibalduk]

The new header is now live. Hopefully everybody can view it and use the drop-down menus without any issue. I have tested it fully with the latest versions of Google Chrome and Firefox. In addition, I have tested it with IE9 and have rendered it using IE7 and IE8 (but I haven't been able to test the drop-down menu with IE7 and IE8 as my testing software only allows page renders).

[CeeBee]

the forum doesn't work properly with Opera. I get a great big white space under the drop down menu's that continues down to the bottom of the links on the left. Everytime I go to a new thread or post I'm staring at a great big white space and have to scroll down over a page to see the top of the forum header.

[nino33]

I've got some issues...at first I too got the big white space at the top, but after a minute or two that issue seems to have gone away, but sizing and headers/columns seem messed up (even at 50% zoom not everything is fitting...and what is on the screen is misaligned)

[archibalduk]

the forum doesn't work properly with Opera. I get a great big white space under the drop down menu's that continues down to the bottom of the links on the left. Everytime I go to a new thread or post I'm staring at a great big white space and have to scroll down over a page to see the top of the forum header.

Would you mind posting a screenshot?

What version of Opera are you using? I have the latest version (v12.12) and it works fine. Are you using any ad-blockers which might be blocking part of the site?

[archibalduk]

I've got some issues...at first I too got the big white space at the top, but after a minute or two that issue seems to have gone away, but sizing and headers/columns seem messed up (even at 50% zoom not everything is fitting...and what is on the screen is misaligned)

I take it you're running IE7 or IE8. It looks like I've made some last minute change which has messed up the layout on IE7 and IE8 (it was working fine yesterday evening ). I'm looking into it.

[archibalduk]

I've got some issues...at first I too got the big white space at the top, but after a minute or two that issue seems to have gone away, but sizing and headers/columns seem messed up (even at 50% zoom not everything is fitting...and what is on the screen is misaligned)

I take it you're running IE7 or IE8. It looks like I've made some last minute change which has messed up the layout on IE7 and IE8 (it was working fine yesterday evening ). I'm looking into it.

I made a typo in a part of the code (it seems certain browsers can self-correct the mistake, but IE7/8 doesn't like it). I've fixed it now and have re-uploaded the affected files. How does it look now?

[nino33]

I've fixed it now and have re-uploaded the affected files. How does it look now?

Looks good/fixed now!

[CeeBee]

looks like I've got 11.61... funny that I have not got a message to get the latest as I should. Also have it set to block unwanted pop-ups. Nothing comes up that it's blocking anything but I'll try turning it off and see if it fixes it.

[CeeBee]

Weird... I turned off the popup blocker and now the search buttons are up in the header bar underneath "The Blue Line" wording and the white space is still there. Also checked for an update and it says I have the latest version. V11.61 build 1250. Looking at Nino's screenshots it seems like I have all the links running down the side instead of across the top. Thought something was not right.

[archibalduk]

You can get v12.12 here: http://www.opera.com/

I'll see if I can grab v11.61 and take a look...

[CeeBee]

I'll try and post 2 screenshots.

[nino33]

Mine now looks like CeeBee's! It was fixed...now not (but sizing's OK/still fixed in terms of screen width)

P.S. I'm not getting the EHM in-game pics ("the dots") in the banner...which I think look cool

[CeeBee]

Installed 12.12 and it's still bunged up. I tried refreshing and it's still bunged.

edit: Checked in IE 8.0.6001.18702 and it 's messed up the same as in Opera

[archibalduk]

Installed 12.12 and it's still bunged up. I tried refreshing and it's still bunged.

edit: Checked in IE 8.0.6001.18702 and it 's messed up the same as in Opera

My bad. How is it now? You might need to refresh/delete your cache. Note that the search box won't be positioned quite right (currently it is on the right hand side of the header but not flush against the edge) - I'm starting over again with that.

P.S. I'm not getting the EHM in-game pics ("the dots") in the banner...which I think look cool

The function for creating that particular background uses what is known as CSS3. Internet Explorer 7 and, IIRC, 8 do not support this. You'd need to upgrade to IE9 or use a browser such as Chrome or Firefox in order to see the EHM dots.

[eric1985]

It was doing the same on IE 9. Looks fine now though, whatever you did fixed the issue

[CeeBee]

Looks great now Thanks Archi

[archibalduk]

Thanks guys!

I've repositioned the search bar. Hopefully all is okay now. I'll test it out with Opera 11 later - it'd be nice to have some backward compatibility so everyone can visit the site okay.

[Octavian]

Hi Archy,

Nice headers, to fix the search input just add

Code: Select all

float: right;
padding: 10px 0; 

to #header_titlesearch in the css file.

Merry Christmas

EDIT:
Remove the styling (including positioning: fixed) from the input!

[archibalduk]

Hi Archy,

Nice headers, to fix the search input just add

Code: Select all

float: right;
padding: 10px 0; 

to #header_titlesearch in the css file.

Merry Christmas

EDIT:
Remove the styling (including positioning: fixed) from the input!

Hi Octavian. The problem is how the different browsers handle positioning differently (which is why padding doesn't work). I'd hoped fixed positioning would fix it horizontally to the browser window, but unfortunately it also fixes it vertically too! The #header_titlesearch is already floated to the right, but it doesn't place the search box in the right, it just floats it to the right of the title text (but left aligned).

This seems to have done the trick:

Code: Select all

margin: 30px 5px 0px 0px;
clear:both;
float:right;

P.s. I need to drop you an email about the server fees this week.