I am using Twitter Bootstrap, but can't understand
How to set margin 0 0 9 15 for
[ul class="taxons-list"]
On the my site vk-magazin.com
Following result I want to achive:
Try this CSS rule:
ul.taxons-list {
padding: 0;
margin: 0 0 9px 15px;
}
I edited your HTML using Firebug and this style and it works just as your picture intends.
Related
I have added schema markup to my website, and I have placed it at the bottom on my page in the footer. On my CSS it says
#copyright {
float:left;
margin:13px 10px 0 23;
width:380px
}
But when I browse it through Firebug it doesn't show the margin, only the float and width. It was showing it before, and all I changed was the first and last numbers of the margin trying to get the schema markup exactly where I wanted it.
One thing I see is that the 23 in your margin list does have 'px' on it. Could that be the issue? Try updating it to:
margin:13px 10px 0 23px;
You have syntax errors:
This:
#copyright {
float:left;
margin:13px 10px 0 23;
width:380px
}
Should Be:
#copyright {
float:left;
margin:13px 10px 0 23px;
width:380px;
}
Notice the missing semicolon after width. This could cause the previous styles from being read. Also the left margin won't be read because you didn't define a unit.
This should work:
#copyright {
float:left;
margin:13px 10px 0 23px;
width:380px;
}
I have downloading the responsive framwework http://996grid.com/ and in the Normalize.css it has default settings of padding: 0 0 0 40px; for various items. for example
menu,
ol,
ul {
padding: 0 0 0 40px;
}
dd {
margin: 0 0 0 40px;
}
Can someone explain the reasoning of this as when I add a ul it adds 40px onto it... If I remove the 40px in the normalize will it effect browser support?
Thanks for your help
In the official Normalize.css (available at https://github.com/necolas/normalize.css/), there is no such padding, however most browsers will add this padding anyway to simply give the list some indentation from regular text.
If you want to remove this, simply modify the provided CSS or override it within your own CSS:
menu,
ol,
ul {
padding: 0;
}
dd {
margin: 0;
}
It's up to you to style your own documents however you like; aside from the default styles defined in the HTML specification, most browser default styles are simply there to make simple unstyled documents a bit prettier.
According to Erik Meyer it's a remnant from Mosaic. He said it at the end of Web Platform podcast episode 139
On my website I've got a style (class="more") that is overrunning its bounds and doing something strange. I'm not enough of a css guru to know how to fix this. Please take a look:
http://www.zerogravpro.com/
Now look at my screenshot describing the problem:
https://www.chainedpayments.com/temp/zgp.png
How can I fix this? Additionally I really like that little "more" snippet of image and css, and would love to be able to use it in more places. But the css is really awkward and when I try to use class="more" in other places, it doesn't look right. In fact just using it in the 1 place on my home page is causing the problem shown in the screenshot.
I'd really appreciate any help offered.
You set it so all <p> tags inside #bodyPanel have that image as their background.
Correct way to do it:
HTML
<p class="man_bg">Blah Blah blah</p>
CSS
#bodyPanel p {
margin: 0 0 0 54px;
padding: 0 42px 35px 150px;
color: #0F0F0F;
}
#bodyPanel p.man_bg {
background: url(images/papersandsky.png) 0 0 no-repeat white;
}
#bodyPanel p{background:url(images/papersandsky.png) 0 0 no-repeat #fff; margin:0 0 0 54px; padding:0 42px 35px 150px; color:#0F0F0F;}
You have that background set to apply to all p tags within anything containing the id of #bodyPanel
You need to probably be more specific with your selectors and add a class to any p tag where you want the background.
On the site I'm working on, for some reason the margin is needing to be different for Safari than in FF, IE8, Chrome & Opera? I have a link that I want lined up next to a label. It's lining up fine in all but Safari which needs a 12 pixel difference. Here's a screenshot to better describe the issue: Click
The Safari screenshot shows the label down too low. This is the CSS I use for the working 4 browsers:
.submitter a {
float: right;
margin: -2px 0 0 2px;
padding: 0 !important;
}
And here's the code that works for Safari, however, usig it throws the link UP 12 pixels.
.submitter a {
float: right;
margin: -14px 0 0 2px; Works in Safari & Chrome
padding: 0 !important;
}
Anyone able to shed some light on this? TIA
This seems to sort it out:
.submitter a {
float: none;
display: inline !important;
margin: 0 0 0 2px;
}
It's really very convoluted in there due to nonsensical use of the cascade.
Some rules are being applied to elements where they really shouldn't be due to selectors like:
.box_777 ul li a
You'd be better replacing that selector with something like:
.individual-likes > a
But, it's difficult to predict how improving your selectors will change how your page displays.
The reason it goes up like that could be because of the - pixel value. Are they nested correctly in the div? And did you apply the same alignment (CSS, Html, etc.) for the Chrome buttons?
There is a lot going on, but you might try one of the following:
.submitter .smalltext { float: left; }
(or)
Move the "follow" anchor tag before the "smalltext" span
Looking at the site, the anchor is being set to block by .box_777 ul li a and then floated right by .submitter a.
If I remove the display: block; and float: right; things align.
i have an issue with my css where if i use margin: 0 instead of margin-top: 0, for header p, the header { margin: 0 0 20px; } will be as good as not there. isit supposed to be like that? if i see what happens in firebug, its because the margin-bottom of header collapsed into the next sibling, the section.
html
<header>
<h1>ToDo List</h1>
<p>HTML5 Offline Capable Web Application</p>
</header>
css
header { font: 24px/1em Notethis; color: #666; margin: 0 0 20px; }
header h1 { font: 60px/1.4em Hetilica; margin: 0; }
header p { margin-top: 0; }
By default, Firebug only show you part of the story.
To see what really happens when you change margin-top: 0; for margin: 0 0 0 0;, please click on the arrow right to the Style tab (above 'header p' on your snapshot) and select "Display default CSS properties" or sth like that and you'll see downward that html.css already styles p as:
p {
display: block;
margin: 1em 0;
}
Beware, do NOT modify system styles or you'll have to restart Firefox, reopening tabs won't be sufficient.
BTW this 1em margin is what you see in HTML without any style (menu Display / Page style / No style in Firefox or CSS menu of Web Developer Toolbar) : your paragraphs have some vertical margin.
So basically you erased a 1em bottom margin.
I think that the problem here is that your header element is not actually rendering any margin applied to it at all. The space you are seeing is actually the result of a default margin applied to header p.
The reason I say this is that many browsers will not automatically treat the header tag as a block-level element unless explicitly defined as such:
header { display: block; }
After applying this statement to header in your CSS I could successfully apply header p { margin: 0 } and retain the margin specified in header itself. Removing this statement will revert back to the behaviour you are seeing.