I have a div and a background-cover attached to its div. It doesn't work with Chrome : it, for some images, adds a blank line (horizontal, or vertical, it depends).
HTML
<div class="div_image"></div>
CSS
.div_image {
width: 100px;
height: 100px;
border: solid red;
background: url('http://2.bp.blogspot.com/-v7UK1A8fw3A/UJXR5Vc5RjI/AAAAAAAAHuY/aWzZuSv8-jI/s250/Laika.jpg') no-repeat center center;
background-size:cover;
}
See http://jsfiddle.net/rTBVs/2/.
hi i have tested this and it works,
.div_image {
width: 100px;
height: 100px;
border: solid red;
background: url('http://2.bp.blogspot.com/-v7UK1A8fw3A/UJXR5Vc5RjI/AAAAAAAAHuY/aWzZuSv8-jI/s250/Laika.jpg');
background-size:cover;
}
i have removed (no-repeat center center) from the background value
cheers
There is no blank line for me in Chrome ... but it sounds like a problem with the image to me. The URL you have on the div doesn't belong there, though. That's not where a url belongs, and it may be causing a problem in your browser.
Related
I want to create a background with repeated image using CSS
background: url(../images/bg.PNG) repeat;
The problem is that the images are very close to each other, how can I add a padding for every image?
html {
background: white;
}
body {
width: 639px;
height: 280px;
background: url(//www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=64&d=identicon&r=PG) silver;
background-repeat: space;
border: 1px dotted red;
margin: auto;
}
Don't think this is possible, can't you add a transparent space in bg.PNG ?
You cannot have spaces between the background images. But you can modify your image to have the spaces you want.
I've read through several pages of questions, but I haven't been able to solve my problem. I'm pretty sure this is an extremely simple question, and I am really sorry if I waste anyone's time, but I just can't figure this out. I'm not going to post my actual code, because I think a general answer will be faster. My page is simple, nothing fancy at all, it's setup like this:
The entire page is wrapped in a container. The problem I'm having, is i can't make the left column reach the bottom of the page. I've tried height:100%; but it creates a scroll bar because the top bar is 228px in height. I've tried giving the left column a height:100%; and margin-bottom:-228px; but that didn't work either. I've seen this on websites before, and I'm guessing I'm going to get flak because I SHOULD know this, but can I blame it on the cold that I have? Anyway, thanks for any help that I get!
html, body {
display: block;
height: 100%;
width: 100%;
}
#left-column, #right-column {
height: 100%;
}
Setting the <html> and <body> element (as a group selector) to a display: block then stretch it out by 100%, the child elements can inherit what is known as a 100% height, otherwise, the browser doesn't know what to reference.
You could also make your columns absolutely positioned, then add a top:100px; bottom:0 (untested)
LIVE DEMO
CSS from example:
html,body{
height: 100%; /* THAT IS IMPORTANT */
width: 500px;
margin: 0 auto;
}
#header{
border: 1px solid blue;
height: 100px;
}
#left{
border: 1px solid green;
width: 100px;
float: left;
height: 100%; /* THAT IS IMPORTANT */
}
#right{
border: 1px solid red;
width: 100px;
float: right;
height: 100%; /* THAT IS IMPORTANT */
}
I'm having this very annoying problem that I've tried to figure out for the past few days. I've even read every possible solution on Stackoverflow, but nothing works!
I have this code in my HTML:
<div id="picture">
<div class="picture-1"></div>
<div class="picture-2"></div>
<div class="picture-3"></div>
</div>
And this code in my CSS:
#picture {
height: 250px;
border-top: 1px solid #ffefaf;
border-bottom: 2px solid #ffffff;
clear: both;
}
.picture-1 {
background: transparent url('images/view.png') left top no-repeat;
}
.picture-2 {
background: transparent url('images/plant.png') left top no-repeat;
}
.picture-3 {
background: transparent url('images/view.png') left top no-repeat;
}
The pictures are in right folder, the names are right, and yet they won't work. What could be the problem?
Your picture DIVs have no dimensions. They do not automatically set their size to the image, like an IMG tag does. You need to set this in the CSS using width: and height:.
I think the problem is that your inner divs don't have a size so they try to add the following lines to your css:
#picture > div {
width: 200px;
height: 200px;
}
Add #picture div{height: 250px;}
Js fiddle for your answer-> http://jsfiddle.net/niteshp27/xkLd7/
EDIT: you can view the page here: http://websitem.gazi.edu.tr/test/index.html
I'm trying to do the effect in the screenshot below:
The first one is from Chrome. Firefox show the same. But Internet Explorer from version 7 up to 9 shows the second picture.
My html structure is this:
<div class="header-menu">
<div class="container">
<div class="header-curve"></div>
<div class="header-building"></div>
</div>
</div>
And my css is this (dont bother with LESS specific syntax)
.header-menu {
#gradient > .vertical(#baseColor, #baseColorDark);
height: 82px;
margin-top: 82px;
.header-curve {
background: #baseColor url(/ui/frontend/themes/default/ui/img/header-curve.png) center top no-repeat;
height: 82px;
margin-top: -82px;
width: 1020px;
}
.header-building {
background: url(/ui/frontend/themes/default/ui/img/header-building.png) 20px top no-repeat;
height: 214px;
margin-top: -82px;
width: 1000px;
}
}
how can i solve the problem with IE? i already tried position: relative and zoom:1 fixes.
Thanks.
It looks like the filter style on your .header-menu class is causing it to be hidden in IE, is this necessary?
I think you were on the right track with the position: relative;, but also add a z-index value in there (play with the value until it appears correctly).
I might be missing something, but I still don't understand why you're bothering with the negative margin. The following CSS would do exactly the same, no?
.header-menu {
#gradient > .vertical(#baseColor, #baseColorDark);
.header-curve {
background: #baseColor url(/ui/frontend/themes/default/ui/img/header-curve.png) center top no-repeat;
height: 82px;
width: 1020px;
}
.header-building {
background: url(/ui/frontend/themes/default/ui/img/header-building.png) 20px top no-repeat;
height: 214px;
width: 1000px;
}
}
I'm designing a clean style to use in some web apps. And I've come across a IE bug (always the same).
Well its pretty simple. I have a gradient background, and on top of it a rectangle with no border and its filled with nothing and with a shadow around it, giving the illusion that its on top of the background, as you can see in the snapshot.
Its displayed well in all browsers except IE. IE displays like this.
IE increases about 4 px to the top div with the class "content-top-shadow". And it shouldn't. I have used margin and padding 0 to fix it and no luck.
PS: The png's have transparency.
Any idea how can i fix this bug, or whats wrong in the CSS?
Thanks.
Here is the code:
HTML
<div class="content-holder">
<div class="content-center">
<div class="content-top-shadow"></div>
<div class="content-center-holder"></div>
<div class="content-bottom-shadow"></div>
</div>
</div>
CSS
.content-holder {
width: 100%;
height: 570px; /*once complete change to auto*/
background-image: url(images/content-holder-bg.png);
background-repeat: repeat-x;
padding-top: 20px;
text-align: center; /*IE Bug Fix to Center the other divs inside this one*/
}
.content-center {
width: 918px;
height: auto;
margin-left: auto;
margin-right: auto;
}
.content-top-shadow {
width: 918px;
height: 9px;
background-image: url(images/content-top-shadow-bg.png);
background-repeat: no-repeat;
}
.content-center-holder {
width: 918px;
height: 200px; /*once complete change to auto*/
background-image: url(images/content-center-holder-bg.png);
background-repeat: repeat-y;
}
.content-bottom-shadow {
width: 918px;
height: 9px;
background-image: url(images/content-bottom-shadow-bg.png);
background-repeat: no-repeat;
}
IE thinks your div should be bigger than 9px, because of text size, even if there is no text in it (!), so you need to set
font-size:1px;
or something like that, on the top and bottom divs.
Here's something that helps me overcome cross-browser incompatibilites when it comes to empty spaces especially within DIVs and TDs. Place this as the sole content of the empty space, while making sure your spacer.gif image is a 1px x 1px transparent dot. Cheers!
<div style="width:1px;height:1px;visibility:hidden;overflow:hidden;clip:rect(1px,1px,1px,1px);color:#FFFFFF;font-size:1px;"><img src="/images/spacer.gif"></div>