Remove underline for linked images?

The thing with CSS styles is that the more specific the selector is, and the later it is read, the more importance it is given, so your a img declaration on line 32 is being mixed with the .storycontent a declarations from line 183 onwards. Try inserting

.storycontent a img {
    border-bottom: none;
}

somewhere after line 192.

Thanks Kalessin. Gave it a go ( https://wordpress.pastebin.ca/918953) but it didn’t seem to work.

any other suggestions would be very much appreciated.

Cheers,

D.

Umm, I had another go and removed the other ‘storycontent a img’ but had no luck. Can anyone think of something I might be able try?

Cheers!

You are getting two underlines because your image is enclosed by two elements, ‘div.storycontent a’ (dashed pink) and a ‘span’ (solid blue). Looking at the source code, I see that the latter is styled within the HTML, not the style sheet.

BTW, this is a CSS question, not WordPress. Perhaps the ‘span’ element is present in your PHP template?

Thanks jv. There doesn’t seem to be a span element in my PHP template. Should I include one?

<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	<div class="post" id="post-<?php the_ID(); ?>">
		<h3 class="storytitle"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
		<div class="meta"><?php edit_post_link(__('.')); ?></div>
		<div class="storycontent">
			<?php the_content(__('More...')); ?>
		</div>
		<div class="feedback">
			<?php wp_link_pages(); ?>
			<?php comments_popup_link(__(''), __('Comments (1)'), __('Comments (%)')); ?>
		</div>
		<?php comments_template(); // Get wp-comments.php template ?>
	</div>
<?php endwhile; else: ?>
	<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
<?php posts_nav_link(' — ', __('&laquo; Previous Page'), __('Next Page &raquo;')); ?>
<?php get_footer(); ?>

Thanks jv. There doesn’t seem to be a span element in my PHP template.

Then the style must have been added to the actual post/Page (i.e. the_content). Look at it using the code view, under Admin/Manage.

Should I include one?

Only if you intend to include an image in every post!
For what you’re aiming for here, maybe you should style ‘p a img’ instead? I would also recommend turning off the visual editor.

In terms of general CSS advice, I’d suggest cutting down on DIVs and apply styles to standard HTML elements instead… much less code :p

I have the same problem too.

What I do is, include this in the CSS

a.img:hover { border: 0px; }

Then, manually give your image links a class=”img”

Thanks. I managed to get rid of it by turning off the visual editor and changing the code of the post. It’s just kinda annoying that I’ll have to do everytime I post as I intend for every post to have an image.

I just don’t understand where that bit of styling is coming from. I’m not very good at this kind of thing ??

Cheers.

How do I manually give my image links a class=”img”?

<a href="https://google.com" class="img"><img src="https://noncollective.com/wp-content/uploads/2008/02/circle.png" alt="circle.png" /></a>

manually give your image links a class=”img”

Yuk… please don’t do that noncollective! The main point of CSS is that the styles are cascading. Most things that you input into the post content are wrapped with <p> elements.

Delete the span around the image link, then use this…

div.storycontent p a img {
border-top: 1px dashed #ff00a5;
border-bottom: 1px dashed #ff00a5;
padding: 10px 0 0 0;
}

For poppacket to have hovering fun…

div.storycontent p a:hover img {
background-color: #ff00a5;
}

If you intend to post an image in every post, simply hit return after the image to start a new paragraph. You could also use float and margin so that it appear next to the text.

Hope that helps!

Thanks!

Can I ask another question… When I view the blog in Safari the linked circle now looks fine. When I view it in Firefox it has a black dashed underline and solid borders down the left and right. What’s going on?

poppacket, I wouldn’t recommend defining a CSS class that has the same name as an HTML element.

noncollective, not sure if you’ve seen this, but you can turn off the visual editor by default. The option is (illogically) under Users>Administrator>EditUser (tiny checkbox at the top of the page).

Thanks jvchamary. You’ve been very helpful.

No problem.

Can I ask another question… When I view the blog in Safari the linked circle now looks fine. When I view it in Firefox it has a black dashed underline and solid borders down the left and right. What’s going on?

Weird! You’re right, it doesn’t show in either Opera or Safari (both Mac). IE (PC) displays the borders in purple, suggesting it results from a link. Try setting the left and right borders to none or 0 and see what happens.