homepage Welcome to WebmasterWorld Guest from 23.20.220.79
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

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




msg:4547570
 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




msg:4547594
 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




msg:4547596
 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




msg:4547597
 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




msg:4547599
 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




msg:4547604
 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




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

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

Fotiman




msg:4547632
 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




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

Thank you.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved