PDA

View Full Version : Image Coding Errors - Blog Widget



mistik
Dec 9th, 2008, 03:12 PM
Hi, I am new to coding, so please bear with me.

I have a blog that I am writing coding to create my portfolio in my sidebar of blogger. I am trying to accomplish two columns with 9 rows of images, pulled from my flickr account.

I am using a tutorial as a guideline. I have encountered two problems.

Problem # 1 - on the left side of the each picture there is a small rectangular box that shows up. The tutorial does not show these boxes. I am attaching a picture that shows the problem. The error is circled in yellow. Could this be an error in the table coding?
[img]http://www.flickr.com/photos/mdkjewelrydesigns/3093211125/[img]

Problem #2 - even with problem #1, the pictures line up perfectly. Just past a certain point, it shows a picture and it is followed by the coding for that picture, then nothing lines up. I have gone over my code and can not find my coding mistake. How do you trace back your coding error without having to re-type all of it? I am attaching a picture that shows the problem. The error is boxed in red.
[img]http://flickr.com/photos/mdkjewelrydesigns/3094052970/[img]

Below, is my coding:
<table border="0"><table align="center"><tr><td<a href="http://www.flickr.com/photos/mdkjewelrydesigns/2407827275/"<img border="2" vspace="2" hspace="2" title="Morgan Earrings by Misti Kallas Designs, on Flickr"><img src="http://farm3.static.flickr.com/2227/2407827275_d3144e98e5_s.jpg" width="75" height="75" align="center" /></a><a href="http://www.flickr.com/photos/mdkjewelrydesigns/2500937582/"<img border="2" vspace="2" hspace="2" title="Curly Earrings by Misti Kallas Designs, on Flickr"><img src="http://farm4.static.flickr.com/3219/2500937582_a8a3ec11e9_s.jpg" width="75" height="75" align="center" /></a></td></tr><tr><td><a href="http://www.flickr.com/photos/mdkjewelrydesigns/2500942790/"<img border="2" vspace="2" hspace="2" title="Curly Necklace by Misti Kallas Designs, on Flickr"><img src="http://farm4.static.flickr.com/3061/2500942790_e30c36e9e4_s.jpg" width="75" height="75" align="center" /></a><a href="http://www.flickr.com/photos/mdkjewelrydesigns/2514593295/"<img border="2" vspace="2" hspace="2" title="Private Reserve Earrings by Misti Kallas Designs, on Flickr"><img src="http://farm3.static.flickr.com/2221/2514593295_3e75f457ae_s.jpg" width="75" height="75" align="center" /></a></td></tr><tr><td><a href="http://www.flickr.com/photos/mdkjewelrydesigns/2516950577/"<img border="2" vspace="2" hspace="2" title="Orange Acrylic Flower Earrings by Misti Kallas Designs, on Flickr"><img src="http://farm3.static.flickr.com/2021/2516950577_edca5c6f1c_s.jpg" width="75" height="75" align="center" /></a><a href="http://www.flickr.com/photos/mdkjewelrydesigns/2517779870/"<img border="2" vspace="2" hspace="2" title="Edrie's Necklace by Misti Kallas Designs, on Flickr"><img src="http://farm3.static.flickr.com/2176/2517779870_25206dc7c7_s.jpg" width="75" height="75" align="center" /></a></td></tr><tr><td><a href="http://www.flickr.com/photos/mdkjewelrydesigns/2718170336/"<img border="2" vspace="2" hspace="2" title="&quot;M&quot; is for Mine by Misti Kallas Designs, on Flickr"><img src="http://farm4.static.flickr.com/3241/2718170336_610371f791_s.jpg" width="75" height="75" align="center" /></a><a href="http://www.flickr.com/photos/mdkjewelrydesigns/2714682067/"<img border="2" vspace="2" hspace="2" title="Veronica Necklace by Misti Kallas Designs, on Flickr"><img src="http://farm4.static.flickr.com/3243/2714682067_6c168408d7_s.jpg" width="75" height="75" align="center" /></a></td></tr><tr><td><a href="http://www.flickr.com/photos/mdkjewelrydesigns/2707393443/"<img border="2" vspace="2" hspace="2" title="Sakura Flowers Double Blossom by Misti Kallas Designs, on Flickr"><img src="http://farm4.static.flickr.com/3093/2707393443_4d34a44b01_s.jpg" width="75" height="75" align="center" /></a><a href="http://www.flickr.com/photos/mdkjewelrydesigns/2699377193/"<img border="2" vspace="2" hspace="2" title="Garden &amp; Arts Center Consignment #3 by Misti Kallas Designs, on Flickr"><img src="http://farm4.static.flickr.com/3137/2699377193_570cf054a7_s.jpg" width="75" height="75" align="center" /></a></td></tr><tr><td><a href="http://www.flickr.com/photos/mdkjewelrydesigns/2699376073/"<img border="2" vspace="2" hspace="2"title="Garden &amp; Arts Center Consignment #2 by Misti Kallas Designs, on Flickr"><img src="http://farm4.static.flickr.com/3117/2699376073_3234c5e648_s.jpg" width="75" height="75" align="center" /></a><a href="http://www.flickr.com/photos/mdkjewelrydesigns/2697414490/"<img border="2" vspace="2" hspace="2" title="Pink Necklace by Misti Kallas Designs, on Flickr"><img src="http://farm4.static.flickr.com/3016/2697414490_0e616a8172_s.jpg" width="75" height="75" align="center" /></a></td></tr><tr><td><a href="http://www.flickr.com/photos/mdkjewelrydesigns/2697413472/"<img border="2" vspace="2" hspace="2" title="Marcella Earrings by Misti Kallas Designs, on Flickr"><img src="http://farm4.static.flickr.com/3124/2697413472_bcbff77486_s.jpg" width="75" height="75" align="center" /></a><a href="http://www.flickr.com/photos/mdkjewelrydesigns/2696596329/"<img border="2" vspace="2" hspace="2" title="Marcella Necklace by Misti Kallas Designs, on Flickr"><img src="http://farm4.static.flickr.com/3039/2696596329_3016043a53_s.jpg" width="75" height="75" align="center" /></a></td></tr><tr><td><a href="http://www.flickr.com/photos/mdkjewelrydesigns/2693292369/"<img border="2" vspace="2" hspace="2" title="Zoeri Necklace by Misti Kallas Designs, on Flickr"><img src="http://farm4.static.flickr.com/3133/2693292369_ff520acf8b_s.jpg" width="75" height="75" align="center" /></a<a href="http://www.flickr.com/photos/mdkjewelrydesigns/2905063113/"<img border="2" vspace="2" hspace="2" title="Connect the Dots Earrings by Misti Kallas Designs, on Flickr"><img src="http://farm4.static.flickr.com/3074/2905063113_8f49522a6d_s.jpg" width="75" height="75" align="center" /></a></td></tr><tr><td><a href="http://www.flickr.com/photos/mdkjewelrydesigns/2882784209/"<img border="2" vspace="2" hspace="2" title="Twisted Earrings by Misti Kallas Designs, on Flickr"><img src="http://farm4.static.flickr.com/3077/2882784209_966487c026_s.jpg" width="75" height="75" align="center" /></a<a href="http://www.flickr.com/photos/mdkjewelrydesigns/2843958610/"<img border="2" vspace="2" hspace="2" title="Riveted Ring - Prototype #1 by Misti Kallas Designs, on Flickr"><img src="http://farm4.static.flickr.com/3233/2843958610_456fc4454b_s.jpg" width="75" height="75" align="center" /></a></td></tr></table></table><a href="http://mistikallas.com"><span style="font-size:+1;"><center>Misti Kallas Designs</center></span></a>

