I have a problem with margin-top/bottom on <a> elements - it doesn't seem to work.
This is the HTML code:
<div class="pages-link">
1
2
3
....
</div>
This is the CSS code:
.pages-link {
margin:2em 0;
word-spacing:.25em;
}
.pages-link a {
background:#d7d7d7;
border:1px solid #ccc;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-khtml-border-radius:3px;
border-radius:3px;
color:#333;
padding:.3em .5em;
text-decoration:none;
}
This is how the final result looks like. The problem is obvious, I want 5 or 10px of margin-bottom for the <a> elements, but the property doesn't get applied.
What am I missing?
You need to add display: inline-block; to your anchor selector. Anchors are by definition inline elements and do not accept width, height, margin etc until they are defined as block level or inline-block elements.
I think you're better of doing display:block; and float:left; because display:inline-block; is not supported in all browsers.
Related
I am implementing a close button on an element containing text with CSS. The close button is generated content from a pseudo element with content:'X';. I need the cursor to become a pointer on that "X" so I used :
cursor:pointer;
It works fine in Chrome and Firefox but it doesn't seem to work in Internet Explorer (testing on IE11 windows 7).
DEMO (test in IE)
I also tried with cursor:hand; but it doesn't solve the issue. How can I make the cursor a pointer while hovering the "X" but not on the text of the div?
Relevant code :
div{
font-size:2em;
position:relative;
display:inline-block;
}
div::before{
content:'X';
cursor:pointer;
display:block;
text-align:right;
}
<div>some text</div>
--EDIT--
I am aware that making a child or sibling in the markup and applying cursor:pointer; to it will work but I would like to minimize markup and use a pseudo element for the close button as it has no semantic value.
I'm really late to the game, but I just now figured out a solution to this problem.
This solution allows a pointer on the child element, while retaining a default cursor on the parent element.
(See the accepted answer here for a solution that doesn't include keeping the parent element's cursor default: cursor: pointer doesn't work on :after element?)
First of all, for this hacky solution, you have to give up the ability to interact with the parent element using the mouse.
Set the parent element to cursor: pointer.
Then, setting the parent element to pointer-events: none will allow you to "click/hover through" the parent element.
Then, for the pseudo element, just re-enable pointer events with pointer-events: auto.
Voila!
div{
font-size:2em;
position:relative;
display:inline-block;
/* remove ability to interact with parent element */
pointer-events: none;
/* apply pointer cursor to parent element */
cursor:pointer;
/* make it more obvious which is child and which parent for example*/
background: darkred;
}
div::before{
content:'X';
display:block;
text-align:right;
/* restore ability to interact with child element */
pointer-events: auto;
/* make it more obvious which is child and which parent for example*/
width: 30px;
text-align: center;
background: white;
}
<div>some text</div>
I believe that it's not working in pseudo elements in IE,
What I'm use to do is add cursor: ponter to main element.
If you need to add cursor: pointer to pseudo element only, than only way is to add child element
like:
<div><span></span>some text</div>
div{
font-size:2em;
position:relative;
display:inline-block;
}
div > span{
cursor:pointer;
}
div > span::before{
content:'X';
display:block;
text-align:right;
}
But than is no point to using pseudo class...
demo
HTML:
<div>
<div id="closebutton">
X
</div>
some text
</div>
css:
div{
font-size:2em;
position:relative;
display:inline-block;
}
div#closebutton{
cursor:pointer;
display:block;
text-align:right;
}
DEMO
demo
div{
font-size:2em;
position:relative;
display:inline-block;
border:1px solid #000;
margin:20px;
padding:20px;
}
div:after{
cursor:pointer;
display:block;
position:absolute;
height:20px;
width:20px;
top:-10px;
right:-10px;
content:'X';
font-size:15px;
}
<div>
some text
</div>
In order to make IE 7,8,9,10 behave like regular browsers that can deal with pseudo selectors, I always use IE7.js, a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues related to Internet Explorer. An alternative would be modernizr.js which is a good implementation to get pseudo selectors working with IE. I hope, that helps.
The code is exactly the same but it just isnt inline with the box above it.
Thanks in advance.
CSS
#menu {
margin-top:75px;
min-width:19px;
max-width:1920px;
height:40px;
background-color:#0F0;
border:4px groove #F00;
}
#header {
margin-top:50px;
max-width:1920px;
height:70px;
background-color:#000;
border:4px groove #F00;
If those are div or other block elements, you could use the CSS-attribute float.
I think you have part of the answer you are looking for already in your question.
If you have a block-element (or any other non-inline-element) and want it to behave like it is inline you can do so by setting the display-property:
display: inline;
If i have a ul, how do i set a border-bottom on all the li items except the last one? I'm also trying to make the width of the border 180px. here's my code:
HTML
<ul class="sideNav">
<li>History</li>
<li>Mission</li>
<li>Associations</li>
<li>Careers</li>
</ul>
CSS
.sideNav {
margin:0;
padding:0;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
width:216px;
background-color:#017dc6;
}
.sideNav li {
list-style-type:none;
text-align:center;
text-transform:uppercase;
width:180px;
}
.sideNav li a {
border-bottom:1px solid #80bee3;
width:180px;
color:#ffffff;
text-decoration:none;
display:block;
padding:18px;
}
Dec 13th, 2018: Note that there is no need to use this solution in today's modern browsers. You should feel free using the answer below mine li:not(:last-child) { border-bottom: 1px solid red; }
Without using JavaScript and not having to support IE7 and below (IE8 fails on the second one) there are three options you can use: :first-child, :lastchild and the + selector:
:first-child
li { border-top: 1px solid red; }
li:first-child { border-top: none; }
:last-child
li { border-bottom: 1px solid red; }
li:last-child { border-bottom: none; }
+ selector
li+li { border-top: 1px solid red; }
The problems arise if you need to support IE8 and your design doesn't allow you to put a border on the top of your elements as opposed to the bottom.
EDIT:
The fix to your width issue is that you're adding 180px to 2*18px of the a element, remove the left right padding, and set padding: 18px 0; and you'll be golden. (updated jsfiddle: http://jsfiddle.net/NLLqB/1/)
Here's a jsfiddle of it: http://jsfiddle.net/NLLqB/
Use :not(:last-child).
.sideNav li:not(:last-child) a {
/* your css here */
}
One way: You can override for the last one using a rule like below with :last-child (Since you tagged css3):
.sideNav li:last-child a {
border-bottom:0px; /*Reset the border for the anchor of last li of this ul*/
}
Demo
There are polyfills available for IE8, but if you can provide a classname for the last one and apply rule to it to reset the style would be of better support, rather than using css3 (if your intention is to support older browsers as well).
if you are using scripting language like jquery you can easily add a class to the last child as jquery takes care of cross-browser compatibility.
You can also use in-line CSS to correct this problem.
<li><a style="border-bottom:none" href="/careers.asp">Careers</a></li>
This will remove the border from the "Careers" link. Note that it will only work if you put that code in the <a> tag since that is what the border is being applied to, not the <li>.
The downside of this is that if you add something to the list, then the second-to-last list item will have no bottom border, and the last will.
Not the best solution, but an alternative one that accomplishes the same thing. Cheers!
Why is is that Block 1 doesn't render the expected styling and Block 2 does?
CSS
.test
{
height:3.85in;
width: 2.625in;
border: 10px solid blue;
padding-right:.25in;
padding-left:.25in;
padding-top:.25in;
text-align:center;
overflow:hidden;
}
.test label
{
font-size:xx-large;
color:Red;
}
Block 1
<div class="test" runat="server"><asp:Label runat="server">Test</asp:Label></div>
Block 2
<div class="test" runat="server"><label runat="server">text</label></div>
The output for the HTML for the two divs is identical.
ASP.NET Label server controls render as SPANs in Internet Explorer and not as HTML label elements. This causes your CSS selector to not be matched for Block 1, but it does match for Block 2.
My recommendation is to add a CSS class name to the ASP.NET Label server control so that it will match the CSS style you want applied to the span/label element.
Try the following:
<asp:Label CssClass="test" runat="server">Test</asp:Label>
.test
{
height:3.85in;
width: 2.625in;
border: 10px solid blue;
padding-right:.25in;
padding-left:.25in;
padding-top:.25in;
text-align:center;
overflow:hidden;
font-size:xx-large;
color:Red;
}
Variations on this question have been asked many times. Vertical centering with CSS is a challenge.
I have a particular scenario, dealing with a list displayed horizontally. The markup is like this:
<ul id='ul1' class='c'>
<li><a href='javascript:void(0)'>Fribble Fromme</a></li>
<li><a href='javascript:void(0)'>Fobble</a></li>
<li><a href='javascript:void(0)'>Foo Fickle Pickle</a></li>
</ul>
The style is like this:
ul.c {
height:52px;
text-align:center;
}
ul li a {
float:left;
text-decoration:none;
border: 1px solid Maroon;
padding:2px 12px;
background:#FFEF8A;
line-height:1em;
width:100px;
}
ul li a:hover {
background: #CCC;
}
ul li {
height:52px;
display:inline-block;
}
The resulting list looks like this:
But I want all the boxes to be the same height, and I want the text to be vertically centered in each box. I can set the box-height by adding a height style for the A elements. The result looks like this:
...which is close to what I want, but the vertical-centering isn't happening.
I can set line-height for the text, as suggested in this post, to do the vertical centering. I can even pick different values of line-height for different A elements, if I know which of the elements will get multiple lines of text. But I don't know which ones will require multiple lines.
How can I get it to center when some of the A elements have text that wraps?
Old question, but the answer can now be updated with Flexbox.
a {
height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
You could use display:table, etc. along with vertical-align:middle
ul.c {
text-align:center;
display:table;
}
ul li {
float:left;
}
ul li a {
text-decoration:none;
border: 1px solid Maroon;
padding:2px 12px;
background:#FFEF8A;
width:100px;
height:52px;
display:table-cell;
vertical-align:middle;
}
ul li a:hover {
background: #CCC;
}
Example: http://jsfiddle.net/kf52n/2/
I could not figure a way to do this in CSS. I found that I could do what I needed with Javascript, setting the padding-top and padding-bottom to appropriate values at runtime. The technique is to measure the "natural" height of the A element, then set the padding so that the A element is vertically centered.
here is the necessary js code:
function setHeightIntelligently(ulElement) {
var items, L1, i, anchor, availableHeight = ulElement.clientHeight,
naturalHeight, pad;
items = ulElement.children;
for(i=0, L1 = items.length;i<L1;i++){
if (items[i].tagName.toUpperCase() == 'LI') {
anchor = items[i].children[0];
naturalHeight = anchor.clientHeight;
pad = (availableHeight - naturalHeight)/2;
anchor.style.paddingTop= pad+'px';
anchor.style.paddingBottom= pad+'px';
}
}
}
function init() {
var element = document.getElementById('ul1');
setHeightIntelligently(element);
}
In the CSS, one must not explicitly set height or padding for the A elements. Doing that would cause the "natural" height to not be what we need it to be.
The result is like this:
To see it in action, go here.
in the css you have set the height and line-height to the same. Then you will get a rectangular box.
But still you are seeing space in the bottom the reason is due to padding
adding two values in padding adds top and bottom padding
padding: top bottom;
since it is 2 and 12 you are seeing huge space.
try this
height: 52px;
line-height:52px;
padding: 6px 6px; // here you have to tweak and see the output
vertical-align:center;
let me know it is working
line-height:250%; worked for me