Hi,

 

I'm just finishing up on my website (to replace my rather garish current one) and I'm struggling with some alignment/IE7 oddness issues.

 

Right, my URL is http://www.test.vitalworks.co.uk (username 'a' password 'a')

 

In Firefox and IE8, I have no alignment issues (except for one I've just created on an image in the web design tab on the services page, but I can rectify that one). In IE7, I've floated a nice little peel revealing HTML code in the top left and next to it there is my logo. Next to this there is my main nav area. The peel is floated outside of the container so it always sticks to the top left of whatever screen res you have. The container has a width of 1000px and the logo and nav sit inside this. In IE7, the floated peel is causing issues- it pushes everything down below it, even though it's floated. I've tried removing the logo (to see what happens), changes various CSS attributes but the only way to rectify it seems to be to remove the peel, and I'd quite like to keep it there.

 

Another issue is the footer riding up behind my services page tab system in IE7. Again, tried clearing the floated div, adding clearing classes and sticking them in the HTML below the tab area etc, but the footer stays put, right where I dont want it!

 

If you need further info, I'll be tracking this thread regularly for answers.

 

Thanks in advance, I appreciate any help I can get.

 

Jon.

Would a position absolute fix your peel

 

Also try removing height from content wrapper and moving your clearer to just before the wrapper closing div

Hi- thanks for your reply. I've tried the absolute position thinking this would also 'stick' the peel to the top left but for some reason it confines it to the outer edge of the 1000px container, even though it is outside of it. I'll try the other suggestions you gave me.

 

I may also try to reduce the width of the div that's wrapped around the nav and logo to see if that makes space for the peel. If that doesn't work I'll post again for more suggestions.

 

Thanks again.

 

Jon.

Have you tried setting the peel to the background of your peel div rather than it being an image in your HTML? Float wouldn't be an issue then. Using position:relative might help also.

mteam- thanks for your suggestion to get rid of the wrapper div height- that sorted the footer issue. Must've been a reason why I put that there in the first place.

 

mrsminkie- thanks for your input about having the peel as the background, but unfortunately it didn't work. The relative positioning also didn't work athough it should do as it's position should be relative to the body but for some reason it's still clinging to the contaiers 1000px. ??

 

Absolute positioning seems to work the same as not defining a position altogether- just floating it. It's weird. The issue only occurs when I test the page on my 1024x768 monitor. If I test on 1280x1024, everything drops into place...

 

I changed my CSS to the following:

 

#peel {
float: left;
background-image: url(../images/peel.png);
background-repeat: no-repeat;
position: relative;
height: 93px;
width: 90px;
}

 

....but I may change back to how I had it before...

 

I'll keep plugging away but again, any input greatly appreciated.

 

Jon.

Have you tried an absolute position and used left:0px?