image is not clickable - html

I have new code on my website and a portion of my image icons are not clickable. The url shows up so it is reading the a tag but you cannot click the picture. Any insight would be helpful.
http://staging.pinupgirlclothing.com/retrodresses/lush-dress-swan.html
see shop the look
html layout is:
<ul class="box-content">
<li class="item first">
<div class="item-info">
<img src="http://staging.pinupgirlclothing.com/media/catalog/product/cache/1/small_image/115x150/9df78eab33525d08d6e5fb8d27136e95/s/p/sp-15252-pk_01t.jpg" width="115" height="150" alt="Floozy Kiss Lock Purse in Baby Pink Size- 939450" title="Floozy Kiss Lock Purse in Baby Pink Size- 939450" />
</div>
</li>
<li class="item">
<div class="item-info">
<img src="http://staging.pinupgirlclothing.com/media/catalog/product/cache/1/small_image/115x150/9df78eab33525d08d6e5fb8d27136e95/i/l/il-hs-bk_01.jpg" width="115" height="150" alt="Vintage Style Sheer Hair Scarf in Black Size- 952104" title="Vintage Style Sheer Hair Scarf in Black Size- 952104" />
</div>
</li>
<li class="item last">
<div class="item-info">
<img src="http://staging.pinupgirlclothing.com/media/catalog/product/cache/1/small_image/115x150/9df78eab33525d08d6e5fb8d27136e95/f/i/fi-032jelly-bk_01_1.jpg" width="115" height="150" alt="Dragonfly Jelly Peeptoe Flats in Black" title="Dragonfly Jelly Peeptoe Flats in Black" />
</div>
</li>
</ul>

This code in main.js is your problem. Don't preventDefault if you don't want the default behavior (following the link) to be prevented:
$('.product-view a.product-image').on('click', function(e) {
e.preventDefault();
});

Related

Overlapping sections, the content of section goes beyond this section

I have problem: first section - header is attachment fixed, and when I reduce the browser window, the background only covers a small portion of the section, the rest of the content is under another section, or completely out of the background. As you will see, only opening this page to the full screen resolves the problem and the sections look correct. By contrast, reducing the window causes the section to fall apart and jump one over the other. Can the cause be lack of clearfixes, or the problem is due to lack of positioning of each section?
https://codepen.io/tubaris/pen/YQQewB/
`<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="description" content="Omnifood">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Omnifood</title>
<link rel="stylesheet" type="text/css" href="vendors/css/style.css">
<link rel="stylesheet" type="text/css" href="vendors/css/ionicons.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400&subset=latin-ext" rel="stylesheet">
</head>
<body>
<header>
<nav>
<div class="row">
<img src="https://image.ibb.co/bY2jyQ/logo_white.png" alt="Omnifood logo" class="logo">
<ul class="main-nav">
<li>Food delivery</li>
<li>How it works</li>
<li>Our cities</li>
<li>Sign up</li>
</ul>
</div>
</nav>
<div class="header-text-box">
<h1>Goodbye junk food.<br>Hello super healthy meals.</h1>
I’m hungry
Show me more
</div>
</header>
<section class="section-features">
<div class="row">
<h2>Get food fast – not fast food.</h2>
<p class="text-about">Hello, we're Omnifood, your new premium food delivery service. We know you're always busy. No time for cooking. So let us take care of that, we're really good at it, we promise!</p>
</div>
<div class="row">
<div class="feature-col">
<i class="ion-clock icon-big"></i>
<h3>Up to 365 days/year</h3>
<p>Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.</p>
</div>
<div class="feature-col">
<i class="ion-jet icon-big"></i>
<h3>Ready in 20 minutes</h3>
<p>You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.</p>
</div>
<div class="feature-col">
<i class="ion-ios-nutrition icon-big"></i>
<h3>100% Organic</h3>
<p>All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!</p>
</div>
<div class="feature-col">
<i class="ion-card icon-big"></i>
<h3>Order anything</h3>
<p>We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!</p>
</div>
</div>
</section>
<section class="section-meals">
<div class="row">
<h2>Omnifood meals showcase</h2>
<p class="text-about">Selected Omnifood meals offered by our company</p>
</div>
<ul class="meals-showcase">
<li>
<figure class="meal-photo">
<img src="https://preview.ibb.co/eTtwCk/1.jpg" alt="egg with vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="https://image.ibb.co/iFpgdQ/2.jpg" alt="california rolls sushi">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="https://preview.ibb.co/igwGCk/3.jpg" alt="asparagus with carrots and meat">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="https://preview.ibb.co/h74sk5/4.jpg" alt="carrot soup with nuts">
</figure>
</li>
</ul>
<ul class="meals-showcase">
<li>
<figure class="meal-photo">
<img src="https://preview.ibb.co/j4MuyQ/5.jpg" alt="steak with green beans">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="https://image.ibb.co/m8twCk/6.jpg" alt="roll with egg, rucola and radish">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="https://preview.ibb.co/bBjEyQ/7.jpg" alt="healthy burger">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="https://preview.ibb.co/fNWisk/8.jpg" alt="oatmeal with strawberries and cherries">
</figure>
</li>
</ul>
</section>
<section class="section-steps">
<div class="row">
<h2>How it works – Simple as 1, 2, 3</h2>
</div>
<div class="row">
<div class="steps-col1">
<img src="https://image.ibb.co/hHoeXk/app_i_Phone.png" alt="Omnifood app on iPhone" class="app-screen">
</div>
<div class="steps-col2">
<div class="works-step">
<div>1</div>
<p>Choose the subscription plan that best fits your needs and sign up today.</p>
</div>
<div class="works-step">
<div>2</div>
<p>Order your delicious meal using our mobile app or website. Or you can even call us!</p>
</div>
<div class="works-step">
<div>3</div>
<p>Enjoy your meal after less than 20 minutes. See you the next time!</p>
</div>
<img src="https://image.ibb.co/gyPxJQ/download_app.png" alt="app store button">
<img src="https://image.ibb.co/jZWYsk/download_app_android.png" alt="play store button">
</div>
</div>
</section>
</body>
`
I assume what you are asking is why your .features-col div's are cut off.
The reason is, the .features-col divs are taken out of the main flow of the document and are not expanding .section-features div. This is due to the float: left property. When you remove that property, you can instantly see that those columns expand the parent div.
Another way to have the columns aligned to the left side of the page is to have the .row class set to 100% of the window width, then set text-align: left.
Make the .meal-photo class float left.
i.e add float:left to the .meal-photo class in your CSS code.

