Given a solitary <li /> I need to increase it's size. Font-size works only in firefox, IE just shows it as same size.
Can I change the LI size another way, or set it's image? Please note (and I know this is bad) there is no UL element, it is invalid markup as it is part of an older system which the design means the UL can't be added in easily.
<li> elements are inline elements so they will get the inner elements' width. You can set display property to "inline-block" and set a width. I guess it will solve your problem.
<li> is an inline element, you can use display: inline-block; to have it accept width, height, background, positioning and other rules, while maintaining its inline flow.
Also you could try using <span> with an image of a dot positioned to the left of the text instead of invalid markup.
.liSpan
{
display: inline-block;
background-image: images/dot.png;
background.position: left;
padding-left: 25px;
}
Or something similar :)
Try adjusting the line-height, or it's padding to increase the height.
.liSpan
{
line-height: 2em;
padding: 1em 0;
}
Related
Here is my JsFiddle
When I inspect the size of the anchor tags with Chrome developer tools it shows me 144px*18px for the 1st element and 310px*18px for the 2nd element.
I want to know why it does not take the height and width of the containing element and how it is being calculated.
.gallery {
background-color: #abcdef;
}
.gallery img {
display: inline-block;
margin-left: 20px;
margin-top: 20px;
}
.normal {
height: 160px;
width: 110px;
border: 5px solid black;
}
.wide {
height: 160px;
width: 280px;
border: 5px solid black;
}
<div class="gallery">
<img class="normal" src="">
<img class="wide" src="">
</div>
The CSS 2.1 spec says
The dimensions of the content area of a box — the content width and
content height — depend on several factors: whether the element
generating the box has the 'width' or 'height' property set, whether
the box contains text or other boxes, whether the box is a table, etc.
Box widths and heights are discussed in the chapter on visual
formatting model details.
The <a> element defaults to a display value of inline. Its contents participate in the layout so it is a non-replaced element.
For height, the spec says:
10.6.1 Inline, non-replaced elements
The 'height' property does not apply. The height of the content area
should be based on the font, but this specification does not specify
how.
So 18px is arrived at from a single line of text, taken from the font metrics. Neither the larger image content, nor the containing block size plays any part.
For width, the spec says
10.3.1 Inline, non-replaced elements
The 'width' property does not apply. A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a used value of '0'.
in other words, the width is determined by the <a> element's contents, paddings, borders and margins.
For the first <a> element that's 114px (contents - image plus one space) + 20px (left margin) + 2x5px (left and right border) = 144px
For the second <a> element that's 280px (contents - image) + 20px (left margin) + 2x5px (left and right border) = 310px
Just need to account for the spaces. The elements are being laid out in a line box in a inline context, so the spaces at the start of the first <a> element and at the end of the second <a> element are being dropped. The spaces at the end of the first <a> element and the start of the second <a> element are being collapsed into one space. When spaces are collapsed, it's always the first space which remains, which in this case is the one at the end of first <a> element, so that's why a space participates in the width of the first <a> element but not in the width of the second one.
use display:inline-block in anchor
.gallery a{
display:inline-block;
}
here is updated jsFiddle File
also remove margin from image and add it to anchor
.gallery a{
display: inline-block;
margin-left: 20px;
margin-top: 20px;
}
anchor is always display: inline by default. To make anchor took it's child space, you must give him a display:block, or in this case, display:inline-block so that they will be inlineand block.
a{
display:inline-block;
}
JSFiddle
Read this question for more info.
The a tag's need to be styled as well
I added
.gallery a {
display: inline-block;
}
I had the same issue, for example, I have HTML generated by GitHub flavored markdown, so I can have paragraphs containing anchor with images inside.
Actually setting display: inline-block in anchors did not work for me; I did also set display: block in images. Using Sass nested something it looks like this:
.gallery {
a {
display: inline-block;
img {
display: block;
}
}
}
Instead of applying {display: inline-block} on <a>
, try applying {float: left} on the child of <a>. The height of the <a> would now match the height of the child.
Another solution is to use a negative margin-bottom attribute with the img element (the size depends on the font, so, it's better to be sure of the used font by using an #font rule, 0.2em was fine for the font I use, moreover, using em units is a good idea as the size depends on the font, so, if you change the font-size later, you won't have to change this CSS code):
HTML:
Something, <img src="whatever.png" alt="Whatever" />, something else.
CSS:
a:link {
display: inline-block;
}
img {
margin-bottom: -0.2em;
}
That way, all the texts are well aligned with the image, whatever it's in a link or not, I've done that to have all image + text blocks displayed the same way, but you might use a > img instead of just img in the above code.
By the way, I came up with this solution because I had something like:
a[something]:link::after {
content=" something to add"
}
so, the img {display: block;} was not an option for me as the “ something to add” would have been under the image and the rest of the text after, this would have cut the reading flow.
This is the HTML:
<div>
<p>
We bring you the latest in entertainment & information services, right on your phone. From the latest of Bollywood to the futuristic applications, get it all here!
View All
</p>
</div>
And this is the CSS....
div{width: 350px;}
a{
padding: 30px;
background: red;
margin: 20px;
border-radius: 12px;
background: red;
color: #fff;
font: bold 12px Arial, Helvetica, sans-serif;
text-decoration: none;
}
I know this could be solved by using display: inline-block; in .a. But I would like to know why this is overlapping the text? Should it not to go beyond the text?
DEMO1
DEMO2 now a is within a block level of p.
And also have a look at this DEMO. Img is also an inline element. And why this is not overlapping, this should also be overlapping, right?
<a> tag is inline level but while <img> tag is both inline and block level specially inline-block. So <a> tag is overlapping because of inline level which is corresponding to the text but <img> tag won't overlap because it is behaving inline-block. And you may know the difference between them.
Reference: Is <img> element block level or inline level?
An inline element could not be set its width and height and even doesn't work correctly the margin behaviour what actually should do. The margin is applied only to left or right side. Actually this is why, inline element here <a> tag would not set its width and height and remain in same line and seems to be overlapped when applied padding values.
The following picture makes you clear to understand about inline vs inline-block
View Live Demo
It's overlapping because the default behavior for an <a> tag is to fit with the text. If you want it to behave like a block, then set display: block.
The initial value for the display property on a link is display: inline. This means that it will try to fit in with the text and will accept horizontal margins, and padding on all sides, which is exactly why your link overlaps the text. In order for it to accept vertical margins (so it doesn't overlap), you need to set it to display:block or inline-block if you want it to align with the text still.
Padding doesn't work well with inline elements.
Ref:Inline Elements and Padding
This actually is explained in the W3C spec, although it was a bit tricky to find.
Horizontal margins, borders, and padding are respected between these boxes.
This tacitly implies that vertical margins/borders/padding are not respected. It goes on to say:
The height of a line box is determined by the rules given in the section on line height calculations
If you move the <a> into the contents of the box
We bring you the latest in entertainment View All
You can see this effect: http://jsfiddle.net/rHCNb/7/ -- the horizontal padding is respected, but not the vertical. The fact that it covers the other text has to do with z-indexing.
Add the below property in a.
position:relative;
float:left;
Working DEMO
TIPS:
Write background-color instead of the shorthand background when you
are not associating any other property.
If you write display:block then the block width will be equal to the parent
width, so always write width with display.
a{
padding: 30px;
background-color: red;
margin: 20px;
border-radius: 12px;
color: #fff;
font: bold 12px Arial, Helvetica, sans-serif;
text-decoration: none;
display: block;
width: 50px;
}
DEMO
Applying padding to child elements is making the child draw over the boundaries of its containing parent. Can you please explain the size consideration in margin, padding and content width.
If we increase the padding why don't the parent also resize to the accumulative size of all the children considering the child's padding also?
http://jsfiddle.net/NkXUW/4/
<div>
<ul>
<li><a>srikanth</a>
</li>
<li><a>sunkist</a>
</li>
<li><a>sunday</a>
</li>
</ul>
</div>
div {
margin-top:90px;
margin-left:90px;
background-color:#676896;
}
ul {
list-style-type:none;
}
ul li {
display:inline-block;
}
a {
background-color:#c34567;
padding:10px 10px 10px 10px;
}
What are coding practices that we need to consider to over come this problem.?
Ok guys I got lot answers that do work. Can anybody explain the parent size calculation based on child elements. what are characteristics of the child that are considered while calculating the encompassing parent's size. when the whole padding is considered when it not considered ?
the reason the child was overdrawing the boundaries of the parent is because the child is a tag of type <a> which by default is display:inline (you can see if that you go in chrome developer tools and see under computed style). an inline element displays like a line of text.. so the way it treats width and height and all that is very different than a block (a div for example is a block by default).
that being said, if you change the display setting of a to display:inline-block you get to keep the inline properties of <a> but at the same time also get the block properties, namely having a padding and width and height that is recognised by its parent node, which will then expand to accommodate it.
So there aren't any best practices about this. The only best practice is to understand what each display property mean (ie inline vs block vs inline-block) and put it to its proper use.
Use display:inline-block;
a {
background-color: #C34567;
display: inline-block;
padding: 10px;
}
SEE DEMO
An inline element has no line break before or after it, and it tolerates HTML elements next to it.
A block element has some whitespace above and below it and does not tolerate any HTML elements next to it.
An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.
http://www.w3schools.com/cssref/pr_class_display.asp
Can be solved without making any change in a tag. Just add overflow: hidden; property to div element.
div {
margin-top:90px;
margin-left:90px;
background-color:#676896;
overflow: hidden; /*expends its height if not fixed*/
}
Updated fiddle here: http://jsfiddle.net/NkXUW/52/
You must do add display: block; to <a> element to expand parent as you need.
See this fiddle
about different between margin and padding please read this maybe it help you
I don't think this is correct float your div wrapper
working demo
div {
float:left;
margin-top:90px;
margin-left:90px;
background-color:#676896;
}
hope this help you..
I'm looking to clear an inline-block element (in this case an <a> within a <p>) to the next line, without having to set display:block and defining a width.
Here's an example: http://jsfiddle.net/alecrust/zstKf/
Here's the desired result (using display:block and defining a width): http://jsfiddle.net/alecrust/TmwhU/
If you want to avoid setting an explicit width so you can style the background according to the actual length of the text, you can do the following:
Wrap your link:
<p>To stay up to date <span>Follow Us</span></p>
Note that I have added a <span> tag around the link.
Style your wrapper with CSS:
span {
display: inline-block;
width: 100%;
}
Setting the width to 100% forces the wrapper to take up the whole line. Keeping the <a> tag for the link set to inline-block allows it to have padding and a background applied while not having it expand to fit the container's width of 100%.
Forked JSFiddle: http://jsfiddle.net/Cm9kZ/
It's a bit of a kludge, but it will work:
a {
display: inline-block;
padding: 5px 18px;
background-color: #8C4AD5;
text-decoration: none;
position:relative;
top:25px;
left:-30%
}
You'll have to fudge the left position, but that basically puts you back into setting a known value, just like the width issue in your display:block example. Not really any better, just a different approach.
The closest I can get to what I want is using :before to insert a new line before the <a> (Fiddle). This unfortunately doesn't clear it to the next line though.
This only works if you want to line break after the last element in the p.
I've experimented quite a bit and this works for me, in Safari 6:
p.linebreak-after-last-element:after {
content: "";
display: inline-block;
width: 100%;
}
I have not tested this in other browsers, but it's so simple it should work in all browsers supporting display: inline-block.
An empty <div/> after the inline-block element, clears the inline-block.
With the requirements you have, I don't think it's possible.
I was hoping that this would help, but it doesn't because you don't have an element before your link.
You should just change your HTML, for example: http://jsfiddle.net/thirtydot/zstKf/10/
Using the pseudo class :: after you could add content with a clear:both; property to it.
Not tested but should work in theory.
I am trying to get a series of <a> tags appear at the base of their parent <li>.
The problem is two fold. If I use position: relative, bottom: 0; has no effect. If I use position: absolute, the <li>'s have overlapping widths.
I can fix the first problem by using the top style, but this is not ideal as the text size is unknown, and the top element measure from the top of both elements (so the base of the element would not hit the base unless I knew the font size).
I can fix the second with defined widths, but this will add unwanted white space on elements with shorter titles.
Here is a JSFiddle of the issue.
Try this bit of CSS:
#main-menu li a{
display: table-cell;
position: relative;
vertical-align: bottom;
height: 111px;
}
jsFiddle of the working style
Add a line-height value to your "#main-menu li a" style and position accordingly, 200px should work.