Solved

Problems with float on IE7 and other elements

Posted on 2010-08-27
8
395 Views
Last Modified: 2012-05-10
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.
0
Comment
Question by:newbey
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
8 Comments
 
LVL 12

Expert Comment

by:zappafan2k2
ID: 33548303
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
 
LVL 13

Accepted Solution

by:
myderrick earned 450 total points
ID: 33548764
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
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 33548899
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Expert Comment

by:kiqkinas
ID: 33548943
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
 

Author Comment

by:newbey
ID: 33549027
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
 
LVL 43

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 50 total points
ID: 33549047
You have a padding-top 3px on services_items. To match this add margin-top:3px to the text-column


0
 

Author Comment

by:newbey
ID: 33549068
Thanks Chris, it sorts the top out but there is still a problem with the bottom of the text_column in IE?
0
 

Author Closing Comment

by:newbey
ID: 33549108
Thanks for all your help
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question