Problems with float on IE7 and other elements

Hello,

I am trying to finish my website and I am having real difficulty with a couple of items on my front page. I have set up a test environment here:

Wychburyenergy[dot]com[dot]previewdns[dot]com

1.      When the page is viewed in IE7 the text that (should) float to the right of the slider is pushed below the images, it works OK in Chrome or Firefox.
2.      The footer on the bottom of the page has a lot of white space below it compared to other pages on my site
3.      The footer is a solid green colour when viewed on IE7
4.      Not a huge problem but it would be really helpful if there was a better way of floating the “text_column” to the right of the services.

If you think any of the above requires posting under a separate question I would be happy to do so.
newbeyAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

zappafan2k2Commented:
When I'm diagnosing problems like the ones you're describing, I usually start with validating the HTML and CSS.  I did for your site, and it came back with several errors (I think the CSS were more important than the HTML errors) that should be corrected.

http://www.w3schools.com/site/site_validate.asp
0
myderrickCommented:
Do the ff:

Important!: Backup your old codes....

1. For slider test to be on the right, #SlideItMoo_banners_outer should float: left

2. Text Columns and whitespace problems:

a. remove thenegative margin from #block_portfolio
b. Float both #services_items and text_column
c. Give text_column a margin-left of 21px

3. Footer Problems:

You have to #footer in your CSS. line 33 and Line 349 of master.css

The second footer is cancelling out the fisrt. Give the footer a background-color you want and join the two footer elements.

Kindly post back to let us know  how it turned out.

Good luck

MD
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Chris StanyonWebDevCommented:
newbey

Slider Problem - Give your image_block a width of 569px. At the moment it has no width so will expand to full width of the parent element, which doesn't leave enough room for your text.

#block_portfolio - set overflow to auto and remove margin-bottom:-400px;

#service_items - float:left;

#text_column - remove top:-469px;

#footer - your background-color is set to green - change that to white.



0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

kiqkinasCommented:
IE7s incorect boxmodel is causing your header problem.

for <div class="image_block"> add a width
.image_block { width: 559px; }

all the extra whitespace at the bottom seems to be caused by this margin:
#block_portfolio {
  margin-bottom:-400px;
  overflow:auto;
}

for the green footer  you have two #footer items in your css. One is setting the color as
background: #8dc643

You should be able to use float: left on services_items  and float:right on text_column however this exposes other problems with the css.
0
newbeyAuthor Commented:
Hi everyone,

Thanks for coming back to me. Mrderrick – thank you, I have just finished implementing your suggestions and the difference is fantastic however the text_column element is a little higher than the services_items (and no padding from the footer in IE), is there a solution for this?
0
Chris StanyonWebDevCommented:
You have a padding-top 3px on services_items. To match this add margin-top:3px to the text-column


0
newbeyAuthor Commented:
Thanks Chris, it sorts the top out but there is still a problem with the bottom of the text_column in IE?
0
newbeyAuthor Commented:
Thanks for all your help
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.