How do I unbold text beside javascript? - javascript

I've created a website: www.mvscaccounting.com and at the bottom of the website I have a search engine made from javascript. Beside it, I wanted to write all rights reserved. However whenever I write anything beside the search engine in dreamweaver, it turns bold!
Problem: I can't get it to unbold! it's not bold in dreamweaver, but on website it is
I tested it out, and the unintentional bold text starts when the javascript form is made. If you go to my website, and view page source you can see all the surrounding code.
**** UPDATE: THE PROBLEM HAS BEEN SOLVED, IT WAS A MISPLACED H3 TAG ****

It's bold because it is inside an <h3> element, which is rendered with bold text as defined by the default stylesheet for HTML.
Here's a snapshot of the document in Chrome:
There are several ways to override this. Try adding this to your stylesheet:
.red { font-weight: normal; }
This will cause all elements that are marked with class="red" to use the normal font-weight, even though they're embedded in an element that should be rendered in bold (like <h3>).

You could try adding this rule to the "red" class.
font-weight: initial;

Related

Texts with same color code is different when loaded with ajax

I'm working on a webshop with green as a primary color.
Everything works great, but I noticed that text within a ajax loaded div is brighter then it should be. The regular loaded text is noticeably less bright but both texts have the exact same color code.
I don't think I can reproduce it here without posting the entire CSS and HTML file, but here is a HTML snippet of text on normal page load:
<div class="primary-product-text vis-product-name">Knie-insteekkoppeling, kunststof zwart, M6</div>
And a snippet from the dynamically loaded content:
<span class="primary-product-text">Knie insteekkoppeling, kunststof zwart, M6</span>
CSS:
.primary-product-text {
color: #01a85e;
}
.vis-product-name {
display: block;
height: 38px;
}
Link: https://www.technicomponents.nl/nl/p/pneumatiek/insteekkoppelingen/knie-koppelingen/
The shown products have a green color. If you click on the cart icon next to a product or search for "knie" you'll see that the same colorcode produces a brighter green color.
It might be browser rendering.
I noticed that even though the CSS seems the same, the pixels are not generated the same. This could be related to the font being relatively thin and -webkit-font-smoothing: antialiased; being turned on.
While looking at it, I also realized that the text in the popup is different, please my best guess would be to use the exact same text. (the minus between Knie and insteekkoppeling)
(the first one is the web-page, the second one from the popup)
Found the answer, it was because of CSS animations that caused some text rendering issues. I had several CSS animations like transform and scale on the container and individual divs.
The solution was to add the following CSS code to the main container class:
-webkit-backface-visibility: hidden;

tinymce, automatically add style attribute to content

I'm working on a project that uses tinymce as RTF editor where users insert formatted content that will be saved as text as is. With all HTML tags becouse the content will be used in varous parts as HTML.
I'd like that all generated HTML elements have a default style attribute, something like:
<p style="margin: 0 10px; line-height: 1">
Hello World
</p>
<h1 style="margin: 0 10px; line-height: 1">
Hello World Again
</h1>
I've tried to add content_style: "* { margin: 0 10px, line-height: 1 }" to tinymceOptions but it doesn't works
TinyMCE has no built in way to force all block elements to have a pre-defined set of styles. TinyMCE does fire a variety of events when things happen in the editor (e.g. inserting content, a new block is created, a key is pressed) and you could use those to try to identify any time a new block is being placed in the editor and add your styles.
https://www.tinymce.com/docs/advanced/events/
Here is a TinyMCE Fiddle that shows some events in action:
http://fiddle.tinymce.com/2fgaab
The hard part here is that there are lots of ways to modify what is in the editor and to get this 100% right you need to catch all those events/activities.
The alternative is to do this when the content is submitted to the server and iterate over the block elements at that time.

Text obstructing a textarea