How to align image and download button in css?

Here is my jsfiddle: http://jsfiddle.net/4478bs0L/
I need to place download button underneath of image at left side.
For that, here is my html:
<div><img src="9780143332497.jpg" alt="">
<a href="9780143332497.jpg" class="myButton" download="ss" title="Download">
<img src="/path/to/image" alt="Download">
</a></div>
If i add caption class to the button and set text-align:center; it didn't working.
Can anyone please help me? Thanks in advance.
Option1: Add a <br/> between both images.[Apparently, your button is also an image]. Sometimes the simplest answer is the easiest.
<img src="image1" alt="">
<br/>
<a href="image2" class="myButton" download="ss" title="Download">
<img src="/path/to/image" alt="Download">
</a>
Option 2: enclose your button inside a <div> [ block element]
<div>
<a href="http://s30.postimg.org/b7rdjjkwh/9780143332497.jpg" class="myButton" download="ss" title="Download">
<img src="/path/to/image" style="display:block"alt="Download"/>
</a>
</div>
Option 3: add inline css property display:block to the anchor tag containing your button[inline css would override the myButton class property which is making it appear on the same line]
<a href="http://s30.postimg.org/b7rdjjkwh/9780143332497.jpg" class="myButton" style="display:block;width:60px" download="ss" title="Download">
<img src="/path/to/image" alt="Download">
</a>
Cheers!!
just use a <br> after the image and before the button
<div><img src="9780143332497.jpg" alt="">
<br>
<a href="9780143332497.jpg" class="myButton" download="ss" title="Download">
<img src="/path/to/image" alt="Download">
</a></div>
FIDDLE DEMO
Yes I did it .... implement this code...
<div class="wrap">
<div class="london-olympic">
<h1>Playng To Win</h1>
<span class="span">Author: Saina Nehwal.</span>
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="addthis_jumbo_share"></div>
<div><img src="http://s30.postimg.org/b7rdjjkwh/9780143332497.jpg" alt="">
<a style="position:absolute; margin-left: -140px; top: 450px;" href="http://s30.postimg.org/b7rdjjkwh/9780143332497.jpg" class="myButton" download="ss" title="Download">
<img src="/path/to/image" alt="Download">
</a>
</div>
<Br><br>
<p>. . . being a player from India defines who I am. When I play, it's for my parents, my coach, and my country.'</p>
<p>Meet Saina Nehwal-India's star badminton player and World Number 4, Padma Shri and Khel Ratna awardee, the girl who brought laurels to India by winning an Olympic medal at the age of twenty-two. In this fascinating memoir, she talks about her childhood and growing-up years; her relationship with the most important people in her life; the ups and downs of her celebrated career, from district level wins to the Olympics; and the sacrifices needed to succeed in any sport. She also reveals little-known facts and offers a peek into her many avatars-daughter, sister, student, and the regular girl behind the badminton prodigy.</p>
<p>Find out what a typical day in Saina's life is like-rigorous training, a strict diet, and no parties or sleepovers. But it's not all work and no play; Saina loves to shop, eat ice cream (post wins only), and play games on her iPad!</p>
<p>With candid photographs and badminton tips from the pro herself, this book showcases the making of a badminton champ-in her own words.</p>
</div>
</div>
Use this code
<div>
<img src="9780143332497.jpg" alt="">
</div>
<div>
<a href="9780143332497.jpg" class="myButton" download="ss" title="Download">
<img src="/path/to/image" alt="Download">
</a>
</div>

