Member Avatar for janetb

I'm using asp.net with themes, master and child pages. In the base css, I've got the img tag with a border. It's great in that I never have to place a border around my images. However, on one page where I'm using the Nivo slider, I want to remove the border. I know it's the base image, cause if I change the border to white, the border is gone - but every image on my website is then missing the border. I thought the inheritance went theme, page, inline css? Any help?

     img { margin:0 10px 10px 10px;border:1px solid #000000;}
     #imgNoLine { margin:0 0 0 0;border:0 #ffffff !important; }

     #maincontainer #contentwrapper #contentcolumn #contentInnerTube fieldset .nivoSlider img { position:absolute;margin:0 0 0 0; top:0px;left:0px; display:none;border:none 0 solid white !important; }

     <img src="image.jpg" alt="" style="border-width: 0 !important;" id="imgNoLine" />
  • 4 Contributors
  • 6 Replies
  • 284 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by janetb

Dani AI

Generated

A few points that tie the existing replies together and explain why the simple class/id fixes didn't take on this page.

As and noted, a per-image class is the clean approach in general. The reason it failed for is that Nivo does a fair bit of DOM work: it often wraps, clones, or builds slide elements (slices / imageLink wrappers) and may use background-images for the visible slide. That means an id or class placed on the original <img> can be ignored by the elements actually drawn in the slider. That also explains ’s jQuery removing the border from the first image only — the script ran against elements present at DOMReady, but later-generated slide elements still carried the base rule.

Troubleshooting checklist (use the browser inspector while each slide is visible):

  • Inspect the element that is actually visible (is it an <img>, an <a>, or a div with class like .nivo-slice?).
  • Check Computed Styles to see which rule sets the border (border vs outline vs box-shadow).
  • Look for cloned elements or inline style attributes added after initialization.

Practical fixes

  • Override the styles applied to the elements Nivo generates (not just the original img). Adding a targeted rule for the slider wrapper and generated nodes usually works; it forces removal of border/outline/box-shadow on the elements Nivo uses:
.nivoSlider .nivo-slice,
.nivoSlider a.nivo-imageLink,
.nivoSlider img {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
  • If the plugin is recreating elements after page load, apply a similar jQuery cleanup after the slider is initialized (or in its callbacks) so dynamically added nodes are cleared of borders:
$('.nivoSlider').find('a, img, .nivo-slice').css({
  border: '0',
  outline: '0',
  'box-shadow': 'none'
});

If the visible “lines” turn out to be slice gaps (1px seams) rather than CSS borders, try ensuring the slider/container background matches the desired color or adjust image sizing so slices don’t produce sub-pixel gaps.

Recommended Answers

All 6 Replies

Member Avatar for AleMonteiro

I think the best solution is to add an css class to images without border.:

img.no-border { border: none; }

Then, add the class 'no-border' to the images that you want.

Member Avatar for gabrielcastillo

if you are having trouble try using jquery.

$(document).ready(function(){
    $('.nivoSlider img').css('border','none');
});
Member Avatar for JorgeM

... what you have implemented is common. As AleMonteiro mentioned, keep it as it, but create an additional style in your style sheet.

img.no-border { border: none; }

On the image element where you want to remove the border just apply that class directly.

<img src="#" class="no-border" />

The inline style will override the style you have in your external style sheet.

Member Avatar for janetb

JorgeM & AleMonteiro - thanks. Tried it, but no luck. I'm with you, but this one is really frustrating. That's why I've kinda gone over the top... %-) Any other ideas?

Member Avatar for JorgeM

Do you have this page online where we can take a look. Maybe you have something else involved here.

the suggestions that were given are correct and should work. I use this approach many times.

Member Avatar for janetb

Gabrielcastillo, the jquery worked, SOMEWHAT. Thanks. The first image of the three-image rotation doesn't have lines, but the next two have lines. Any ideas? Still not sure why the css didn't work. I'm needing to start getting much more involved with jquery. Know of any good starter online tutorials? What would you recommend?

Edited by janetb
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.