I'm needing to remove the border above the scrolling images here: http://briansmall.com/inovar/capabilities-test.html
Trouble is, my style.css (line 367) seems to trump my screen.css, and I can't remove the border without removing it from the #left-nav a (on the same page), which I don't want to do.
Can anyone help me remove the border-top from the img on this particular page? I hope I'm making sense.
Thank you.
I appears you have border: 0 none;, not sure what you're trying to do here (you should pick one: Should I use 'border: none' or 'border: 0'?) , but if you set your css to:
img { border: 0 !important; }
in your stylesheet, that should override your inline style and remove the border on all sides.
you should try this img{border: 0}
Edited
Look into these:
try to remove border from parent of your <img>. In this case from your <a> tag
set your border in #left-nav a to none
OR
if you can't edit it, you can add new element rule for your <a> in slide show and set
border: none !important;
Related
I've been trying to get rid of the thin gray strip that's in the middle of this page:
http://redesign.emdintegration.com/index.html
It seems to be related to the wrapper but I can't get it to disappear. Please help!
Delete this line from your CSS...
#Content{
background: url(../images/content.gif) 0 100% repeat-x; /*Delete this line*/
}
I believe it is line 129 in style-v1.css
Look at the CSS for #content. It has a background image of a gray bar and a child <div> element within has a padding of 10px.
You have a padding of 10px on the following:
<div class="container_24" style="padding-top:10px">
Remove the style, and the gray stripe will disappear.
If you can't edit the HTML, you can add the following CSS rule:
.container_24 {padding-top: 0 !important;}
On your #content you have background: url(../images/content.gif) 0 100% repeat-x;
If you get rid of it, that should take care of your issue.
look at your debugger. in class .container_24, add padding-top:0px;, and delete the inline styling. That should get rid of all top padding in that class.Best practices indicate to use seperate stylesheet for all your styling, instead of dirty, messy inline styling.
The background url for #content is the gray line. You might think it's an element, but it's an image being directed by CSS for a background image for the id="content" on the page. I imagine the section element is for the product boxes and #content is in relation to that.
You could alter the CSS to not load this (../images/content.gif) by simply adding display: none to that line on the style sheet [Line 129]
Try copying this in its place.
#content {
padding:0px 0px 0px 0px;
display: none;
}
I'm redesigning my website and wish to have certain paragraphs styled like in the below image.
I thought this would be fine but now it's suddenly just hit me... there's no way to set the thickness of an underline! Or at least I don't think there is?
Of course there is the border property, but then I would only have a border at the bottom of the whole paragraph and not under each line.
Can anyone think of a workaround for this?
You can turn your paragraph into an inline display: DEMO
This way you can even set a border-style to your underline'like:
p {
display:inline;
border-bottom:3px double;
}
Single <p>aragraphs in between title
An example of this would be:
h4 {border-bottom: 10px solid #000;}
I found this from another stack exchange question found here:
Edit line thickness of CSS 'underline' attibute
I have a global rule for anchor tags in my document:
a,a:hover {border-bottom: 1px solid #ccc;}
But the border doesn't look good on images. I was curious if there's a way to remove the border of an anchor tag that contains an image only using pure css?
I found this: http://konstruktors.com/blog/web-development/1122-remove-border-from-image-links/
It basically is a very simple hack that looks like this:
a img { border:none; vertical-align:top; }
It works like a charm and has no browser-conflicts: See article for more details.
EDIT: The border:none doesn't actually do anything useful in most circumstances. The border is on the anchor, not the img tag, so if you've already zeroed out the border on anchored images with a global CSS reset, you'll only need vertical-align:top to push the a's border up and behind the image so it's no longer visible (as long as your image is opaque).
No, there is currently no selector in CSS that would select elements on the basis of their descendants. You would need to use JavaScript or classes in CSS.
Most robustly, you would use a class attribute on all links that do not contain an image and use a corresponding class selector in your CSS rule.
If most of your links do not contain an image, you could use negative approach and set a class on those links that contain an image, say class=imagelink, and use a :not(.imagelink) selector in CSS. Support to :not(...) is widespread but not universal. A yet another approach, not counting on such support, is to set a bottom border on all links as in your question and then switch it off for image links:
a.imagelink {border-bottom: none;}
Not possible, unfortunately! I guess I've only done this using jquery.
http://www.w3schools.com/cssref/css_selectors.asp
Complex CSS selector for parent of active child
Is there a CSS parent selector?
It's not possible using cssbut you can do it using css if you add cssParentSelector.js script which uses jQuery. Here is an example
a! > img { border: none; }
above css rule removes the border from the a tag if it's the parent of an img tag, but still now it's not pure css, has dependendencies.
The vertical-align trick only works [well] with non-transparent images, and doesn't work at all if the a line-height is greater than the image height (think small social networking icons).
I wish I could use the accepted solution here, but it throws off alignment of inline images within text blocks, along with the issues above.
I've settled for doing a solid white box-shadow on the bottom of a > img, maybe a backup filter shadow for IE8 and older, and calling it a day. Doesn't mess with the layout:
a { text-underline: none;
border-bottom: 1px solid blue; }
a img { box-shadow: 0 .333em 0 0 white; /* white, or your background color */
filter: progid:DXImageTransform.Microsoft.Shadow... etc }
As said by other answers to your question, it's not possible do it with CSS by now. But if you use jQuery, this work great:
$(document).ready(function(){
$('a img').parent().css('border','none');
});
It basically after the page is loaded search the links containing an image and state the css rule border:none; for the parent element of the image, ie. the link.
I have an add this button on the website that is rendering a border bottom in the subheader. This seems to be because the CSS is attributing a border bottom to all hyperlinks in that subheader box. However, I want to remove the border bottom from the images (twitter, rss) only. I've tried various methods with no success. My most recent attempt involved adding custom CSS to the border bottom:
#subheader a {
border-bottom: none;
}
Here is my website: http://edhaj.tumblr.com/
Thanks for any help on this!!
A new rule like this one should work:
#subheader .addthis_toolbox a {
border-bottom:none;
}
Changing the selector from #subheader a to #subheader > a does the trick in your case because the links you want to give a border-bottom style are direct child nodes of the div with the id subheader but the other linked elements are not.
Well those images are within your addthis box so did you try:
#subheader .addthis_toolbox a {border-bottom: 0 none;}
I don't seem to be able to add box shadows to input elements, my CSS is kind of like this http://jsfiddle.net/DLCTh/ and as you can see it applies correctly on div elements but not on text inputs, am I missing something? Or is it that I can't do this?
add
border:0
or
border:none
http://jsfiddle.net/DLCTh/1/
It's because of the border on the input. Add border: none; and it should work.