I'm using Facebook like buttons on a website, they work perfectly.
Unfortunately on IE8 the like buttons pop out of their container DIVs, dropping at the bottom of the page.
example image:
This is after trying display:block as Kyle suggested:
Any ideas? Would be really great. :)
Looking at the source of that page, it appears to be a markup issue.
your <fb:like> tags must be closed.
So instead of :
<fb:like style="display:block;" ref="offer" href="URL" show_faces="false" layout="button_count" >
you should use
<fb:like style="display:block;" ref="offer" href="URL" show_faces="false" layout="button_count" />
On a side note, for more xHTML compatibility, you should also close all HTML tags, like
<br /> instead of <br>
and
<img alt='' src'' /> instead of <img alt='' src=''> etc..
I think it's the display method .fb_iframe_widget {display: inline-block}. I believe that IE doesn't play nice with this attribute, try just inline or block.
Related
I'm a bit of a rookie programmer, I started a html website recently. It is going to be a project between my friend and I. It will mainly feature flash games, but I added a "Chat" feature from a website called "chatbutton.com". On the left side of the screen there is three buttons, "Games", "Chat", and "About". When I am on the "Games" and "About" pages, all the buttons work perfectly fine, but when I am on the "Chat" page, the "Games" button dosen't seem to work. Here is the code for the chat page:
<HTML>
<HEADER>
<TITLE>CBgames.com</TITLE>
</HEADER>
<BODY bgcolor=#474747 text=#FFFFFF>
<CENTER>
<img src="siteimages/title.gif">
</CENTER>
<table>
<tr>
<td><img
<a href=file:///C:/Users/user/Desktop/htmlwebsite/games.html>
<img src="siteimages/gamesbutton.gif" onmouseover="this.src='siteimages/mouseovergamesbutton.gif';" onmouseout="this.src='siteimages/gamesbutton.gif'" /><br>
<a href=file:///C:/Users/user/Desktop/htmlwebsite/chat.html>
</br><img src="siteimages/chatbutton.gif" onmouseover="this.src='siteimages/mouseoverchatbutton.gif';" onmouseout="this.src='siteimages/chatbutton.gif'" /><br>
<a href=file:///C:/Users/user/Desktop/htmlwebsite/about.html>
</br><img src="siteimages/aboutbutton.gif" onmouseover="this.src='siteimages/mouseoveraboutbutton.gif';" onmouseout="this.src='siteimages/aboutbutton.gif'" /><br>
</br></td>
<td><iframe name="CHATBUTTON_CHATBOX" id="CHATBUTTON_CHATBOX" src="https://www.chatbutton.com/chatroom/18374628/" width="1500" height="700" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no">Enter Chat Room</iframe>
<script type="text/javascript">
CHBT_channel="18374628";
CHBT_profanityfilter="1";
CHBT_position="inline";
</script>
<script type="text/javascript" src="https://www.chatbutton.com/c.js">
</script>
</td>
</tr>
</table>
</BODY>
FIXED IT: I accidently wrote <img in line 11
This is because, when you make a tag (most times) such as <a>, you have to close it. In your code, you create an <a>:
<a href="file:///C:/Users/user/Desktop/htmlwebsite/about.html">
but never close it, so the table is included inside of the link. To solve this problem, close all of your <a>'s as follows:
<a href="file:///C:/Users/user/Desktop/htmlwebsite/games.html">
<img src="siteimages/gamesbutton.gif" onmouseover="this.src='siteimages/mouseovergamesbutton.gif';" onmouseout="this.src='siteimages/gamesbutton.gif'" />
</a><br>
<a href="file:///C:/Users/user/Desktop/htmlwebsite/chat.html">
<img src="siteimages/chatbutton.gif" onmouseover="this.src='siteimages/mouseoverchatbutton.gif';" onmouseout="this.src='siteimages/chatbutton.gif'" />
</a><br>
<a href="file:///C:/Users/user/Desktop/htmlwebsite/about.html">
<img src="siteimages/aboutbutton.gif" onmouseover="this.src='siteimages/mouseoveraboutbutton.gif';" onmouseout="this.src='siteimages/aboutbutton.gif'" />
</a><br>
Also, don't forget to put your file path for your href in quotes ("). And, there's no need to close <br> separately. You really don't need to close them at all.
EDIT: You have part of an img tag before your <a>'s. Either delete that or make it into something.
It looks like you forgot to close your <a> tags with an ending </a> tag. So your browser still thinks the table is part of the hyperlinked section.
Side note: put your file path in quotations after the href=
You have a <img partial tag before your first link.
Also, you need to close your <a...> tags with </a> after the <img>.
Note that you are referencing files that are on your local computer, so obviously no one else will be able to see them.
You might want to run your code through an HTML validator.
I'm using html for an Email campaign and I have a problem, I have the following code:
<TABLE width="550px" height="723px" BACKGROUND="FlyerImage.jpg" border="0" cellpadding="0" cellspacing="0">
<TR>
<TD style="padding-top:190px; padding-right:30px; line-height:0px;" align="right">
<a style="line-height:0px;" href="http://LINK.com/">
<img src="ViewOffer.png">
</a>
</TD>
</TR>
<TR>
<TD style="padding-bottom:185px; padding-left:35px; line-height:0px;" align="left">
<a style="line-height:0px;" href="http://LINK.com/">
<img src="ViewMore.png">
</a>
</TD>
</TR>
</TABLE>
This code works perfectly on Gmail, Hotmail, Yahoo and some email clients, but in OUTLOOK it's not showing correctly, I'm pretty sure it is because Outlook doesn't support background images on tables.
I'm using an Email Campaign web client and the recommendations are to markup using inline css, not using html,head and body tags, not using divs and not using positioning (absolute,relative,fixed ...) and to markup with tables.
How do I position the two call to action buttons on top of the main image on specific places without using these techniques ?
Thanks in advance =] !
If CSS is not supported, then there is no way to guarantee positioning the buttons on top of the image. In that case, I would recommend changing to using an image map. That is pure html without css, though I really don't know if it is supported by all the email clients.
You would incorporate the button image into the main image and then set your coordinates (I don't know them, they are represented by "?'s" below). Something like:
<img src="FlyerImage.jpg" alt="alternative text" usemap="#flyer" />
<map name="flyer">
<area shape="rect" coords="?,?,?,?" href="http://LINK.com/" /> <!--button 1-->
<area shape="rect" coords="?,?,?,?" href="http://LINK.com/" /> <!--button 2-->
</map>
Neither background images nor positioning is very well supported in HTML Email. Here is a great reference: http://www.campaignmonitor.com/css/
I've never tried it but it looks like there is a hacky-ugly way to force Outlook to support background images. Link.
I am building a html email. it looks fine in outlook 2003, outlook 2007, hotmail, gmail, yahoo but in outlook web app has breaks between the rows. has anyone had these issues with outlook web app?
i have display block on the images but it looks like they get stripped out.
This was fixed by wrapping the elements in <span style="display:block"></span>
E.G:
<a href="http://www.url.com">
<img src="example.jpg" />
</a>
becomes
<a href="http://www.url.com">
<span style="display:block;">
<img src="example.jpg" />
</span>
</a>
but needs doing on all broken elements
Various styling is being stripped, so inline-styling will NOT work with images in OWA.
Here's a simple example of what Bill the Lizard was referring too:
<span style="display:block"><img src="myFancyImage.gif"/></span>
Without the above code it may look like extra padding/margin is creating space between tables and table rows/columns.... basically the issue that brought you to this page.
Use this inline css
<span style="margin:0; padding:0; display:block;"><img src="myFancyImage.gif"/></span>
I had the same problem, and unfortunately none of these solutions worked.
The display:block was always being striped out, no matter whether I wrapped the image in span or font tags.
Eventually, I found that wrapping the image in a DIV with inline width and height solved the problem. I guess because DIVs are block elements already, and it seems the only styles that OWA doesn't strip out are width and height.
e.g.
<td width="475" height="73" valign="top" bgcolor="#e9e9e9">
<div style="display:block;width:475px;height:73px"><img src="../images/email/email_02.jpg" alt="Three Barrels" width="475" height="73" style="display:block;border:none;outline:none;line-height:0;float:left;" /></div>
</td>
I tried the fix above and it didn't work - but this worked for me:
I just added this code at the top of the email code.
/* FIX FOR OWA */
.bdyItmPrt img { display:block !important; }
I have 6 images sized 50x50 that are supposed to fit in a 300px div (50 * 6 = 300).
In my code I write them as follows:
<img src="foo.png" />
<img src="foo.png" />
<img src="foo.png" />
<img src="foo.png" />
<img src="foo.png" />
<img src="foo.png" />
Note the line breaks in between the image tags. I write them that way for clarity.
The problem is that when I test the page in a browser - the images do not fit, because the browser adds a space for every line break so I end up with something like this:
[img][space][img][space][img][space][img][space][img][space][img][space]
instead of:
[img][img][img][img][img][img]
I can easily remove the line breaks from my html, but that makes my code a lot less readable.
I am working in Ruby on Rails 2.3 - if there's a helper function for stripping out whitespace, I don't mind using that.
I was wondering if anybody knows how I can avoid this.
Thanks!
If you're using the image_tag helper, you can do
the -%> will not include the spaces in output.
Put your images in a <div class="images"> and set your css rules to div.images img { float: left }.
I have the following is really weird. Bassically when I view the source of the page everything looks fine but the page looks all wrong. So I decided to take a look at the source using firebug and firebug shows a very different story. But if I refresh the page the page looks fine and the source and firebug match up.
See below for what the source is but what firefox displays and firebug shows:
View source shows this:
<div class="mainpanel">
<a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Little-Rock">
<div class="thumbphotoimage"><table cellpadding="0" cellspacing="0"><tr><td><img src="/Assets/Photos/Portfolio/BB001D_0.jpg" alt="Little Rock" /></td></tr></table></div>
<div class="thumbphototitle">Little Rock</div>
</a>
<a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Split-Rock">
<div class="thumbphotoimage"><table cellpadding="0" cellspacing="0"><tr><td><img src="/Assets/Photos/Portfolio/BB002D_0.jpg" alt="Split Rock" /></td></tr></table></div>
<div class="thumbphototitle">Split Rock</div>
</a>
<a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Rock-Pointer">
<div class="thumbphotoimage"><table cellpadding="0" cellspacing="0"><tr><td><img src="/Assets/Photos/Portfolio/BB003D_0.jpg" alt="Rock Pointer" /></td></tr></table></div>
<div class="thumbphototitle">Rock Pointer</div>
</a>
</div>
But firebug shows this and it renders on the screen as if its like this:
<div class="mainpanel">
<a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Little-Rock">
<div class="thumbphotoimage"><table cellpadding="0" cellspacing="0"><tr><td><img src="/Assets/Photos/Portfolio/BB001D_0.jpg" alt="Little Rock" /></td></tr></table></div>
<div class="thumbphototitle">Little Rock</div>
</a>
<a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Split-Rock"></a>
<div class="thumbphotoimage"><table cellpadding="0" cellspacing="0"><tr><td><img src="/Assets/Photos/Portfolio/BB002D_0.jpg" alt="Split Rock" /></td></tr></table></div>
<a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Split-Rock"> </a>
<div class="thumbphototitle">
<a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Split-Rock">Split Rock</a>
</div>
<a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Split-Rock"> </a>
<a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Rock-Pointer">
<div class="thumbphotoimage"><table cellpadding="0" cellspacing="0"><tr><td><img src="/Assets/Photos/Portfolio/BB003D_0.jpg" alt="Rock Pointer" /></td></tr></table></div>
<div class="thumbphototitle">Rock Pointer</div>
</a>
</div>
The offending html is the middle a tag which goes crazy...
Any ideas.
Cheers
Anthony
Like others said, this happens because your markup is invalid. Going a bit deeper, the problem is that when the parser received <a><div> in its input, it may mean two things:
You forgot to close the anchor tag, in which case this should become <a></a><div>... in the DOM, or
The anchor wraps the div, in which case the DOM should be <a><div></div></a>.
The correct decision can be made only when more (potentially much more) characters are known; the parsing, as you could have noticed, happens incrementally -- i.e. you can see parts of the page before it's fully downloaded.
Unfortunately, the Mozilla's HTML parser (as of Firefox 3.6 and earlier) is non-deterministic in this case -- the resulting DOM depends on the portions your HTML is split into, while going over network.
There's a Mozilla bug about a problem that looks very similar to yours.
I'm sorry for you, and I don't know how to implement (nor have any desire to try implementing ;) the solution to your original problem, but perhaps a hack involving setting innerHTML (to avoid parser non-determinism) is in order?
BTW, it would be interesting to check how the HTML5 parsing algorithm says your markup should be treated, since that's what will eventually be implemented in the browsers.
You should not wrap block elements/tags (like <div>) in inline tags (like <a>). That's asking for trouble.
That's because your HTML is invalid. Inline elements can only contain other inline elements and cannot contain block elements.
Browsers encountering HTML which breaks this rule is allowed to do anything at all in order to parse the page (including not displaying the page) and apparently firefox's interpretation of anything-at-all is not the same as yours.
Note that you can convert inline elements like <span> to a block element by setting it's display css property. But I'm not entirely sure if that is legal for an element with additional semantics such as an <a> tag. Of course, you could convert those divs to inline elements.
I don't want to stop putting block elements inside anchors. It's just too useful:
http://html5doctor.com/block-level-links-in-html-5/
I developed a workaround which seems to disable progressive rendering and avoid this problem.
I use server-side sniffing to look for "Firefox/3" in the user-agent. If found, I put this right after <body>:
<script type="text/javascript">
// hack for firefox 3.x progressive rendering pessimism
document.body.style.display = 'none';
</script>
And this right before </body>:
<script type="text/javascript">
document.body.style.display = 'block';
</script>
In testing, I found that simply inserting an empty <script> tag after the body tag avoided the issue I was experiencing. But it feels more correct and safer doing a show/hide.
Hard to know for sure what FF is really thinking - I'm curious to know whether this solves the problem for others.
I'm used to doing this sort of thing for IE. FF3.x is vying for my new least-favorite browser award.