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.
Related
<body style="background-color:#23272A;" <img src="https://drive.google.com/uc?id=1wzC2IUozmJdeX6WlL3hP40e2V5xRm3AH" alt="Bling logo"
width="190" height="120">
<hr>
<h1>bert is corn</h1>
<hr>
With the code I am trying to display a logo to represent the website. The code here only involves the logo. Please help if you can. Thanks
You have two problems.
First, a typo. You forgot to end the <body start tag with a >.
Second: The value of the src attribute has to be a URL pointing to an image.
The URL you are using points to an HTML document.
Google Drive is a file storage service, not a web hosting service. It isn't designed for your purposes. Find somewhere else to store your image files.
this is a very basic error, you forgot to close the tag.
<body style="background-color:#23272A;"> <img ......
---------------------------------------↑
You have not closed the <body> tag
<body style="background-color:#23272A;">
<img src="https://drive.google.com/uc?id=1wzC2IUozmJdeX6WlL3hP40e2V5xRm3AH" alt="Bling logo"
width="190" height="120">
<hr>
<h1>bert is corn</h1>
<hr>
Goal: I want to add a "pin it" button (alongside the facebook and twitter buttons) at the bottom of each post on my tumblr.
Main Problem: Simply pasting the code provided at http://pinterest.com/about/goodies/ for adding a pin it button into tumblr's custom HTML editor does not work. I pasted the following code at the end of the {block:Posts} block:
<a href="http://pinterest.com/pin/create/button/" class="pin-it-button"
count-layout="horizontal">
<img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" />
</a>
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
This results in a "pin it" button in the correct place in each post, but clicking on it does nothing. The HTML generated by tumblr is changed, and looks as follows:
<a style="cursor:pointer" title="http://pinterest.com/pin/create/button/" class="pin-it-button" count-layout="horizontal">
<img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It"></a>
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
There is no href attribute in the anchor tag generated by Tumblr. This seems like a problem. Anyone know how to get Tumblr to do this correctly?
Another Problem (Possibly as important): The code provided by pinterest doesn't specify an image to pin. I want the button to pin the image in the post. From reading online I've gotten ideas to include the url and media parameters in the href attribute. For Example:
<a href="http://pinterest.com/pin/create/button/?url={Permalink}&media={PhotoURL-500}" class="pin-it-button" count-layout="horizontal">
<img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" />
</a>
Again, nothing happens when I click the resulting pin it button - so I don't know if these parameters are necessary - only that they don't fix my first problem.
Any help is greatly appreciated.
Cheers,
- David
Try encoding the variables in using URLEncodedPermalink - this worked for me:
{block:Posts}
{block:Photo}
<a href="http://pinterest.com/pin/create/button/?url={URLEncodedPermalink}&media={URLEncodedPhotoURL-500}" class="pin-it-button" count-layout="horizontal">
<img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" />
</a>
{/block:Photo}
{/block:Posts}
Thanks for the suggestions. Here's what ended up working for me.
Followed the instructions at http://tumblring.net/how-to-add-a-pinterest-button-to-tumblr/
with the following differences:
Used the following HTML embed code right before the {/block:Posts} closing tag:
<a href="http://pinterest.com/pin/create/button/?url={Permalink}&media={PhotoURL-500}"
class="pin-it-button" count-layout="horizontal">
<img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" />
</a>
Did NOT include the following javascript snipped along with the html embed:
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
Your code should be inside the Posts Block and Post type Block as well. For example if you are adding a pinit button into a photo post it would be the following:
{block:Posts}
{block:Photo}
<a href="http://pinterest.com/pin/create/button/?url={Permalink}&media={PhotoURL-500}" class="pin-it-button" count-layout="horizontal">
<img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" />
</a>
{/block:Photo}
{/block:Posts}
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.
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.
... <img src="/PhpProject1/vital1_top_logo.jpg" height="180" border="0px" > height="180" border="0px" " >
type="text/css" rel="stylesheet" /> ...
</head>
Every time i use this tag appears a "_" on the right of the image
The code you pasted is borked (double quotes at the beginning of href and an extra '>' in the middle of the img tag) so I'm guessing this isn't a real example. My guess is that you have some kind of whitespace between your img tag and the end of your a tag, like so
<img src="..">
which will show up as an underlined space. The whitespace might be a newline too mind you, so you should always keep them tight. For example, the following will produce the same problem
<a href="..."><img src="...">
</a>
HTH.
<a> and <img> are not allowed in <head>
Try:
<img src="/PhpProject1/vital1_top_logo.jpg" height="180" border="0px" />
It might help if you'd stick to the HTML syntax, right now this snippet is just gibberish. I tried cleaning it up, but then there's almost nothing left that makes sense.
You added two double quotes:
<a href=""http:
Use a single one
<a href="http: