Topic: Problem with Nav in IE 7 + IE8 – I’m on aMac so can’t test it, can you help?

Problem with Nav in IE 7 + IE8 – I’m on aMac so can’t test it, can you help?

@rossagrant

Participant

13 years, 9 months ago

Hi guys,

I’m having an issue reported to me that in IE 7 and sometimes 8 the navigation that is supposed to be in the top right of my site is coming way to far down the page and looks terrible.

Could any IE 7 or 8 users try my homepage out at http://www.actonthis.co and see if you get the same error.

The navigation consists of icons and text and should be in the top right.

Would be so very grateful for any advice. I have no experience with IE sadly.

Boris has been looking into this for me but we can’t recreate it in all instances of computers using IE7 + IE8.

Thanks for your time!

Viewing 8 replies - 1 through 8 (of 8 total)

@hloti

Participant

13 years, 9 months ago

hi i have just checked your website. it looks fine in IE8 but the menus are totally not looking good at all in IE7. i have read many places that buddypress support for IE7 is not there at all. the only thing you actually can do is to do some hacks for IE7 this is to say, find out exactly the sections that do not work, then add css tags that will only be read by IE7. lets say for example if you have a problem with width of 1200px and you want the width to be specifically 100% in case of IE7, then do like this

width:1200px;
*width:100%;

in the above case, all browsers will read the width as 1200px but only IE7 and probably IE6 will read it as 100%
well this solution is not a clean and nice solution. but it is quick and it works. i had a similar problem with my site and solved it through this. hope you can use this suggestion.

it seems in your case it is the header that pushes the navwrap down in case of IE7

cheers
Hloti

@mercime

Participant

13 years, 9 months ago

@rossagrant you can see how your site is rendered in different IE versions via http://ipinfo.info/netrenderer/

[ edit ] Some future-proof tricks to use with IE

1. Add `width` to any float, e.g.

`.navwrap {
float: right;
width: 475px;
}`

2. Relative and Absolute Positioning, e.g.

`#header { position: relative; }

.navwrap {
position: absolute;
top: 5px;
left: 8px; // edit – ooops. should be –>> right:8px;
}`
[ /edit ]

@rossagrant

Participant

13 years, 9 months ago

Thanks guys that’s great info!

Didn’t know I could render sites in IE through that website so thank you.

Thing is I’m not remotely technical when it comes to more advanced CSS. I can do the basics but this may be out of my league.

Are we talking just a couple of CSS blocks to fix this or is it more complex.

Might need to employ someone that’s all.

Cheers!

@mercime

Participant

13 years, 9 months ago

@rossagrant since you bought the theme at bp-tricks.com, you should be able to get support from @Bowromir

@bowromir

Participant

13 years, 9 months ago

@mercime: Damn you and your “advise”. My CSS is perfect.. always.. It’s the old browsers that can’t keep up..

To be honest the use of “position” still confuses me a bit, but I’ve fixed it thanks to your tips. It’s fine now! Thanks!

@mercime

Participant

13 years, 9 months ago

@Bowromir LOL, I had no doubts that you would be able to help Ross and conquer IE 7

@rossagrant

Participant

13 years, 9 months ago

Haha, yeah we’re not quite sure why but using an absolute position on the nav fixed it’s issues in all version of Firefox (it was playing up in version 3.0 too) and all version of IE but consequently broke the nav in IE 8, sending it far up the other way and up almost off the page.

Anyone know why? I thought it bizarre that it fixed it in all older versions yet 8 then broke?

Ended up creating a separate style sheet for IE8 with a CSS fix.

Was that the best way to go do you reckon. It was a learning curve for both Bowe and myself.

Lastly are there any auto widgets out there that will offer download links to the latest versions of browsers.

How can we make it easy for users to know their browser is out dated and that they can upgrade easily?

Thanks!

And thanks again to Bowe for helping me implement the fix tonight. I would have been lost otherwise!

@mercime

Participant

13 years, 9 months ago

Cannot pinpoint the exact reason but it’s most likey the IE box model bug http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug and the “quirks mode”. You can read the article and go to links referenced to get a better grip. Web Standards/CSS guru Eric Meyers and many others have expanded on that issue among many other IE sins since way back.

I saw a WP plugin which renders a pop-up or a warning after “sniffing” online visitor’s browser, to upgrade to latest browser version, you could search in WP repo. There’s also a way to do this without a plugin and you can search online for something like “add script warning upgrade to latest IE version”.