SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2008
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ie 6 & 7 layout breakage (pretty urgent)

    While testing an add-on to a gallery page in one of my sites, and making some "simple" changes to the current page, ie has decided to break my layout for reasons that I cannot decipher. Everything checks out in Firefox and Safari, and I've tried to retrace all of my steps to no avail.

    The link to the page is here. If you view it in either version of ie, you see the Flash is kicked way out to the right.

    And yes, I am aware that the way the Flash is embedded is sort of a mess, but it was working before, and I believe this is a CSS issue at the moment. I very mistakenly went live with this too soon, so this is a bit of an emergency. Anyone's help is greatly appreciated. Thanks!!

    Markeup:
    Code:
    <div id="main">
             
               <h1 id="first-header-gallery" class="float-left">Gallery</h1>
               <div id="top-image"></div>
               <p class="normal-par top-par">The only thing better than the scenery at One0One, are the people that enjoy it. Check out our galleries below to see One0One's patrons in action. </p>
               <div id="thumb-container"><span id="thumb1"><a href="#">Italy</a></span></div>
              <div id="gallery-container">
                
                 <embed src="media/one0one_gallery.swf" width="533" height="434" type="application/x-shockwave-flash" id="gallery" name="gallery-container" quality="high" />
                 
    	<script type="text/javascript" src="../scripts/swfobject.js">
    	 
    		// <![CDATA[
    
    		var so = new SWFObject("media/one0one_gallery.swf", "gallery-container", "434", "533", "9",);
    		so.addParam( "allowScriptAccess" value="sameDomain")
            so.addParam( "movie" value="one0one_gallery.swf")
    
    		so.useExpressInstall("media/expressinstall.swf");
    		so.write("gallery-container");
    
    swfobject.embedSWF("media/one0one_gallery", "gallery-container", "434", "533", "9.0.0");
    		// ]]>
    	</script>
               </div>
               <!--end #left-image--> 
                </div>
          <!--end #main-->
    CSS:
    Code:
    /*------------------------------------------------------
    	GALLERY
    -------------------------------------------------------*/
    #thumb-container {
    	width: 150px;
    	float: left;
    	clear: both;
    	margin: 20px 10px 0 20px;
    }
    
    /*--------gallery thumb navigation----------*/
    
    #thumb1 {
    	width: 150px;
    	height: 100px;
    	margin-bottom: 20px;
    	background: url(images/grandopen_album_thumb.jpg) no-repeat;
    	text-indent: -99999px;
    	overflow: hidden;
    	display: block;
    }
    
    #thumb1 a {
    	width: 150px;
    	height: 100px;
    	background: url(images/grandopen_album_thumb.jpg) no-repeat;
    	display: block;
    }
    
    #miscNovDec-thumb {
    	width: 150px;
    	height: 100px;
    	margin-bottom: 40px;
    	background: url(images/gallery_images/miscNovDec_thumb.jpg) no-repeat;
    	text-indent: -99999px;
    	overflow: hidden;
    	display: block;
    }
    
    #miscNovDec-thumb a {
    	width: 150px;
    	height: 100px;
    	background: url(images/gallery_images/miscNovDec_thumb.jpg) no-repeat;
    	display: block;
    }
    
    #miscNovDec-thumb a:hover {
    	width: 150px;
    	height: 100px;
    	background: url(images/gallery_images/miscNovDec_thumb.jpg) no-repeat;
    	background-position: 0px -100px;
    	display: block;
    }
    
    /* Hover effect disabled //////////////////////*/
    thumb1 a:hover {
    	width: 150px;
    	height: 100px;
    	background: url(images/album_thumb_hover.jpg) no-repeat;
    	display: block;
    }
    /*////////////////////////////////////*/
    
    #gallery-container {
    	width: 533px;
    	height: 500px;
    	float: right;
    	margin: 20px 40px 40px 20px;
    	clear: right;
    }
    
    
    #first-header-gallery {
    	height: 40px;
    	width: 97px;
    	background: url(images/text_gallery.png) no-repeat;
    	text-indent: -99999px;
    }

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2008
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The link is now here, as I could not leave the broken page live. Thanks again.

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem is still evident on IE6 on the live page too. Problem is interaction of the floats above the gallery - the .top-par paragraph needs to clear the gallery heading image :
    Code:
    .top-par {
    	width: 460px;
    	float: left;
    	margin-bottom: 15px;
    	clear: left;
    }

  4. #4
    SitePoint Zealot
    Join Date
    Aug 2008
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you. That definitely fixed the main problem.

    I'm still having an issue in both versions of ie where the gallery is not aligned at the top with the thumbnail. I also removed the float: right declaration from the #gallery-container as it seemed useless. Any ideas as to how to correct this?

  5. #5
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is due to the difference between browsers with margins, margin collapse, and floats. Removing the bottom margins from #top-image and .top-par and replacing them with just a bottom padding on .top-par will give more consistency between browsers.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •