CSS - Image Causes Form Element To Bump Down.

Hi all,

I'm having a difficult time with an IE7 bug and it's been driving me crazy. When my main navigation has a mouseover, it causes a div element on the page to jump to another location, and then stays there even after terminating the mouseover.

Here is an example URL:
game*spark*online*com/overview

(Remove stars, replace last star with period character. I'd use BBCode link but my client has asked me to be discreet.)

What it should look like is exactly how the div is positioned before it 'jumps'. The div should be centered.

Because I'm using Windows 7 and it came with IE8 I have been using the IE7 rendering mode to test this.

I've validated the CSS/XHTML more or less, but because this site uses an open source CMS I'm not certain I was to mess with the CSS of their modules.

Can anyone offer advice? This is delaying the launch of this website.

I have finally got my page set up as required. There is one minor niggle.

The footer sits at the bottom of the page when the browser is maximised and has no content. If the browser is not maximised or the content introduces scroll bars the footer is bumped up one pixel in IE. How can I get around this? The footer CSS is below, if you require any more CSS let me know which elements (roughly) as there is a lot of it.

PHP Code:
#wrap {
     margin-left: auto; /*center the wrapper CSS2 compliant (all except IE*/
     margin-right: auto;
     margin-top: -21px;
     width: 760px;
     top: 21px;
     min-height: 100%;
     position: relative;
     left: 0px;
     background-image: url(../images/content_bg.gif);
     text-align: left;
     
}

* html #wrap {
     height:100%;
     padding-bottom: -20px;
}

#clear_footer {
     clear: both;
     height: 21px;
     overflow: visible;
     z-index: 1999;
     /*background-color: green; Used for demonstration purposes only, remove after testing*/
}

#contain_footer {
     left: 0;
     margin-top: -21px;
     width: 100%;
     height: 21px;
     background-color: red;
     background-image: url(../images/contain_footer_bg.gif);
     padding-bottom: 0px;
     z-index: 2002;
}

#footer {
    position: absolute;
    bottom: 0;
    margin: 0 auto;
    width: 760px;
    height: 21px;
    line-height: 21px;
    vertical-align: center;
    background-image: url(../images/footer_bg.gif);
    z-index: 1999;
} 

Not 100% sure if this is CSS related, however:



The nav and image area below it are obviously 2 separate divs, as referenced by http://www.psyberarts.com/work/prism

What is the best way to accomplish this look (the hover image, which is actually just an image for an "Active" State on a page.)

I was thining about nested Divs for the pointed peice, but before I proceed I would rather get the opinion of someone who knows more than I do

I'm trying to create a block quote like in the image below:

http://www.norrislakevillas.com/images/block-quote-sample.png

The quotation marks sit in the bottom right corner of a 50 X 45 px transparent PNG image with 10px of spacing on the top and left.

The element is rendering correctly with the exception of the background image, it just won't show up.

CSS Code:
Code:

#block_quote{
   float:left;
   width:400px;
   background:#f7f7f7;
   background-image:url(images/quote-top.png) left top no-repeat;
   margin:50px 0 100px 53px;
   border:1px solid #ccc;
}

#block_quote p{
   font:italic 14px segoe ui, arial, sans-serif;
   color:#5f5f5f;
   line-height:1.4em;
   margin:0;
   padding:20px 15px 20px 60px;
}

Any ideas why the image isn't rendering?

Thanks