Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Junior Member
    Join Date
    May 2010
    Posts
    8
    Member #
    22003
    Hi all,

    In my client's portfolio, I have created a layer that contains a text description, which expands to accommodate whatever amount of text is placed inside of it. Below this, there is another layer that contains the portfolio images, which are inside a Flash slideshow. For most of the browsers that I've tested (FF, Chrome, Opera, IE8), the layout works fine; the portfolio div layer pushes down when the text description content expands. But in IE7, for some reason the layer is sitting behind the text content. Basically it appears that it is not clearing the float that is placed on the text description div layer.

    I have tried adjusting the "overflow" property to every combination that I could conceive; I've tried setting different top or bottom margins; I've set a "clear:both" directly on the portfolio-wrapper div layer; I've set a <br class=".clearfloat"> in countless different locations to try and force this portfolio layer to go where it should. But all to no avail. Once again IE7 has gotten the best of me.

    Here is a link to one of the offending pages (there are many many portfolio pages in this site, this is just one with longer text description content):
    http://helixriver.com/clients/paperd...cus/index.html

    Here is some of the CSS that I've got for this page:
    Code:
    #content-TOP {  /*  This is the div layer that holds the text description layer, along with a couple other div layers (title & back button) */
    	background: url(../images/portfolio/portfolio_titleBG.png) no-repeat left top  !important;
    	padding: 0px 0px 0px 5px;
    }
    #portfolio-description {  /* this is where the actual text description goes */
    	float: left;
    	margin: 5px 0px 5px 40px;
    	color: #333333;
    	width: 562px;
    }
    #portfolio-wrapper {  /*  this is the holder for the Flash slideshow, which should appear below, not behind, the text description layer */
    	clear: both;
    	margin: 5px 0 0;
    	height: 610px;
    }
    I'm totally baffled as to how to solve this dilemma. Any assistance would be greatly appreciated!

    Thanks,
    Ryan

  2.  

  3. #2
    Senior Member
    Join Date
    Feb 2005
    Location
    Canada
    Posts
    435
    Member #
    8983
    just briefly looking at that and having had errors simular to it, I have applied a float to the second element and it seems to contradict the effect.
    Thee Pyro Wolf

  4. #3
    Junior Member
    Join Date
    May 2010
    Posts
    8
    Member #
    22003
    Bummer, that's not seeming to work for me... I tried applying a float on the left and the right, but neither had any effect. :cry:

  5. #4
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    I don't know about that <br class=".clearfloat">. It's a little unorthodox, to me anyway. Why not go with a more standard way which is to use a div and add clear both to it, right after the #content-TOP closing tag - or - after the #mainContent closing tag, one of those should do it. I'm surprised the overflow didn't work, depends on what you applied it to.

    Try the clear div anyway. I can't test but I can see it and that's the only answer I got for ya.

  6. #5
    Junior Member
    Join Date
    May 2010
    Posts
    8
    Member #
    22003
    Quote Originally Posted by aeroweb99
    I don't know about that <br class=".clearfloat">. It's a little unorthodox, to me anyway. Why not go with a more standard way which is to use a div and add clear both to it, right after the #content-TOP closing tag - or - after the #mainContent closing tag, one of those should do it. I'm surprised the overflow didn't work, depends on what you applied it to.

    Try the clear div anyway. I can't test but I can see it and that's the only answer I got for ya.
    Hi there,

    thanks for your reply on this. I tried that solution, as well as many others, but nothing seemed to work. quite mysterious... in the end, I just created a new stylesheet for the pages with extra long text descriptions, and forced the content-TOP div to be large enough to expand for the text content. Then I included that stylesheet on all the necessary pages. perhaps not the most elegant solution in the world, but in the end, it works at least. and the client is happy, so I'm happy ;-)

    thanks again aeroweb!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:29 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com