In my site , there is a big space between each line . This is the css portions of that section. I have tried line-height but it is not working there.
#site-generator a {
color: #5D45A3;
font-weight: normal;
text-decoration: none;
}
You can check the site here . Check the footer area 'Latest News'. I would like to reduce the space between each post names.
Seems like you need to remove the height property from here:
.widget-area ul li {
font-size: 11px;
/* height: 23px; */ /* <- remove */
}
and here:
.widget ul li {
font-size: 11px;
/* height: 16px; */ /* <- remove */
}
Or set these heights as auto
Simply adapt the height value in your stylesheet to your needs.
Line-height should work to adjust the space between two lines.
.widget-area ul li {
font-size: 11px;
height: 16px; /* example */
line-height: 0.8em;
}
Press F12 in your favourite browser to access the developer console (I believe this works in the latest version of IE, FF and Chrome). Inspect the a element that has such an abnormal height. This shows that:
You are setting a line-height of 2.2em on #site-generator in style.css. If that style is deleted, it uses a line-height of 1.625 for body, input, textarea in style.css.
The distance between two li's in that menu is defined by .widget-area ul li and is 23px. If that style is deleted, the css for .widget ul li is used instead with a height of 16px.
You'll need to alter the first one to put the text of one link closer together. You'll need to alter the second one to put the different links closer together.
For the post titles use
#site-generator .widget_recent_entries a{
line-height:14px;
}
in
.widget-area ul li {width:auto !important;line-height:18px;}
Related
This issue appears in Internet Explorer and I have not been able to resolve it:
#test ul li {
list-style-type: disc;
float: left;
margin-left: 10px;
font-size: 16px;
}
The code above works fine in Firefox and Chrome, but in IE7 it's not displaying the bullets.
I have tried deactivating the attribute float: left and the bullets are displaying, but the list is vertical. My list must be aligned horizontally with the bullets.
I have tried add the follow attributes:
list-style-position: inside and outside and nothing.
using display: inline makes the bullets disappear.
#test ul {
list-style-type: disc
}
and nothing
I have tried changing the margin with different values, adding padding with different values, and nothing.
You could make the lis inline and the list-style of the ul to none and then emulate the bullets using the :before pseudo element:
ul {
list-style: none;
margin: 0;
}
li {
display: inline;
}
li::before {
content: "o ";
}
Of course, instead of "o" you could use an unicode character representing a bullet.
Create the bullet with an image and set it as the background.
try with :
ul{
list-style:disc outside none;
padding:0px;
padding-left:12px;
margin-left:8px;
}
Demo
might be a bit late but including a span tag inside with display:list-item seems to fix the problem when the margin and padding adjustment fails..refer https://stackoverflow.com/a/18337398/1776573. It worked for me when the margin and padding adjustments dint solve the issue..
As title, I'm adding icons using .icon-*. When adding an icon to an hyperlink:
Email me!
The content inserted by content property shows the underline text-decoration on hover. I'd like to disable the text-decoration only for the content before:
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: 'IcoMoon';
font-style: normal;
speak: none;
}
.icon-mail:before {
content: "\37";
}
[class^="icon-large-"]:before, [class*=" icon-large"]:before {
font-size: 48px;
line-height: 48px;
}
a[class^="icon-"]:before, a[class*=" icon-"]:before {
margin-right: 5px;
vertical-align: middle;
}
I've tried this but it's not working (decoration is still visible):
a[class^="icon-"]:hover:before, a[class*=" icon-"]:hover:before {
text-decoration: none;
color: white;
}
Insert display:inline-block; in your css. Something like the one below:
.icon-mail:before {
content: "\37";
display:inline-block;
text-decoration:none;
}
Here is the JS FIDDLE:
http://jsfiddle.net/73p2k/18/
As the :before pseudo-element is rendered as a descendant box (more specifically, just before the first child content box) of its generating element, it obeys the same rules its normal descendant boxes do with respect to text-decoration:
The 'text-decoration' property on descendant elements cannot have any effect on the decoration of the ancestor.
See these answers for more details:
CSS text-decoration property cannot be overridden by child element
How do I get this CSS text-decoration override to work?
There isn't any good way around this... the only alternatives that come immediately to mind are:
Wrap the text in its own span element, then apply text-decoration to that span, as shown by skip405. The disadvantage is, of course, extra markup.
Use an inline block background image instead of inline text in an icon font with your :before pseudo-element (I've also corrected the inconsistencies with your class selectors):
[class^="icon-"]:before, [class*=" icon-"]:before {
display: inline-block;
width: 1em;
height: 1em;
background-size: contain;
content: "";
}
.icon-email:before {
background-image: url(icon-mail.svg);
background-repeat: no-repeat;
}
.icon-large:before {
width: 48px;
height: 48px;
}
a[class^="icon-"]:before, a[class*=" icon-"]:before {
margin-right: 5px;
vertical-align: middle;
}
The advantage this has over skip405's solution is that you don't have to modify the HTML, but given that it uses SVG vector background images and background-size, it won't work in IE8.
If you do need IE8 support, then you have to fall back to bitmap images:
.icon-email:before {
background-image: url(icon-mail.png);
}
.icon-email.icon-large:before {
background-image: url(icon-mail-large.png);
}
A pseudoelement selector must be the last item in a selection chain.
You can apply a style to element:hover:before but not to element:before:hover.
You can set height & overflow:hidden for :before element, and text-decoration will not be visible :)
Tried some things using just the a tag as a markup, but alas. A possible workaround for you may be to inner wrap the link in another element, a span, for instance. Thus you can have the underline on this element (instead of a pseudoelement) - which is perfectly controlled by css.
A live example is here: http://jsfiddle.net/skip405/fQHUH/
This solution worked for me. It excluedes the pseude-elements.
But for this you need to wrap the content of the <a> tag into an extra element.
a:hover { text-decoration: none; }
a:hover > * { text-decoration: underline; }
<span>content</span>
Is there a way to increase the size of just the bullet list-style-type using CSS? I don't want to increase the size of the bullet text, just the bullet type. I can't use images or JavaScript either. It has to be something I can embed inside <style> tags within the <head> tag.
Might not work in old version of IE.
li:before{ content:'\00b7'; font-size:100px; }
Demo
For IE6:
Without javascript or images, I would recommend putting a <span>ยท</span> in the beginning of every list item and styling that.
I have had to do something similar. My method was to add a span tag around the text within the li:
<li><span>Item 1</span></li>
<li><span>Item 1</span></li>
Then you can increase the font-size of you li and reduce the font size of your span:
li {
font-size: 20px;
}
li span {
font-size: 14px;
}
You may need to adjust line-heights and margins to accommodate for the extra li sizing. But this method will also allow you to colour the bullets separate from text.
To increase the size of the bullet you can use
li::marker
{
font-size: 2rem;
font-weight: bolder;
}
and to change bullet character, the content property will work
li::marker
{
content: '\2746';
font-size: 2rem;
font-weight: bolder;
}
When you say you can't use images, do you mean you can't edit the li tags to add images, or that you can't use an image at all?
On the li elements, you can set the list-style-image property.
li {
list-style-image: url('/imagepath.png');
}
This can still go in your head tag without editing the markup of the list.
no way that I'm aware of.
but you could fake it by using :before
ul,li{list-style:none;}
li:before{content:"o";font-weight:bold;}
put any background color for the (ex: .menu li a )tag and add padding for that you will get like a box then border-radius and then for ( .menu li ) apply padding for left and right for spacing... (explained in reverse order)
#header .nav-primary ul li{float:left;display:block;margin:0;padding:0 22px;}
#header .nav-primary ul li a{text-decoration:none;color:#030;background:#CBCBCB;border-radius:5px;padding:5px 0px;}
Was looking for a solution to this too and found that if you nest a p inside li, you can style the bullets and bullet text separately.
<div>
<ul>
<li><p>Hello</p></li>
</ul>
</div
div ul li {
/*this will style the bullets*/
}
div ul li p {
/*this will style the text*/
}
In my case I have, simplified a nested list and enclosing div, i cant change it, it's created by drupal menu.
I want to clone the menu of a hardcoded site (edit removed link)
How would i "embed" the boxes ( ul li ul li items ) in the submenu, is it possible in just a list in block display? Do i need a z-index for them? Or float? Is float even possible on list items?
In general i understand the cascading thing but still do hard in writing css with few repeates. Some tips for shortening would be nice.
My primary question for now is why the style of the last entry (marked) is overwritten. Does the order in file play a role?
#block-system-main-menu .content {
font-size: 17px;
font-weight: bold;
}
#block-system-main-menu div ul li {
width: 207px;
margin: 4px 0px;
}
#block-system-main-menu div ul li {
display: block;
height: 38px;
background: url(/sites/all/themes/schott/menuitembg.gif);
}
#block-system-main-menu div ul li .active-trail {
display: block;
height: 60px;
background: url(/sites/all/themes/schott/menuitembg_p.png);
}
div ul li ul li.leaf { /* both styles are overwritten */
display: inline-block;
background: url(/sites/all/themes/schott/subitem_passive.gif);
}
The last CSS rule written is the one that is used, but specificity takes priority over cascading.
An article on specificity: http://css-tricks.com/specifics-on-css-specificity/
So #block-system-main-menu div ul li .active-trail is the most specific and will overwrite other rules.
yes, the order of CSS definitely plays a role. Anything declared after a style overwrites the previous one. Also, if you want to overwrite default styles of some sort, include them after the default ones (whether you write them in the same file, or just do a meta link to your own stylesheet).
Change it to:
#block-system-main-menu div ul li ul li.leaf {
I'm slightly confused by what you're asking, but in general, if you have two identical rules, the later will be applied. However, if rules are not identical, the more specific rule will take precedence.
Edit: sorry, I can see you just figured that out
My custom drop down menu has a really large change in top and bottom padding.
UPDATE Javascript, CSS & HTML included in fiddle [PHP removed]
First off, I didn't realise I could share a fiddle ^^
Pretty epic site.
I'ma keep debugging, but thought I'd post it here to see if anyone can spot where the problem is :)
In your fieldset css you are changing the line-height, which is also applied to the dropdown.
You have to set the line-height in the css for the dropdown:
.dropdown,
.dropdown li /* or whatever other selector is also needed */
{
line-height: 1em;
}
EDIT:
That seems to fit quite good:
.dropdown,
.dropdown li,
.dropdown span,
.dropdown a {
padding: 0;
line-height: 3em;
}