Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Problems with float on IE7 and other elements

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
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…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

926 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