Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
Hi can someone teach me how to remove the white borders around an image posted on a Blogger blog?
This is the blog link: www.ulimali.blogspot.com
Sorry, I'm new to stackoverflow/html/css, I would really appreciate it if someone can help me with this. Thank you!
I assume that you want to remove the border as well as the shadow behind. For that use this CSS:
img {
padding: 0 !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 years ago.
Improve this question
I have the following css code for drawing a circle on a page.
.full-circle {
background-color: rgba(204, 0, 102, 0);
border: 3px solid #333;
margin: auto;
height: 75px;
width: 75px;
-moz-border-radius:75px;
-webkit-border-radius: 75px;
}
It is called by:
<div class="full-circle">
Works fine in Firefox but when I run it in IE it appears as a square and i'm not sure why.
Marvin pointed it out in the comments, but it is the answer to your problem: you have not specified the normal border-radius. Furthermore, if you're looking to create a circle, you want 50%, not 75px. 75px may make your particular div a circle, but if you decide to make the width wider, it will render differently. Your CSS should look like this:
.full-circle {
background-color: rgba(204, 0, 102, 0);
border: 3px solid #333;
margin: auto;
height: 75px;
width: 75px;
border-radius:50%;
}
EDIT: As Rob pointed out, you probably don't even need the -moz and -webkit prefixes unless you are designing a website for a user-base you know uses older browsers. I removed them from the example.
As noted in the comments by Rob, most browsers have had no need for vendor prefixes since 2010, just add
border-radius: 75px;
IE8 did not support this property, IE9 supported it without the -ms- prefix.
But check out #Vector's answer, you should really be using % and not px
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have the next style for div:
.page {
width: 90%;
border-color: orange;
border-style: double;
border-width: 25px 30px 10px 20px;
border-image: url("images/border-image.png") 25 30 10 20 repeat;
margin: 70px auto 0px auto;
padding: 10px;
box-shadow: 0px 4px 3px rgba(0,0,0,0.9),
0px 8px 13px rgba(0,0,0,0.6),
0px 18px 23px rgba(0,0,0,0.1);;
}
I took it from example. And there is right all! But me it draws only frame of image and black background (body has black background). How can I draw middle part of images too?
Per https://drafts.csswg.org/css-backgrounds/#the-border-image-slice, the middle is automatically discarded (because it's a "border" image) unless you specify the fill keyword. So you want:
border-image: url("images/border-image.png") 25 30 10 20 fill repeat;
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm not sure if I should be using overflow or something else to fix this, but would appreciate any help I could get.
Scroll to the very bottom of the page. You will see at the very bottom where there's the black div and right below that is a little white space.
How can make that white space become black and still keep the rounded corners?
You have to set your padding-bottom to 0, and set the border radius bottom to the right and the left of the s-in-mid div.
Set bottom padding of .s-inn-mid to 0
Add bottom left and right border-radius 5px to the black div.
border-radius: 0 0 5px 5px
I'd tell you it exactly in terms of classes and ids, but you are using inline styles (GROSS), so that's unfortunately not possible.
Change this:
.s-inn-mid {
padding: 7px 0px 6px 0px;
...
to this:
.s-inn-mid {
padding: 7px 0px 0px 0px;
...
FYI, this has nothing to do with overflow. You simply had padding on the bottom of your container div.
in signup.css line 293 change #fff to #000, as below, tested in chrome.
.s-inn-mid {
width: 1000px;
margin: 0;
padding: 7px 0px 6px 0px;
float: left;
background: none repeat scroll 0 0 #000;
border: 1px solid #CCCCCC;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I'm using this Sass to style a header on some static pages, but the background image doesn't show up. I'm pretty sure I've got the relative file path right (the stylesheet is in a stylesheets folder and the image is an images folder, both in an assets folder). What else might be causing this?
.blue_section_header
width: 900px
height: 80px
font-size: 30px
font-weight: 700
padding: 25px 0 0 40px
color: #fff
background: #54a0ce url(../images/section_header.png)
-webkit-border-radius: 4px
-moz-border-radius: 4px
border-radius: 4px
In Chrome:
1) Open Developer Tools
2) Click the Resources tab at the top
3) Open the Frames folder
4) Look for the Images folder and open it
Do you see your image in the Images folder? If you don't see the image that means that your relative path is incorrect.
You are missing a few things.
You miss the opening and closing brackets ({, }).
And the semi-colon behind every line.
It should be :
.blue_section_header {
width: 900px;
height: 80px;
font-size: 30px;
font-weight: 700;
padding: 25px 0 0 40px;
color: #fff;
background: #54a0ce url(../images/section_header.png);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
How can i put glow effects on textfield using HTML5 and CSS3 when active like http://www.me.com
:focus { box-shadow: 0 0 10px red; } for a red glow. Essentially a glow is a drop shadow with a suitable color and no offset.
You'll find they use a combination of JavaScript with CSS3 to create this effect.
They will have an event handler that handles the onfocus state of the textbox and then use the CSS3 box-shadow style along with a Javascript fade effect,
The best (easiest) way to achieve this would be to combine jQuery with CSS3 properties, But can also be done in raw JS at the same time, If you need further explanation just leave a comment.
They use png image for div which is moved behind input field and hidden when there's no focus. Everything has fixed width and height so no imege resizing needed.
Didn't see any CSS3 or HTML5 there but to do it with CSS3 than with border-image it should be possible to achieve the same effect, something like:
border-image: url("border.png") 10;
Edit:
#Lea Verou has better solution. I added this effect to one of my sites yesterday like this
input:focus, textarea:focus,
input.ieFocusHack, textarea.ieFocusHack {
box-shadow: 0 0 10px rgb(0, 182, 255);
-moz-box-shadow: 0 0 10px rgb(0, 182, 255);
-webkit-box-shadow: 0 0 10px rgb(0, 182, 255);
behavior: url(PIE.htc);
}
input[type="submit"]:focus {
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
Some javascript (didn't write it myself) for IE as it doesn't support :focus
$(document).ready(function() {
if (jQuery.browser.msie === true) {
jQuery('input, textarea')
.bind('focus', function() {
$(this).addClass('ieFocusHack');
}).bind('blur', function() {
$(this).removeClass('ieFocusHack');
});
}
});
To add box-shadow support to IE used CSS3PIE. Works like a charm.