Okay… I think that I understand what you’re trying to do… you are using the clear .gif to create a space for the Exhibeo slider. Here’s what’s wrong with that, why, and how you might fix it. Sort of.
IMPORTANT: I am making assumptions based on the code output and working backwards to what you did in Freeway… I may not always be spot on, but will likely be close.
###Problem #1 – absolute positioning for this type of layout is not the best way.
Some of your layout uses absolute positioning, which screws with the document flow. Even an inflow item with the
position:absolute property applied to it will be removed from the normal document flow and thus be unable to affect the position and behavior of other inflow items. I think this is what is happening to the Exhibeo import item FrSlideShow:
<div id="FrSlideShow" class="f-ms"> (the Exhibeo Import action)
<div id="OverallContainer" class="f-x2 f-ms">
<div id="TopContainer" class="f-ms">
<div id="BodyContainer" class="f-x2 f-ms">
<div id="LeftNavig" class="f-x2 f-x3 f-ms">
<div id="BodyRightBox" class="f-x2 f-x3 f-ms">
<p class="f-fp"> (the Clear gif)
<div id="MovieBox" class="paraCenter f-x2 f-ms">
This is not the browser’s Inspect Source view of the page code, but the Inspect Element view which displays the code as interpreted by the browser. As you can see the FrSlideShow item is not where it should be (directly above MovieBox as a sibling) but isn’t even in the OverallContainer item. This is specifically because the FrSlideShow item has been positioned absolutely:
position: absolute; (all this is unnecessary)
###Problem #2 – the exhibeo import action is improperly sized and positioned.
So, if the FrSlideShow item IS the Exhibeo Import action item AND it is positioned inflow/inline above/before the MovieBox item, THEN remove ALL the unnecessary position, top, left properties from it’s style information. It is absolutely not needed.
Then also remove its height (and min-height) information so the height is undefined. There is also no need to set a specific
z-index property for it. Instead, set the width to 100% (remember, 100% of its parent container width). Then give it a bottom margin of 20px.
###Problem #3 – the .gif is unnecessary.
Finally, delete the blank gif. It was never needed and is the worst way to make space for items which can make room for themselves.
What you have left doesn’t look the most ideal in the Freeway workspace, but should work as expected in the browser-- which is all that really counts. There’s a lot more you can do to improve your layout, but this should get you started. Don’t forget you may need to go through your breakpoint styles as well.
freewaytalk mailing list
Update your subscriptions at: