Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Problems with float on IE7 and other elements

Posted on 2010-08-27
8
Medium Priority
?
398 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 1800 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 44

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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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 44

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 200 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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

721 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