weird behavior in Firefox

[webguync]

I noticed something weird on this page of my site . http://www.inspired-evolution.com/Graphics/

 

when you click in a graphic the header below the graphic moves up underneath the image prior to the click action. I am not sure if this is a CSS issue or JQuery since JQuery is being used to display the larger graphic. Anyway, here is the html/css code. Hoping someone may have some ideas.

 

<div id="GraphicsContent">




<div id="Col1">

<dl>

<dt>Better Health Naturally</dt>
	<dd>

	<a class="images" href="./images/BHN.jpg"><img class="last" alt="Better Health Naturally logo" src="./images/BHN_small.jpg" /></a>
</dd>
    </dl>
    <dl>
    <dt>TREM USA</dt>
    <dd>




	<a class="images" href="./images/TREM_USA_Large.jpg"><img class="last" alt="TREM USA web graphic" src="./images/TREM_USA_Small.jpg" /></a>
</dd>
    </dl>
    <dl>
    <dt>Arch Angel</dt>
<dd>




	<a class="images" href="/images/imagine.jpg"><img class="last" alt="Imagine" src="/images/Imagine_small.jpg" /></a>
</dd>
    </dl>
    <dl>
    <dt>Touche Touchet</dt>
    <dd>




	<a class="images" href="./images/ToucheTouchet_Large.jpg"><img class="last" alt="Touche Touchet Bakery" src="./images/ToucheTouchet_Small.jpg" /></a>
</dd>
    </dl>
    </div><!--end col1 div-->
    <div id="Col2">
    <dl>
    <dt>Groovy</dt>
<dd>




	<a class="images" href="./images/GROOVY.jpg"><img class="last" alt="Groovy Graphic" src="./images/Groovy_small.jpg" /></a>
</dd>
    </dl>
    <dl>
    <dt>Waterfall</dt>
    <dd>




	<a class="images" href="./images/waterfall_large.jpg"><img class="last" alt="Waterfall graphic" src="./images/waterfall_small.jpg" /></a>
</dd>
    </dl>
    <dl>
    <dt>Electrifying</dt>
    <dd>




	<a class="images" href="./images/electrifying.jpg"><img class="last" alt="Electrifying graphic" src="./images/Electrifying_small.jpg" /></a>
</dd>
    </dl>
    <dl>
    <dt>AllMedStar Logo</dt>
    <dd>




	<a class="images" href="./images/Allmedstarlogo.jpg"><img class="last" alt="Allmedstar Logo" src="./images/AMS_small.jpg" /></a>
</dd>
    </dl>

</div><!--end Col2-->
</div><!--end graphic container-->

 

/*used on graphics page*/
#GraphicsContent{
width:85%;
margin:40px 0 auto 0;
padding:0 60px 30px 60px;
border:solid 1px #cbcbcb;
background:#fafafa;
-moz-box-shadow: 0 0 10px #cbcbcb;
-webkit-box-shadow: 0 0 10px #cbcbcb;
box-shadow: 0 0 10px #cbcbcb;
overflow:auto;
}

#GraphicsContent  dl{
opacity:1;
}



#GraphicsContent  dl dt{
-moz-border-radius:18px;
-webkit-border-radius:18px;
border-radius:18px;
/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
-moz-box-shadow:0px 0px 7px #000000;
-webkit-box-shadow:0px 0px 7px #000000;
box-shadow:0px 0px 7px #000000;
/*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
background-image: -moz-linear-gradient(top, #697eff, #8fe1ff);
background-image: -webkit-gradient(linear, center top, center bottom, from(#697eff), to(#8fe1ff));
background-image: -o-linear-gradient(top, #697eff, #8fe1ff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#697eff', endColorstr='#8fe1ff');
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#697eff', endColorstr='#8fe1ff')";
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background-image: linear-gradient(top, #697eff, #8fe1ff);
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
/*Use "background-clip: padding-box" when using rounded corners to avoid the gradient bleeding through the corners*/
/*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/
width:100%;
color:#fff;
font-weight:bold;
font-size:14px;
margin-bottom:20px;
text-align:center;
margin:35px 0 35px 0;
padding:5px 10px 5px 10px;
opacity:1;
}

#GraphicsContent  dd {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: #000;
font-family: Arial, Helvetica, sans-serif;
-moz-box-shadow: 3px 8px 4px #333;
-webkit-box-shadow: 3px 8px 4px #333;
box-shadow: 3px 8px 4px #333;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333');
background: #e3e3e3;
padding:15px;
    margin:20px 0 20px 0;
opacity: 1;
}

#GraphicsContent  dd a.images{
text-align:center;
background:none;
}

#Col1 {
float:left;

}

#Col2 {
float:right;

}	

[cssfreakie]

Well, this looks more like a jquery thing, but something you might want to have a look at in your humongous stylesheet

is whether you used the :active  pseudo class on the image.

Right now it when you press it (active state) It looks like the image is positioned absolute because the container <dd> that holds it looses the dimensions of that image. You can test that out by adding position absolute in the normal state of the image, you get the same effect.

Anyway If I were you I would have a careful look at the javascript and skim through your stylesheet for the :active state. That is what is causing this.

 

But as you can imagine i am not going to skim through an almost 3000 lines counting stylesheet.

 

As a side note, I would really remove the footer text that states " as with all cool websites bla bla bla"  That's just nonsense.

[webguync]

thanks for the response.

[Frank P]

I noticed something weird on this page

You're not the only one. Matters line up poorly in FF (see http://prntscr.com/2pe3t, other browsers not tested) and the web page is riddled with code errors: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.inspired-evolution.com%2FGraphics%2F&charset=%28detect+automatically%29&doctype=Inline&group=0  .