Last post Feb 14, 2013 07:27 PM by DallasSteve
Feb 14, 2013 04:21 PM|DallasSteve|LINK
I'm using a clear gif to space another object on my page and it works, but a light line the width of the spacer appears in front of the background image on the page. Why? I downloaded the clear gif from a web page that claimed it was clear, but I can't
say for sure that it is transparent.
Feb 14, 2013 04:25 PM|bbcompent1|LINK
You are seeing a border around the image, set border=0 and that should get rid of the problem.
Feb 14, 2013 04:28 PM|DallasSteve|LINK
I changed the image tag height to 12 px and now the line is a border around a clear image. I can see the background clearly so the image is transparent. By why does the border still appear when I added this style to the img tag?
Feb 14, 2013 04:30 PM|DallasSteve|LINK
I just tried adding border=0 to the img tag and the border still appears. Any other ideas? An img should default to no border in my opinion.
Feb 14, 2013 04:31 PM|bbcompent1|LINK
Can you post your img src code so I can see it? I will need to replicate your issue to fix it :)
Feb 14, 2013 04:36 PM|DallasSteve|LINK
I checkd W3Schools and it says: The border attribute of <img> is deprecated in HTML 4.01. Use CSS instead. CSS syntax: <img style="border:5px solid black">
So I tried that code and a 5 pixel black border appears around the 1 pixel irritating inner border. Apparently there is a border that is not a border on the inside of the border. But if that is true then how can some websites use a transparent gif as a
spacer and not have an irritating non-border line appear? This shouldn't be so complicated. Whoever designed this needs a good beating.
Feb 14, 2013 04:38 PM|DallasSteve|LINK
Is it because the img tag is in a table cell? Here's my code:
<td background="@Url.Content("~/Content/Images/header_middle.gif")" style="text-align: left; white-space:nowrap; padding: 3px 3px 3px 3px;" height="24px">
<img src="../../Content/Images/clear.gif" width="84px" height="12px" style="border: 0px none;" />
Feb 14, 2013 04:51 PM|Rion Williams|LINK
Setting the outline and border properties to 0 should solve the issue :
style="border: 0;outline: 0;"
you may also consider using the border-style property :
But as part of a better solution, is there any particular reason that a clear image is being used as a spacer as opposed to just an empty <div> element?
You can use the Developer Tools (F12) within your browser to inspect your individual elements to see what styles are being applied to them and where the styles originate.
Feb 14, 2013 06:25 PM|DallasSteve|LINK
I had high hopes when I read your reply, but they were dashed. I had never heard of outline and it makes sense to me that maybe I am seeing the outline. I tried setting border and outline to 0, but no change. I tried 0px and no change. I tried setting
border-style and outline-style to none, but the 1 pixel box still appears. I'm out of ideas. Is this an IE thing? Maybe I'll try opening the page in Firefox.
Feb 14, 2013 06:31 PM|Rion Williams|LINK
This is a really strange issue.
Could you post a larger code example and any additional styles (such as your CSS) that may be being applied to the <img> element. What browser are you using or have you tried this in?
Feb 14, 2013 06:37 PM|DallasSteve|LINK
Thanks for the tip about F12. That's pretty interesting, but when I finally found the img tag it said border and outline was none. I didn't see any other settings. Is there a way to expand all nodes in the F12 window? That was pretty slow clicking through
the node hierarchy, but I couldn't find and expand all nodes option.
Feb 14, 2013 06:41 PM|Rion Williams|LINK
Depending on your browser, you may want to consider using the Developer Tools within a different browser such as Chrome or Safari. They are a bit easier to work with.
You should be able to click on a cursor within the Developer tools and then click on the element that you want to look at within your browser and it will expand the nodes to that element.
Feb 14, 2013 06:49 PM|DallasSteve|LINK
Our website is too complex to post all of the related code. So I took the table with the image and pulled it out into a test page. The outline around the img tag went away. So I'm trying to add back in more parts and find what makes the outline appear.
I added back in the link to my main CSS stylesheet, but that didn't make the outline appear. I may give up and use a div spacer like you suggested, but I may look for the answer a little longer.
Feb 14, 2013 07:06 PM|DallasSteve|LINK
I tried inserting a blank div as shown below and that doesn't move the next object over 84 pixels. It just collapses the space.
<div style="width: 84px; height: 12px; border-style: none; outline-style: none;"></div>
Feb 14, 2013 07:12 PM|Rion Williams|LINK
I'd certainly recommend trying Chrome's Developer Tools. Once you have an element selected it will display all of the styling information in the right column (including all of the styles being applied and their locations if using multiple files).
You can also use it to toggle properties back and forth, which makes troubleshooting issues like these much easier.
Feb 14, 2013 07:17 PM|Rion Williams|LINK
It's a bit difficult to get an idea of the spacing that you are trying to accomplish. The syntax that you have with your current <div> example should be fine, however if you have a ton of CSS issues (such as with your <img>), your <div> could also
be inheiriting some of the styles that you are looking to avoid.
I generally prefer to use margins to handle spacing (as opposed to creating <div> elements) if it is applicable in your situation.
Example using Margin
Feb 14, 2013 07:27 PM|DallasSteve|LINK
Excellent suggestion. I should've thought of that. Margin didn't seem to work, but I added left padding to the table cell and the content shifted over where I want it. I will do that instead of the transparent gif.