Undefined margin / padding on left hand side of h3 in an iframe

Forum Moderators: not2easy

Message Too Old, No Replies

Undefined margin / padding on left hand side of h3 in an iframe

tbe22

6:51 pm on Feb 21, 2013 (gmt 0)

I am working on inserting an iframe into Wordpress sidebar, and I have an indentaion on <h3>, that I can't figure out where it is coming from. Code in the iframe is valid, and working (I actually successfully added it to over 10 other Wordpress blogs), and there is no way to figure out what's going on with any of the browser's webmaster tools (Chrome, IE9, Firefox). I checked <iframe>, <html>, <body>, <h3>, and there is no way to tell where is it coming from. I am not a novice to css / html either.

I am attaching a screenshot. If you have any ideas, please let me know.

[edited by: tedster at 5:29 am (utc) on Feb 22, 2013]
[edit reason] Sorry, no personal links [/edit]

Fotiman

7:44 pm on Feb 21, 2013 (gmt 0)

there is no way to figure out what's going on with any of the browser's webmaster tools

Why not? Try opening the content of the iframe in a new tab/window and then use the dev tools to inspect the h3.

tbe22

7:49 pm on Feb 21, 2013 (gmt 0)

I mean I already inspected it with webmaster tools etc. The code in the iframe (HTML and css) is valid, and it was working fine on over 10 other Wordpress sidebars. I opened the iframe code in a new tab, and it renders exactly the same, there is no way to tell what's going on.

Fotiman

7:50 pm on Feb 21, 2013 (gmt 0)

Note, your link is broken by the swear filter on this site. Also note, this site does not generally permit links, as the link may contain different or no content for future visitors to this thread.

tbe22

7:57 pm on Feb 21, 2013 (gmt 0)

It looks like it is ul {list-style-type: none;} causing the issue.

[edited by: tedster at 5:29 am (utc) on Feb 22, 2013]

Fotiman

8:01 pm on Feb 21, 2013 (gmt 0)

I sent you a private message.

But I suspect it's that the list-style-position needs to be set to inside

tbe22

8:19 pm on Feb 21, 2013 (gmt 0)

Adding list-style-position: inside; to ul doesnt correct the situation.

Fotiman

8:54 pm on Feb 21, 2013 (gmt 0)

Using the Chrome Developer Tools, I was able to see that your markup resembles this:


<ul>
  <li><a href="...">...</a></li>
  ...
  <li><a href="...">...</a></li>
</ul>
<h3>...</h3>

Your li elements have style:
clear: both

Your a elements have style:
float: left

Your h3 element is not clearing the float on the last a element, and thus it begins to the right of the text from the last link. Not sure why you would float those links... easiest thing would probably be to remove the float on those links. Alternatively, add clear: left (or both) to your h3.

tbe22

9:05 pm on Feb 21, 2013 (gmt 0)

Thank you.