I'm having some trouble with the margin-left CSS property. I have some nested unordered lists. This is what the list looks like with no change to the margin-left (in both IE and Chrome):
I wanted to decrease how much each list is indented so I added this CSS code:
ul li ul
{
margin-left: -25px;
}
This works fine in Chrome, which displays this:
However, IE 8 displays it like this:
I guess the origin of where the margin starts is different between the two browsers? How can I achieve the desired affect of decreasing the indentation of nested unordered lists among all browsers?
You should look into "zero-ing out" the margin and padding for ul and li's like so:
ul,li { margin: 0; padding: 0; }
As different browsers have different defaults. From there, you should be able to add your own margins and paddings as desired.
It's a good thing to use always a CSS reset. This will avoid having differences among browsers. You could use a universal reset like;
* {
margin: 0;
padding: 0;
outline: 0;
/* etc */
}
Or going a bit deeper and use Eric Meyer's one or anyone else. There are a few.
Anyway, in your case instead of play with negative margins, you should reset your margin and padding for ul and li elements:
ul, li {
margin: 0;
padding: 0;
}
I suggest http://necolas.github.io/normalize.css/ or a standard reset css stylesheet
Different browser set different default settings.
Related
When we are creating a web page using bootstrap we can set margins. But web browser also gets some margins. Although code as div(class="container-fluid") or code as margin:0; and padding:0; based on the container in the CSS file, I couldn't solve the problem. Can you help me?
Some browsers have a margin on the body tag. Set that to 0 somewhere in your css.
body {
margin: 0;
}
This is Browser default margin for body:
Fix It Like this:
body {
margin:0;
}
Set the margin to zero on any element is simple just type something like
body{
margin:0
}
Although sometimes bootstrap has his own margin rules included like setting margin on h tags, you could remove them as well by using more specific rules (read about specificity here) or by using important
h4{
margin: 0 !important
}
The reason for that is browsers have default styling for elements.
To reset margin only on body element you can use:
body {
margin: 0;
}
To reset all styling (which is not so-bad thing) in all browsers you can use css library called normalize.css.
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
This library is used by big companies as GitHub, Twitter, Soundcloud, Guardian, Medium and many others.
Although you put container-fluid, sometimes it doesn't make the width 100% fit the screen because browsers make a default margin and padding.To make it fit the screen you have to do like this.
body{
padding: 0;
margin: 0;
}
If it doesn't work make them important as following.
body{
padding: 0 !important;
margin: 0 !important;
}
All the browsers apply their own default styling to html elements. That leads to difference of views on different browsers. Is there any way to prevent browsers from doing this?
Yes you can, you need to use CSS Reset, this will generalize the styles, in other words it will reset the styles across the browsers.
Personally I don't use these, instead I use the snippet below which is more than enough for me.
* {
margin: 0;
padding: 0;
outline: 0;
}
If you want to stabilize more elements, you can make your own, like you can use the below to have pointer cursor when a user hovers any button or link on your website..Yes now that's pretty basic User Experience, than you can use
button, a, input[type=button], input[type=submit] {
cursor: pointer;
}
Or say don't underline the links and inherit the parent color, so I use
a {
text-decoration: none;
color: inherit;
}
This way you can make your own, I prefer this way.
Just a side note, when I go responsive, I change the * snippet to
* {
margin: 0;
padding: 0;
outline: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Note: Using Reset Stylesheet won't reset any inheritance, it will only
reset browser defaults(which won't help you always to make cross
browser websites) but will prevent loads of cross browsers issues commonly like padding, margin, line-height, base font etc.
You might want to look into Normalize.css. It;s used by a large number of frameworks and other reset boilerplates.
You can go for reset.css. This should be the first one to be applied to reset any browser specific style..
http://developer.yahoo.com/yui/reset/
I have some CSS for a Wordpress blog. I want paragraphs to indent, but blocks of code to align left to the margin. This is the code that I have---all of these elements appear with a <div class="postContent" tag, and Wordpress automatically wraps post text blocks in <p> tags.
First, I've set all paragraphs within the div tags to indent:
.postContent p {
font-size: 1.2em;
text-indent: 2.5em;
text-align: justify;
line-height: 1.6em;
margin: 1em;
}
Then, Wordpress sets aside the first paragraph as a .lead paragraph. I want that to indent, provided it's not code:
.postContent p.lead code {
margin: 0;
text-indent: 0;
}
That works just fine. However, all the other code paragraphs are still indenting, so I added this to the stylesheet:
.postContent p code {
text-indent: 0;
padding: 0;
padding-top: 2em;
padding-bottom: 2em;
}
No dice. The code blocks are still indenting according to the .postContent p rule.
Setting text-indent on a code element inside a p element does not affect the indentation of the p element. It does not affect anything, really, since text-indent applies to block containers only.
If the markup is <p><code>...</code></p> so that the p contains nothing but the code, you can add
.postContent p code { display: block; }
and then consider what to do with vertical spacing, which may be a bit excessive after the addition (namely margins of p plus padding of code).
It's really hard to say without seeing both the source for the html and the actual css code, but I'm guessing your styles are being overridden by a more specific style.
The best thing for you to do is install Firebug in Firefox (really, the best development tools for a browser, IMHO) and inspect the targeted elements. The inspector should display all the styles being applied to the element. The overridden styles will have a strikethrough it. If you see they are being overridden, make your styles more specific. Otherwise, if you don't see your style listed, then you're not correctly targeting it.
Hope that helps. Good luck.
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.
Something seems to be breaking the display of lists (ul and ol) in IE7. They work fine in IE8, FF, Safari etc but not IE7 and IE6.
I just want them to be displayed normally: ul lists should show bullet points and ol lists should show numbers.
I've narrowed it down to the first 1000 lines of code in styles_layout.css... ;)
Actually, I believe it has something to do with the following styles:
* { margin: 0; }
html, body { height: 100%; }
.wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -39px;
}
Have a look here: http://www.olvarwood.com.au/olvarwoodonline/mod/forum/discuss.php?d=2, login as a guest
IE7 and below style ul elements like this:
ul {
margin-left: 40px
}
Good browsers style ul elements like this:
ul {
padding-left: 40px
}
It's better explained by Eric Meyer here:
https://developer.mozilla.org/en/Consistent_List_Indentation
and the section "Finding Consistency" will tell you what you do.
This is because the ul/li elements have inherited the zero-margin property.
I solved it myself through trial and error:
* {
margin: 0;
}
This stops Ol's and Ul's from displaying properly in IE7 and IE6. I have no idea why...
I won't even pretend to be an expert on css, I get my butt kicked by it all the time, but I just happened to run into this, although my situation was a bit different.
I ended up having to specify a class tied to ul and set the list-type.
.classname ul { list-style disc inside }
Try that and see if it helps.