Wrapper background not extending to cover height

I'm working with a template, we have a background image in the wrapper, but when i'm viewing the website from a laptop 13'' screen, the text extends below the fold, the wrapper only covers above the fold, therefore my content isn't being displayed properly.
How can i fix this? Better yet, how can i make my content fit above the fold.
JSFiddle Link: http://jsfiddle.net/L72wwz7g/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>COMPANYNAME Photo Contest</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<link href="css/style.css" rel="stylesheet" />
<link href="css/colors/style-color-01.css" rel="stylesheet" />
<link rel="stylesheet" href="css/contact.css" />
<link rel="stylesheet" href="css/simple-line-icons.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700' rel='stylesheet' type='text/css' />
</head>
<body>
<div id="wrapper">
<!-- Start Header -->
<div id="header">
<div class="container">
<div class="row">
<div class="span12">
<h1>
<a href="#">
<img src="images/logo.png" alt="COMPANYNAME" />
</a>
</h1>
<h2 class="menulink">
Menu
</h2>
<!-- Start Menu -->
<div id="menu">
<ul>
<li>
HOME
</li>
<li>
PHOTO CATEGORIES
</li>
<li>
PHOTOGRAPHY TIPS
</li>
<li>
CONTEST RULES
</li>
<li class="current">
ENTRY FORM
</li>
</ul>
</div>
<!-- End Menu -->
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<!-- End Header -->
<!-- Start Content -->
<div class="container">
<div class="row">
<div class="span6">
<div class="inner">
<br />
<br />
<br />
<br />
<br />
<br />
<center>
<h1 style="color: #464f56">SHOW US YOUR
<b>BEST BEFORE AND AFTER</b> PHOTOS AND
<b>WIN PRIZES</b> IN THE COMPANYNAME PHOTO CONTEST</h1>
</center>
<p>The COMPANYNAME user community is a source of inspiration to us; your remarkable Before & After photos demonstrate the artistry that goes along with the science and technology to create striking results that change lives. To recognize our COMPANYNAME users and encourage you to show off your results, we're inviting you to enter your best Before & After photos into our photo contest.</p>
<p>Before & After images are a clear and dramatic way to tell your best patient stories. The COMPANYNAME Photo Contest is a celebration of these patient stories, and an invitation to you to share your results with the COMPANYNAME community.</p>
</div>
</div>
<div class="span6">
<div class="inner">
<br />
<br />
<br />
<br />
<img src="images/b-a-stacked.png" />
<br />
<br />
<span style="color: #464f56; font-size: 3em;">
<b>Prizes:</b>
</span>
<br />
<h2 style="color: #ffffff">
<b>4 First place Prizes!</b>
</h2>
<h3 style="color: #ffffff">
<b>$1,000 + Join the COMPANYNAME Facebook Wall of Fame!</b>
</h3>
<h3 style="color: #ffffff">
<b>In addition, choose:</b>
</h3>
<ul>
<li>
<span style="color: #ffffff;">
<b>A night out on the town</b>
</span>
</li>
<li>
<span style="color: #ffffff;">
<b>A chair-massage therapy for a day</b>
</span>
</li>
<li>
<span style="color: #ffffff;">
<b>$1,000 worth of Top Flight points</b>
</span>
</li>
</ul>
<h3 style="color: #ffffff">
<b>All photos we keep to use are worth $500!</b>
</h3>
<p style="font-size:12px">See
Terms and Condition for full details</p>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<!-- End content -->
<div class="clearfix"></div>
</div>
<div class="strip features">
<div class="container">
<div class="row">
<br />
<a name="categories"></a>
<h2 style="color: #0658a0">We invite you to submit Before & After photographs in these categories:</h2>
<ol>
<li>
<b>Benign Lesions</b>, such as Angiofibromas, Cutaneous Horn, Milia, Sebaceous Hyperplasia, Skin Tags, Syringoma and Xanthelasma</li>
<li>
<b>Benign Pigmented Lesions</b>, such as Benign Nevi, Dermatosis Papulosa Nigra and Keratoses</li>
<li>
<b>Other Dermatological Conditions</b>, such as Active Acne, Melasma, Poikiloderma, Rhinophyma, Rosacea, Port Wine Stain, Scars and Warts</li>
<li>
<b>Aesthetic Treatments</b>, such as Forever Bare Hair Removal, Forever Young BBL, Pores, Resurfacing, SkinTyte and Vertical Lip Lines</li>
</ol>
<br />
<div class="clearfix"></div>
</div>
</div>
</div>
<a name="rules"></a>
<div class="strip highlight strip-alt">
<div class="container">
<div class="row">
<div class="span6">
<div class="inner">
<h2 style="color: #0658a0">Rules:</h2>
<ul>
<li>Please send before and after photos taken at the same angle, with the same lighting.</li>
<li>Please include condition treated, modality used, settings, number of treatments, and how long after the treatment the photo was taken</li>
<li>Photos submitted need to be
photo-released. We may use your photo in upcoming campaigns!</li>
</ul>
<p>Please feel free to enter as many photos as you'd like. Good luck! We're looking forward to seeing your photos!</p>
</div>
</div>
<div class="span6">
<div class="inner">
<img src="images/b-a-pic.png" />
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="strip highlight">
<div class="container">
<div class="row">
<div class="span6">
<div class="inner">
<center>
<h2 style="color: #0658a0">The benefits of
<span style="color: #000000">Good</span> </br>Clinical
<span style="color: #000000">Photography</span></h2>
</center>
<center>
<object id="flashObj" width="486" height="412" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,47,0">
<param name="movie" value="http://c.brightcove.com/services/viewer/federated_f9?isVid=1" />
<param name="bgcolor" value="#FFFFFF" />
<param name="flashVars" value="videoId=3721169588001&playerID=96360168001&playerKey=AQ~~,AAAAFkZnkSk~,IiQ79d9fntlYzbIBNabTKGnz_-W-KulR&domain=embed&dynamicStreaming=true" />
<param name="base" value="http://admin.brightcove.com" />
<param name="seamlesstabbing" value="false" />
<param name="allowFullScreen" value="true" />
<param name="swLiveConnect" value="true" />
<param name="allowScriptAccess" value="always" />
<embed src="http://c.brightcove.com/services/viewer/federated_f9?isVid=1" bgcolor="#FFFFFF" flashvars="videoId=3721169588001&playerID=96360168001&playerKey=AQ~~,AAAAFkZnkSk~,IiQ79d9fntlYzbIBNabTKGnz_-W-KulR&domain=embed&dynamicStreaming=true" base="http://admin.brightcove.com" name="flashObj" width="486" height="412" seamlesstabbing="false" type="application/x-shockwave-flash" allowfullscreen="true" swliveconnect="true" allowscriptaccess="always" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" />
</object>
</center>
</div>
</div>
<a name="tips"></a>
<div class="span6">
<div class="inner">
<h2 style="color: #0658a0">Photography
<span style="color: #000000">tips:</span></h2>
<ul>
<li>Make sure you are using a high quality camera with a good lens.</li>
<li>Mount the camera on a tripod.</li>
<li>Use the highest resolution possible for your pictures.</li>
<li>Make sure there are minimal distractions in the background. Shooting on a black background show the best results.</li>
<li>Isolate the treatment area. When shooting the face, use a headband to hold back hair. Have the patient wear a black drape - light can reflect off of bright colors.</li>
<li>Put a marker on the wall for patients to look at.</li>
<li>Always shoot the pictures from the same distance.</li>
<li>Make sure the lighting is always coming from the same direction.</li>
<li>Light above the patient will show the most texture - diffuse light with a soft box or with umbrellas.</li>
<li>Do not set the light up at the same angle as the lens that is shooting the picture.</li>
<li>Do not use a direct flash.</li>
<li>Be consistent with the your images. Be aware of :
<ul>
<li>Lighting</li>
<li>Patient position</li>
<li>Camera</li>
<li>Camera position</li>
<li>Patient preparation</li>
<li style="list-style: none; display: inline">
<ul>
<li>Clothing</li>
<li>Jewelry (preferably none)</li>
<li>Make-up (preferably none)</li>
</ul>
</li>
</ul></li>
<li>Make sure you are processing the photos in the same way.</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="strip highlight strip-alt">
<div class="container">
<div class="row">
<div class="span12">
<div class="inner">
<a name="terms"></a>
<h2 style="color: #0658a0">Terms and Conditions:</h2>
<ul>
<li>There is no entry fee and no purchase necessary to enter this competition.</li>
<li>Route to entry for the competition and details of how to enter can be found at www.COMPANYNAME.com/photocontest.</li>
<li>Closing date for entry will be March 31st, 2015. After this date the no further entries to the competition will be permitted.</li>
<li>No responsibility can be accepted for entries not received for any reason.</li>
<li>There will be four winners, one in each category listed above. The rules of the competition and the prize for each winner are as follows: First Place in each category: $1,000, as well as recognition on the COMPANYNAME website and Facebook page, and ONE of the following: A night out on the town for your office staff, hosted by your sales representative OR chair-massage therapist for a day (not to exceed $1,000) OR $1,000 in COMPANYNAME Top Flight Points. We will compensate entrants $500 for any photo we keep and use.</li>
<li>COMPANYNAME, Inc. reserves the right to cancel or amend the competition and these terms and conditions without notice in the event of a catastrophe, war, civil or military disturbance, act of God or any actual or anticipated breach of any applicable law or regulation or any other event outside of COMPANYNAME's control. Any changes to the competition will be notified to entrants as soon as possible.</li>
<li>COMPANYNAME is not responsible for inaccurate prize details supplied to any entrant by any third party connected with this competition.</li>
<li>No cash alternative to the prizes will be offered.</li>
<li>Winners will be chosen by a panel of judges appointed by COMPANYNAME.</li>
<li>The winner will be notified within 28 days of the closing date. If the winner cannot be contacted or do not claim the prize within 14 days of notification, we reserve the right to withdraw the prize from the winner and pick a replacement winner.</li>
<li>COMPANYNAME will notify the winner when and where the prize can be collected.</li>
<li>COMPANYNAME's decision in respect of all matters to do with the competition will be final and no correspondence will be entered into.</li>
<li>The winner agrees to the use of his/her name and image in any publicity material.</li>
<li>Entry into the competition will be deemed as acceptance of these terms and conditions.</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div id="footer">
<div class="clearfix"></div>
</div>
</html>
It looks like background-size: cover on wrapper is your problem.
Change it tobackground-size: containand get rid of height:100% on body.
That will fix your issue.

