SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    RTFM ashleyk's Avatar
    Join Date
    Dec 2005
    Location
    Rochester, New York
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE 5.5 disappearing Background

    http://http://www.mglomb.com/Clients.../sojourn2.html

    i'm working on a website, and i have it validating and working correctly in modern browsers. I'm having a "peek-a-boo" bug issue in IE 5.5.

    Load the page in IE5.5, the center area's background will sometimes be there, sometimes not. Roll over the thumbnails to the right, that will make the background disappear, or reappear. Click the "product description" link in the left column, that will make the background area reappear (or disappear).

    can anyone shed some light as to what's going on? it seems to be working fine in IE6, 7, FF

    The css is all in an external file:
    here's the quick of it:
    Code:
    /* CSS Document */
    
    /*///////////////// Main Positioning ////////////////////////////*/
    
    /*reset all padding and margins*/
    * {
       padding:0;
       margin:0;
    }
    
    
    body {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	line-height: 1.3em;
    	color: #191919;
    	text-align: center;
    }
    
    
    #container {
    	height: 125px;
    	width: 911px;
    	margin-right: auto;
    	margin-left: auto;
    	border:none;
    	position: relative;
    	text-align: left;
    }
    
    #menu {
    	background-image: url(../images/headerbg.jpg);
    	background-repeat: no-repeat;
    	height: 134px;
    }
    
    #content {
    	background-image: url(../images/mainbg.jpg);
    	background-repeat: repeat-y;
    	padding-left: 39px;
    	padding-bottom: 0px;
    	/*haslayout fix*/
    	min-height: 1px;
    	/*end hack*/
    	width: 911px;
    	/*IE boxmodel hack*/	
    	 voice-family: "\"}\""; 
      	 voice-family:inherit;
      	 width: 872px;
    }
    html>body #content {
         width:872px;
    }/*end hack*/
    
    #footer {
    	background-image: url(../images/footerbg.jpg);
    	height: 15px;
    	padding-right: 40px;
    	padding-left: 40px;
    	background-repeat: no-repeat;
    }
    
    
    /*///////////////// Resource List ////////////////////////////*/
    
    #resources {
    	width: 150px;	
    	float: left;
    	display: inline;
    }
    
    
    /*///////////////// Breadcrumbs ////////////////////////////*/
    
    #breadcrumbs {
    	padding-top: 5px;
    	margin-bottom: 15px;
    }
    
    
    /*//////////////////// Image Area, holds both Large Img and thumbnails /////////////////////////*/
    
    #imageArea {
    	float: left;
    	display: inline;
    	margin-left: 17px;
    	  width: 662px;
    }
    
    
    #thumbArea {
    	float: left;
    	display: inline;
    	width:228px;
    	clear: none;
    }
    
    #lrg_thumbArea {
    	height: 444px;
    	width: 420px;
    	display: inline;
    	float: left;
    	margin-bottom: 10px;
    	margin-left: 12px;
    }
    
    img#lrg_thumb {
    	border: 1px solid #b8e630;
    	display: inline;
    }
    
    img.thumbs {
    	float: left;
    	margin-bottom: 12px;
    	border: 1px solid #b8e630;
    	  margin-left: 12px;
    }
    
    
    #moreimages {
    	margin-bottom: 12px;
    	font-size: 11px;
    	color: #999999;
    	clear: both;
    	width: 214px;
    	text-align: right;
    	display: block;
    	margin-left: 12px;
    }
    
    /*////////////////// Product Info Text Area by default hidden ///////////////////////////*/
    
    #productTxt {
    	position:absolute;
    	width:334px;
    	z-index:100;
    	background-color: #fff;
    	filter:alpha(opacity=93);
    	-moz-opacity:.93;
    	opacity:.93;
    	top: 165px;
    	left: 218px;
    	border: 1px solid #6A972D;
    	visibility: hidden;/**/
    }
    /*inside product text div*/
    #txtHold {
    	margin-top: 10px;
    	margin-right: 10px;
    	margin-bottom: 12px;
    	margin-left: 10px;
    }
    
    #txtHold h1 {
    	color: #4E4234;
    }
    
    #txtHold h2 {
    	margin-bottom: 5px;
    	font-size: 9px;
    	color: #7c6a55;
    }
    
    #txtHold p {
    	font-size: 11px;
    	line-height: 1.4em;
    	color: #4E4234;
    }
    
    img#closer {
    	position: relative;
    	float: right;
    	margin-top: 5px;
    	margin-right: 5px;
    }
    ---------------------------------------
    Ashley Kennedy
    ---------------------------------------
    how does a designer get roped into writing code?

  2. #2
    RTFM ashleyk's Avatar
    Join Date
    Dec 2005
    Location
    Rochester, New York
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    update

    the problem seems to be coming from the Flash menu at the top. if you take that out, the background comes back reliably.

    great.
    ---------------------------------------
    Ashley Kennedy
    ---------------------------------------
    how does a designer get roped into writing code?

  3. #3
    RTFM ashleyk's Avatar
    Join Date
    Dec 2005
    Location
    Rochester, New York
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    update: fixed

    it turns out that IE5.5 does not like the default way dreamweaver embeds flash. I tried a couple different embed methods and the deconcept SWFObject worked.

    I still don't know what was causing IE to disregard the background image of the content div. Considering other divs also had background images.

    Also interesting was that no matter where the flash was embedded, it only had an effect on the content div. strange.
    ---------------------------------------
    Ashley Kennedy
    ---------------------------------------
    how does a designer get roped into writing code?

  4. #4
    RTFM ashleyk's Avatar
    Join Date
    Dec 2005
    Location
    Rochester, New York
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Update

    Also, IE 5.5 freaks out if you don't set the wmode to transperent. fyi.
    ---------------------------------------
    Ashley Kennedy
    ---------------------------------------
    how does a designer get roped into writing code?


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
  •