Solved

Problems with float on IE7 and other elements

Posted on 2010-08-27
8
397 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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
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

WordPress Tutorial 2: Terminology

An important part of learning any new piece of software is understanding the terminology it uses. Thankfully WordPress uses fairly simple names for everything that make it easy to start using the software.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
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 code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

627 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