I am new to css and started working on a few simple projects. I ran into a really weird issue styling buttons, though. The following code will not result in a link:
But for some reason, this will:
My question is basically, how in the world to you set the size of a link without having to use float? And why would float work?
Thanks!
It is because an 'a' element is usually displayed inline. You can over-ride it by using display:block;
More on 'display' here: http://www.w3schools.com/cssref/pr_class_display.asp
Regarding float:left;
When floating left, the browser automatically over-rides the display to be a block.
Since "a" is inline element, you must display it as an inline-block
a { display: inline-block; }
to keep it inline but be able to change it's dimensions, padding, margin and basically everything else that you could do with an "div".
There is a IE7 and lower issue with inline-block so you may want to use css "hack":
a {
display: inline-block;
*display: inline; //* stands for IE7 and will not affect Chrome, Firefox and other browsers including IE8+
*zoom: 1;
}
Related
I am making a table-type layout with divs and spans. I am getting some weird behavior when any of the spans are empty - a margin appears at the top of the parent.
I think it might be linked to using display: inline-block but I'm not sure why it is doing this.
Here is what I am talking about
Is there any way to fix this strange layout behavior?
Add vertical-align:top to .ListView_ColParent
.ListView_ColParent {
display:inline-block;
vertical-align:top;
}
jsFiddle example
I have an unordered list and each list element contains a photo and a headline. My CSS sets up the grid to be a grid, where each row contains three photos. Sometimes the headline (or photo caption) is longer than the width of the photo and has to span two lines. In some situations, when the text spans 2+ lines, the list element below it gets pushed to the right and there is a big gap in the list. The only fix that works for me is adding the following HTML <div style="clear:both"></div> after every three <li></li> elements. The issue can be seen in the third row of the list elements. I've tried researching this issue, but have not found a CSS only method. In my example code, I applied the CSS clearfix class, but it doesn't seem to have any effect.
I'm using the latest version of Google Chrome.
Here is my code: http://jsfiddle.net/NVveP/1/
Having both float: left and display: inline-block will in effect nullify display: inline-block, because float: left forces display: block.
Hence, removing float: left allows display: inline-block to work, which combined with vertical-align: top is how you can achieve your desired layout.
See: http://jsfiddle.net/thirtydot/NVveP/3/
I also added a hack to make display: inline-block work in IE7, if that matters.
It would be more difficult to do this with floats. You'd need something to the effect of:
li:nth-child(3n+1) {
clear: both;
}
Which has the problem of not working in older browsers such as IE7/8. Fortunately, there's no need to worry about this because display: inline-block is the solution here, not floats.
I have a paging control on my site that has it's container element set to margin:auto so that the pager control are centered within the element. It works great on all browsers except for IE7. In fact, I just realized my site has several issues with IE7 and I'm trying to work through them all. However, I've been stuck on this one for some time.
Take a look at this page.
(I know there are other IE7 issues on this page, focusing on the pager controls first). If you use IE9, you can hit F12 and set the "Browser Mode" to IE7 in the menu bar. Compare it to the same page in any other browser/version.
Can anyone tell me specifically why this is happening based on the CSS/HTML I'm using? I've been trying things for what seems like hours and I'm not really getting anywhere with it.
The problem is that you're relying on display: table to shrink-wrap the ul to the width of the lis inside it. Unfortunately, display: table is not supported in IE7.
Switching to display: inline-block is one way to fix this.
On previous_next_container_forum ul.list_paging, remove display: table and add:
display: inline-block;
*display: inline;
zoom: 1;
The ul is now exactly as wide as the lis inside it, without the use of display: table.
To actually make it centered, you need to add text-align: center to a parent element, such as .previous_next_container_forum.
According to microsoft, IE8 and IE9 support the :after selector. I use this selector to force elements to have the proper height, if all the elements inside are floated. This allows backgrounds to show up properly, without having to specify a set height.
My after code typically looks like this:
.after:after{
content: '.';
height:0;
line-height: 0;
display:block;
clear:both;
visibility:hidden;
}
So now to the bug. When I added a few :after to my page at https://spartanstats.com/reach-stats-gamertag and I hover over each of the li elements in the middle of the page, IE9 grows the page by one line each time.
EDIT:
Upon further investigation the :hover property on each of the dynamically generated li elements is seemingly the root cause of the problem. Removing the hover code for the li's fixes the problem. Of course this isn't the fix I was hoping for. I'll keep investigating.
Currently I'm lost in finding the solution to this issue. But I know my users will potentially hate the site when it starts growing out of control!
Came across this issue myself. It may be related to this issue
Apply min-height: 0% to the containing element.
Have you tried using
content: '';
instead of
content: '.';
Having a character in your after element and setting it to use
display: block;
visibility: hidden;
will still cause the element to take up space on the page unlike when you use:
display: none;
My guess is that even though you're setting the height of the :after element to 0, the . in the element is causing Internet Explorer to render an unwanted height.
I am new to the world of coding as well as CSS and recently came across the property vertical-align. Having read a number of articles on what it is, I am still clueless on what it is for and when do you use it?
My understanding is that it is used for inline elements such as text, images, etc as well as text or other inline elements in a table. They cannot be used for block element such as div, h1, etc.
If my understanding is right, apart from aligning text vertically to say an image or using subscript or superscript, what other purpose does it serve?
It's used the vertical align inline elements indeed. Block level elements will ignore this property. So your understanding is right.
This blog gives some background information on vertical-align with some examples. It's mainly used to vertically position an image in a line of text. Or to replace the valign attribute on tablecells.
So it seems you are understanding it quite right. See w3schools for the details on the vertical-align property.
Just to be clear; do not try to use vertical-align to position a blocklevel element like a div. It will not work, as you already mentioned, it's for inline elements like images in a line of text. Using display: table-cell; and vertical-align on an element is a hack, please use other CSS techniques to vertically align stuff in an div whenever possible.
It's always worth reading the specs if you want to learn about a specific property:
http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align
A common use case is vertical centering (in combination with display: table-cell):
http://jsfiddle.net/7eTb2/
div {
background: #ccc;
width: 200px;
height: 300px;
padding: 5px;
display: table-cell;
vertical-align: middle
}
It's somewhat difficult to vertically center without using this technique.
Another common use case is when it comes to elements that are inline or inline-block.
See here for examples of what happens with different vertical-align values:
http://www.brunildo.org/test/inline-block.html
Another good link to read: http://css-tricks.com/what-is-vertical-align/
However, it's real use is getting me upvotes, see:
https://stackoverflow.com/search?tab=votes&q=user%3a405015%20%22vertical-align%3a%20top%22
:)
Others have been mostly correct about vertical-align. The reality is that it works, just not how you think. It's for inline elements, not block elements.
In this case, a fiddle is worth a thousand words. :)
http://jsfiddle.net/JJfuj/
vertical align, by the W3C and by how most(tm) interpret it, is only used/takes affect in elements that are table-cells (<td>), and on some browsers, elements with the display: table-cell declaration.
The rest of the time, it is largely disregarded by browsers.
Vertical align is for just what it sounds like. It aligns the element vertically within the parent object; however, not all browsers interpret it the same.
Here's a little more in-depth information on the parameter values available.