The tilde (~) in the one of the images doesn't get resolved

This is a funny one.
I have a page using knockoutjs.
Everything works fine apart from one of the images in the page that doesn't show.
My HTML
<div class="cyclerItem"> #*Views and Visitors*#
<div class="cyclerFilter">
<img class="toggleImg" src="~/Content/imgs/City.png" width="30" height="30" />
</div>
<div class="cyclerFilterText">
<div>
<a id="modal-launcher4" > Business Unit </a>
<div id="modal-content4" class="arrow_box">
<div id="scroll4" class="scroll4">
<div id="container3column" >
<div id="primary1">
<p>Business Unit</p>
<ul>
<li>All</li>
</ul>
<ul data-bind="'foreach': businessUnits.businessUnitsList">
<li data-bind="'text': title, 'click': goToFunctions""></li>
</ul>
</div>
</div> #* Container ends*#
</div> #* scroll *#
</div> #*modul content 4 4 *#
</div>
</div> #* Cykler filter text*#
<div class="cyclerFilter">
<img class="toggleImg" src="~/Content/imgs/Globe_Alt.png" width="30" height="30" />
</div>
<div class="cyclerFilter">
<img class="toggleImg" src="~/Content/imgs/Globe_Alt.png" width="30" height="30" />
</div>
<div class="cyclerFilterText">
Geographies
</div>
</div>
My HTML rendered on the Client:
<div class="cyclerItem">
<div class="cyclerFilter">
<img class="toggleImg" src="/Content/imgs/City.png" width="30" height="30" />
</div>
<div class="cyclerFilterText">
<div>
<a id="modal-launcher4" > Business Unit </a>
<div id="modal-content4" class="arrow_box">
<div id="scroll4" class="scroll4">
<div id="container3column" >
<div id="primary1">
<p>Business Unit</p>
<ul>
<li>All</li>
</ul>
<ul data-bind="'foreach': businessUnits.businessUnitsList">
<li data-bind="'text': title, 'click': goToFunctions""></li>
</ul>
</div>
<div id="content1">
<p>Function</p>
<ul>
<li>All</li>
</ul>
<ul data-bind="'foreach': functions.functionsList">
<li data-bind="'text': title, 'click': goToDepartments"></li>
</ul>
</div>
<div id="secondary1">
<p>Department</p>
<ul>
<li>All</li>
</ul>
<ul data-bind="'foreach': departments.departmentsList">
<li data-bind="'text': title"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cyclerFilter">
<img class="toggleImg" src="~/Content/imgs/Globe_Alt.png" width="30" height="30" />
</div>
<div class="cyclerFilter">
<img class="toggleImg" src="/Content/imgs/Globe_Alt.png" width="30" height="30" />
</div>
<div class="cyclerFilterText">
Geographies
</div>
</div>
as you can see there only one small difference, one of the image have the source where the tilde (~) didnøt get resolved inot the right path.
It's only that one image in that position, if I change the source to another path it still does not work, but as you can see the next image is exactly the same but it works...
something to do with mvc messing around because of the knockout code?
Or maybe just a simple error in my html that make MVC get crazy? First coming first serving. :)
I actually found the problem. It's probably a pure HTML problem.
There is an extra double quote at the end of one attribute in a li tag. :)
I made some tests and it doesn't matter where but if any attribte in any tag as an extra double quote, that img stop working. I wonder why that img src and not something else.

