 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / March 2007Problems with Borders using CSS
Hello, I am validating my webpages for HTML 4.01 Transitional. I have the problem that I cannot remove a border on a small graphic on my page. I have researched various websites for the correct CSS code but none seems to work. The HTML code: <img class="YelArLL" alt=""> The CSS code: .YelArLL { BACKGROUND-IMAGE: url('Images/YellowArrowLowerLeftHeader.png'); BORDER-COLLAPSE: collapse; height: 14px; width: 16px; margin: 0px; padding 0px; color: #000000; border-style: none; } Take a look at the webpage to see what it looks like. (http:// www.skydiving.co.uk/tandem2.htm) Its the small yellow arrow on the left side with a border. Notice the other arrows are fine when done without CSS. Any ideas? Cheers, Simon > Hello, > [quoted text clipped - 7 lines] > BACKGROUND-IMAGE: url('Images/YellowArrowLowerLeftHeader.png'); > BORDER-COLLAPSE: collapse; I would replace the above line in your css -> border:none; > Take a look at the webpage to see what it looks like. (http:// > www.skydiving.co.uk/tandem2.htm) > Its the small yellow arrow on the left side with a border. Notice the > other arrows are fine when done without CSS. Any ideas? > > Cheers, Simon HTH Vince Morgan > > .YelArLL { > > BACKGROUND-IMAGE: url('Images/YellowArrowLowerLeftHeader.png'); > > BORDER-COLLAPSE: collapse; > > I would replace the above line in your css -> border:none; Looking more closely at the image on the site, it could actualy be the anchor border that is visible. If that's the case then you will need to do the same for the anchor too. Give it a class with the same border attribute. > > Take a look at the webpage to see what it looks like. (http:// > > www.skydiving.co.uk/tandem2.htm) > > Its the small yellow arrow on the left side with a border. Notice the > > other arrows are fine when done without CSS. Any ideas? Unfortunately that did not work. Hmm? Scripsit simonbrentford@googlemail.com: > I am validating my webpages for HTML 4.01 Transitional. That's a start, but you should also use correct CSS (and to aim at HTML 4.01 Strict if feasible). And you should actually produce valid markup, not just "validate". > I have the > problem that I cannot remove a border on a small graphic on my page. Well, on Firefox, there is no border - but no graphic either. > I have researched various websites for the correct CSS code but none > seems to work. You haven't used the W3C CSS Validator. It would report the syntax errors, which should be fixed before more complicated troubleshooting. Alternatively, use Firefox and view the console log (error log) via the Tools menu. > BORDER-COLLAPSE: collapse; That's formally correct but has no effect, since it only affects tables. > padding 0px; That's malformed (no colon). > Take a look at the webpage to see what it looks like. (http:// > www.skydiving.co.uk/tandem2.htm) It looks messy. So? The markup is messy, too, and so is the CSS code. Even with tools like CSS checkers, you will have difficulties in maintaining the page, due to its unnecessary complexity. For example, if you want to use yellow arrows as item markers, why don't you just use list markup and set list-style-image? Followups trimmed to c.i.w.a.s.  SignatureJukka K. Korpela ("Yucca") http://www.cs.tut.fi/~jkorpela/ Thanks Jukka, I appreciate there is too much complexity on the page. I am precisely using the W3C validator to check for errors and this is how I noticed the error. I will keep looking for a solution to this. Simon > Hello, > > I am validating my webpages for HTML 4.01 Transitional. I have the > problem that I cannot remove a border on a small graphic on my page. I > have researched various websites for the correct CSS code but none > seems to work. As Jukka previously mentioned your markup and your css need a good clean up. Something very curious. "<img class="YelArLL" alt=""><br>" The class in question is being applied to the above tag, but I don't see any image there. The image tag below that has no class, but it's the one with the yellow arrow image. HTH Vince Morgan Inside the CSS file you will find the image. I did another experiment and created an almost blank page with just 2 examples with CSS and without. The problem still exists. This is the HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Language" content="en-gb"> <meta name="GENERATOR" content="Microsoft FrontPage 6.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>New Page 1</title> <link href="styleTS.css" rel="stylesheet" type="text/css"> </head> <body> <img class="YelArLL" alt=""><br>Cannot remove border - using CSS<p> <img border="0" src="Images/YellowArrowLowerLeftHeader.png" width="16" height="14"><br> Border - without CSS but not W3C compliant</p> </body> </html> This is the CSS: .YelArLL { BACKGROUND-IMAGE: url('Images/YellowArrowLowerLeftHeader.png'); height: 14px; width: 16px; border: none; margin: 0; padding: 0; } Its still not working.... Simon BACKGROUND-IMAGE is for the BODY Tag. You can't use it for the IMG tag. See my other reply to you. SignatureDavid Berry FrontPage Support: http://www.frontpagemvps.com/ > Inside the CSS file you will find the image. I did another experiment > and created an almost blank page with just 2 examples with CSS and [quoted text clipped - 38 lines] > Its still not working.... > Simon > BACKGROUND-IMAGE is for the BODY Tag. You can't use it for the IMG tag. Rubbish. The background-image property is applicable to all sorts of element, and certainly for <img> > -- > David Berry > FrontPage Support: http://www.frontpagemvps.com/ That explains a lot. 8-( In article <1175093367.783508.300370@n59g2000hsh.googlegroups.com>, > > BACKGROUND-IMAGE is for the BODY Tag. You can't use it for the IMG tag. > [quoted text clipped - 6 lines] > > That explains a lot. 8-( I want to know if he appreciates how cutting a remark this is? How can I find out? Signaturedorayme > <body> > <img class="YelArLL" alt=""><br>Cannot remove border - using CSS<p> [quoted text clipped - 9 lines] > .YelArLL { > BACKGROUND-IMAGE: url('Images/YellowArrowLowerLeftHeader.png'); Hmmm,, I feel somewhat silly right now. That's a background image. Why didn't I notice that earlier :) I don't think that is what you are after at all. try replacing; "<img class="YelArLL" alt=""><br>Cannot remove border - using CSS<p>" with; "<img class="YelArLL" alt="" src="Images/YellowArrowLowerLeftHeader.png" then remove; "BACKGROUND-IMAGE: url('Images/YellowArrowLowerLeftHeader.png');" from the class. I think I want it to work now more than you do :) Scripsit simonbrentford@googlemail.com: > <link href="styleTS.css" rel="stylesheet" type="text/css"> Are we supposed to guess the base address? Please post URLs, not fragments of code; quote or paraphrase what you are commenting on; and select _the_ best group for you messages (I helped you this time by setting followups). SignatureJukka K. Korpela ("Yucca") http://www.cs.tut.fi/~jkorpela/ On Wed, 28 Mar 2007 10:49:18 GMT scribed: > Hello, > [quoted text clipped - 26 lines] > > Cheers, Simon Well, you first need an image to be able to remove the "border". Where's your src? SignatureNeredbojias He who laughs last sounds like an idiot. I see. I will try to put the SRC command in. Yes maybe I should have put the full URL in. I am falible unfortunately! But thanks to all who have made suggestions. I will let you know how I get on. Simon |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.