I have a div wrapped in a link tag, and when you tab to it in Chrome, it looks like this:
I know it's a minor grievance, but is there any way to get rid of the "outcropping" at the top, which I assume is Chrome outlining the link portion of the HTML. But I would like to keep the default Chrome blue outline around the image portion.
Here is a simplified test case:
HTML:
<html>
<body>
<a href='tree.com'>
<div class='card'>
<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_- _geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg'/>
</div>
</a>
</body>
</html>
CSS:
.card
{
display: inline-block;
border-radius: 5px;
width: 250px;
margin: 5px;
vertical-align: top;
text-align: left;
}
.card img
{
width: 250px;
height: 250px;
}
JSFiddle:
http://jsfiddle.net/mLfkvuyw/26/
Adding the following removes the default Chrome outline from the image (and all child elements) as well, which I don't want:
a:focus
{ outline: none; }
You can do some easy CSS, applying no outline to the parental a tag and instead adding it around the image.
.card {
display: inline-block;
border-radius: 5px;
width: 250px;
margin: 5px;
vertical-align: top;
text-align: left;
}
.nolink:focus {
outline: 0 none !important;
}
.nolink:focus .card img {
border: 2px solid blue;
box-shadow: 1px 1px 1px 0 #888;
}
.card img
{
width: 250px;
height: 250px;
}
<html>
<body>
<a class='nolink' href='tree.com'><div class='card' ><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg'/></div></a>
</body>
</html>
The "outcropping" is caused by the .card element's margin creating space between the link and the image elements. Margins can often cause strange layout problems in this way.
A simple fix is to remove the margin property from .card so that the focus outline will be flush with the image:
.card {
display: inline-block;
border-radius: 5px;
width: 250px;
margin: 5px;
vertical-align: top;
text-align: left;
}
Related
My second inner div position is weirdly adjusted when my first inner div have a long link text. How to fix it?
My html code:
<div class='div-wrapper'>
<div class='inner-div1'>
This is a long link
</div>
<div class='inner-div2'>
Link 2
</div>
</div>
My css code:
.div-wrapper {
border: 1px solid black;
width: 200px;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-block;
border: 1px solid black;
width: 90px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
link to the picture of the div:
https://www.dropbox.com/s/9zs4mgj7izuqsp1/question.png?dl=0
The problem is with your CSS. Particularly the .div-wrapper div
You need to change the display setting from inline-block to inline-table to get it inside the cell. You mentioned that you wanted the box inside the larger box, but you need to clarify how exactly you want the inner boxes to be placed inside the larger box (ex: small gap between the boxes, both perfectly fit inside the large box with equal sizes)
Just changed inline-block to inline-flex for your inner div and looks fine.
.div-wrapper {
border: 1px solid black;
width: 200px;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-flex;
border: 1px solid black;
width: 90px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
<div class='div-wrapper'>
<div class='inner-div1'>
This is a long link
</div>
<div class='inner-div2'>
Link 2
</div>
</div>
Just have to fix this, I don't think any solution here explains why the problem exists. Just to add up, the problem with this is because vertical-align is set to baseline by default.
What you have to do is set the vertical-align to top
Insert it in your CSS:
.div-wrapper div {
vertical-align: top;
}
Link to solution: https://jsfiddle.net/Lnvgkfz3/
Small changes in CSS
.div-wrapper {
border: 1px solid black;
width: auto;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-block;
border: 1px solid black;
width: 190px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
I have a div as a content box and have another div inside that for the title. The outer div has border-radius set but the inner div hides it.
HTML:
<div id='box'>
<div id='boxTitle'>
This is the title
</div>
</div>
CSS:
#box {
height: 250px;
width: 250px;
border-radius: 10px;
background: #bbb;
}
#boxTitle {
width: 100%;
background: #000;
color: #fff;
text-align: center;
}
JSFiddle: http://jsfiddle.net/AAUbA/
How do I fix it so I can see the rounded corners at the top of the outer?
Use overflow: hidden on your #box element:
#box {
height: 250px;
width: 250px;
border-radius: 10px;
background: #bbb;
overflow: hidden
}
See the updated Fiddle here: http://jsfiddle.net/AAUbA/2/
As an aside: it's worth considering adding in vendor-prefixes to ensure better cross-browser compatibility.
This is a good write-up on how to use the property.
You can use this tool to auto-generate the CSS you need.
Give #boxTitle the same radius on both the top corners as the box. As already suggested you can also set the overflow to hidden with overflow:hidden;. Both working but if you want to add something outside of #box it won't be displayed, with this code it will be displayed:
HTML:
<div id='box'>
<div id='boxTitle'>
This is the title
</div>
</div>
CSS:
#box {
height: 250px;
width: 250px;
border-radius: 10px;
background: #bbb;
}
#boxTitle {
width: 100%;
background: #000;
color: #fff;
text-align: center;
border-top-right-radius:10px;
border-top-left-radius:10px;
}
JSFiddle demo
add overflow: hidden on your #box element.
I have this JSFiddle. Can someone explain, why is the anchor position misaligned relative to its siblings? I know I can correct it with position relative and negaitve top offset, but I don't understand, why it is like this in the first place.
HTML:
<div class="container">
<div class="left"></div>
Some link
<div class="right"></div>
</div>
CSS:
.container {
height: 25px;
white-space: nowrap;
}
.container .left {
border: 1px solid black;
display: inline-block;
margin: 0;
height: 25px;
width: 80px;
padding: 0;
}
.container .right {
border: 1px solid black;
display: inline-block;
margin: 0;
height: 25px;
width: 80px;
padding: 0;
}
.container a {
display: inline-block;
border: 1px solid black;
height: 25px;
width: 300px;
margin: 0;
}
The reason of this behaviour is due to the absence of text inside your .left and .right elements.
By default inline-block elements have vertical-align: baseline, but since you have empty elements there's no baseline, so they will be automatically aligned to the parent baseline (if you add some text inside them — even a — you would istantly solve the problem)
In order to prevent this behaviour you could also set a common vertical-align to all .container children.
You can add
vertical-align: top;
to .container a
This wil align the anchor with the divs.
You need to provide vertical-align property when you are declaring an inline-block.
Here you go.
WORKING DEMO
The CSS Change:
.container a {
display: inline-block;
border: 1px solid black;
height: 25px;
width: 300px;
margin: 0;
vertical-align:top;
}
You can use so many Option
1. Remove Display:inline-block and add float:left
Here the Demo
2. Use css vertical-align:top
Here demo
I apologize if someone can immediately direct me to the right place, but I'm unsure what to even search for this particular problem. It seems to be a Chrome-specific bug, but I'm unsure how to fix it.
What's happening is that when I replace the text in a span, it's moving a (grand)parent anchor to the left. (see fiddle for demo : http://jsfiddle.net/Sj3Gj/2/) I've simplified the HTML, but for various reasons, this is the structure/CSS I need. If you put float: left on the anchor element, it works fine, but I have this structure in a larger and this additional float breaks the positioning of the larger structure.
I'm at a complete loss here. If you look at the fiddle in chrome, the anchor floats left, but in Firefox/IE, it's fine. Any ideas?
Here's my code:
<a class="trigger">
<div></div>
<span>Some text</span>
</a>
a.trigger {
width: 337px;
height: 16px;
padding: 2px 20px 2px 5px;
margin-top: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
a.trigger, a.trigger:link, a.trigger:visited {
display: inline-block;
border: 1px solid;
border-top-color: #BFD6F1;
border-left-color: #BFD6F1;
border-bottom-color: #9EBCE1;
border-right-color: #9EBCE1;
padding: 2px 18px 2px 7px;
background-color: #FFF;
text-decoration: none;
cursor: pointer;
}
div{
background-image: url('http://placekitten.com/200/300');
height: 16px;
width: 16px;
display: inline-block;
float: left;
}
a.trigger span {
margin-left: 10px;
}
a.trigger, a.trigger:link, a.trigger:visited {
cursor: pointer;
}
This is sbecause you are floating the div to the left. remove the float, it is not needed as you have already declared inline-block
DEMO http://jsfiddle.net/kevinPHPkevin/Sj3Gj/5/
div{
background-image: url('http://placekitten.com/200/300');
height: 16px;
width: 16px;
display: inline-block;
}
Here in the image Title "Accounts and Holding Disclosure in crossing the white line while DRF is way above the white line...
How can i put the text just above the line using css.
Html code is
<div class="tabs">
<img src="images/disclosure.png" />
Accounts and Holdings Disclosure</div>
<div class="tabs">
<img src="images/drf.png" />
DRF</div>
Css is
.tabs
{
height: 85px;
border-bottom: 1px solid #fff;
text-align: center;
color: #fff;
padding-bottom:7px;
}
.tabs img
{
display: block;
margin-left: auto;
margin-right: auto;
height: 70px;
margin-top: 5px;
}
you should write:
.tabs {
height: auto;
}
There is simply not enough splace in the first block to apply the padding. The .tabs is 85px height, the image is 70px height with a margin of 5px top. So the remaining vertical space for your text is 10px only, and you add 7px of padding.
You need to reduce the size of the image in my opinion.
should be :
.tabs {
height: 90px;
}