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
Okay, so this is a first - my CSS is working in all tested browsers...except Chrome.
I am attempting to render a simple circle in a div.
Example is: http://redappledev2.wpengine.com/ The login icon in the upper right hand corner of the header (circle with the user image).
In Firefox, IE, Safari the circle renders as a typical circle.
The current css is: border-radius: 25px; but the expected result also occurs when the css is border-radius: 50%;
From what I can peg down - it looks like in Chrome the problem is that the parent container - an A tag - the height is to short which is based on it's font size - currently 20px. The font size cannot be increased, but in testing when I increase the size - the a tag's height increases and the circle border is rendered as a true circle and not an eclipse.
Am I missing something? Is there a better way of rendering the circle border around the user icon?
Thank you!
It looks like if you change div.icon-circle from display:inline to display:inline-block things start to appear as you intend in Chrome.
I just used the DOM inspector to tweak some of your styles and got to a circle with the following style rule:
.icon-circle{
border:1px solid #627F9A;
border-radius: 25px;
display: inline-block;
padding: 0px 5px 2px 4px;
position: relative;
top: 2px;
}
Good luck with your site
Related
Few hours ago, I asked, how can I implement triangle as an arrow in a tooltip.
I got perfect answer which is here:
How to create triangle and use it as a arrow in tooltip
Now I am working on tooltip from antd library. Arrow in this tooltip is not look quite as I want to. I would like to style this same as in the previous question - as in the link above.
Here's the link to codebox where I tried to style tooltip from antd library using code from the previous question - as in the link above.
https://codesandbox.io/s/colorful-tooltip-antd-4-21-0-forked-bre16f?file=/demo.js
The problem:
As you can see the corner of the arrow is a bit too long, there are white gaps at the lower border. Nothing like that happens in the previous example. Everything is perfectly fit there
Where's the problem?
You can change the height of the arrow as pointed below.
.ant-tooltip-inner:after {
content: "";
position: absolute;
top: 100%;
height: 12px; /* <=======control the height here */
right: calc(-1 * var(--t));
border-right: var(--b);
box-sizing: initial;
}
I didn't get the white gaps at the lower borders. Can you point it out with an image/screenshot?
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 1 year ago.
Improve this question
So I centered a div totally fine, but after adding border it's no longer centered. It's positioned just like before, but now there is a border, so it's longer and the content is moved to the right by a border width. How to fix this?
Add to your div :
box-sizing: border-box;
So the border is part of the total object's width and height.
Can you send your css code for applying in div?
Please add this code to your div.
.center { margin: auto; width: 50%; border: 3px solid #73AD21 }
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 6 years ago.
Improve this question
I want to add 3 green circles with the :before pseudo-element in order to show the in-stock-status of my products similar to below:
http://www.chililips.com/LACOSTE-Lounge-Pant-Schlafhose-lang-gruen
I only know how to apply ONE circle, but how can I add three or more? I also thought of using HTML characters, but there are no green circles...
Box shadows...no pseudo-elements required. Unless you want to.
.blob {
width: 50px;
height: 50px;
background: lime;
border-radius: 50%;
margin: 3em 15em;
box-shadow: 5em 0em 0 lime, 10em 0em 0 lime;
}
<div class="blob"></div>
If you are using font icons you can simply add like single one instead of three same content
.fa-circle:before {
content: "\f111" "\f111" "\f111";
}
This is an example of fontawosome icon,you can manage space between icons by letter-spacing
OR
If you are using image for icon, then just take image with three icons or use multiple background images like background: background1, background 2, ..., backgroundN;
Read more about multiple background images
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 a carousel slider which works perfectly in large screens. But when the same is viewed in small devices, a extra space of gray background is added. The same can be viewed in (ctrl+shift+m) in firefox of this SITE LINK . When viewed in firebug, I have noticed that it might due to
element.style {
height:345.6px
}
If I remove the height, it works perfectly. How to fix this ?
UPDATE: If no slider appears, please select change city to Guwahati
I would need more information to help you. Are you using some kind of template? Do you have access to the the raw HTML or CSS? Please be more clear about how we can help.
Edit:
True this should be a comment. Sorry about that. Give the element a specific class and override the template CSS. Something like this:
HTML:
<section id="home" class="customHeightStyle home-section home-parallax home-fade bg-dark-30" data-background="" style="height: 480.24px; top: 0px; background-position: 82px 38px, 44px 31px, 22px 15px;">
CSS:
.customHeightStyle {
height: auto !important;
}
In html, add the same image as background for the parent .item. And use background-size:cover;
For small screen sizes, hide the image using opacity or visibility.
Increase the height of .carousel, .carousel-inner and .item to 100%.
Because you have set height of the container element and then styled the image to be 100% in width.
The upper image is trying to preserve best aspect ratio. You need to set the height of containers properly and then try adding images as cover photos to individual sliders with background-image and background-size property.
Remove youe section style height: 5371.2px;
<section id="home" class="home-section home-parallax home-fade bg-dark-30" data-background="" style="background-position: 20px 8px, 11px 6px, 5px 3px;">
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 getting a big whitespace on top of my page only in firefox. I tried to inspect all elements and can't find anything wrong with it. I also checked for uncollapsing margin but can't find any.
I'm using HTML5, modernzr and jquery.
Website URL : http://devvanickcom.vanickurl.com/
This appears to be a Firefox bug (#451791). The margin collapse is done wrong. It collapses through hr.clear, as it has no height/padding/border, resulting in 90px of margin above hr.clear, but it also applies the correct margin of 90px below the floating element.
Any fix that would ordinarily prevent margin collapse will stop this behavior. For example, setting hr.clear { height: 1px } pushes everything back up, but it also shifts things down a pixel, which is undesirable. An interesting fix is to set header { padding-top: .001em }. This won't add enough padding to actually shift things visually, but it counts enough to prevent the margin from collapsing beyond the boundaries of header.
Alternatively, you could just rewrite your code to avoid this structure.
Just change the position property in the #logo class of your css, set it to:
position: relative, the class would look like:
#logo {
background: url("/Content/images/sprite.png") repeat-x scroll left top transparent;
display: block;
height: 85px;
position: relative;
text-indent: -9999px;
top: -20px;
width: 180px;
}
after that you need to change the header nav class, (margin was 90px on top)
header nav {
margin: 40px 0 5px;
padding: 0;
text-align: center;
}
Then just need to adapt it exactly the way you need it, it will look like this on firefox:
It's very bizarre. I guess the easiest and best way would be, like animuson said, to remove <hr class="clear"> under <div id="contact-toggler-wrapper"> . It did the trick without affecting the layout.