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 3 years ago.
Improve this question
With this CSS styles I expect a circle with dotted border:
div{
border: 1px dotted #000;
padding: 50px;
border-radius: 100px;
display: inline-block;
}
But Firefox is rendering solid borders (fiddle here). Any solution?
UPDATE
THIS IS NOT AN ISSUE ANY MORE.
RESOLVED in Firefox 50
If you're using Firefox, this is a known bug. Your options are:
If this is just for the sake of a circle, draw it with <canvas>, e.g. as demonstrated here
Use SVG (possibly inline), which supports various ways to stroke paths
Just make a PNG
Fix the bug, which Mozilla will surely appreciate ;)
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 6 years ago.
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.
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.
Improve this question
The website I'm working on has a div on the right showing code examples in the hero section of the homepage. We use a similar div on one of our landing pages (https://buttercms.com/l/ruby-blog-software/) but the bottom of the div doesnt have rounded borders.
I can't figure out why the landing page div doesnt have rounded borders but the homepage div does.
It only did it at certain breakpoints and only on one of my monitors.
The <pre> only showed up on the same breakpoints the border was wrong
The solution that worked for me was
body.landing_page .code-examples .code-container .code pre {
margin: 0;
border: none;
border-radius: 5px;
text-align: left;
min-height: 320px;
}
The original border radius was 0px
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
He guys I'm using css outline on my menu list item(li).In my chrome it works fine but in Mozilla firefox outline produce really bad result.I have used vendor prefix like :-
-moz-outline:2px solid white;
-webkit-outline:2px solid white;
but my mozilla shows me problem on outline :( how can i make outline property compatible for all browser?
Just use outline: 2px solid white. No need for vendor prefixes on a CSS2 feature.
Try this
.className{
outline: 2px solid white;
-moz-outline:2px solid white;
-webkit-outline:2px solid white;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
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.
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.
Improve this question
I am completely new to html and css. This is my first website. When someone clicks on an image under some category, it moves while using chrome. I would like to prevent it. Please help.
This is because the books li selector is positioned relative:
.books li{
display: inline;
position: relative; /* remove this */
top: 100px;
left: 10%;
}
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
Why does this doesn't work?
*:hover {margin-left:50px;}
Cause when I move over the element nothing happened.
Are you putting it at the end of your CSS file? If not, it may be getting overwritten.
*:hover {
margin-left: 50px;
}
is working for me.
What browser are you testing on?
Try the code below
body *:hover {margin-left:50px;}
try
body :hover{
margin-left: 50px;
}
this will apply the :hover to every inner element in body
I've just tested on Chrome and seems to work
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
Hi been trying to get this for quite some time. Ive done it before which is why i feel pretty pathetic for having to ask. The background will not show up.
Im trying to set a background image for my footer and the top menu on my website located HERE
This is my CSS for the Footer:
.blog-footer {
padding: 40px 0;
color: #999;
text-align: center;
background-image: url('./classy_fabric/classy_fabic.png');
border-top: 1px solid #e5e5e5;
}
And here is the CSS for the top nav:
.blog-masthead {
background-image: url('./classy_fabric/classy_fabic.png');
box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
}
You have fabric mispelled so it can't find it.
http://sadin.me/css/classy_fabric/classy_fabric.png
I found one glitch in you code.
background-image: url('./classy_fabric/classy_fabic.png'); one (.) is missing
background-image: url('../classy_fabric/classy_fabic.png');
I think you just need to move your file into the right directory.
Request URL:http://sadin.me/css/classy_fabric/classy_fabic.png
Request Method:GET
Status Code:404 Not Found
If you're using Chrome, check out the network tab of your debug console for any 404 errors.