only certain images not showing...why

I added some images and only the last two won't show up...maybe because it was naturally a smaller size?? I don't know...maybe someone here can help me....
Here is the part where i added them in my code
<div id="gallery">
<ul>
<li> <img src="images/studs/boss/thumbnails/boss0.jpg" class="mini" width="200" /> <img src="images/studs/boss/boss0.jpg" class="pic" /> </li>
<li> <img src="images/studs/boss/thumbnails/boss1.jpg" class="mini" width="200" /> <img src="images/studs/boss/boss1.jpg" class="pic" /> </li>
<li> <img src="images/studs/boss/thumbnails/boss2.jpg" class="mini" width="200" /> <img src="images/studs/boss/boss2.jpg" class="pic" /> </li>
<li> <img src="images/studs/boss/thumbnails/boss3.jpg" class="mini" width="200" /> <img src="images/studs/boss/boss3.jpg" class="pic" /> </li>
<li> <img src="images/studs/boss/thumbnails/boss4.jpg" class="mini" width="200" /> <img src="images/studs/boss/boss4.jpg" class="pic" /> </li>
<li> <img src="images/studs/boss/thumbnails/boss5.jpg" class="mini" width="200" /> <img src="images/studs/boss/boss5.jpg" class="pic" /> </li>
</ul>
</div>
the same thing you see online is the same thing I see when I access my site with local disk (my laptop where everything is stored)
i checked with chromes developer tools and I am getting "failed to load resource.." from the local disk.......like I am testing it on my computer before uploading...thats what I mean by local disk...if that is the right way to say it
this is my folder to show file structure...
The images don't exist:
http://www.saucysbulldogs.com/images/studs/boss/thumbnails/boss4.jpg
Going directly to the image will give you a 404.
The images images/studs/boss/thumbnails/boss4.jpg and boss5.jpg were not uploaded, my browser can't access them...