Hi I have a text widget with one line of text "Connect with me on Facebook" that displays at the bottom of this page http://contemporaryinteriordesigns.com.au/. It displays on 1 line for every browser except for IE8.
Does anyone know why IE8 is creating a line break and how I could fix it?
Thanks, Dan
I think IE8 is acting weird because you're styling the text in the div selector. Try wrapping that text into a tag:
<div class="textwidget">
<a><img/></a>
<p>Connect with me on Facebook</p> <!-- Wrap it in a paragraph -->
</div>
The <div> tag defines a division or a section in an HTML document. and The <p> tag defines a paragraph. Wrapping the text in <p> is more semantically correct. Then style the <p> till you get it right. Since I can't edit the code and I'm testing with IETester I can't try it out.
Related
I transformed the button to send another code to a link with css. how I can put the link at the beginning of the next line with css like pictures below :
From before to after
First you need to customize the UI.
Something like you would want would just be HTMl moving the div to a different location:
<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
On my website: https://simplebyte.co/ some text has a line through it and when on mobile most of it is striked. It's not a CSS issue since i checked the styling and tried to apply `text-decoration: none;
What I've noticed is that text that has no styling applied in CSS is striked.
It appears as if you have a s tag in your code (line 142):
</div>
<s
</div>
This will render text with a strikethrough.
Wordpress strips out <p> and <br> tags when switching between the visual and the text editors. Well, to be specific, it doesn't actually strip them out of the content, but it does not display them in the text editor view. Is there a way to stop it from hiding those tags?
I know about the tinymce advanced plugin, but is there a way to stop this behavior on a per-post/per-page basis without having to install the plugin?
If you add a meaningless data attribute to the <p> and <br> tags, they will continue to show.
Example
When switching from text to visual editor and back, the following text
<p>Some paragraph text <br> and a second line.</p>
becomes
Some paragraph text
and a second line.
However,
<p data-x>Some paragraph text <br data-x> and a second line.</p>
makes the tags remain visible:
<p data-x="">Some paragraph text <br data-x="" /> and a second line.</p>
This is useful on pages with more complex layouts that can shift around when the tags get stripped.
If the post is custom post type, you can add meta box with add_meta_box and there you can initialize your own editor with wp_editor which can be customized. For example you can pass settings to the tinymce like force_p_newslines which should force every new line to start with new paragraph
What tag should be used for short text like.
Back to top
Read more
is <p> appropirate or something else should be use. because these are not paragraph.
Which is more semantic
<p>Back to top</p>
or
Back to top
or
<div>Back to top</div>
In general you should use the anchor <a> tag.
Nesting an <a> inside a <p> is perfectly valid, but in general the <p> should be reserved for paragraphs of text. Since yours is just a link, the <a> tag alone will probably be the most recommended.
If you want your link to appear as a block element, simply style it with display: block;. The fact that the <a> tag is normally displayed inline is only because it is its default style.
Anchor tag
Back to top
Read more
You can embed an anchor tag inside a block element. So something like this
<p>Back to top</p>
Inline elements must be enclosed inside block level elements, so this is the basic approach:
<p>Back to top</p>
Usually though the <a> element is already inside a <div> tag so the <p> isn't absolutely necessary but it is more semantically correct – it's still a paragraph of text even if there's only a few words in it.
There's no obvious semantic tag for such.
Perhaps you don't really need a tag there at all! Please check for this case.
If your "short texts" are links, then you obviously need <a href=. If you need a CSS style for the text, you can put it into the a tag too.
* If you need a tag for structuring only or to hang CSS styles from, then use <span>.
In IE6 the paragraph following the empty paragraph is displayed with the background color of the empty paragraph, which I'm guessing is wrong! It works correctly in Firefox, but I haven't checked IE7.
Is there a CSS solution to this problem, or do I have to remove the empty element?
(I would rather not have to remove empty elements, as that involves writing code to check whether every element is empty before outputting it)
The behaviour is unchanged using either strict or transitional doctypes (added this comment in response to answers)
Interestingly the effect does not occur with text color, only background color.
<html>
<head>
</head>
<body>
<p style='background-color:green'>Green content</p>
<p style='background-color:red'>Red content</p>
<p>Unstyled background working because previous red element is not empty</p>
<p style='background-color:green'>Green content</p>
<p style='background-color:red'></p>
<p>Unstyled background broken because previous red element is empty</p>
<p style='color:green'>Green content</p>
<p style='color:red'>Red content</p>
<p>Unstyled text color working because previous red element is not empty</p>
<p style='color:green'>Green content</p>
<p style='color:red'></p>
<p>Unstyled text color working even though previous red element is empty</p>
</body>
</html>
An empty paragraph is meaningless - which means you're probably writing the wrong HTML.
Also, your example doesn't have a DOCTYPE - a valid DOCTYPE is essential for getting browsers to correctly interpret your code, without one you'll be stuck in quirks mode.
But anyway, the simplest workaround for this bug is simply set a background for your current unstyled element.
I just tested that in IE7 and can confirm that it happens there too.
It looks like the unstyled paragraph does not actually have a red background, it's just that IE7 is drawing the red box for the empty paragraph and then drawing the following paragraph over the top.
You can see this for yourself by trying this code:
<p style='background-color:green'>Green content</p>
<p style='background-color:red; margin-left:50px'></p>
<p>Unstyled background broken because previous red element is empty</p>
You should see that the red paragraph is 50px in from the left.
Why it's doing this is anyone's guess. Adding some code to check if the paragraph is going to be empty isn't too hard, plus it removes useless markup from your output and avoids this problem altogether. Give that a go?
Try putting a non-breaking space in your empty paragraphs...
<p style='color:red'>& nbsp;</p>
Except no space after the ampersand...
Add a doctype to the top of your HTML file.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
That will force IE6 to switch form quirks to standards mode. This brings a lot of tother advantages, like a correct box model, so you should be doing it anyway.
One strange workaround I found was to add position:relative to the potentially empty paragraphs like this:
<p style='background-color:red;position:relative'></p>
<p>Unstyled background fine because previous element is 'relative'</p>