CSS Div Align/Position Issue in IE7

[NetwiseHosting]

Hi Guys,

Hope you are all well.

We have a homepage rotator image that is displaying correctly in FF and IE 8 but not in IE 7 and a few other browsers. I am really at an end on where the issue with the code is and I would very much appreciate any advice you guys may have.

As you will see when it's displaying correctly, the left three-part navigation for the rotator is on the left but in IE7 etc it is centered and overlapping the main content area. Hopefully you can see the code from the source including CSS but please let me know if you need it pasting here.

Really weird issue and would love to find a resolution for it, thanks in advance.

Matthew

 

[Deleted member 69689]

Renders fine for me. What is broke though is your top nav. About Us and Contact Us, the 'Us' sections drop below the menu in FF, fine in IE.

Remove the 19px padding left/right and either user margin: 0 auto; or text-align: center;

 

[NetwiseHosting]

Hi there,

Thank you for the feedback, really appreciated. I have now updated the navigation with your suggestions and it is displaying correctly for me, please could you see if that has resolved your display issue? Thanks again.

Matthew

 

[NextPoint]

You can fix IE8 (and IE9 I assume) issues that don't show the same as IE7 by inserting the following into the head of your HTML:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

This will make IE8 act the same as IE7 - a great way to decrease your costs for testing on IE. Now if only that worked on IE6 too!

 

[Deleted member 69689]

Hey Netwise,

Not really, check this screenshot: http://d.pr/5naK

Try width.

 

[NetwiseHosting]

Hi there,

Hey Netwise,

Not really, check this screenshot: http://d.pr/5naK

Try width.

Can I ask what browser and OS you are using as I have used a tool online and the navigation is showing as displaying correctly on FF, IE, Opera, Chrome and Safari. I am using FireFox and don't see any issues. Thanks for this.

You can fix IE8 (and IE9 I assume) issues that don't show the same as IE7 by inserting the following into the head of your HTML:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

This will make IE8 act the same as IE7 - a great way to decrease your costs for testing on IE. Now if only that worked on IE6 too!

Really useful bit of code thank you. Unfortunately it is in IE7 that the rotator isn't displaying correctly, the left navigation of the module is still being displayed centrally for some reason. Thank you for the code though.

Any further ideas on what I can try would be much appreciated.

Matthew

 

[sidera]

can you try adding this declaration to the ul-tabs-nav div CSS, beneath position:absolute:

left: 0;

 

[Deleted member 69689]

Hey Netwise,

Mac OS X Snow Leopard 10.6.4, Firefox build 3.6.6, 24" Screen, 1920x1600 Resolution.

After saying that it is now rendering correctly.

 

[NetwiseHosting]

Hi Guys,

can you try adding this declaration to the ul-tabs-nav div CSS, beneath position:absolute:

left: 0;

I have now added the code to the CSS and I have tested it in Opera, Firefox, Internet Explorer, Chrome and Safari in several versions and all is working wonderfully -thank you very much indeed!

Hey Netwise,

Mac OS X Snow Leopard 10.6.4, Firefox build 3.6.6, 24" Screen, 1920x1600 Resolution.

After saying that it is now rendering correctly.

Thank you for passing the information on - I have double checked and everything is displaying great now it may not have been displaying correctly immediately for you because of certain parts of the website being stored in your cache.

Thanks for all your comments guys, really appreciated.

Matthew

 

[sidera]

I'm glad I could help you out!

 

[Jeff Knows]

Not sure if you are aware but the content tabs at the bottom of the page don't line up right on first load or seperate the content. Shows everything in one big block. They fix themselves after I click one. (Windows 7, Firefox 3.6.12)

 

[NetwiseHosting]

Not sure if you are aware but the content tabs at the bottom of the page don't line up right on first load or seperate the content. Shows everything in one big block. They fix themselves after I click one. (Windows 7, Firefox 3.6.12)

Hi Jeff,

Thank you very much for the website feedback - really appreciated. Ideally we are looking for a new script for the tabs as IE is throwing up an error as well as cross browser compatibility being a little patchy!

Do you reckon this is achievable without Javascript? Thanks again for pointing this out, have a good day.

Matthew

 

[cmcp]

You can do this with CSS. Specify the height and width of a containing div, give it overflow hidden. Put a number of same sized divs inside, with anchor IDs. Under containing div put a list of anchors that point to the anchor IDs.

When you click on the link in the list the relevant anchored content will appear in the container div.

 

[NetwiseHosting]

You can do this with CSS. Specify the height and width of a containing div, give it overflow hidden. Put a number of same sized divs inside, with anchor IDs. Under containing div put a list of anchors that point to the anchor IDs.

When you click on the link in the list the relevant anchored content will appear in the container div.

Hi Cmcp,

Many thanks for that, I would prefer to keep it with HTML and CSS as to reduce the number of scripts we run on the website and therefore increasing accessibility.

We have just launched a new promotion but I will try and get the tab coding done in the next few days.

Thank you again for your advice, all the best.

Matthew

 

[cmcp]

Cool you'll still need javascript to enhance it. Like keep the page at the same spot when an anchor is clicked, or add a style onto an active anchor.