CSS - Please Make The Spaces Disappear

Hi

I was wondering why only IE7 makes relatively positioned elements disappear into the right hand column on my site. It only happens when displayed in IE7, remaining browsers are ok (FF, Opera, even IE6). Being a newbie with IE7 bugs and workarounds, I ask you for advice.

This is the page

look at ghost images on RH column - IE7 only bug

Please note the quircky behavior when you hover on any backgrounded area within the RH column: images within "LO MAS COMPRADO" and "RECIEN LLEGADOS" appear and disappear as lights turn on and off on a Christmas tree. All the areas that trigger this bug have in common to shift its background on hover.

It's really funny, you hover on any area below those two blocks and all images dissapear, hover on any area above those blocks and images reappear, hover on areas within the blocks and image will appear only on the corresponding block.

Is this an IE6 peekaboo variant?

I've tried to isolate the problem, adding and deleting blocks inside the column, but it is a strange combination I can't realize. It happens just within the two blocks mentioned above, as you can see here. Images first appear ok, but they dissapear every time you hover over the "buttons" (wich are really block displayed <a>'s with shifting bg img. on hover), wich is almost the same that occurs in the complete Rh column version.

Any thoughts?

Thank you

I'm getting a headache here. What I'm creating is a very simple web gallery. Yes, wheel being reinvented, please don't tell me I need to use something canned.

When an individual image is displayed, the image needs to be centered left-to-right. However, I want to offer a button that shows the EXIF data in a side-pane, and when it appears, the image and EXIF data block need to be centered as an aggregate.

The image display and the EXIF retrieval are both done with server-side scripts (the latter being pulled via AJAX so that it does not need to be extracted if it isn't requested by the user).

Now, here's the deal: I have this working perfectly using a table-based layout, but all my attempts to get it done using DIVs behave badly. I either get an image div that doesn't move when I activate the EXIF div, or the EXIF div ends up UNDER the image div.

It should be really simple... I'm just too stupid to figure it out. CSS always kicks my butt.

Hello,

please see this link: www. claeysconsult . be / misskado

In the tab "Collectie" I need the hr (the little stripes underneath the list of brands) to give some margin, but it doesn't...
Also, with a bigger screen, the footer doesn't properly align at the bottom of the page. How can i fix this?

Thanks in advance for your help!

Hi,
if i test my website with javascript disabled i don't see any colors or styles(it automatically disables css too).

i don't know if its normal or not??

i din't disable css rather i disabled javascript only. all suggestions and recommendations are most welcome.

All but the last image disappear in IE6 (works in FF and Safari).
I searched the web for a bug fix but have not found anything that works. Any assistance would be greatly appreciated. Thanks in advance.

Here is the live link:

http://www.crossmediamgmt.com/HelpwithIE6bug.html

Here is my code:

Code:

<style>
#news{
	float: left;
	width: 179px;
	height: 332px;
	padding-top: 30px;
}
#news ul{
	margin: 0;
	list-style: none;
	text-decoration: none;
}
#news a {
	display: block;
	text-decoration: none;
}
#news img{
	border: none;
}
#news a#Mar08{
	width: 179px;
	height: 20px;
	background: url(../imagesjp/March_2008.gif)0 0 no-repeat;
}
#news a#Mar08:hover{
	background-position: 0 -20px;		
}
#news a#Sep07{
	width: 179px;
	height: 20px;
	background: url(../imagesjp/september_01.gif)0 0 no-repeat;
}
#news a#Sep07:hover{
	background-position: 0 -20px;		
}
#news a#Aug07{
	width: 179px;
	height: 20px;
	background: url(../imagesjp/august_2007.gif)0 0 no-repeat;
}
#news a#Aug07:hover{
	background-position: 0 -20px;		
}
#news a#May07{
	width: 179px;
	height: 20px;
	background: url(../imagesjp/may2007.gif)0 0 no-repeat;
}
#news a#May07:hover{
	background-position: 0 -20px;		
}
#news a#Apr07{
	width: 179px;
	height: 20px;
	background: url(../imagesjp/april2007.gif)0 0 no-repeat;
}
#news a#Apr07:hover{
	background-position: 0 -20px;		
}
#news a#Feb07{
	width: 179px;
	height: 20px;
	background: url(../imagesjp/february_01.gif)0 0 no-repeat;
}
#news a#Feb07:hover{
	background-position: 0 -20px;		
}
#news a#Nov06{
	width: 179px;
	height: 20px;
	background: url(../imagesjp/november.gif)0 0 no-repeat;
}
#news a#Nov06:hover{
	background-position: 0 -20px;		
}
#news a#Aug06{
	width: 179px;
	height: 20px;
	background: url(../imagesjp/august2006.gif)0 0 no-repeat;
}
#news a#Aug06:hover{
	background-position: 0 -20px;		
}
#news a#Jul06{
	width: 179px;
	height: 20px;
	background: url(../imagesjp/july.gif)0 0 no-repeat;
}
#news a#Jul06:hover{
	background-position: 0 -20px;		
}
#news a#Jun06{
	width: 179px;
	height: 20px;
	background:  url(../imagesjp/june.gif)0 0 no-repeat;
}
#news a#Jun06:hover{
	background-position: 0 -20px;		
}
#news a#May06{
	width: 179px;
	height: 20px;
	background: url(../imagesjp/may_2006.gif)0 0 no-repeat;
}
#news a#May06:hover{
	background-position: 0 -20px;		
}
#news a#Apr06{
	width: 179px;
	height: 20px;
	background: url(../imagesjp/april2006_01.gif) 0 0 no-repeat;
}
#news a#Apr06:hover{
	background-position: 0 -20px;		
}
</style>
</head>

<body>
<div id="news">
	<img src="../images/news_img.jpg" alt="News" width="179" height="62" />
	<ul>
	<li><a href="news_sealing_selling_cracks.html" id="Mar08"></a></li>
	<li><a href="news_maximizing_every.html" id="Sep07"></a></li>
	<li><a href="news_print_solution.html" id="Aug07"></a></li>
	<li><a href="news_americanprinter.html" id="May07"></a></li>
	<li><a href="news_printer&mediabuyer.html" id="Apr07"></a></li>
	<li><a href="news_printingnews.html" id="Feb07"></a></li>
	<li><a href="news_printing_impressions.html" id="Nov06"></a></li>
	<li><a href="news_dallas_branchout.html" id="Aug06"></a></li>
	<li><a href="news_dallas_growingprinter.html" id="Jul06"></a></li>
	<li><a href="news_dallas_businessgernal.html" id="Jun06"></a></li>
	<li><a href="news_media_wins.html" id="May06"></a></li>
	<li><a href="news_visionaries.html" id="Apr06"></a></li>
</ul>
</div>
</body>
</html>