IE7 Kicks Main Div Wrapper

HTML & CSS
1

Trouble with Floor Plans, Pricing, Apt Features, Amenities and Views Pages.

Everything looks good in all other browsers.

Del Prado

Thanks.
Robert JJ

2

Not sure if this is the problem, but it certainly deserves to be fixed:

<script type="delPrado.js"></script>
3

Hi,

You have the floorplanprimarywrapper set to floated and position:absolute. It can’t be both and indeed position:absolute without co-ordinates will confuse IE7. Position absolute wins out over float anyway.

Better to just float the element and IE7 should click back into place.


#floorplanprimarywrapper {
    display:block;
    width:960px;
    margin-top:0px;
[B]    /*position:absolute;*/
    position:relative;[/B]
    float:right;
    clear:both;
}
4

Thanks Paul O’B. That positioning did the trick. Now everything works except the Floor Plans nav bar is kicked low in all browsers but IE7?

EarlyOut, not sure what you’re telling me.

Thanks.
Robert JJ

5

Hi,

Change these two rules as follows.


#floorplanprimarywrapper {
    display:block;
    width:960px;
[B]    margin:0 0 45px;[/B]
    /*position:absolute;*/
    position:relative;
    float:right;
    clear:both;
}

.navBar {
[B]  clear: both;[/B]
  color: #FFFFFF;
  height: 50px;
[B]  margin:0;[/B]
  position: relative;
  width: 960px;
  [B]  overflow:hidden;[/B]
}

You don’t need to float everything and elements that are 100% wide don’t really need to be floated although you will need to make sure they contain child floats. In IE if you float everything it starts getting buggy. Only float when you need horizontal alignment but make sure the parent of the floats has a clearing mechanism in place (such as overflow:hidden).

Use absolute positioning only in small doses and only where the flow of the document is not compromised. Don’t move things with relative positioning as it doesn’t move things physically but only visually. The space that the element previously occupied is always preserved.

Lastly your navbar should be a ul with list elements for the menu and not a div width p elements for each item.

Move your onload image preloader script into an external script rather than have it in the body tag on every page. Use addloadevent to free up the onload event handler (or place the call to the script at the end of the html before the closing body tag).

6

Look at it again:

<script type="delPrado.js"></script>

Is delPrado.js really a type of script? If so, what’s the src? I suspect what you intended was:

<script type="text/javascript" src="delPrado.js"></script>
7

Thanks Paul O’B, working on it.

Robert JJ

8