|
CSS - Image Borders Not Shown On Ie
Hello,
I am using image borders and the CSS I have works on FireFox, Chrome, Opera and Safari, but not IE. Here is my CSS and HTML; Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="" >
<head>
<style>
div {
width: 200px;
margin: 0px auto;
border-width: 0px 2px 0px 2px;
-moz-border-image: url(b.PNG) 0 41 repeat;
-webkit-border-image: url(b.PNG) 0 41 repeat;
-o-border-image: url(b.PNG) 0 41 repeat;
border-image: url(b.PNG) 0 41 repeat;
}
</style>
<head>
<body>
<div>Hello this is my test
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</body>
</html>
I have tried it on IE6 to 8 and image borders show on none of these. Is there any hack/way how to support image borders also on IE? Similar TutorialsHello, I have a weird problem with IE7. My solution works fine on FireFox, IE8 and even IE6, but on IE7 the button image does not want to load. Here is the HTML and CSS. Code:
<!DOCTYPE html>
<html>
<head>
<style>
.sayhello{
background: url("hello.png") no-repeat scroll 0 0 transparent;
border: medium none;
height: 49px;
margin-top: 10px;
text-indent: -9999px;
text-transform: capitalize;
width: 85px;
}
</style>
</head>
<body>
<input type="button" onclick="javascript:alert('hello');" value="Say Hello!!" class="sayhello">
</body>
</html>
I can get the button to show if I set the button as position:absolute or else display:block. However these would create me other problems. Is there any other way how I can get the button to show? considering I want to show the button in relative position and next to other buttons. Hi all, I use an background image for a menu. Code:
#menu a, #menu a:hover {
height: 20px;
width: 150px;
text-decoration: none;
padding-left: 40px;
padding-top: 3px;
padding-right: 3px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
margin-bottom: 10px;
background-position: 0px;
vertical-align: middle;
}
#menu a {
color: #9E007F;
background-image: url(../imgs/nav/subNav/subNav_bg.gif);
background-repeat: no-repeat;
}
#menu a:hover {
color: #FFF;
background-image: url(../imgs/nav/subNav/subNav_bg_over.gif);
background-repeat: no-repeat;
}
It works fine in IE but not in firefox. Somehow the background image is not completely shown. It stops after the last letter. Any suggestions?? Grtz, Hi, Someone I know is trying to find a way of putting a border round an image (say 1px white) followed by another border around that (say 1px blue). Anyone done this or have a good idea of a way to do it? thanks I have a bit of CSS that wraps a border around an image, it works in IE but not in FF. What am I doing wrong? Code:
.book_box {
width: 95%;
padding: 10px 5px 5px 5px;
border: 2px solid white;
background-color: #eef7ff;
text-align : left;
overflow: auto;
}
.book_box_img {
float: left;
margin: 5px;
border: 1px;
border-color: #003366;
}
Hello DevShed, Thanks for advance for the help! It's been a long night for me. Instead of working on my Wordpress blog which is launching tomorrow, I was simply carried away with trying to solve this problem I ran into. I've been now trying to "fix" this for 5 straight hours. At my website http://insfired.com, I simply want to add borders around images which are found in posts. Now, I have some minor CSS experience, so I'm not a total n00b, but I really hope I'm doing something wrong and you can help me. I'm going to paste what I wrote on Wordpress.org to try and get help there (with no avail so far): "Ok so I purchased this "fancy" theme called "Themeology" on Themeforest. I know I should probably email the developer but he doesn't really reply to support requests. Now, NO matter what I tried, or where I tried to add the img {border: 1px....) property, images just won't get wrapped. Nothing. my site is located he http://insfired.com/ I'm seriously willing to pay upfront for any CSS expert to fix this for me. I'm not entering the css property wrong, this is what I want: Code: img {border: 1px solid #c8c8c8;
padding: 2px;
margin-bottom: 10px;
}
Actually, there is an image class that is already bordered but it's also given the float and the margin right property, whenever I edit this one I can see changes to images with this class, but any attempt to apply borders to images (img) or images within posts (.div.entry.single img) were futile. Code: #page ul#entries li img.avatar{
float: left;
border: 1px solid #c8c8c8;
padding: 2px;
margin-right: 15px;
margin-bottom: 10px;
}
The theme has several .css files, and I tried adding the above (1st) code to ALL, not a single thing moved. I tried clearing my cache and the W3 cache. Seriously, if you want money for fixing this for me I'm willing to pay. I'm insfiredmail on gmail. Help?" img { border-width: 1px; border-color: transparent; } this is the code i used in my css sheet to invalidate the borders around the linked images. for some reason every other way i tried it was messing up my drop-down menu. now the only problem i have is that ie still shows the text-decoration. at the moment i haven't applied text-decoration none, but i have tried it and nothing worked. any other solutions? here's the page i'm applying it to:: page Hi http://www.sential.co.uk/releases.html http://www.sential.co.uk/style.css the box model is based on the thrashbox it works fine on the other pages, except the releases page where there is an image at the bottom of the box. It has the incorrect alignment on the left border. And only in IE Any help would be very appreciated. -Luke Is there a fix? I have differences between how elements I state in CSS are shown. Sometimes it's IE that makes the problems (mostly with overflow) but this time it's FF. I have a content, to which I decided to make a "wrap" border from right and left (shown in red on the screenshots). The name of the element is #content_wrap. Could you take a glance at the links below and help me out finding the problem that causes this difference between the display in IE and FF? The way I see the page using IE (the way it's supposed to be - shown via green) The way I see the page using FF (the wrap is not at it's full height - show via green) The complete page (the CSS is included in the html file) P.S. If you have any other comments and suggestions, they are welcome. I've changed how links are rendered - problem is that I can't stop same thing being done on images as links. Code:
a {
text-decoration: none;
border-bottom: 1px dotted;
}
a:hover {
text-decoration: none;
border-bottom: 1px solid;
}
And it works great on ordinary links (<a href="#">Text here</a>) but I cant turn it off when I have an image as a link (<a href="#"><img ... /></a>). I tried this : Code:
a img {
border: none; /* tried border: 0px; also */
}
img {
border: none; /* tried border: 0px; also */
}
And it doesn't work The only way I could achive the result is to specify an class for each link: Code:
.img-link {
border: none;
}
.img-link:hover {
border: none;
}
// in HTML
<a href="#" ... class="img-link"><img ... /></a>
The code for the problem are below. I have two examples in my html file. One using styles directly and one using styles via a file. The styles are identical. The first div tags that uses styles directly shows correctly, but the other div tags doesn't even show at all - or at least not with 'height' in '.page' set to 'auto'. If it's set for example to 200px that div will show but not the sub ones. This is strange since if using the same styles directly this isn't even a problem at all. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Testing...</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body style="margin: 0px; padding: 0px; text-align: center; background-color: #A0A0A0">
<div style="position: relative; width: 950px; height: auto; margin: 10px auto; padding: 0px; background-color: #FFFFFF">
<div style="position: absolute; top: 0px; left: 0px; width: 950px; height: 150px; margin: 0px; padding: 0px;">
<div style="position: absolute; top: 0px; left: 0px; width: 20px; height: 150px; margin: 0px; padding: 0px; background-color: #C08080;"></div>
<div style="position: absolute; top: 20px; left: 30px; width: 890px; height: 130px; margin: 0px; padding: 0px; background-color: #80C080;"></div>
<div style="position: absolute; top: 0px; left: 930px; width: 20px; height: 150px; margin: 0px; padding: 0px; background-color: #8080C0;"></div>
</div>
</div>
<div class="page" style="top: 200px;">
<div class="header">
<div class="header-left"></div>
<div class="header-image"></div>
<div class="header-right"></div>
</div>
</div>
</body>
</html>
Hi, I have a table with a scroll bar. My problem is that it works in ie but not in mozilla,netscape7.1, firefox...When I load the page in mozilla, the table is not shown, it's as if it were set to hidden, and it's really weird because the first time that I load the page, the table is shown with the scroll bar just for a moment and then hides..... I used a div tag that contains the table to be shown. I've tried different things as changing the z-index, using the display attribute, but none of them worked. Here is the style defined for the div tag: Code:
div.tableContainer_plegado{height: 420px; overflow: auto; width:100%;}
Please help me! Thanks in advance! I am using an external CSS where I am defining the color of my links when un-visited, visited etc. The problem is in Netscape 7.1/7.2 those links which are calling my other pages, are being shown up as visited when clicked,. But those where I say href='javascript:void(0);my js function' are not being shown with the correct 'visited' link color. They are being shown in the color specified for 'un-visited' links!! Can someone help?? Hi guys, I am using the following css to style a content box: Code:
/*---------------- Start of Testimonies Content Box ---------*/
#testimonies {
WIDTH: 175px;
MARGIN: -85px 0px 0px;
POSITION: right;
height: 60px;
float:right;
BORDER-RIGHT: #d9ddb9 1px solid;
BORDER-LEFT: #d9ddb9 1px solid;
BORDER-BOTTOM: #d9ddb9 1px solid;
BORDER-TOP: #d9ddb9 1px solid;
PADDING-TOP: 10px;
PADDING-RIGHT: 10px;
PADDING-BOTTOM: 20px;
PADDING-LEFT: 10px; FLOAT: right;
BACKGROUND-IMAGE: url(images/bg-down-right.gif);
BACKGROUND-POSITION: 50% bottom;
BACKGROUND-REPEAT: repeat-x;
BACKGROUND-COLOR: #fafceb;
}
.testimonies-h2 {
PADDING-RIGHT: 3px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; BACKGROUND-COLOR: #fafceb
}
#testimonies H2 {
PADDING-RIGHT: 0px; BACKGROUND-POSITION: 2px 3px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 100%; BACKGROUND-IMAGE: url(images/bg-h2.gif); PADDING-BOTTOM: 2px; TEXT-TRANSFORM: uppercase; COLOR: #8fa300; PADDING-TOP: 2px; BACKGROUND-REPEAT: repeat-x
}
/*---------------- End of Testimonies Content Box ---------*/
I want to add an inline frame inside the 'testimonies' div in my html but it keeps using the border styling of the css above. I tried using this to cancel it out (placing my inline frame in a span, but it did nothing) Code:
#testimonials {
border-left:none;
border-right: none;
border-bottom:none;
border-top:none;
}
HTML CODE: Code: <div id="testimonies"> <h2><span class="testimonies-h2">Testimonials</span></h2> <span class="testimonials"> <!-- ========== V-NewsTicker v2.2 (Freeware) ============= --> <script type="text/javascript" src="v_newsticker_1.js"></script> <!-- ======================= --> </span> </div> Hi All, I am trying to set a style in my CSS that will show a border-bottom for an entire row. So far I can only get it to work on a per cell (<td>) basis. I am using Dreamweaver MX 2004 and when I select an entire row and assign it a style, it just add's it to the <tr> tags at the top of those rows. Code:
<!-- This is a Row that is at the top of the table -->
<table width="100%" border="0" class="fullwidth">
<tr>
<td class="head">This is a header </td>
</tr>
</table>
<!-- This is where I want the border-bottom attribute to show up -->
<table width="100%" border="0" cellpadding="2" cellspacing="1" class="list">
<tr class="list">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="list">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="list">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="list">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="list">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Here is the CSS: Code:
table.fullwidth
{width: 100%;
background-color: #FFFFFF;
border: 0px;
border-collapse: collapse;
border-spacing: 0px;}
tr.list
{background-color: #EFEFEF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #000000;
border-bottom: 1px dotted #000000;}
Is it possible to have more than one border in CSS? I want to have a grey and green border around an area of text, something like this. So is it possible to have two or more borders in CSS and if so, how? Can any one suggest a better CSS script for having a border in IE So far I have the following: PHP Code: border: 1px solid #0099CC; The problem is that when ran in IE, the top border does not show. However it works fine in firefox. Also I get warnings on my script when I run my CSS validation tool. Can any one help. Thge URL is http://pfwd.org.uk/sfd/update_test3.php Hello, I can't for the life of me figure out how to get these thin white borders like on this website: http://www.viceland.com/index_us.php Is this done with a style sheet? I can't find any reference to a border. How is this done? |
|||||||