Screenshot of the issue: here
Webpage in Question: http://cure.org
Offending browser: Internet Explorer 7
You'll notice from the screenshot, or if you view this site in IE7, that the background image is not displaying for the content div (#modal-inner-content). Strangely, the image displays in the other divs where it is used (since it's a sprite, I'm using that same image for #modal-top-border and #modal-btm-border).
In all other browsers it displays properly, and even in IE8. I cannot seem to find what CSS rule (or lack thereof) I may be using that IE7 is choking on.
NOTE: in order to get the modal screen, just click the link at the very top banner of the page that says "login to your CURE account
I had the same problem in IE 7 with a transparent PNG acting as a background inside a <div>. Positioning the background at (0|0) fixed it for me:
background: url("images/bg-header.png") no-repeat 0 0;
I had the same problem, buttons with graphic backgrounds aren't displayed in IE7.
It seems that IE7 has problems with such HTML elements with borders, as setting border-width:0 solved the problem for me.
I just remembered that IE7 has a problem with mixed units in the background position property. so -636px top should be -636px 0
I agree with FutureKode. The background on #modal-inner-content isn't displaying because IE doesn't think the element hasLayout, which sometimes causes problems with other style declarations. To trigger hasLayout, the easiest way I see would be to style that div with width:576px (what Firebug is telling me the width of that div is). I'm assuming the width of that box never changes?
More on hasLayout, and what triggers it: http://www.satzansatz.de/cssd/onhavinglayout.html
Are you using some fix for IE and png images ?
If i remember correctly, most plugins/methods to enable transparency to background images by using the filter css property of IE made the background non-repeatable ..
It could be it ..
Not sure why the image isn't showing up in IE7, but this could be a good intermediate fix. this should add a white background if the image doesn't show up.
Try changing #modal-inner-content from:
background: url(http://cure.org/img/modal-bg-xy.png?jcb=1284407379) repeat-y -636px 0%;
to:
background: url(http://cure.org/img/modal-bg-xy.png?jcb=1284407379) #fff repeat-y -636px 0%;
--- Edit - don't use above answer ---
Try wrapping the url in quotes:
background: url("http://cure.org/img/modal-bg-xy.png?jcb=1284407379") repeat-y -636px 0%;
I need to install ie7. My first try would be to add a width to #modal-inner-content
Use the clear-rule:
clear:both;
Related
I need to create div which include background image, and I've tried many ways, but none of these is working.
.tiket{
background: url('ticket.png');
background-image: image-url('ticket.png');
background-image: asset-url("ticket.png", image);
background-image: asset-data-url("ticket.png");
}
But if I open the chrome develop debugger, it will show picture like this
Here is github, if you need more information, please tell me.
Update
Here is jsfiddle
This should be a comment, but I'm too new to do so; sorry. The .ticket div can still have a height of zero if all of its children are floated or otherwise taken out of flow. If you inspect the .ticket div, what width/height are given?
I have a div with height and width, and it has a background image assigned to it in the stylesheet. It works fine in Firefox/Chrome, but in IE8 and below the image just doesn't show up. In the developer the background attribute doesn't even show up as one of the styles. I can add background color and that does work. Does anyone know why this might be?
For reference the attribute looks something like this:
background: url("imgpath.png") no-repeat scroll 0 0 transparent;
width:20px;
height:20px;
position:relative
Edit: the HTML is just a div within a larger wrapper. Other images in the wrapper that are defined in the same way work.
I will blatantly assume that imgpath.png is CMYK. IE8 only supports RGB images.
Try converting it from CMYK to RGB using this CMYK Converter.
Yeah, I think I know what it might be. Try to put the whole image path there including the protocol and domain, just like that: background: url("http://example.com/imgpath/image.png") no-repeat scroll 0 0 transparent;
And tell me if it works or not.
Ok, I'm stumped!
If anyone has a suggestion or two on a CSS / JavaScript fix for an IE7 z-index issue on this page without changing the DOM structure much (it's set up for easy tab usage) I'd be incredibly happy to try it out.
On this page, IE7 renders the bar that spans 100% of the width of the page above everything else, while I actually need to cram it very specifically between the text and the hero image (as seen when viewed on any modern browser).
Here's the link.
Thanks.
IE7 has known bugs with z-index, see: IE7 Z-Index issue - Context Menu
In this specific instance, you can fix it by changing a few parts of your CSS. Complete each step and check the progress as you go:
On #container remove position:relative .
The z-index issue is now fixed, but everything is in the wrong position!
On #thumbnails and .pane_img remove these properties: position, top, left, z-index.
On .pane_content, set left:50%; margin-left:-480px; bottom:90px.
On #learn_more_btn and .renova_logo, repeat the left: 50%; margin-left: ??px method to place the elements back where they should be.
Hi I have a 1px png file,which I am trying to set as a background image for two divs which are adjacent to each other horizontally.The html and css are as under:-
<div id='one'>hi</div>
<div id='two'>hello</div>
The css is like this
div {
width: 50%;
height: 50%
}
#one, #two {
background-image: url(/images/image.png);
background-repeat: repeat;
}
Now the problem here is in between the two divs a black border automaticaly appears when the image is set. I dont want the two divs to be seen as separate blocks.Please help. Am totally new to css and need help:-)!
I'd be willing to bet that the image you are using has alpha transparency (that is, the image is partially transparent), and what you're seeing is a one-pixel overlap between the two divs. Either make sure that the container is an even number of pixels wide, or put the divs inside another container and use the background on that instead.
like robert, i'm also not getting the border, but i do get some repeats.
see if this works for you:
#one, #two{
background-image:url(99785.jpg);
background-repeat: no-repeat;
borders: 0
}
The problem is caused by a couple of interacting things.
First, make sure you are using the html strict doctype. This will help mitigate a lot of the formatting issues between browsers around divs. See alistapart for a description and list of real doctypes to use and quirksmode for a detailed comparison of them.
Second, you will more than likely have to set the margin of your divs to 0. Browsers have different default settings. A strict doctype will alleviate most of this, but there are usually other areas you have to overcome as well.
Also, you might want to grab firebug for firefox and leverage chromes dev tools. firebug will actually show you what all of the margins / padding / everything else is being set to. The Chrome tools don't give you a pretty picture with the details but you can see what the margins/padding/etc are in the Computed Style section.
Please go to: http://jlecologia.com/page1c.html to see the problem
The top box look fine but in IE6 there is a double top and bottom border.
can somebody point me ut what i have done wrong ?
Or can anybody tell me a javascript rounded box that accept to do that effect with the border that is unequal. I have test some and they all fail, so i have done the picture round box but i like the jQuery javascript approach better.
Take a look at the JQuery's round corner plugin
And here is a demo
The default for background images to to have them repeat.
Try: background: transparent url(../images/roundbox-top.jpg) 0 0 no-repeat;
Edited after comment to provide full solution:
IE6 sets the height of empty divs to your font-size if the height specified in the css is less than the font-size.
On #roundbox .top and #roundbox .bottom, put
font-size:0;
line-height:0;
That will collapse the div to the right height.
In addition to the change you've made for the bottom border, setting the font-size of the element with class "top" to 7px fixes it in my IE6.
Try using the web developer toolbar in Firefox to validate the CSS and HTML. I did a quick check and there are multiple errors in each. The rendering difference, I suspect, is because IE does not handle malformed content as well as FF. In particular, even small errors in CSS files tend to snowball in IE and melt down an otherwise good layout. Not sure if IE7 and IE8 have made any improvements in this regard.