CSS - Widget Images Work In Ff But Not Ie

ok, if you go he

http://www.whiteazn.com/satworld/gallery

youll see at the top, the image ... being overlapped by the row below ....

im trying to use CSS without using tables .....

but any image not inthe first column, doesnt push the row under it down ...

the first column is position: relative, the 2nd and 3rd columns are position: absolute (to get it inthe column position) ....

any other way of doing it so that it will push the row down respectively?

here is the html code that gets outputted to the screen for the whole gallery:

PHP Code:
<div id="galleryContainter">  
<div class="galleryRow">
    <div class="galleryImage1">
        <p class="galleryIMG"><a href="viewimage.php?id=42"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif" width="100" height="60" alt="Gallery Image" /></a><br /><br />
            testing completion of pagination again</p>

      </div>
    <div class="galleryImage2">
        <p class="galleryIMG"><a href="viewimage.php?id=41"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif" width="180" height="110" alt="Gallery Image" /></a><br /><br />
            testing image insert and page numbers</p>
      </div>
    <div class="galleryImage3">        <p class="galleryIMG"><a href="viewimage.php?id=38"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br />            on to 2 pages</p>      </div>

    </div>

  <div class="galleryRow">
    <div class="galleryImage1">
        <p class="galleryIMG"><a href="viewimage.php?id=37"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br />
            on to 2 pages</p>
      </div>
    <div class="galleryImage2">
        <p class="galleryIMG"><a href="viewimage.php?id=36"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br />

            on to 2 pages</p>
      </div>
    <div class="galleryImage3">        <p class="galleryIMG"><a href="viewimage.php?id=34"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br />            on to 2 pages</p>      </div>
    </div>

  <div class="galleryRow">
    <div class="galleryImage1">

        <p class="galleryIMG"><a href="viewimage.php?id=32"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br />
            on to 2 pages</p>
      </div>
    <div class="galleryImage2">
        <p class="galleryIMG"><a href="viewimage.php?id=31"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br />
            on to 2 pages</p>
      </div>
    <div class="galleryImage3">        <p class="galleryIMG"><a href="viewimage.php?id=30"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br />            on to 2 pages</p>      </div>

    </div>
  <div class="galleryRow">
    <div class="galleryImage1">
        <p class="galleryIMG"><a href="viewimage.php?id=29"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br />
            on to 2 pages</p>
      </div>
    <div class="galleryImage2">
        <p class="galleryIMG"><a href="viewimage.php?id=28"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br />

            on to 2 pages</p>
      </div>
    <div class="galleryImage3">        <p class="galleryIMG"><a href="viewimage.php?id=27"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br />            on to 2 pages</p>      </div>
    </div>
</div> 





here is the respective CSS:

PHP Code:
/*****************
Gallery Styles
*****************/

#galleryContainter {
    position: relative;
    width:552px;
    margin: 0px;
}

.galleryRow {
    position: relative;
    width: 552px;
    margin: 0px;
    padding-bottom: 5px;
}

.galleryImage1 {
    position: relative;
    top:0px;
    left: 0px;
    width: 180px;
    padding: 2px;
}

.galleryImage2 {
    position: absolute;
    top:0px;
    left: 188px;
    width: 180px;
    padding: 2px;
}

.galleryImage3 {
    position: absolute;
    top:0px;
    left: 376px;
    width: 180px;
    padding: 2px;
}

.galleryIMG {
    text-align: center;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 10px;
}

.galleryIMG img {
    border: 2px solid #900;
}

.viewImage {
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
} 





thanks ....

sorry if this seems easy ... im just new at trying this new thing of using all CSS, strict, no tables for layout, standards mentality of coding ...

Hey guys,

I am in the process of adding a Twitter widget onto my website. I would like it to be very similar to that on http://www.spotify.com/us/about/what/. I am not sure how to edit the currently provided Twitter widgets to resemble that... Has anyone any idea?

PS. I am looking for a programmer for my startup company. No cash, but rather equity. We need someone fluent in PHP.

Hi,

Trying to get this widget to disappear using responsive design when the browser is less than 800px.

I'm using WordPress and the theme is already responsive.

Here's the media query in the style sheet now:

@media only screen and (max-width: 800px) {

/* and I added this part below (not working!) */

.page-title .widget-area {
display:none !important;
}

}

Please see http://simplemethod.ca to check it out. I'm trying to remove my big fancy title widget with the signup form in it (since it breaks in an ugly way when the responsive design kicks in!)

Thanks for helping friends. I hope my post made some sense! Perhaps I'm using the wrong class names for the style change... This part has got me a bit stumped.

Best Regards,

Drew

I'm getting a strange interaction between a CSS-positioned image and a widget placed farther down the page. I've tested it in FF3.5.7 and IE8, and everything works fine until I test it in Compatibility View in IE. The widget takes a few seconds to load; once it's loaded the image at the top of the page disappears. The layout is basically this:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head></head>
<body>
<table>
  <tr>
    <td><div style="position:relative;margin:50px 0 0 0">
      <table>
        <tr>
          <td>Some content</td>
          <td rowspan="2"><img style="position:relative;margin:-50px 0 0 0" src="#" width="250" height="375" /></td>
        </tr>
        <tr>
          <td>Some content</td>
        </tr>
      </table>
      <table>
        <tr>
          <td>Some content</td>
          <td><img style="visibility:hidden;width:0px;height:0px;" border="0" width="0" height="0" src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyNzY2NTc4MzAyNzAmcHQ9MTI3NjY1ODUyNzM1MiZwPTEwODQwMDEmZD*mZz*yJm89MDQ2ZDg3MzBjNDc4NDExZTkw  /YTVmZDcxNzhiYmQ1MGYmb2Y9MA==.gif" /><object width="394" height="350" id="W4afb54b3f6d091a24b057108737c9fbe" data="http://www.5lovelanguages.com/widget/5LL-assesment-widget.swf" type="application/x-shockwave-flash">
            <param value="http://www.5lovelanguages.com/widget/5LL-assesment-widget.swf" name="movie"/>
            <param value="transparent" name="wmode"/>
            <param value="all" name="allowNetworking"/>
            <param value="always" name="allowScriptAccess"/>
          </object></td>
        </tr>
      </table>
      <table style="position:absolute;left:0;top:-50px">
        <tr>
          <td>Some content</td>
        </tr>
      </table>
    </div></td>
  </tr>
</table>
</body>
</html>

I don't know anything about how the widget works. Can anyone help me fix this problem?

Hi,

I have created a accordion menu using a spry widget built into Dreamweaver CS3. However I want to amend this so that the menu is collapsed until the user clicks on a category.

Do I have to amend the CSS or the javascript to make it collapsed to begin with?

Any help would be appericated.


Thanks
Gary