In order to make a textarea handle some basic formatting, I put a div over it with the same monospace font and position. The div would display the same text, but with color and boldness.
However, the text inside the div obstructs and makes the user unable to select text inside the textarea.
<div class="centerc">
<div class="copyc">
<textarea id="input" class="ipadded epadded txtarea" rows=20 cols=80></textarea>
<div id="copyadd" class="copyadd"></div>
<!--THIS IS THE DIV FOR FORMATTING ^ -->
</div>
</div>
-webkit-user-select: none;-ms-user-select:none;user-select:none; etc has not fixed this issue, only made the user unable to select text in the div as well. If any more CSS code is needed, I will comment it but I don't think this is necessary.
How would I stop the div from making the user unable to select text from the textarea (if this is possible)?
If not, are there any alternatives to the method I use?
Edit: I should have made it clear from the start I wanted multiple types of formatting.
You can't put formatting in a textarea but you can use an editable div and get rid of the textarea. It will at least make the problem simpler.
See this question: editable div
In order to expand capacity of being stylized of a <textarea> a good starting point is thinking at the opposite: making a <div> editable...
<div id='divTextEditable' contenteditable></div>
That's not "the magic wand", and it has its downside, but it's a good starting point.
Why don't you just add some css to the textarea to accomplish what the div is trying to accomplish.
.dark-text {
font-weight: bold;
font-color: black;
}
You could, for instance, add a CSS rule that puts the text area in front of the div when the user is hovering over the parent div, something like this:
.copyc:hover txtarea {
z-index: 2;
}

HTML Conteneditable - join paragraphs without inline styles being applied

In a WYSIWYG editor (based on a contenteditable div), I have code to make sure that no inline styles are inserted into the HTML while copy-pasting, normal typing, etc. But now browsers seem to want to screw with me even more. Say I have 2 paragraphs of this sort in my HTML
<p>This is the first paragraph |(cursor)</p>
<p>This is the second paragraph</p>
There are no inline styles present. But if I now join the two paragraphs by pressing "Delete/Backspace", Chrome decides to do this
<p>This is the first paragraph |(cursor)
<!-- Note the horrible inline styles -->
<span style="font-size: 13px; line-height: 19.53px;">
This is the second paragraph
</span>
</p>
Does anyone have any idea as to how I might prevent/detect when this happens?
This is a Webkit's issue. It also influences CKEditor (http://dev.ckeditor.com/ticket/9998). I reported these tickets:
http://code.google.com/p/chromium/issues/detail?id=226941
https://bugs.webkit.org/show_bug.cgi?id=114791
But there was no response.
You could not replicate this on jsfiddle because styles need to be applied to those paragraphs. E.g.:
p { line-height: 1.5em; font-size: 12px; }
Check this one: http://jsfiddle.net/HHHak/2/
So currently there are two possible solutions:
avoid any styling :| (but that won't solve other issues I described in mentioned bug reports),
implement your own backspace/delete support (really tricky... you can find an algorithm in a spec draft, but I'm not certain that it is complete).

Isolate CSS in element from rest of page

I am displaying HTML emails in a page and often those come with general style information that I need to isolate from the main page. For instance, if the email looks something like this:
<style type="text/css">
body { background-color:#000; }
</style>
<div>
email's content here
<div>
I end up with a black background on the whole page.
I've tried iframes, but I need the content's height to be dynamic (I don't how big each email is until it is rendered), which it seems one can only do with javascript. That is an option, but it seems rather hacky. Is there a standard, clean way of doing this?
If your constraints permit it, you could display each email in its own iframe.
Put a unique class or ID on the containing div and use that as a selector for all the styles:
<style type="text/css">
div#emailcontent { ... }
</style>
<div id="emailcontent">
...
</div>
It's a bit of a pain, but that's the only way to restrict styles to only part of a page.
For HTML email, I would suggest to use inline CSS. Sometime, unique class or ID doesn't work on others emails clients. And don't use java script in emails too, using javascript is not acceptable in email marketing. Please hard code for every tags with inline code to compatible with cross email clients.
p tag should convert in to span tag; in cross browser, p tag give some padding and margin. p tag is good for whole section of paragraph if you would like to use. Make sure you define inline code in each tags like :
< span class="headlines" style="font-family: Arial, Helvetica, sans-serif;font-size: 13px; font-weight: normal; color: #03588c; line-height: 18px;">foo< /span>
Margin and Padding shouldn't use in css coding for HTML. That doesn't work in cross email clients.

Categories

Resources