Jump to content
Sign in to follow this  
ROUBOS

hide a div with css in ie ?

Recommended Posts

Hi,

been trying to hide a <div> containing an img using css.

 

the following works in all browsers but ie:

 

#image-banner img {display:none !important; visibility: hidden !important;}

 

how do I get it to work in ie???

 

I want to hide this div

 

thanks

Share this post


Link to post
Share on other sites

helps if you include your HTML.

 

IE should hide an image with

#image-banner img { display: none; }
. Maybe you've got some other weirdness going on, or a style definition that overrides it?

 

Also, an img is not a div.

 

#image-banner img
will hide only the img element. are you wanting to hide a div or an image? Edited by kikz

Share this post


Link to post
Share on other sites

well there is a div containing the img.

tried hiding either one with no luck

 

I had:

<div><img /> </div>

 

now tried just an image tag without the div sarounding it. And used a class for the image to display:none;

 

no luck in ie

Share this post


Link to post
Share on other sites

Put the style inline in the element, as a test. That should definitely work.

<diy style="display:none;"><img /></div>

That surely is not the full HML. It's missing any classes on the div, the img has no src or alt, etc.

If you're updating CSS it's possible the browser is caching the file. Try ctrl+F5 in IE

Edited by kikz

Share this post


Link to post
Share on other sites

i am using ctrl+f5 and also deleting history.

was just showing you the tags. The img does have a source and alt etc.

 

<img class="image-banner" src="images/aerial.jpg" alt="Aerial" border="0" align="left" width="100%" />

 

also tried:

<div class="image-banner"><img src="images/aerial.jpg" alt="Aerial" border="0" align="left" width="100%" /></div>

Share this post


Link to post
Share on other sites

<html>
<head>
	<title>Test</title>
	<style>
	#image-banner img { display: none; }
	</style>	
</head>
<body>
	<div id="image-banner"><img src="http://i.imgur.com/s6yDz45.png" alt="kikz"></div>
</body>
<html>
works perfectly in IE for me. The img is hidden

 

There is your problem. #image-banner is for a ID not a CLASS attribute, as you are using it. Which is why I wanted all the HTML :)

 

Based on

<img class="image-banner" src="images/aerial.jpg" alt="Aerial" border="0" align="left" width="100%" />
It seem you don't understand how CSS nesting selectors work. Edited by kikz

Share this post


Link to post
Share on other sites

ok,

that's how I had it initially with no luck.

maybe its not working because it is used in @media {} css for desktops and laptops. Trying to get a responsive template.

Share this post


Link to post
Share on other sites

Yeh. If you include it inside media queries then it may not be used. What is your full media query? Also, version of IE?

Share this post


Link to post
Share on other sites

ok the problem is the @media section that's not working with IE

 

removed the @media{} and it works fine...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×