www.webdeveloper.com
Results 1 to 2 of 2

Thread: IE8 collapsing div if no background-color is set

  1. #1
    Join Date
    Dec 2010
    Posts
    2

    IE8 collapsing div if no background-color is set

    Hello,

    I've got an issue with a div, on a site i'm creating. It works as it should, or as I think it should in Firefox, Opera, Safari and Chrome on XP. The problem appears in IE8.
    I googled and searched around forums but couldn't find anything.
    I need this div to take the size of the div that contains it, because I created a function for the onmouseover event, that should make it appear through opacity change. Instead, it takes the size of the div that it has inside it.
    However, if I set the background-color for that div to any color, it works as it should.
    Here's the html:

    HTML Code:
    <div id="container-chenar-navigare"  onmouseover="arataNav(event);" onmouseout="javascript:ascundeNav(event);">
    	<div id="chenar-navigare">
    		<a name="adrStanga" href="javascript:incarcaImg('st');">
    			<img id="stanga" src="resurse/nav_stanga.png" alt="buton de navigare slideshow - stanga" />
    		</a>
    		<a id="adrStartStop" href="#">
    			<img id="startStop" src="resurse/nav_pauza.png" alt="buton de navigare slideshow - pauza" />
    		</a>
    		<a name="adrDreapta" href="javascript:incarcaImg('dr');">
    			<img id="dreapta" src="resurse/nav_dreapta.png" alt="buton de navigare slideshow - dreapta" />
    		</a>
    	</div>
    </div>
    and here's the css:

    Code:
    div#container-chenar-navigare {
    	position: absolute;
    	display: block;
    	left: 0px;
    	bottom: 0px;
    	width: 452px;
    	height: 37px;
    	overflow: visible;
    	-moz-opacity: 0;
    	opacity: 0;
    	filter: alpha(opacity=0);
    	-khtml-opacity: 0;
    	visibility: visible;
    }
    
    div#chenar-navigare {
    	position: absolute;
    	top: 8px;
    	left: 193px;
    	width: 68px;
    	height: 21px;
    	overflow: visible;
    	-moz-opacity: 0;
    	opacity: 0;
    	filter: alpha(opacity=0);
    	-khtml-opacity: 0;
    	visibility: visible;
    }
    
    	#chenar-navigare img {
    		position: relative;
    		display: inline-block;
    		width: auto;
    		height: 21px;
    		margin: 0 6px 0 6px;
    		-moz-opacity: 0;
    		opacity: 0;
    		filter: alpha(opacity=0);
    		-khtml-opacity: 0;
    		visibility: visible;
    		overflow: hidden;
    	}
    The div I'm talking about is the one with the ID: container-chenar-navigare.
    You can see the issue I'm having at this address: http://tetchea.mediapixel.ro
    Put the mouse over the bottom of the image and a transparent box with three buttons should appear in any browser other than IE8 (don't try it in IE7 or lower because I didn't adapt it for those versions yet).

    Thanks in advance for any help.

  2. #2
    Join Date
    Dec 2010
    Posts
    2

    Solution found

    I found a solution for my problem.
    Inside the div I thought was the problem (container-chenar-navigare) there is another div (chenar-navigare) that contains three images with <a> tags wrapped around them.
    The chenar-navigare div, was absolutely positioned with left, top, width and height values set. So was/is the container-chenar-navigare div.
    I only changed the css definition for the chenar-navigare div. Here's what I changed:

    Code:
    position: relative;
    padding-top: 8px;
    padding-left: 193px;
    width: auto;
    height: 100%;
    I couldn't use margin: 0 auto to center chenar-navigare because the three images where all displayed inline and that made them go left. So I used padding-top and padding-left to position it where it should stay. I used padding and not margin because the space it leaves it's considered inside the div and it reacts to the onmouseover event, as I needed it to do.

    Hope this helps someone else too.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles