This HTML-Code...
...works with this CCS-Code...
a.testclass
{
background: transparent url(sprite.png) no-repeat -125px -671px;
display: block;
width: 378px;
height: 150px;
}
...in Firefox 12 but not in Internet Explorer 8.
The code is inspired by this question regarding anchors, sprites and CSS. I've found a similar questions, but since this code is placed within a rather complex Drupal installation, I still hope that there's an easier way to fix this issue than going through the code to find some "absolutely positioned outer div and some menu styles", which had been responsible for the issue in 2.
Thanks for your help.
Edit-1:
This is the Firebug HTML-Log:
<div id="banner-area">
<div id="banner-left">
<div class="region region-banner-left">
<div>
<a href="LINK">
<img width="378" height="150" alt="ALTTEXT" src="IMAGE.GIF">
</a>
</div>
</div>
</div>
<div id="banner-right">
<div class="region region-banner-right">
<p>
<a class="testclass" href="LINK"></a>
</p>
</div>
</div>
</div>
The referenced CSS-Code is:
#banner-area {
width:756px;
margin:0;
padding:0;
overflow:hidden;
}
#banner-left {
width:378px;
float:left;
margin:0;
padding:0;
}
#banner-right {
width:378px;
float:right;
margin:0;
padding:0;
}
The first picture (IMAGE.GIF) is shown in FF and IE8. The second hoever, the one i'd like to replace with a sprite, is only shown in FF but not in IE8.
I've turned transparency on and off as Florian suggested, but to no effect. I've reduced the image size by 10px in width and height, but that didn't help either.
After two days of wasted time I've found out that IE8 doesn't import more than 31 css-files: http://drupal.org/node/228818?page=1
After enabling the "optimize css-files"-feature again in the Drupal administration panel of my installation, which I had turned off so it doesn't interfere with my development, everything worked fine.
This question is related:
IE CSS Bug: background-color: transparent behaves differently to background-color: (any other colour)
so change your code to:
a.testclass
{
background: url(sprite.png) no-repeat -125px -671px;
display: block;
width: 378px;
height: 150px;
}
if you really need to erase that background-color (and therefore setting it to transparent) try other settings like
a.testclass
{
background-color: transparent;
}
However, IE8 does not like that so be aware to have some fix included for IE8.
Related
I have a horizontal list of color swatches, and each list item has the following markup:
<li class="ws-filter">
<a class="ws-swatch-link" title="Black" href="#">
<div title="Black" class="ws-filter-swatch" style="background-color: #000000;"></div>
</a>
</li>
However, a selected color swatch has the following markup (no anchor tag):
<li class="ws-filter ws-selected">
<div title="Silver" class="ws-filter-swatch" style="background-color: #c0c0c0;"></div>
</li>
Here's the CSS:
.ws-filter-list .ws-filter {
display: inline-block;
}
.ws-filter-swatch {
width: 20px;
height: 20px;
border: 1px solid #dcdcdc;
margin: 2px;
}
And here's the JSFiddle: http://jsfiddle.net/nHk27/2/
This works just fine in most browsers, and looks like the following:
However, in IE8, the selected swatch pops out of line, like this:
This is a project I'm working on, and I can't change the markup. I've tried experimenting with changing the display of the div, anchor and list item in different combinations. I'm pretty sure I could get it to work using float, but is there any way to fix this without using float?
Try
vertical-align: middle;
I have a strong hunch IE8's default puts the content up on top.
Since you're not posting any relevant CSS, I can only suggest you to use IE hacks technique to target IE8 in your case, try something like this:
.ws-filter div[title="Silver"] {
margin-top: 20px\0/ /* or margin-bottom: -20px. The value here can changed based on your context */
}
I am building a responsive web site and I am finding that Auto Image resize with broswer window resize using img max-width:100% works in Chrome but not IE and Firefox when any parent or ancestor has position:absolute;
(For information about this technique see
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
)
The following code can be used to demonstrate or reproduce this problem. you can also see this at http://sketchmotion.com/image-test2/. You will notice that resizing the browser window will resize the image in Chrome but not IE (I am running IE 11) . However, if you remove the following lines:
.mydiv{
position: absolute;
}
You will find that it now works in both Chrome AND IE.
This is not helpful since I I use position: absolute; on some of my parent divs on my site. And I need my site to work in IE and Firefox.
Please let me know if there is a work around for this problem so I can get the images to resize with the browser window on my site.
<html>
<head>
<!-- <link href="/cssh/ImageTest.css" rel="stylesheet" type="text/css"></link> -->
<style type="text/css">
.mydiv{
position: absolute;
}
img{
/*** Scaling Images with the Browser Window in CSS is pretty simple to implement for both images and video. ***/
/*** You can set the media element’s max-width to 100 percent, and the browser will make ***/
/*** the image shrink and expand depending on its container. ***/
/*** To maintain the right proportions use auto height ***/
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
</style>
</head>
<body>
<!-- -->
<div class="mydiv">
<div class="slides">
<div class="slide">
<img alt="" src="http://sketchmotion.com/ImagesSM/SM_Slider_1_SketchMotion_w_Sketch.jpg" />
</div>
</div>
</div>
</body>
</html>
Try this:
.mydiv {
position: absolute;
width: 100%;
}
I don't have an explanation exactly why, but this works. :)
I confirmed that using width: 100%; for parent and all ancestor divs makes it work in IE. However this is a bit of a pain because often that is not what you want to do. Chrome does not have that limitation and scales the image regardless which seems like a more sensible and consistent approach IMHO.
Thanks again Terry Clancy
For the responsive to work on IE. Do not include pictures in a <table>. Just use <div> and use CSS:
img {
max-width: 100%;
height: auto;
width: auto\9;
}
I have a html document structured with a header, content, and footer divs. I am trying to center an image (a logo) inside my header div to display at the top of my webpage in the middle. I can absolute position it into the middle, but when I change the browser size, the img doesn't move along with it. I want it to be place automatically in the center of the window. I am stumped..?
I have tried , margin-right:auto; margin-left:auto. I have also tried the trick where you make margin-left negative half the width and top 50%, but nothing has worked so far.
html:
<body>
<div id="container">
<div id="header">
<img id="logo-img" src="http://f.cl.ly/items/3c0h1b0F3t1D1S1T2J0F/smallersticker.png">
</div>
/*...(body div)
...(footer div)*/
</div> /*container*/
css:
#header {
background-color:transparent;
height:260px;
width:100%
}
#logo-img{
display: block;
margin-left: auto;
margin-right: auto;
}
Also, Do I even need a container? Not sure if I need javascript for this, or if it can be accomplished with just html/css? Hope someone can help, thanks!
What is happening is that you are already correctly centering your image.
Your problem is that the image is huge. If you notice closely, the image is not centered if your browser window becomes smaller in width than the image.
Remove the white area from the image and it will center correctly.
Edit: in IE, you need to add the rule text-align:center to #header
Another way:
If you don't want to change your image, you can use this hack:
<style>
#header {
overflow-y: hidden;
background-color: transparent;
height: 260px;
width: 100%;
margin-left: 50%;
}
#logo-img{
display: block;
position: relative;
right: 50%;
}
</style>
<body>
<div id="container">
<div id="header">
<img id="logo-img" src="http://f.cl.ly/items/3c0h1b0F3t1D1S1T2J0F/smallersticker.png">
</div>
/*...(body div)
...(footer div)*/
</div> /*container*/
I learned this hack a while ago here
Just use the logo at a size it's supposed to be (like this here), then all you need to do is add the align="center" attribute to your logo's div.
For some odd reason I added a responsive image to my responsive layout and it seems to add some sort of spacing below the image.
You may view the issue here: http://www.client.noxinnovations.com/jensenblair/
The top image. Here is my HTML and CSS.
HTML
<div class="header"> <img src="images/photograph.jpg" /> </div>
CSS
img {
max-width: 100%;
height: auto !important;
}
.header {
height: auto;
padding: 0;
margin: 0 auto;
border: none;
}
It seems to be consistent in each browser. Any ideas anyone?
There are two ways (that I know of) to solve this: http://jsfiddle.net/3kC4K/1/
<div>
<img src="http://placehold.it/100x100/"/>
</div>
<div>
<img src="http://placehold.it/100x100/" class="block"/>
</div>
<div>
<img src="http://placehold.it/100x100/" class="inline"/>
</div>
CSS
div{
border:solid 1px #f00;
margin:5px;
float:left;
}
.block{
display:block;
}
.inline{
vertical-align:bottom;
}
img tags, by default, are inline elements. Because of this, browsers will create a sort of "gutter" underneath them so that any text that wraps below it won't be flush with the bottom of the image.
In your case, simply applying display:block to the image should do the trick.
there's a container with background-color and padding specified. there's an image inside it. in a full screen browser window it looks like as it should look like:
http://img263.imageshack.us/img263/4792/61536769.png
but after resizing the window (window width is less than the content width) and the horizontal scrollbar appears, if i scroll it right, i can see the background ends where the window ends:
http://img845.imageshack.us/img845/7370/11506448.png
here's the code:
<body style="margin: 0; padding: 0; overflow-y: scroll;">
<div style="background: pink; padding: 32px; display: block;">
<img src="http://projects.quantize.com/P/reporter/blog/wp-content/themes/thesis/rotator/sample-1.jpg" style="width: 640px;" />
</div>
</body>
in ie8 it looks right, the padding is treated as it's part of the content. in firefox and in opera it isn't, even if i use the "-moz-box-sizing: border-box;" (and correct doctype and everything...) so i don't really know what should i do. i usually did it with margin for the image but this time that can't be a solution (the actual thing is different than this example, but it shows the exact problem).
thanks for your help in advance :)
Add an extra div that wraps your existing div and do float:left.
<body style="margin: 0; padding: 0; overflow-y: scroll;">
<div style="background-color: pink; width:100%;float:left;">
<div style="background: pink; padding: 32px; float:left;">
<img src="http://projects.quantize.com/P/reporter/blog/wp-content/themes/thesis/rotator/sample-1.jpg" style="width: 640px;" />
</div>
</div>
</body>
Edit: Removing display: block; as that's irrelevant when you have float.
What's going on is that the div isn't expanding to wrap around the image, since the image has a fixed width, but the div doesn't (and is therefore defaulting to 100% of the parent, which is body/html at 100% of the viewport). If you look at it with Firebug, you can see that the image is going outside of the bounds of the div and its padding.
I've tweaked the CSS in this jsFiddle to get the background to expand to the image. It should at least get you started. Basically, what I did was add overflow-y: auto; to the div, which expanded the background.
One thing you can do in this case is to put a specific width on the div as well:
<body style="margin: 0; padding: 0;">
<div style="background: pink; padding: 32px; display: block; width: 640px;">
<img src="http://projects.quantize.com/P/reporter/blog/wp-content/themes/thesis/rotator/sample-1.jpg" style="width: 640px;" />
</div>
</body>
You can do that in this case because you already know the width of the contents. Of course, if you need a dynamically sized div this might not work for you.
I was going to suggest putting margin: 32px on the image instead of padding: 32px on the div, but when I tried it that didn't help either. Bizzare.