Also, this coding was added to my blog in the edit html under my dashboard section.
}
a img {
border:1px outset #ffffff;
border-color:$bordercolor;
padding:0.10em;

This is the only changes I have made to my blog, per the tutorial instructions.

I appreciate any suggestions to correct these errors.

misti

brazenskies
Dec 9th, 2008, 03:18 PM
you are missing brackets and slashes right, left and center!

I'll look again later when I get a break if no-one else has helped you

jerry62704
Dec 9th, 2008, 03:30 PM
I left in some of your errors (table isn't nested correctly for example). I also "pretty printed" the code so it could be read and debug easier. If you copy out of here, the tabs are smaller in most other places and the code looks better.


<table border="0">
<table align="center">
<tr>
<td>
<a href="http://www.flickr.com/photos/mdkjewelrydesigns/2407827275/">
<img border="2" vspace="2" hspace="2" title="Morgan Earrings by Misti Kallas Designs, on Flickr">
<img src="http://farm3.static.flickr.com/2227/2407827275_d3144e98e5_s.jpg" width="75" height="75" align="center" /></a>
<a href="http://www.flickr.com/photos/mdkjewelrydesigns/2500937582/">
<img border="2" vspace="2" hspace="2" title="Curly Earrings by Misti Kallas Designs, on Flickr">
<img src="http://farm4.static.flickr.com/3219/2500937582_a8a3ec11e9_s.jpg" width="75" height="75" align="center" /></a>
</td>
</tr>
<tr>
<td>
<a href="http://www.flickr.com/photos/mdkjewelrydesigns/2500942790/">
<img border="2" vspace="2" hspace="2" title="Curly Necklace by Misti Kallas Designs, on Flickr">
<img src="http://farm4.static.flickr.com/3061/2500942790_e30c36e9e4_s.jpg" width="75" height="75" align="center" /></a>
<a href="http://www.flickr.com/photos/mdkjewelrydesigns/2514593295/">
<img border="2" vspace="2" hspace="2" title="Private Reserve Earrings by Misti Kallas Designs, on Flickr">
<img src="http://farm3.static.flickr.com/2221/2514593295_3e75f457ae_s.jpg" width="75" height="75" align="center" /></a>
</td>
</tr>
<tr>
<td>
<a href="http://www.flickr.com/photos/mdkjewelrydesigns/2516950577/">
<img border="2" vspace="2" hspace="2" title="Orange Acrylic Flower Earrings by Misti Kallas Designs, on Flickr"><img src="http://farm3.static.flickr.com/2021/2516950577_edca5c6f1c_s.jpg" width="75" height="75" align="center" /></a>
<a href="http://www.flickr.com/photos/mdkjewelrydesigns/2517779870/">
<img border="2" vspace="2" hspace="2" title="Edrie's Necklace by Misti Kallas Designs, on Flickr">
<img src="http://farm3.static.flickr.com/2176/2517779870_25206dc7c7_s.jpg" width="75" height="75" align="center" /></a>
</td>
</tr>
<tr>
<td>
<a href="http://www.flickr.com/photos/mdkjewelrydesigns/2718170336/">
<img border="2" vspace="2" hspace="2" title="&quot;M&quot; is for Mine by Misti Kallas Designs, on Flickr">
<img src="http://farm4.static.flickr.com/3241/2718170336_610371f791_s.jpg" width="75" height="75" align="center" /></a>
<a href="http://www.flickr.com/photos/mdkjewelrydesigns/2714682067/">
<img border="2" vspace="2" hspace="2" title="Veronica Necklace by Misti Kallas Designs, on Flickr">
<img src="http://farm4.static.flickr.com/3243/2714682067_6c168408d7_s.jpg" width="75" height="75" align="center" /></a>
</td>
</tr>
<tr>
<td>
<a href="http://www.flickr.com/photos/mdkjewelrydesigns/2707393443/">
<img border="2" vspace="2" hspace="2" title="Sakura Flowers Double Blossom by Misti Kallas Designs, on Flickr"><img src="http://farm4.static.flickr.com/3093/2707393443_4d34a44b01_s.jpg" width="75" height="75" align="center" /></a><a href="http://www.flickr.com/photos/mdkjewelrydesigns/2699377193/">
<img border="2" vspace="2" hspace="2" title="Garden &amp; Arts Center Consignment #3 by Misti Kallas Designs, on Flickr">
<img src="http://farm4.static.flickr.com/3137/2699377193_570cf054a7_s.jpg" width="75" height="75" align="center" /></a>
</td>
</tr>
<tr>
<td>
<a href="http://www.flickr.com/photos/mdkjewelrydesigns/2699376073/">
<img border="2" vspace="2" hspace="2"title="Garden &amp; Arts Center Consignment #2 by Misti Kallas Designs, on Flickr">
<img src="http://farm4.static.flickr.com/3117/2699376073_3234c5e648_s.jpg" width="75" height="75" align="center" /></a>
<a href="http://www.flickr.com/photos/mdkjewelrydesigns/2697414490/">
<img border="2" vspace="2" hspace="2" title="Pink Necklace by Misti Kallas Designs, on Flickr">
<img src="http://farm4.static.flickr.com/3016/2697414490_0e616a8172_s.jpg" width="75" height="75" align="center" /></a>
</td>
</tr>
<tr>
<td>
<a href="http://www.flickr.com/photos/mdkjewelrydesigns/2697413472/">
<img border="2" vspace="2" hspace="2" title="Marcella Earrings by Misti Kallas Designs, on Flickr">
<img src="http://farm4.static.flickr.com/3124/2697413472_bcbff77486_s.jpg" width="75" height="75" align="center" /></a>
<a href="http://www.flickr.com/photos/mdkjewelrydesigns/2696596329/">
<img border="2" vspace="2" hspace="2" title="Marcella Necklace by Misti Kallas Designs, on Flickr">
<img src="http://farm4.static.flickr.com/3039/2696596329_3016043a53_s.jpg" width="75" height="75" align="center" /></a>
</td>
</tr>
<tr>
<td>
<a href="http://www.flickr.com/photos/mdkjewelrydesigns/2693292369/">
<img border="2" vspace="2" hspace="2" title="Zoeri Necklace by Misti Kallas Designs, on Flickr">
<img src="http://farm4.static.flickr.com/3133/2693292369_ff520acf8b_s.jpg" width="75" height="75" align="center" /></a>
<a href="http://www.flickr.com/photos/mdkjewelrydesigns/2905063113/">
<img border="2" vspace="2" hspace="2" title="Connect the Dots Earrings by Misti Kallas Designs, on Flickr">
<img src="http://farm4.static.flickr.com/3074/2905063113_8f49522a6d_s.jpg" width="75" height="75" align="center" /></a>
</td>
</tr>
<tr>
<td>
<a href="http://www.flickr.com/photos/mdkjewelrydesigns/2882784209/">
<img border="2" vspace="2" hspace="2" title="Twisted Earrings by Misti Kallas Designs, on Flickr">
<img src="http://farm4.static.flickr.com/3077/2882784209_966487c026_s.jpg" width="75" height="75" align="center" /></a>
<a href="http://www.flickr.com/photos/mdkjewelrydesigns/2843958610/">
<img border="2" vspace="2" hspace="2" title="Riveted Ring - Prototype #1 by Misti Kallas Designs, on Flickr">
<img src="http://farm4.static.flickr.com/3233/2843958610_456fc4454b_s.jpg" width="75" height="75" align="center" /></a>
</td>
</tr>
</table>
</table>
<a href="http://mistikallas.com"><span style="font-size:+1;"><center>Misti Kallas Designs</center></span></a>

You can edit your post to put the code in code tags (the # menu choice in the edit window).

You don't have the full page - do you have a DOCTYPE? It is essential. The biggest thing people here will jump on is the use of tables for positioning. They are right on that.

mistik
Dec 9th, 2008, 03:33 PM
after i posted this thread. i found a reply in another thread about Markup Validation Services. did not even know this existed. i have entered my coding and it shows 8 errors and 42 warnings.

One question regarding this. It gives this validation output error,
# Error Line 1, Column 0: no document type declaration; will parse without validation.

<table border="0"><table align="center"><tr><td<a href="http://www.flickr.com/ph



The document type could not be determined, because the document had no correct DOCTYPE declaration. The document does not look like HTML, therefore automatic fallback could not be performed, and the document was only checked against basic markup syntax.

Learn how to add a doctype to your document from our FAQ, or use the validator's Document Type option to validate your document against a specific Document Type.


If my coding is for a widget/gadget, and the tutorial did not list this information, what doctype would it be? Now, I am really confused.

Thanks for your help.

jerry62704
Dec 9th, 2008, 03:45 PM
You need a DOCTYPE as the first line of your page.

http://www.w3schools.com/tags/tag_DOCTYPE.asp

mistik
Dec 9th, 2008, 03:58 PM
jerry
thank you, i will look over "pretty printed" versions to start finding errors.

the tutorial never listed a doctype.

i will find some more sources to read before asking anymore questions here. I thought this would be easy. I have very limited coding experience. I did follow a previous tutorial, to change my blog layout from two columns to three. That worked. Then I found a tutorial to create a widget using a "etsy mini" to display our artwork. I promise to do more reading before I do anymore coding. I just assumed it would work using the flickr information for each picture. The tags, I used them exactly as she did in her tutorial. Still have a lot to learn.

Thanks for everyone's help, it has given me very valuable information. It has taught me that I need to learn more about coding. I am a fast learner. I know I can do it.