I have an ajax htmlextender on my page. Commenting something with it. When comment text has "enter" htmlextender gives it < p > tag. I use divs while showing comments.
<div style="background-color:#ff0000; width:95%;"><p>note line 1</p><p> note line 2</p></div>
<div style="background-color:#ff0000; width:95%; text-align: right; font-size: 11px;">Name Surname</div>
<div style="background-color:#ff0000; width:95%; text-align: right; font-size: 11px;">02.08.2012 10:04</div>
The output like this:
How can i clear the empty line?
Remove the paragraphs' margin and/or padding:
p {margin: 0; padding: 0}
You can remove the margin from the p element. you might also want to remove the padding is there is any (it's not there by default). It is a good idea to be sure none the less.
A good tool for checking what styles that are applied, are the browsers developer tools. In firebug andothers, you can inspect the element to get a list of applied styles. If you are in Windows you can get this by pressing F12.
Just add this to your CSS file. Or include it in the header.
p { margin: 0; padding: 0; }
You can also apply it to the p element like this, but it is bad practice as you have to separate content and presentation. Do this now, it will make your life easier when you need to change something.
<p style="margin:0; padding: 0;">This is bad</p>
The space will be due to margins and padding applied to the p tag. Add the following to a <style> tag in the header, or an external stylesheet.
p {margin: 0;padding: 0}
If you put p { margin: 0; padding: 0; } in your CSS file it will affect all your paragraphs from all the pages the have that external stylesheet.
And if you use: <p style="margin:0; padding: 0;">, I will have to agree with Allan that is not a got practice to have inline CSS.
Another solution would be to use <span> instead of <p> like this:
<div style="background-color:#ff0000; width:95%;"><span>note line 1</span><br/><span> note line 2</span></div>
Hope this helps! :)
Related
I have a question about CSS, i don't know how to removestyles of a class with an inline CSS code.
Let me explain more,
I have a CSS file named styles.css
In this file for example my h2 has some styles, now in my article i want to use h2 but i want to remove h2's default styles(written in styles.css) for this heading.
I guess there should be a way for this case, but i don't know how?
Please tell me this css code and teach me something new.
Thanks
Edit:
Please take a look to bellow picture. As you can see this h2 has some styles, can you see the pink vertical line in right side?
Now i want to remove this h2's styles with a css code. I guess something like my heading here should exist in CSS3. Am i right? Is there any css code for removing external css styles with an inline css code?
https://preview.ibb.co/m4BLda/Screenshot_2017_09_04_01_44_09_1.png
Here is the code:
h2 {
border-right: 4px solid #E20070;
font-size: 22px;
margin: 1.5em 0;
padding-right: 1em;
font-family: "Yekan",'irans',tahoma;
font-weight: normal !important;
}
You said inline, but you should really keep your styles in a separate stylesheet file. Now, in your styles.css file add your own class:
/* styles.css */
h2 {
font-size: 18px;
}
.my-other-title {
color: red;
border-right: 0;
}
<h2>My title</h2>
<h2 class="my-other-title">My other title</h2>
Why does this even work? Because of CSS specificity:
Specificity determines, which CSS rule is applied by the browsers
Take your time learning more by reading this article
Remove the existing class for your heading if there is and use your own custom class instead of writing everything inline.
h1{
font-size:15px;
color:blue;
}
/* target your h1 element */
.custom-css{
font-size:25px;
color:red;
}
<h1>Heading with general css<h1>
<h1 class="custom-css">Heading with custom css</h1>
Although its not good to change the semantic of an HTML Element.
CSS - Default for h2 (from external css source)
h2 {
border-right: 4px solid #E20070;
font-size: 22px;
margin: 1.5em 0;
padding-right: 1em;
font-family: "Yekan",'irans',tahoma;
font-weight: normal !important;
}
You want to override the default css through inline css. Try using below code for your h2.
<h2 style="border-right: 0px; padding: 0; margin: 0;"> Hello </h2>
You can also add a class to the h2 and call the class to your stylesheet if this style is applied to most of the h2 tags. Try to avoid inline css if possible, it may cause loading time.
<h2 style="color:white; font-size:80px"> My Cool Text </h2>
You have to write what you want to replace, for example, I changed color here.
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.
I have this div as part of an include fine:
.connier {
text-align: left;
padding-top: 5px;
padding-bottom: 10px;
padding-left: 10px;
background-color:#CCC;
}
and use it thus:
<div id="connier">
<!--#include virtual="/cover/cover.asp" -->
</div>
But I would like to use same include file on another page but this time, with transparent background but it is still rendering same background.
Here is what I attempted
.connier.the_otherbg {
text-align: left;
padding-top: 5px;
padding-bottom: 10px;
padding-left: 10px;
background-color:transparent;
}
<div class="the_otherbg">
<!--#include virtual="/cover/rents.asp" -->
</div>
what am I doing wrong?
Thanks a lot in advance
Change your CSS to this:
.the_otherbg {
background-color:transparent;
}
Making sure that it is defined after .connier. You also need to make sure your div has both classes:
<div class="connier the_otherbg">
<!--#include virtual="/cover/rents.asp" -->
</div>
I would do it this way so that the the_otherbg div inherits any changes to connier. Only define what is different between them. In the future, when you need to change something, you will only need to do it in one place.
Demo: http://jsfiddle.net/CF88G/
I think all you should do is this:
.connier {
text-align: left;
padding-top: 5px;
padding-bottom: 10px;
padding-left: 10px;
background-color:#CCC;
}
.transparent
{
background-color: transparent!important;
}
Remember we are working with CASCADING style sheets (CSS), so it is important that the transparent class is found UNDER the other class, if not, use the '!important' (this should not be used frequently though!).
Also note that the 'class=' attribute is used in div. To bind some css to a div using the 'id', then the class should be like '#myDivId' (in my opinion this is less usable)
For your normal div use:
<div class="connier"></div>
and for your other div use: (the div will have two classes at the same time)
<div class="connier transparent"></div>
This way you can make your css much more usable and maintainable.
Hope this cleared it up a bit
Well I'd love to know how the first one works if you're using a class selector to target a div that is marked by its ID, but never mind that.
The second selector is targeting elements that have both the classes connier and the_otherbg, whereas the element you want to target only has the_otherbg. Try just removing the .connier from the selector.
I am coding a simple HTML e-mail and I am experiencing strange behaviour in gmail and Outlook 2003 and 2007. There is a white space below all images. My inline styling for images looks like this:
border: none;
font-size: 14px;
font-weight: bold;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
text-transform: capitalize;
margin: 0px;
padding: 0px;
All styling is taken from MailChimp HTML code and should avoid inconsistencies. Do you have any experiences with this? Images are inside table td markup. Table cells have cellspacing and cellpadding set to 0 as well. Here is a screenshot of the problem: http://cl.ly/EnFt/o
Images are inline by default. That small gap you're seeing is the space for descenders such as those on 'g' and 'q'. To combat the problem, you need to explicitly set all images to be block elements, like this:
<img src="path/to/img.jpg" style="display:block;" border="0" alt="My Image" />
You can use a service like premailer, which lets you add this style in the head of your HTML file, and will automatically place it inline for you.
It's worth mentioning that display:block; will, obviously, mean that each image should be in a separate td or similar: images that need to display side-by-side will be pushed down below each other.
Just use style="display:block;" to image tag.Its works fine.
write border:0; in your <img> tag. Like this:
<img style="vertical-align:top; border:0;">
My first post here and unfortunately it won't be that exciting and I need an answer that includes IE6.
To get space between paragraphs, I'm styling my <p> tags like this:
div.content_cms p {
margin-top: 0px;
margin-bottom: 15px;
padding: 0px 15px 0px 0px;
}
The margin bottom to space the paragraphs. This of course works fine. But then I also need to style a link with html is this:
<p>Text </p>
When there is a link as in the example above, I don't want the margin-bottom to be applied. I tried to fix it with this:
div.content_cms p a {
margin-bottom: 0px !important;
}
Which of course doesn't work.
I'm adding a class to the <a> tags with jQuery so I can automatically add an icon to links. I tried adding
margin-bottom: 0px !important;
to the class I'm adding with jQuery but that didn't work either.
What's the best way to style spacing between <p>paragraphs</p> with text but not paragraphs with links?
Thank you.
You can easily do this with jQuery:
$('p').has('a').css('margin-bottom', 0);
Live demo: http://jsfiddle.net/NyjvT/
If you need to set multiple styles, then consider this:
$('p').has('a').addClass('whatever');
CSS:
p.whatever { margin-botttom:0; font-size:20px; ... }
I don't think you can.
Your best bet is to add a class to those particular <p> elements, and override the margin on those:
div.content_cms p.nomargin {
margin-bottom: 0px;
}
<p class="nomargin">Text</p>
If this is not possible on the server side, you could do some jQuery hackery to take care of it.
Maybe there's some CSS3 magic that could be used, but I'm not sure of that; and since you want IE6 support, it's out of the question anyway.
This is not possible using only CSS.
CSS (Cascading Style Sheets) works only down the document tree.
The reason for this is performance.
For more info read this:
http://snook.ca/archives/html_and_css/css-parent-selectors
http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors#comment_3940
You need to use javascript for that to work.