|
CSS - Image Border Problem, Yet 'outline' Works...?
Hi all,
I've tried both the "shorthand" and regular version of BORDER attribute, and neither works, Yet outline works fine (but I don't want to use that since IE7 doesn't support it). Anyone able to troubleshoot this? Here's part of the CSS code (the ".thumb" class at the end is what's not working) and below that is the url. CSS Code: Original - CSS Code .gallerycontainer{ position: relative; text-align:right; margin-left: 0em auto; margin-right: 0em auto; /*Add a height attribute and set to largest image's height to prevent overlaying*/ } #thumbBox{ /*Outermost DIV for thumbnail viewer*/ position: absolute; left: 2.5em; top: -4em; width: auto; height: auto; padding: .5em; padding-bottom: 0em; background: #313131; visibility: hidden; z-index: 5; cursor: hand; cursor: pointer; } #thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "close" link */ font: bold 1em arial; line-height: 1.1em; color: white; padding: .5em 0; text-align: right; } #thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */ background-color: #CCC; } #thumbLoading{ /*DIV for showing "loading" status while thumbbox is being generated*/ position: absolute; visibility: hidden; border: .125em solid black; background-color: #EFEFEF; padding: .5em; z-index: 6; } .thumb { margin: .5em .5em .5em .5em; height: 8.5em; width: 8.5em; border-style: dashed; border-color:#CCC; border-width:.125em; }
.gallerycontainer{
I don't think I have the 5 requisite posts, so here's the url in question (# = .) & (| = /) http:||www#bauerbuiltmfg#com|db-series-planters#html Thanks in advance for any help! Similar TutorialsI'm working on a new layout for my site, and I've sliced up the left and right side of the content box so it will expand and contract accordingly to all the content inside of it. And I can't get it to line up right. And I'd appreciate any help. Here it is: http://thesethexperience.f2g.net/ne...navboxtest.html And the code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>navbox</title>
<style type="text/css">
body { background-color:#FFFFFF; }
img { border:0px; }
#navleft
{
background-image: url(images/navleftspacer.png);
background-repeat: repeat-y;
padding: 0px;
background-position:left;
}
#navright
{
background-image: url(images/navrightspacer.png);
background-repeat: repeat-y;
padding: 0px;
background-position:left;
}
</style>
</head>
<body>
<div id="navbox">
<div id="navhead">
<img src="images/navigation.png" alt="" />
</div>
<div id="navbod">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="navleft" height="100%" valign="top"><img src="images/navleftspacer.png" /></td>
<td><p><br /><br /><br /></p></td>
<td id="navright" height="100%" valign="bottom"><img src="images/navrightspacer.png" /></td>
</tr>
</table>
</div>
<div id="navfoot">
<img src="images/navbottom.png" alt="" />
</div>
</div>
</body>
</html>
Thanks in advance. Hi: I recently posted this issue (http://forums.devshed.com/css-help-116/border-image-problems-with-ie-312603.html) and got half the problem solved. I have an image as the background of a <td> tag. Also I have a border-top and border-bottom surrounding the image. My problem is that in IE, the borders are not lining up agains the image. They are a pixel away, which screws up my tabs. CSS: Code:
html, body {
margin: 0px;
padding: 0;
background: #EEF;
font: 11px/13px Verdana, Arial, Helvetica, sans-serif; color: #000;
}
table#main {
margin: 3px;
padding: 3px;
width: 99%;
}
#header {
background: #FFF;
background-image: url(include/head.jpg);
background-repeat: no-repeat;
height: 136px;
width: 100%;
background-position: right top;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
}
#nav {
margin: 0;
padding: 0;
position: absolute;
top: 125px;
float: left;
}
#nav li {
list-style: none;
float: left;
margin-left: 4px;
padding-left: 15px;
font-size: 10px;
line-height: 17px;
white-space: nowrap;
background: url(include/tab.gif) 0 0 no-repeat;
border-bottom: 1px solid #999;
}
#nav a {
display: block;
float: left;
padding: 0 16px 0 0;
text-decoration: none;
background: url(include/tab.gif) 100% 0 no-repeat;
color: #999;
width: .1em;
}
html>body #nav a {width: auto;} /* fixes IE6 hack */
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#nav a {float: none;} /* End IE5-Mac hack */
#nav a:hover {color: rgb(62%,35%,22%);}
#nav #current, #nav #current a {
color: #FDB;
background-image: url(include/tab.gif);
}
.title {
font: bold 24px/26px "Times New Roman", Times, serif; color: #000;
display: block;
margin-left: 4px;
}
The pertinant declaration is the #header id. I used the background-position: right top as was suggested which solves the the problem at the top, but now there are two pixels separating the image and the border on the bottom! Please help! As a side note, this works perfectly in Firefox (of course). If any other info is warranted, please let me know! The link to the page is: http://www.wiu.edu/users/mujas2/test/ I just don't know how to get rid of the border around my image links... When you go to the site, everything looks okay, but when you press the link ("blog"), a border appears around it. And if you click it and then return back, the border is there all the time. Why? I have written "border: none;" pretty much everywhere in my css I can think of! I'm running out of ideas... This is probably something really simple so please help me out, I'm not much of a programmer as you can see.. The same border-problem repeats also on that blog-page which is a wordpress layout and should have nothing to do with my css!? The site is he http://prettydisturbed.com/ And my css around the problem looks like this: Code:
#blog {
display: block;
float: left;
width: 96px;
height: 62px;
background: url('../img/blog_mo.jpg') no-repeat 0 0;
border: none;
}
a #blog img {
border: none;
text-decoration: none;
}
#blog:hover
{
background-position: 0 -62px;
border: none;
}
#blog:visited
{
border: none;
}
#blog span
{
display: none;
border: none;
}
p {
font-family: Tahoma, Arial, sans-serif;
font-size: 13px;
color: #000000;
margin: 0;
padding: 0;
border: none;
text-decoration: none;
}
a:link {
text-decoration: none;
color: #ffffff;
font-size: 13px;
border: none;
}
a:visited {
text-decoration: none;
color: #ffffff;
font-size: 13px;
border: none;
}
a:hover {
text-decoration: none;
color: #ff39da;
font-size: 13px;
border: none;
}
a:active {
text-decoration: none;
border: none;
}
For some reason the bottom border on my text in SPAN.standard_field_type_info works fine in firefox but on IE7 (I don't have IE6 anymore to test) it is not shown. I am pretty sure it is a margin/padding thing hiding the border but I can't remember how to fix it. Anyone got the rather simple solution? Cheers. PHP Code: DIV.standard_field_container { width: 98%; padding: 0.4em; border: 1px solid #8B8B8B; background-color: #E2E2E2; overflow: hidden; } DIV.standard_field_left { width: 10em; float: left; margin-right: 1.5em; font: bold 0.8em Verdana, Arial, Helvetica, sans-serif; } DIV.standard_field_right { font: normal 0.8em Verdana, Arial, Helvetica, sans-serif; } SPAN.standard_field_type_info { font-weight: normal; color: #ff0000; border-bottom: 1px dashed #ff0000; cursor: help; } Here's the code (it's all in the one file). (I had a link but I'm too new here) Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=ISO-8859-1"></meta>
<title> image border bug test</title>
</head>
<body onload="highlightimg()">
<div id="container">
<a class="aclass" ><img src="a.jpg" id="i1" alt="alttext"/></a>
<a class="aclass" ><img src="b.jpg" id="i2" alt="alttext"/></a>
<a class="aclass" ><img src="c.jpg" id="i3" alt="alttext"/></a>
</div>
<script type="text/javascript">
function highlightimg(){
document.getElementById('i2').setAttribute('style','border-width: 3px 3px 3px 3px; border-color:red;border-style: solid;');
}
</script>
</body>
</html>
Internet explorer refuses to apply the border style to the center (or either of the other) images. Any thoughts? (This is a small test case, the style must be applied with js in the actual application I'm building). 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>
Hi all, Wondering if anyone knows a tweak to make the following work in IE7 using pure CSS? I have an image that grows when it is rolledover. Css simply as follows: .graph { width: 200px; height: 50px; } .graph:hover { width: 600px; height: 150px; } Works fine in FF (as usual!) Regards Charlie I'm trying to use images for my border, but for some reason it isn't working. Here is my code: Code:
/* This is the border line & background colour round the entire page */
.bodyline {
border-top-image: url(images/top.gif);
border-top-right-image: url(images/topRight.gif);
border-right-image: url(images/right.gif);
border-bottom-right-image: url(images/bottomRight.gif);
border-bottom-image: url(images/bottom.gif);
border-bottom-left-image: url(images/bottomLeft.gif);
border-left-image: url(images/left.gif);
border-top-left-image: url(images/topLeft.gif);
}
The path to the images is right, so that's definitely not the problem. Can someone help me out? I am having a rather annoying problem with Internet Explorer 6 not putting the proper padding between the CSS border and the image. You can see the problem he http://www.sdstyle.org/article.php?id=101 Basically, there ought to be a six pixel white border and then a one pixel gray border around the images and the breakout in the middle of the page. The offending code is: Code:
.article_image {padding: 6px; border:1px; border-style:solid; border-color:#ccc; margin-bottom:8px;}
...and for the image:
<img src='images/articles/101_image_1.jpg' class='article_image'>
This works fine in Gecko (Mozilla and Firebird) and on Mac IE. I've read there is a bug in IE's handling of CSS (shocking...), am I running into that problem? I tried doing a search here and on Google, and for some reason all of the other solutions I've tried didn't work. Thanks in advance! Hi all, How do you put in a image border in the css. I use the following code and it does not seem to work:border-bottom-image:url(../images/borderLeft.bmp); If you can't do this then how do you put 2 borders in the css Stephen Hi, I am trying to get a border around an image but nor a normal border; a grey border of 10px then a white border of 20px and then the actual image. I am not sure if the following is the best way to achieve this result. However even if so I am having some problems with FireFox. Basically my first attempt is as follows: I wrapped the image inside a <div> element. Therefore my XHTML syntax is something as follows: Code: <div class="image"> <img src="hello.jpg" /> </div> I then applied the following CSS: Code: <style>
div.image{
border: 4px solid #ccc;
background-color: #fff;
width:1px;
}
div.image img{
margin: 8px;
}
</style>
Now like this I get a good result in IE6 but not in FireFox. I cannot really understand why. I know there is a containment hack but is it really needed in this case? if so why? Also is there maybe an easier way to achieve this? Regards, Sim085 ps: I did a fast test. On IE7 it works with the transitive doctype but not with the strict doctype. This I guess means I am breaking some rule I would like to continue with the strict doctype however. I want to use an image as a border using xhtml and css. The border goes around the bottom and the right of an area on my page that has a fixed with an a variable height. As Image borders won't be implemented in css until css3, I attempted to do it using layers of spans with background images along the sides. It resulted in a page that renders incorrectly and differently in the three browsers i tested it in (firefox,ie,opera). Visual Examples: (attached) theoretically.png -> What it should look like at this point ie.png -> how ie renders it ffx.png -> how firefox renders it opera.png -> how opera renders it. Here is the code so far: xhtml: Code: <div class="PageBody">
<span class="PageBody_RightBgLayer">
<span class="PageBody_BottomBgLayer">
<span class="PageBody_RightBottomCornLayer">
<span class="PageBody_FinalLayer">
hello
<br />test
<br />test2
</span>
</span>
</span>
</span>
</div>
css: Code:
.PageBody
{
position:absolute;
left:0px;
top:110px;
background-color: #ffffff;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}
.PageBody_Corner
{
position:absolute;
right:0px;
bottom:0px;
}
.PageBody_Right
{
position:absolute;
right:0px;
top:0px;
}
.PageBody_RightBgLayer
{
background-image: url("../Images/PageBody/right.gif");
background-position: right;
background-repeat: repeat-y;
padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}
.PageBody_BottomBgLayer
{
background-image: url("../Images/PageBody/bottom.gif");
background-position: bottom;
background-repeat: repeat-x;
padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}
.PageBody_RightBottomCornLayer
{
background-image: url("../Images/PageBody/corner.gif");
background-position:right bottom;
background-repeat:no-repeat;
padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}
.PageBody_FinalLayer
{
margin: 0px 13px 12px 0px;
width:600px;
min-height:300px;
}
Is there any way to fix this or am I going about it wrong? Thank you, Benjamin Prosnitz Hey, I have a small Problem with my Border Div. It doesn't get the height from the content-content div. Html: div Code: Original - div Code <div id="content"> <div class="content-border content-border-left"></div> <div id="content-content"> <div id="maincontent"> ###MAIN_CONTENT### </div> <div id="statecontent"> ###STATIC_CONTENT### </div> </div> <div class="content-border content-border-right"></div> </div> <div ID="content"> The both border div should get the height from the content-content. But every time he just uses the min-height. If I write height: 100% on the border div, he will use every time a height higher then the content-content. What should I do? CSS: css Code: Original - css Code #content { margin: 0px auto; width: 800px; text-align: left; font-family:Verdana; font-size: 11.5px; } .content-border { float:left; width: 2px; height: inherit; min-height: 300px; background-repeat: repeat-y; } .content-border-left { background-image: url("../images/border_left.png"); } .content-border-right { background-image: url("../images/border_right.png"); } #content-content { float:left; width: 796px; height: inherit; background-color: #D8DEE2; } #maincontent { float: left; height: inherit; width: 531px; } #statecontent { float: left; height: inherit; width: 264px; }
I use a border-image which has a width of 2px. Thank you in advance for your help. Loki1991 I want white background and a image on 2 sides of this i thought of just added border but can't seem to find out how to get 2 image on the border. Any help would be great. I have a two toned border that I want around my page and I need the corners to flow nicely (not rounded or anything, but continuous) and I'm attempting to do this with images... I actually only need the border for the bottom right of my page and I've tried doing this a number of ways...but unless I'm missing something, css doesn't allow for border-image properties....????? Hi all, I have a problem in scaling images, I re-size all images by -50% to make them act as thumbnails at the following address: http://www.magic-photography.co.uk/photoselector.html It works fine in Chrome using the following simple CSS: Code: a img { border: none; height: 50%; width:auto; text-align: left; }
however in IE/Firefox the images do not re-scale at all. Very very grateful for any help offered. Thanks I've bee fooling around with something that has no real purpose (but could) to try to understand an image positioning problem that I'm trying to avoid solving with tables. I hacked this CSS out, and it looks exactly and acts exactly like I want, but I can't help thinking it's not correct, especially how I deal with the "up" and "down" control images... Originally, I had thought the way to do this thing would be 5 distinct DIVs inside a container DIV, but as it turned out, one of the five turned into the container for all... This looks the same in FF and IE, which is what I want... The code can be seen in a browser he SiliconSatan.com/test.html Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style>
.col_tab_left {
position: relative;
width: 36px;
height: 30px;
left: 0px;
top: 0px;
background-image: url(./images/col_tab_left.gif);
}
.col_tab_middle {
width: 430px;
height: 30px;
position: absolute;
left: 36px;
top: 0px;
background-image: url(./images/col_tab_bg.gif);
text-align: center;
}
.col_tab_right {
width: 26px;
height: 30px;
position: absolute;
left: 466px;
top: 0px;
background-image: url(./images/col_tab_right.gif);
text-align: center;
}
.col_tab_title {
font-family: "Comic Sans MS", san-serif;
font-size: 10pt;
font-weight: bold;
line-height: 30px
}
.block_up {
width: 36px;
height: 30px;
border: 0px solid #003366;
left: 5px;
}
.block_down {
width: 36px;
height: 30px;
border: 0px solid #003366;
position: absolute;
left: 13px;
top: 0px;
}
.image {
position: relative;
display:block;
left: 7px;
top: 12px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td width="200">This is some text</td>
<td>
<div class="col_tab_left">
<div class="block_up">
<img class="image" src="images/block_up2.gif" width="9" height="9" border="0" alt="">
</div>
<div class="block_down">
<img class="image" src="images/block_down2.gif" width="9" height="9" border="0" alt="">
</div>
<div class="col_tab_middle"><span class="col_tab_title">TEST</span></div>
<div class="col_tab_right"></div>
</div>
</td>
</tr>
</table>
<br>
<div class="col_tab_left">
<div class="block_up">
<img class="image" src="images/block_up2.gif" width="9" height="9" border="0" alt="">
</div>
<div class="block_down">
<img class="image" src="images/block_down2.gif" width="9" height="9" border="0" alt="">
</div>
<div class="col_tab_middle"><span class="col_tab_title">TEST</span></div>
<div class="col_tab_right"></div>
</div>
</body>
</html>
Hi Everyone, I'm having a problem with IE rendering correctly. I'm experimenting with using all div's in my pages now, and I'm not very familiar with the quirks of IE. I have created a sample page, and I'm really confused as to what is going on in IE. FF renders the page exactly as I expect. IE renders the page with everything in the correct location, but it seems to double the background image for a sub-div section that is moved up using a negative margin (#menu { ... margin-top: -200px; ... }). Also, this "duplicate background" seems to "flicker" on and off in certain areas, but part of it is always there. (I think there may be more than one duplicate?) To view what's happening, check it out in FF, and then in IE: example.com/HTML example.com/CSS I have very little code, and I'm not sure what is the relevant part: CSS: Code:
.logo_banner { background-image:url(../images/new/logo_web1.png); background-repeat:no-repeat; background-position:left top; height:188px; }
.spacer { height:10px; }
.spacer_10px { height:10px; }
.spacer_40px { height:40px; }
.spacer_50px { height:50px; }
.spacer_separator { height:1px; background-image:url(../images/bg_separator.png); background-repeat:repeat-x; background-position:center top; }
#menu { height:50px; margin-left:200px; margin-top:-80px; }
#home_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; }
#home1_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; margin-left:120px; margin-top:-50px; }
#home2_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; margin-left:240px; margin-top:-50px; }
#home3_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; margin-left:360px; margin-top:-50px; }
#home4_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; margin-left:480px; margin-top:-50px; }
.spacer_dotted_line { background-image:url(../images/new/dotted_line.png); background-repeat:repeat-x; width:860px; height:2px; margin-left:auto; margin-right:auto; }
.div_body_top { background-image:url(../images/backgrounds/bg_dark_body_top1.png); width:900px; height:20px; background-repeat:no-repeat; }
.div_body_middle { background-image:url(../images/backgrounds/bg_dark_body_middle1.png); height:auto; background-repeat:repeat-y; padding-left:20px; padding-right:20px; }
.div_body_bottom { background-image:url(../images/backgrounds/bg_dark_body_bottom1.png); width:900px; height:20px; background-repeat:no-repeat; }
.footer_bar { background-color:#2B2D20; height:60px; text-align:center; }
.footer_text { font-family:Geneva, Arial, Helvetica, sans-serif; font-size:10px; color:#FFFFFF; line-height:60px;}
.text_style_body { text-align:left; font-family:Geneva, Arial, Helvetica, sans-serif; color:#CECECE; font-size:10px; }
.content_body { height:auto; width:900px; margin-left:auto; margin-right:auto; }
.text_area { padding-top:10px; padding-left:20px; padding-right:20px; padding-bottom:20px; width:860px; margin-left:auto; margin-right:auto; }
And here is the HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page 1</title> <link href="styles/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div class="content_body"> <div class="div_body_top"></div> <div class="div_body_middle"> <div class="logo_banner"></div> <div id="menu"> <div id="home_btn"></div> <div id="home1_btn"></div> <div id="home2_btn"></div> <div id="home3_btn"></div> <div id="home4_btn"></div> </div> <div class="spacer_10px"></div> <div class="spacer_dotted_line"></div> <div class="spacer_40px"></div> <div class="text_style_body"> Here is some content. Love that content. One day this text will actually say something. ... <br/> <br/> Here is some content. Love that content. One day this text will actually say something. Here is some content. Love that content. One day this text will actually say something. Here is some content. Love that content. One day this text will actually say something. ... </div> <div class="spacer_50px"></div> <div class="spacer_40px"></div> </div> <div class="div_body_bottom"></div> </div> <div class="spacer"> </div> <div class="footer_bar footer_text">Copyright 2008</div> </div> </body> </html> Any help is GREATLY appreciated. Thanks! Thanks for taking the time to read my question. I was wondering if there is a way to put a border around the <area> on an image map. They are href's, so I thought something should happen there. I know you can do an image flip, but then I have to have 2 pictures of everything. I'm just thinking on the fly here but is there something you could do in the css with map and link? I tried this in my .css: Code:
area.hborder:hover {
border-style: solid;
border-color: black;
}
and changed my <area> line to include Code: <area class="hborder" sha ... Here is an example of one of my image maps. thanks for your help, Brad Code: <map name="SBMap"> <area shape="rect" coords="9,32,270,63" href="VSADHelpUnReleased.html" title="Help: Enter New Data UnReleased"> <area shape="rect" coords="9,70,198,104" href="VSADHelpReleased.html" title="Help: Edit Data Released"> <area shape="rect" coords="9,112,85,146" href="VSADHelpPrint.html" title="Help: Print"> <area shape="rect" coords="9,150,272,188" href="VSADHelpImport.html" title="Help: Import Farm Names and Codes"> <area shape="rect" coords="9,190,171,228" href="javascript:void(0)" onclick="NewMonth(EventDesc[41])" title="Help: Herd Info"> <area shape="rect" coords="9,230,91,267" href="javascript:void(0)" onclick="NewMonth(EventDesc[42])" title="Help: Close"> </map> Is it possible to specify a custom image for a border style? |
|||||||