I am having some trouble with a font size with CSS. Below you see I have .post I have < pre > tags that are nested inside of the post class so should the css I have for the pre tags work below? It is not working but I can't figure out why? The text inside my pre tags end up being 15px instead of 12px
.post {
width: 100%;
clear: both;
padding: 10px 0;
border-bottom: #CBCBCB 1px solid;
background: url(images/post_element.gif) no-repeat 126px 21px;
font-family: arial;
font-size: 15px;
}
.post pre{
font-size: 12px;
}
http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css
.post pre{
font-size: 12px !important;
}
Should work, but to answer your questing we need to view all html + css because it really depends...
In a vacuum, that code should work. However, base tag styling can vary browser-to-browser and <pre> tends to be a bit of an odd one. My first thought is that some other style is overriding it.
Have you used Firebug (or some other developer console) to take a look at the styles being applied and the computed style for the element? That should put you on the right track.
This was a weird issue, I had to end up changing the class and font size for all the other text, everything except the pre tags to get it to finally quit resizing after page load from my JS syntax highlighter
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 am trying to implement a pagination control on the following page:
http://equiniti.hireserve-projects.com/vacancies.html
As you can see when viewed in a decent browser such as Firefox, the pagination controls will appear nicely inline as shown below:
However, when viewed in IE7 and IE8, the pagination controls appear as follows:
By default, these elements should all appear inline so I do not understand why they are overlapping in this way. The following CSS is applied to these elements:
.paginationControls a{
background: none repeat scroll 0 0 #FFFFFF;
font-size: 20px;
margin-left: 3px;
padding: 12px 10px;
color: #424242;
}
.paginationControls a:hover,
span.arrowNext:hover,
span.arrowPrev:hover,
.paginationControls a.jp-current
{
color: #ffffff;
background-color: #E41800;
}
span.arrowNext,
span.arrowPrev{
background: none repeat scroll 0 0 #FFFFFF;
color: #424242;
font-size: 20px;
margin-left: 3px;
padding: 12px 10px;
}
The following is the structure of my HTML:
<div class="pagination">
<span class="arrowPrev">« Previous</span>
<span class="paginationControls"></span>
<span class="arrowNext">Next »</span>
</div>
Could anyone explain why this is happening when spans should appear inline by default? I've tried the usual trick of ensuring that the parent element isn't floated but this doesn't make any difference in this case.
Any help would be greatly appreciated. This is in native IE7 and IE8 on a virtual machine.
I am not able to test IE8 but please try applying:
.pagination span{
display:inline-block
}
As I recall span tags do not render as block level elements by default.
You should also specify a min-height and min-width to force a block.
Alternatively use a div instead of a span tag.
I have a right sidebar in my design that pulls in testimonials dynamically, if there are any.
The HTML looks like:
<h4> dynamic content</h4>
Here is my CSS:
#testimonials {
background: #eeeeee;
padding: 30px;
width: auto;
height: auto;
}
#testimonials h4{
font-size: 20px;
line-height: 30px;
font-family: "freight-big-pro";
font-style: italic;
border-bottom: 1px solid #666;
padding-bottom: 20px;
padding-top: 20px;
}
#testimonials h4 strong{
display: block;
font-family:"freight-sans-pro", sans-serif;
font-style: normal;
font-size: 12px;
}
The issue is that when there is no content in the <h4> element, the style is still being picked up and adds a background and a border as specified in the CSS. I am assuming that it's generating the h4. Is there a way to have it be empty if there is not any content?
Update:
I am trying this and it seems to work in jsfiddle, but not in the file:
<script type="text/javascript"> $(document).ready(function(){ if ($("#testimonials").text().length < 65) { $('#testimonials').hide(); } });</script>
It counts the HTML inside as text, I think.
Update
Here is another JsFiddle, but this also probably won't work for the OP as it uses jQuery.
jQuery
//onload:
checkStyle();
//checks if the h4 is empty, and hides the whole div if so.
function checkStyle ()
{
if ($('#testimonials h4').is(':empty'))
$('#testimonials').hide();
else
$('#testimonials').show();
}
This does not necessarily work for what the asker is looking for, but could be beneficial for future readers. It is for not styling the h4, not the parent div as op wants.
Assuming you are ok with CSS3, and the <h4> is literally empty, you can modify your CSS to use the :not and :empty selectors.
CSS
#testimonials h4:not(:empty) {
font-size: 20px;
line-height: 30px;
font-family:"freight-big-pro";
font-style: italic;
border-bottom: 1px solid #666;
padding-bottom: 20px;
padding-top: 20px;
}
#testimonials h4:not(:empty) strong {
display: block;
font-family:"freight-sans-pro", sans-serif;
font-style: normal;
font-size: 12px;
}
Here is a JsFiddle. You can add content to the h4 to see how it works.
Alternatively, you could even do the opposite, and have a display:none; for empty <h4>s:
#testimonials h4:empty{
display:none;
}
Give #testimonials a display: none; property in your CSS; then, just before whatever Javascript code you use to pull in testimonials finishes running, have it check whether it actually retrieved any, and set display: block; on #testimonials if so.
Somewhat related: When asking questions on Stack Overflow, it's ideal to post as much information as possible, as for example the code you're using to retrieve testimonials dynamically -- it's mentioned in the question and its behavior affects what you're asking about, which makes it well within scope. If you'll update your question with your testimonial-retrieving code, I'll update my answer to show a specific solution.
Do a display:none on your css initially when there is no content.
Use javascript or jquery to show content. Styling will be applied when the content gets displayed.
Initially when there is no content:
#testimonials {
background: #eeeeee; padding: 30px; width: auto; height: auto;
display :none;
}
When content gets generated dynamically use:
$("#testimonials").show();
This seems like alot of front side work when it isn't needed. If you are able to output content into the h4, then you are able to output and additional tag.
<section id="testimonials"></section>
Server Side pushes out:
<h4>all my content</h4>
Then your CSS will work without any work from js.
Most likely you have one for each testimonial?
UPDATE
In my style sheet I have a conflict with these snippets. If I keep this one
<style type="text/css">
::selection{ background-color: #E13300; color: white; }
::moz-selection{ background-color: #E13300; color: white; }
::webkit-selection{ background-color: #E13300; color: white; }
then, the gradient effect of the one below works, but the header banner is displaced towards the right. If I remove that, the header banner positions itself correctly, but the gradient effect of the code below does not work :/
body {
background-image:url('../assets/uploads/miweb/gradient2.png');
background-repeat:repeat-x;
margin: 40px;
font: 13px/20px normal Helvetica, Arial, sans-serif;
color: #4F5155;
width:600px;
height:500px;
margin: 0 auto;
}
a {
UPDATE II
These 3 lines
::selection{ background-color: #E13300; color: white; }
::moz-selection{ background-color: #E13300; color: white; }
::webkit-selection{ background-color: #E13300; color: white; }
have a huge impact on the rest of the page
They make this code:
body {
background-image:url('../assets/uploads/miweb/gradient2.png');
background-repeat:repeat-x;
margin: 40px;
font: 13px/20px normal Helvetica, Arial, sans-serif;
color: #4F5155;
width:600px;
height:500px;
margin: 0 auto;
}
be effective. If I remove those 3 lines, the gradient effect will not take effect and the font letters will not be of that family but the standard times roman. However, the negative effect is, like I said, that it displaces to the right a banner that I have as header
I have one header page, one controller and one view and the style sheet to which I have a link in the View
Like the others have said the code doesn't affect the positioning of the elements. Only way that it can affect the header would be if that piece of code is not treated as css at all. Check if the code is in the correct style tags.
The moz is for Firefox and as stated already its for styling. Are you using IE? as if so Id suggest trying alternate browser as well as IE has issues with the double colon which is for css3(no suprise there). have a look here
as I used this when I first came across these and it described them well.
That code shouldn't affect what you're doing. It is code that will change the background colour and text colour of text when it is selected by the user using their mouse.
Could you give us an example link of this happening with it commented out, please?
EDIT
What is the center: attribute supposed to be doing? It isn't valid CSS...
I'm working on a project to upgrade a system to use the button tag rather than regular submit buttons. For the formatting of the buttons, I have the following CSS classes:
button::-moz-focus-inner {
border: none; /* overrides extra padding in Firefox */
}
button {
background: transparent url('images/greenrightbutton.png') no-repeat scroll top right;
color: #FFFFFF;
display: block;
font: normal 12px arial, sans-serif;
height: 25px;
padding-right: 8px; /* sliding doors padding */
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin: 0px;
text-decoration: none;
border: 0px;
overflow: visible;
}
#loginbox button {
float: right;
}
button span {
background: transparent url('images/greenleftbutton.png') no-repeat top left;
display: block;
line-height: 18px;
padding: 4px 5px 5px 12px;
margin: 0px;
border: 0px;
}
They work absolutely perfectly in every browser except IE8.
In IE8, the buttons work in most places, but then I find a page where the two background images don't quite line up and no amount of tweaking padding, line spacing etc fixes it.
Does anyone know why this might be the case?
Demo page: http://test6.placement.co.uk/demo/test.asp
---Update---
After some fairly extensive testing and trying things, I've now got a pretty fair idea of what's causing the problem in page 1, but no idea how to fix it, while another page with the same issue has a completely different cause (which I haven't found) but where I HAVE stumbled on a fix...
The problem on the first page appears to relate to a ul entered further up the page. Take that out and everything behaves - unfortunately, that's not an option as the ul is part of user-entered content, so I'm scratching my head about that. Particularly given...
Page 2 has no uls to cause an issue, but randomly sticking two break tags in just before my button code resolves the problem.
Naturally, THAT fix doesn't work on page 1.
I'm just about ready to give in and find some alternative way of rendering these buttons, because whatever the actual problem is, it's clearly so deep in either my CSS or my basic HTML that I'm probably never going to find it.
I don't see any difference between IE8 and other browser. Could you pleas mention bit more clear what you want to do?