|
CSS - Firefox Putting Gray Border On Some Images
Firefox is putting a gray border on most of my images. The border is sometimes on the bottom or off to the right. If I add padding to the images sometimes the border will go away. The images are not links. I have basically covered every option in CSS to eliminate the problem with no prevail my CSS:
Code: body img{ padding: 0; border:none; -moz-border-radius: 0; -khtml-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; -webkit-box-shadow: 0 0 0 #000; -moz-box-shadow: 0 0 0 #000; text-decoration: none; outline:none; overflow: hidden; }
Hopefully someone has encountered this before or has some information to help? Similar TutorialsGood Day all, I've tried a few different hacks/fixes now to fix my PNG problem in IE6 but none seem to have any effect. I'm starting to wonder if this is fixable. Can anyone provide some insight as to what the problem could be? I seem to be ok in all browsers except IE6... 029c92a.netsolhost.com/brushes.html Best, Colin hi, yea I got an a link wrapped around an image, but the image is coming up with tis weird pink border around it, anyon know how I can get rid of this border? thx Hi. Have created some simple tabs using table cells. Active tab should have bottom-border color equal to page background-color. Non-active tabs should have bottom-border=black. Works fine in IE, but does not work very well in Firefox. If I remove the border-collapse:collapse on the table, then firefox also work... but I would like to be able to keep the 1px border between each table cell. So is there a way to make this work in both IE and Firefox... and hopefully most other browsers... See code below: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style type="text/css">
a.menu_top:link {color: #000000; text-decoration: none;}
a.menu_top:visited {color: #000000; text-decoration: none;}
a.menu_top:hover {color: #000000; text-decoration: none;}
a.menu_top:active {color: #000000; text-decoration: none;}
td.menu_top_passive {
background-color: #777;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #000000 solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
td.menu_top_active {
background-color: #bbb;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #bbb solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
</style>
<script language="JavaScript">
function change(id, url) {
for (i=1; i<6; i++){
eval("document.getElementById("+i+").className='menu_top_passive'");
}
eval("document.getElementById("+id+").className='menu_top_active'");
}
</script>
</head>
<body style="margin:0; padding:0; background-color:#bbb;">
<br><br>
<center>
1. Load the page.<br>
2. Click Item 4.<br>
3. Click Item 2.<br><br>
Why is the bottom border of the menuelements (table cells) not getting correct in Firefox?<br>
None-active menuelements should have a border-bottom = black, active should have same bottom-border as page.<br>
Notice that I use border-collapse on the table in order to get the cell-border 1px thick between the menuitems.<br>
If I remove border-collapse, then there is no strange behaviour in Firefox.<br>
Any way to get this working in Firefox without breaking it in IE?
</center>
<br><br><br>
<table border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse;">
<tr>
<td id="1" nowrap class="menu_top_active" onClick="change('1');"><a href="javascript:;" class="menu_top">Item 1</a></td>
<td id="2" nowrap class="menu_top_passive" onClick="change('2');"><a href="javascript:;" class="menu_top">Item 2</a></td>
<td id="3" nowrap class="menu_top_passive" onClick="change('3');"><a href="javascript:;" class="menu_top">Item 3</a></td>
<td id="4" nowrap class="menu_top_passive" onClick="change('4');"><a href="javascript:;" class="menu_top">Item 4</a></td>
<td id="5" nowrap class="menu_top_passive" onClick="change('5');"><a href="javascript:;" class="menu_top">Item 5</a></td>
</tr>
</table>
</body>
</html>
Wow I REALLY hate CSS. For hours I have been trying to figure this out: Here is some HTML Code:
<td>
<div class="linksbar">
<div class="linkstext">
link - link - link - link
<img src="imagelink.jpg">
<img src="imagelink2.jpg">
</div>
</div>
</td>
[CODE]
the CSS
[CODE]
.linksbar {
height: 28px;
background-image: url(bg.jpg);
}
.linkstext {
vertical-align: middle;
line-height: 28px;
font-weight: bold;
color: white;
}
First problem: in Chrome, the text rests at the bottom of the div. I want it in the middle. Second problem: in IE it looks like a mess. The text is sort of in the middle (more towards the bottom). the image links are at the very top. The image link height is like 20 or something. Hi guys, For a pure CSS site, is it depreciated to have a border="0" tag in <img elements? (My reasoning is that if one browser doesn't support CSS, it will show the user images with ugly borders... that's anyway the default behavior in IE and FF). Thank you hi, i want my browser's background to be the same as MS windows gray... how do i do that in CSS? is there a special color value? or do i have to put some code in my html to make it blend with wndows? thanks! i hope you get to help me on this one! thanks! I am about to go insane.. I am a total newbie to DHTML and Javascript and I am trying to do a onmouseover event to make an image display normally as a grayscale version of itself (with filter:gray) and when the mouse moves over it I want it to switch to the full RGB color version. I tried to do a rollover with two seperate versions of the image and it worked, but for some reason IE 6 wants to load the image from the server again everytime I onmouseover or onmouseout. This is very slow, especially on my server. I just want to change the image with DHTML filters.. General pseudocode: <img src="blah.jpg" style="filter:gray" onMouseOver="style='filter:none'" onMouseOut="style='filter:gray'"> Can anybody help me? PLEASE???!?!? Hello, I can't seem to find a solution across the web to such a simple problem. I want to have a border surround my main container, composed of simple images that fade into the background. Here's a mockup image. And here's what I'm working on. As you can see, I have a simple jpg repeating vertically for the side border effect, but how can I get the top and bottom correct? I tried some empty div's with my top and bottom background images but just can't seem to get it working. Also, keep in mind that the width is fixed but the height is not. Thanks. Sitewide, I have a bottom border affect, rather than an underline for links. But it applies itself to linked images as well. I have borders shut off on images, but that doesn't stop it from applying the border. I've tried img border:none; and a few other tricks, but it only does the trick in Chrome. CODE: a { text-decoration: none; } a:hover { text-decoration: none; border-bottom-width: 1px; border-bottom-style: solid; padding-bottom: 2px; } img { border-width: 0px; } img a { border-width: 0px; } img a:hover { border-width: 0px; } I tried to play around with my code to see if I could get a image of a bar and its two ends on the top border of the div containers and have text on it. But this is what I have so far and its not working! Code: .preview {border 1xp solid black;
background-color: white;
}
.preview .innerdiv{
background: transparent url(css/bar.png);
position: relative;
left: 2px;
top: 2px;
padding: 1px 4px 15px 5px;
}
}
I have a web page that I am going to give to a someone that will give me something if I get it done in a week so I want to get this hard to figure out proplem out of my way so I can get more done faster. Your help will be most thankful! I want something like this to help get a better understanding what I want. http://www.quake3world.com/forum/portal.php I have an imaged logo on top of my page that I want to link to the startpage. However, whenever I link the image, I get the typical border that signalizes a link. How can I get rid of this border with the help of my Stylesheet? It seems like I can't even change the color of the border in IE?? Thanks a lot Steve Edit: Never mind -- searched before posting and did not find anything, but after I posted, there it was... Used {border:0;} on the img tag -- voila... Why do the margin-top values on these layers DO NOTHING in firefox, but act as expected in IE? Which way is actually correct? Also, if I add a float:left to the blue layer, firefox adds a margin-top to the blue and green layers only? This seems very wrong.. How can I get the expected margin-top on each layer? Code: <BODY style="background-color:yellow;"> <div id='blue' style="width:250px; height:250px; display:block; margin-left:1px; margin-top:10px; background-color:blue; position:relative;"> <div id='green' style='width:220px; height:200px; margin-top:10px; background-color:green; display:block; position:relative;'> <!--- prod selector box ---> <div id='gray' style='width:200px; height:150px; overflow:auto; margin-top:10px; margin-left:4px; display:block; background-color:gray; position:relative;'> asdf </div> </div> </div> </BODY> Hey all, I am working on completely redoing our website (FizzPow.com) I have a border-right: on my left column in a wordpress template I am modifying. It looks fine in Chrome, IE9, Safari5, but in FF7, it moves my right column all the way down. Here's the site: FizzPow.com/newsite I am an experienced programmer but fairly novice with HTML/CSS. Please be kind and I very much appreciate your help! It looks fine in IE. But went wrong in Firefox. Also there seems to be a space to the right of each img button. :cry: IE http ://imgboost.com/uploads/894333_screenshot2.jpg FF http ://imgboost.com/uploads/113426_screenshot1.jpg My Css Quote: * { margin: 0; padding: 0; } html{ height: 100%; margin: 0; padding: 0; } body { height: 100%; font-family:Arial, Helvetica, sans-serif; font-size:12px; margin: 0; padding: 0; } * html #container { height: 100%; } #container { position: relative; min-height: 100%; } #buttons { padding-right: 0em; padding-left: 0em; } #topLinks { list-style: none; margin-top: 0; margin-left: 0; margin-right: 0; padding-top: 0.9em; padding-right: 0; background-image: url(../images/footer_bg.gif); background-repeat: no-repeat; } #topLinks li { display: inline; border-left: 1px solid #FFFFFF; padding-right: 0em; padding-left: 0em; } #topLinks li.topLinks_first { border-left: 1px solid #FFFFFF; } #topLinks li.topLinks_last { border-right: 1px solid #FFFFFF; } #topLinks a { color: #FFFFFF; } #header { padding-top: 5px; padding-left: 5px; margin: 5px; } #footer { width: 100%; text-align:center; position: absolute; bottom: 0; margin:0; padding:0; } #footer_pink { background: url('../images/footer_pink.gif') repeat-x; height: 35px; } #bottomLinks { font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; list-style: none; margin-top: 0; margin-left: 0; padding-top: 0.9em; background-image: url(../images/footer_bg.gif); background-repeat: no-repeat; } #bottomLinks li { display: inline; border-left: 1px solid #FFFFFF; padding-right: 1em; padding-left: 1em; } #bottomLinks li.first { border-left: 0 none transparent; } #bottomLinks a { color: #FFFFFF; } #footer_yellow { background: url('../images/footer_yellow.gif') repeat-x; height: 55px; } .footer_yellow { font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; color:#333333; } #footer_content { padding-top:1.0em; } #footer_yellow img { border: none; } #menu { background: url('../images/pink_menu.gif') repeat-x; height: 37px; text-align:center; } #menu a img { border: none; } #menu ul { padding:0px; margin:0px auto; } #menu ul li{ display:inline; list-style-type:none; } I just can't seem to see why Firefox only shows part of the border on the < ul> element. IE 6 seems OK. Here's the link: imagesandwords.org.uk/andrewjamesrp/index.php Here's the HTML: < div id="navcontainer"> < ul id="navlist"> < li>< a href="#1" title="Examples of the Work">Images< /a>< /li> < li>< a href="pages/about.php" title="About the artist">Andrew< /font>< /a>< /li> i etc for the other links < /ul> < /div> Here's the CSS: #navcontainer { color: #8d1016; font-weight: bold; width: 205px; padding: 20px 0 0 115px; } #navcontainer ul{ list-style: none; width: 90px; padding: 0; color: inherit; border: 1px black solid; } #navlist li { width: 90px; } #navlist li a { display: block; width: 100%; padding: 2px 14px; background-color: #E8E8E8; border: 2px solid #E8E8E8; background-image:url(siteimages/nav_arrow.gif); background-position:left center; background-repeat:no-repeat; text-decoration: none; } #navlist li a:hover{ color: black; background-color: #C0C0C0; border-style: outset; padding: 2px 14px; background-image:url(siteimages/nav_arrow02.gif); background-position:left center; background-repeat:no-repeat; } html>body #navlist li a:active { border-style: inset; } Trying to use css to make a border around an element, and am using: .navbar { border: 1px solid red; } In IE, it puts a border around the navigational bar, but in FF, it only puts 1 line above it. Even if I try independently adding: border-left border-right border-bottom etc, it only shows above for border-top and border-bottom and nothing for left and right. I can place the code if needed, but I really just have a few words typed to try and get this to work. It's of strict doctype if that matters. Does FF have something special I need to add to get border to work? Thanks. I've got a layer on my page that I'm showing and hiding through javascript. The layer is positioned absolutely and given a position of right: 0 and bottom: 10px in the CSS file. Now in one case I actually went into the page and did an inline style to change the position. So that one is given a different position, top: -5px and left: 10px. In IE it works fine. In Firefox the border sometimes won't expand to enclose the box. Here's what I've found: -Take out the position from the CSS file and position with inline style -- works. -Leave the position in the CSS file and don't position with inline style -- works. -Leave position in CSS file and change right to left and change to any value -- works. -Leave position in CSS file and change bottom to top and change to any value -- doesn't work. So the big culprit here seems to be defining a position with bottom and then switching to top causes Firefox 1.5 or 2 to fail. The same thing seems to happen in Opera 9. This seems like a bug, but why in multiple browsers? I've tried floating things within the box, setting the overflow to auto, nothing seems to make the border expand around the box. Any thoughts? I use the following CSS for my links, and use a border-bottom to give them a dashed underline... Code: a {
color: #AC4870;
border-bottom: 1px dashed #DDDDDD;
text-decoration: none;
}
a:hover {
color: #DDDDDD;
border-bottom: 1px dashed #AC4870;
text-decoration: none;
}
This underline also shows up under my images that are used as links. How would you write CSS that would remove this dashed border-bottom from my image links? Thanks Sorry about the vague description, but I'm wondering how to achieve an effect like the ones on this page: http://www.csszengarden.com/?cssfile=/196/196.css&page=0. I've seen the effect on many other websites, but I can't find them at the moment. On the page the content div grabs your attention effectively because its borders make it pop out from the background. How are the border images and divs setup to achieve this effect? As you can see, the image that says view all clients has a blue border on top and to the left also. There are no borders set for this image so I am not sure why its there. It does not show up on safari, just firefox. (I am not sure about IE since I am on a mac). Here is the code: .view_all_projects{ width:245px; height:63px; position:absolute; overflow:hidden; margin: 550px 0 0px 0; } And here is the html: <div class="view_all_projects"><a href="http://www.bestdropshipper.net/order.html"><img src="images/more_project.gif" alt="Best Dropshipper"/></a> </div> This image is also clickable. Any ideas why the strange blue border? |
|||||||