Text & Social Media Buttons Overlap
-
Hello and thank you.
I just added another post and it resulted in the social media buttons overlapping the text or visa versa. Can you take a look and point me in the right direction to fix this? Thank you. http://www.screencast.com/t/PQOXgPcil.
Mike
The blog I need help with is: (visible only to logged in users)
-
Hi there. Did you by any chance add any custom CSS to your site’s theme using the Custom Design upgrade? If so, you’ll need to ask for help in the CSS forum: https://en.forums.wordpress.com/forum/css-customization#postform
If you didn’t edit the CSS, let us know as something else might then be the problem.
-
Kokkieh,
I did not add any CSS to my site, not that I know of; not deliberately. I will look at editing the CSS. Thank you.
Mike
-
Editing the CSS would have been a very conscious action on your part. Don’t try editing it now as it’s probably not the cause and unless you have a premium upgrade it won’t save either.
Another option is that a faulty html tag in your latest post is messing things up. I’ll tag this for staff so they can check it that is the case, or if there’s maybe something else that’s causing this.
Please make sure you’re subscribed to the thread and be patient while waiting for their response.
-
Kokkieh,
Thank you. Yes, I did add html text to get that video to align to the left. That html is here, if you’d like:
line 1: <div style=”float:left;”>
line 2: [youtube https://www.youtube.com/watch?v=BB2Ad04mukI&w=320&h=240%5D
line 3: </div>
line 4: <div style=”clear:both;height:1em;”></div>.That html was suggested to me by an incredible and relentless staff member last week. So I’ve been using that hmtl tag on all posts since where I embed a YouTube video.
I am subscribed to this thread, Kokkieh. Thank you.
-
Lizthefair,
Thank you. All I did was type that text that you see and added that video. To get that video to align at the left, I needed to insert or wrap some HTML around it, the html that you see in the post above. Thank you for correcting it, but I am trying to keep all of my embedded videos aligned at the left.
The sequence or steps that I use to embed YouTube videos is/are this:
1. Copy and paste the direct link into the Text Editor of a post.
2. Place brackets at both ends.
3. Insert at the beginning but just inside the left bracket the phrase “youtube” and then a space before the https.
4. Then I alter the height and width.
5. Then I add that html.
6. Then revert back to the Visual Editor.
7. Click Update and voila!It’s just that for some reason last night the text and social media buttons overlapped. And I am not sure why.
Thank you.
-
Thanks for the reply. The problem was that somehow this bit of code:
<div style="clear:both;height:1em;"></div>got wrapped around your paragraph instead of showing up between your paragraph and your video. Which caused the problem.
so instead of looking like it does now:
<div style="float:left;">[youtube https://www.youtube.com/watch?x-yt-cl=84359240&v=0Ajw9L0jDHQ&w=400&h=315]</div> <div style="clear:both;height:1em;"></div> <a title="US Energy Information Administration" href="http://www.eia.gov/countries/country-data.cfm?fips=ve" target="_blank">Venezuela</a> is the 12th largest oil producer in the world, but 5th in the Americas. The 9th largest exporter. They were the 4th largest supplier of crude products to the US in 2013. It's not a poor nation. But printing press inflation was getting out of control. Price controls were instituted, which leads to shortages; hence, the empty shelves. And now food lines.it looked like this:
<div style="float:left;">[youtube https://www.youtube.com/watch?x-yt-cl=84359240&v=0Ajw9L0jDHQ&w=400&h=315]</div> <div style="clear:both;height:1em;"> <a title="US Energy Information Administration" href="http://www.eia.gov/countries/country-data.cfm?fips=ve" target="_blank">Venezuela</a> is the 12th largest oil producer in the world, but 5th in the Americas. The 9th largest exporter. They were the 4th largest supplier of crude products to the US in 2013. It's not a poor nation. But printing press inflation was getting out of control. Price controls were instituted, which leads to shortages; hence, the empty shelves. And now food lines.</div>You don’t need to do anything different right now, I just thought you might like to see the code so that if it happens again you’ll know how to fix it.
-
“I just thought you might like to see the code so that if it happens again you’ll know how to fix it.” You are intuitive and absolutely right. Thank you so much. This helps me in case I am confronted with it later. Thank you for taking the time and for your good efforts, lizthefair.
-
-
-
-
lizthefair,
It’s happening again. https://sangabrieltutor.wordpress.com/2015/01/23/489/.
And when I went back to compare the two divergent codes you so beautifully embedded (don’t know how you did that), I couldn’t find any differences. I checked twice; still, I could be a bit blind. But I just don’t see a difference. And if there is a difference, would you mind pointing it out? Actually, that’s not quite true. I did find one difference. At the end of the preferred text, no <div> tag was appeared, but at the end of the text that overlapped there was the </div>. When I look at the code of my current post in question, I do not see the code <div style=”clear:both;height:1em;”></div> wrapped around my paragraph. But just to check to see if it was, I bumped that line of code down one space but that did not fix the problem. When you mean “wrapped around,” I presume you mean that the code was in front and at the end of the text. I found that code at the beginning of the text and bumped the paragraph down in the Text Editor, no changes occurred in the update.
Could you . . . help me? Thank you.
-
When I look at your post’s source code, here’s what I see:
<div style="clear:both;height:1em;"> <p>This is troubling...we can thank public education and common core for such performances.</p> </div>So it does seem like the div-tag again got wrapped around the paragraph. To fix it, take the closing div-tag and move it to directly after the opening div-tag, i.e. the p-tags should not be between the div-tags.
(Sorry, unlike @lizthefair I don’t have access to your dashboard so I cannot fix it for you. If you can’t get it to work, just let us know here and I’m sure she’ll sort it out for you again.)
-
@kokkieh was exactly right, and I’ve fixed this for you again.
I do not see the code <div style=”clear:both;height:1em;”></div> wrapped around my paragraph. But just to check to see if it was, I bumped that line of code down one space but that did not fix the problem. When you mean “wrapped around,” I presume you mean that the code was in front and at the end of the text. I found that code at the beginning of the text and bumped the paragraph down in the Text Editor, no changes occurred in the update.
I think I could explain wrapped around better. Generally speaking HTML tags, the kind of code we are working with here, work in pairs. The first tag starts the area of content where the code will be enforced, and the second one ends it. So in the preferred code the two tags look like this:
<div style="clear:both;height:1em;"> </div>The first piece
<div style="clear:both;height:1em;">
opens the instructions and the second piece
</div>
closes them.In order for your posts to work correctly. You need that code expression to be all together. When it breaks, what’s happening is that final div-tag is getting moved to after your paragraph. Which causes your browser to display your post in the messed up way.
Does that help?
If you’d like, I can move the div-tag back to where it was so you can fix it your self. Otherwise we can see if it happens again and you can take a turn at fixing it then.
-
lizthefair, yes, it does help.
Except for the word “Line” or the numbers, I arrange the code just as you see it here–without any breaks:
Line 1: <div style=”float:left;”>
Line 2: YouTube Direct Link.
Line 3: </div>
Line 4: <div style=”clear:both;height:1em;”></div>If there are breaks in this code, could you please point them out to me?
I just now checked the post, and it looks like you fixed it. https://sangabrieltutor.wordpress.com.
Last night as I was going back again and again to the Text Editor to fix it, each time I did see the </div> at the end of my paragraph. I never wrote it there or left it there if, in fact, it did appear. That tells me that the toggling back and forth between the Visual Editor and the Text Editor caused the code to break. I made sure that the HTML text was not broken.
So just to confirm, is this code and its arrangement correct?
Line 1: <div style=”float:left;”>
Line 2: YouTube Direct Link.
Line 3: </div>
Line 4: <div style=”clear:both;height:1em;”></div>Thank you.
-
`Line 1: <div style=”float:left;”>
Line 2: YouTube Direct Link.
Line 3: </div>
Line 4: <div style=”clear:both;height:1em;”></div>`That’s correct. Note if you accidentally forget one of the closing div tags, the system will add it back for you–but not always in the right place so that could be happening.
-
Good to know. Thanks. Just to confirm, did you fix the post this morning? Because it is fixed, and I did nothing to it since last night when I was having trouble with it.
-
I did fix it this morning–I mentioned it in my earlier post, but it was a tiny line in a big post, so very easy to miss.
Sorry to add confusion to an already complicated situation :)
-
Sorry. I missed it. Too many hours with my head buried in the screen. You are great!!! Thank you so much!!!
- The topic ‘Text & Social Media Buttons Overlap’ is closed to new replies.
WordPress.com Forums 