Question

Razor, MVC3 code first, JQuery Accordion 1.8.22, jQuery 1.7.2.

When I add an image to my jQuery accordion h3 header in a Razor view there is extra padding around the image. I created the accordion code from the jQuery site, when I run it as a html page the img perfectly fits on the header with no extra padding and when the accordion collapses there is a single pixel between the headings. When I take the exact same code with the same jQuery, style sheets and images and put them in a razor view the image sort of floats in the header creating a lot of unwanted space around it. I’ve tried this in both IE9 and the lastest Chrome and with different images and the problem persists.

Can anyone replicate this problem? Has anyone succesfully added an image to an accordion h3 header in Razor and gotten the image to fill the header without any extra padding?

<script type="text/javascript">
  $(function () { $("#accordion").accordion({  });   }); </script>

<div id="accordion">

<h3 style="height: 42px"><a href="#">
  <img src="@Url.Content"~/Content/themes/base/images/part1.jpg")"
                                alt="Part 1" style="border-style: none"/></a></h3>

Thank you for any help.

Answer 1

I figured it out. It had nothing to do with Razor views. The custom css file generated by the jQuery site had a padding setting for the accordion header. Once I removed that css from the project the problem cleared up.