I've started learning to use firebug to identify css problems, but I really have no clue about this one. HTML validator is saying that I should move the <span> tags inside the <div>:
Line 205, Column 55: Element div not allowed as child of element span in this context. (Suppressing further errors from this subtree.)
<pre id=line1><span><div class ='pto_product'>
The problem is that there's no span tag before div class =pto_product in the html markup area in the plugin so I suspect there's something to do with the page template.
I've checked the span tags with firebug, and it seems to related to this line in the stylesheet:
pre {margin: 20px 0px; padding: 20px; white-space: pre-wrap;
white-space: -moz-pre-wrap; white-space: -pre-wrap;
white-space: -o-pre-wrap; word-wrap: break-word;
text-shadow: 1px 1px 1px rgba(255,255,255,0.85); }
address { letter-spacing: 1px; margin: 20px 0; }
I removed the whole line but nothing changed. I took a step further and deleted all the classes and ids in the stylesheet that contain "span" but that span is still there. Would anyone please tell me how to get rid of that tag? Any help is much appreciated.
Image http://i1350.photobucket.com/albums/p769/Stonecold_Stone/cssproblem_zps53199bb7.png
HTML validator
Page Link
If you use jQuery you can use this.
$("#line1").find("span").remove();
It's impossible. Check your code. I'm sure you use span or it generated with some java script code. I use firebug for a while years and never see something like this expect when I use mistake plugins or mistake server side generation. Also you can see page source.
Related
It would appear that that bootstrap puts a 10px margin on the top and bottom of the pager and I would like to cut that down to 2px and also make the height of the pager a bit smaller. I'm using the code from the xsnippets.openNTF as follows:
<xp:pager partialRefresh="true" id="pager1" for="repeat1"
panelPosition="left" styleClass="bootstrapPager">
<xp:pagerControl type="Previous" id="pagerControl1"
styleClass="bootstrapPagerPrevious">
<xp:this.value><![CDATA[«]]></xp:this.value>
</xp:pagerControl>
<xp:pagerControl type="Group" id="pagerControl2"
styleClass="bootstrapPagerMiddle">
</xp:pagerControl>
<xp:pagerControl type="Next" id="pagerControl3"
styleClass="bootstrapPagerNext">
<xp:this.value><![CDATA[»]]></xp:this.value>
</xp:pagerControl>
</xp:pager>
as suggested I created a new css and copied the css from the xsnippets into it and applied it to the page however I don't think that should be necessary with bootstrap built in so I removed the css. The pager works the same either way. So I want to over-ride the bootstrapPager class and change the margins.
I created a new css called it myBootstrap.css and added this block
.bootstrapPager {
display: inline-block;
padding-left: 0;
border-radius: 4px;
margin-left: 10px;
margin-bottom: 2px;
margin-top: 2px;
line-height: 1.42857;
}
and changed the top and bottom margins to 2px. added the css as a resource but the pager margins do not appear to have changed. Maybe there are some other settings that need changing. As I read it this class should override the main bootstrap.css.
EDIT
If I set disable Theme to true then it appears to remove the margins, but then it also removes all of the additional styling and that is no good either.
Here is what the pager looks like (not connected to the repeat yet but that should not matter. The major issue is the amount of vertical space that it consumes. When I inspect the element in Chrome it looks very much like it is getting the values from the main bootstrap css.
Bill,
Not sure this will work, but please try adding !important to your CSS selector. This has worked for me in the past. In my case it was OneUI, but the concept is the same. This assumes that the style is being applied, but is overwritten.
.bootstrapPager {
display: inline-block;
padding-left: 0;
border-radius: 4px;
margin-left: 10px;
margin-bottom: 2px !important;
margin-top: 2px !important;
line-height: 1.42857;
}
For more info, I wrote a blog post on this subject last year when I was having a similar problem: http://notesspeak.blogspot.com/2014/10/quick-tip-forcing-css-override.html
Note: I have never had much luck ever trying to us the "disable theme" feature.
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'm, styling a hyperlink which has an own class.
.myLink
{
display:block;
padding: 4px 9px;
margin: 0px 6px;
}
.myLink:hover
{
background-color: #E4E4E4;
padding: 4px 9px;
margin: 0px 6px;
color:#000;
}
For the removing, I have this:
.myLink, .myLink:active, .myLink:visited
{
color:#000;
text-decoration:none;
}
In IE everything is working fine, but in Firefox my link gets underlined WHILE clicking on it.
I thought, if I definde the ":active" part, it's going to work, but it isn't.
Help please.
This sounds less like a CSS issue but more like browser preferences/overrides. I'd try to add !important to the text-decoration attribute, but actually looking for the reason would be the even better solution. Best solution would be checking the origin of the style using a tool (IE's developer tools or Firefox' Firebug).
If your are using a CMS or something with pre defined CSS files, it might be a browser specific CSS file causing this, as they will override the main CSS file. Even if you are not using a CMS or something with browser specific CSS files try Firebug in Firefox, this will tell you where in the CSS file the style is coming from and what CSS file is generating it.
www.getfirebug.com
Either use !important or make sure your ".myLink, .myLink:active, .myLink:visited" rules are below in order
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.
In the following page http://ada.kiexpro.com/test2/map.html
I added:
white-space: normal;
to wrap the copyright text that is coming our from the Google map API.
It works in FF and IE but Chrome seems to ignore the CSS selector:
global.css:
#cm_map span {
white-space: normal !important;
}
Google has an anonymous div with inline styles surrounding the copyright content. Only hook I can see is that it's a sibling of the "logocontrol" div. To override, try something like the following:
#cm_map #logocontrol + div[style] {
left: auto !important;
line-height: 13px;
right: 5px;
bottom: 6px !important;
white-space: normal;
width: 95%;
}
Not thoroughly tested but something like this should work.
This may also be a bug in Chrome: white-space normal !important doesn't override nowrap.
I've reported this bug at http://code.google.com/p/chromium/issues/detail?id=89573, but based on how they have been completely ignoring a more important issue since 2009, I have little hope of this being fixed.
Here is another example of chrome ignoring the important. This time its on the position. Unclicking the "position: relative" does bring the absolute into the picture. So the style is valid.