|
CSS - Is There Some Non-moz Css Equilavent To -moz-outline-style Or Jscript's Hidefocus?
I tried everything I can think of in Opera, and no matter what I try, when I focus on a link I get selected highlight on the text. Is there some CSS way of hiding the highlight?
I've also posted in the JavaScript forum. Similar TutorialsI tried to create a button with an outline color, but it doesnt seem to work. Does anyone has worked on outline property ,can u help me!!! <button STYLE="outline: red solid thick">I'm a Button - CLICK ME!</button> I decided to remove all outlines from my website, so I added the following statement to my CSS file: Code: *
{
outline: none
}
However, in Firefox 2 (but not in IE7), the outline still surrounds the content of a <select> dropdown after a new option is selected. Is there any way to get rid of this outline? I know dropdowns are often part of the operating system so that there are additional restrictions on styling them, but I assume Firefox's dropdowns are not. I've already checked, and the outline property is not being set elsewhere in my code. Thanks for your help! Working to set up a template that has containers with rounded corners WITH outlines. I have the round corners and sides...just can figure out how to add the top and bottom line to complete the container. If I use a border-top it extends past the rounded corners. Any help would be greatly appreciated Link to the page in progress: http://www.rustbug.com/test/journey-home-page.html Here is my code: 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>Untitled Document</title>
<style type="text/css">
body {color:#000000;background-color:#ffffff;background-attachment:fixed;font-family: Arial, Helvetica, sans-serif;line-height:1.25em;font-size:100%;}
#wrapper {margin:0 auto;width:720px;background-color:#f6f5f3;padding-top:1em;padding-bottom:2em; overflow:hidden;}
#container1 {float:left; display:inline; width:435px; height:auto; background-color:#FFF; border-top:1px #e3e2e1 solid; margin-left:1em; margin-bottom:1em;}
#container2 {float:right; display:inline; width:235px; height:auto; background-color:#FFF; margin-right:1em;}
p.roundcont { font-size:90%; margin:0 10px 0 10px; color: #999999;}
.roundtop { background: url(images/tr.gif) no-repeat top right;}
.middle { border-left:1px #e3e2e1 solid; border-right:1px #e3e2e1 solid;}
.roundbottom { background: url(images/br.gif) no-repeat top right;}
img.corner { width: 8px; height: 8px; border: none; display: block !important;}
</style>
</head>
<body>
<div id="wrapper">
<div id="container1">
<div class="roundtop"><img src="images/tl.gif" alt="" width="8" height="8" class="corner" style="display: none" /></div>
<div class="middle"><p class="roundcont">Hello</p></div>
<div class="roundbottom"><img src="images/bl.gif" alt=""width="8" height="8" class="corner" style="display: none" /></div>
</div>
<div id="container2">
<div class="roundtop"><img src="images/tl.gif" alt="" width="8" height="8" class="corner" style="display: none" /></div>
<div class="middle"><p class="roundcont">aasdf s asdf sdf sfsdfsdf asdf sdf. afas sdf sfsdf. adf asdf sdf .asdfsdfsdgfga fasdf adfdaf asdf a.</p></div>
<div class="roundbottom"><img src="images/bl.gif" alt=""width="8" height="8" class="corner" style="display: none" /></div>
</div>
<div id="container1">
<div class="roundtop"><img src="images/tl.gif" alt="" width="8" height="8" class="corner" style="display: none" /></div>
<div class="middle"><p class="roundcont">Hello</p></div>
<div class="roundbottom"><img src="images/bl.gif" alt=""width="8" height="8" class="corner" style="display: none" /></div>
</div>
</div>
</body>
</html>
hello everyone, does anyone know how can i connect both the outline and the border-radius? it works fine beside the outline is square (btw both does not work on ie for some reason, why's that?) code is: Quote: outline: #ffc614 solid 5px; -moz-border-radius: 15px; border-radius: 15px; -webkit-border-radius: 15px; thank you. I have a test template page I have created using two columns with dropshadows and an outline. My question is, when I try to add other content within the div that creates the outline container....it does not expand the outline container, it creates a new outline container. I need to put other elements other than text so, i need to resolve/better understand this issue. the template page can be found at: http: //www rustbug.com / mmtest / template.html How do i set a font outline color as red and the fill with white using css. Does anyone know? I'm having problems with a navigation system I'm trying to build, it is fairly simple, Mouse over, menu drops down. right side of drop down there are several categories. hover over them and 4 options show up on the left side, and image updates to the correct image. works great, problem is when you try to roll back over to another option on the right, it stays where it was, there is no update for your mouse actions. Does anyone have an idea how this could be fixed? 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>Untitled Document</title>
<script type="text/javascript">
function showElement(aaa)
{
document.getElementById(aaa).style.display="block";
}
function hideElement(aaa)
{
document.getElementById(aaa).style.display="none";
}
function showDDBoat(aaa)
{
document.getElementById(aaa).style.zIndex="100";
}
function hideDDBoat(aaa)
{
document.getElementById(aaa).style.zIndex="90";
}
</script>
<style type="text/css">
#dd1 { position:absolute; top:70px; left:15px; display:none; }
#dd2 { position:absolute; top:70px; left:100px; display:none; }
/* -------------------------------------------------------------------------
*/
#boatsNav {position:absolute; top:45px; left:220px;}
#boatsNav a.bnav,
#boatsNav a.bnav:link,
#boatsNav a.bnav:visited,
#boatsNav .chosen { display:block; width:100px; height:25px;
background:none;
text-align:center;
text-decoration:none;
font-family:verdana, arial, sans-serif;
font-size:12px;
color:#fff;
line-height:25px;
overflow:hidden;
float:left;
}
#boatsNav a.bnav:hover {color:#fff; background:#000;}
#boatsNav a.bnav:active,
#boatsNav .chosen {color:#fff; background:#c00;}
/* -------------------------------------------------------------------------
*/
.bdd_dropdowns {background: url(http://www.dnpinteractive.com/temp/newbdd/images/dd_bg1.png) no-repeat bottom right; height:190px; width:313px; position:relative;}
/* -------------------------------------------------------------------------
*/
.bdd_boats {position:absolute; top:5px; right:0px;}
.bdd_boats a.subnav,
.bdd_boats a.subnav:link,
.bdd_boats a.subnav:visited {
display:block; width:100px; height:25px;
background:none;
border-bottom:1px solid #666;
padding:0 5px 0 0;
text-align:right;
text-decoration:none;
font-family:verdana, arial, sans-serif;
font-size:12px;
color:#fff;
line-height:25px;
overflow:hidden;
}
.bdd_boats a.subnav:hover {color:#fff; background:#000;}
/* -------------------------------------------------------------------------
*/
/* -------------------------------------------------------------------------
*/
.bdd_links {position:absolute; top:5px; left:6px; width:200px;}
.bdd_links a.ddlink,
.bdd_links a.ddlink:link,
.bdd_links a.ddlink:visited {
width:98px; height:20px;
background:#990000;
text-align:center;
text-decoration:none;
margin: 0 2px 2px 0;
font-family:verdana, arial, sans-serif;
font-size:10px;
color:#fff;
line-height:20px;
overflow:hidden;
float:left
}
.bdd_links .ddlink_OFF {
/*visibility:hidden; */
background:#000;
width:98px;
height:20px;
text-decoration:none;
margin: 0 2px 2px 0;
font-family:verdana, arial, sans-serif;
font-size:10px;
color:#000;
line-height:20px;
overflow:hidden;
float:left
}
.bdd_links a.ddlink:hover {color:#fff; background:#000;}
/* -------------------------------------------------------------------------
*/
</style>
</head>
<body>
<div id="boatsNav">
<a class="bnav" href="#" title="page 1" onmouseover="showElement('dd1')" onmouseout="hideElement('dd1')" onmouseover="showDDBoat('boat1')">MONTAUK</a>
<a class="bnav" href="#" title="page 2" onmouseover="showElement('dd2')" onmouseout="hideElement('dd2')">OUTRAGE</a>
<a class="bnav" href="#" title="page 3" onmouseover="showElement('dd3')" onmouseout="hideElement('dd3')">VENTURA</a>
</div>
<div class="bdd_dropdowns" id="dd1" onmouseover="showElement('dd1')" onmouseout="hideElement('dd1')" onmouseover="showDDBoat('boat1')">
<div class="bdd_links" id="boat1" onmouseover="showDDBoat('boat1')" >
<a class="ddlink" href="#">Custom Shop</a>
<a class="ddlink" href="#">Build Mine</a>
<a class="ddlink" href="#">Learn More</a>
<a class="ddlink" href="#">Deckplan</a>
<img src="http://www.dnpinteractive.com/temp/newbdd/images/dd_boat1.jpg" width="197" height="131" alt="boat1" />
</div>
<div class="bdd_links" id="boat2" onmouseover="showDDBoat('boat2')" >
<a class="ddlink" href="#">Custom Shop</a>
<a class="ddlink" href="#">Build Mine</a>
<a class="ddlink" href="#">Learn More</a>
<a class="ddlink" href="#">Deckplan</a>
<img src="http://www.dnpinteractive.com/temp/newbdd/images/dd_boat2.jpg" width="197" height="131" alt="boat2" />
</div>
<div class="bdd_links" id="boat3" onmouseover="showDDBoat('boat3')" >
<a class="ddlink" href="#">Custom Shop</a>
<a class="ddlink" href="#">Build Mine</a>
<a class="ddlink" href="#">Learn More</a>
<a class="ddlink" href="#">Deckplan</a>
<img src="http://www.dnpinteractive.com/temp/newbdd/images/dd_boat3.jpg" width="197" height="131" alt="boat3" />
</div>
<div class="bdd_boats">
<a class="subnav" href="#" onmouseover="showDDBoat('boat1')" onmouseout="hideDDBoat('boat1')">150 Montauk</a>
<a class="subnav" href="#" onmouseover="showDDBoat('boat2')" onmouseout="hideDDBoat('boat2')">160 Montauk</a>
<a class="subnav" href="#" onmouseover="showDDBoat('boat3')" onmouseout="hideDDBoat('boat3')">170 Montauk</a>
</div>
</div><!-- CLOSE class="dd1" -->
<div class="bdd_dropdowns" id="dd2" onmouseover="showElement('dd2')" onmouseout="hideElement('dd2')" onmouseover="showDDBoat('2boat1')">
<div class="bdd_links" id="2boat1" onmouseover="showDDBoat('2boat1')" >
<a class="ddlink" href="#">Custom Shop</a>
<a class="ddlink" href="#">Build Mine</a>
<a class="ddlink" href="#">Learn More</a>
<a class="ddlink" href="#">Deckplan</a>
<img src="http://www.dnpinteractive.com/temp/newbdd/images/dd_boat1.jpg" width="197" height="131" alt="boat1" />
</div>
<div class="bdd_links" id="2boat2" onmouseover="showDDBoat('2boat2')" >
<a class="ddlink" href="#">Custom Shop</a>
<a class="ddlink" href="#">Build Mine</a>
<a class="ddlink" href="#">Learn More</a>
<a class="ddlink" href="#">Deckplan</a>
<img src="http://www.dnpinteractive.com/temp/newbdd/images/dd_boat2.jpg" width="197" height="131" alt="2boat2" />
</div>
<div class="bdd_links" id="2boat3" onmouseover="showDDBoat('2boat3')" >
<a class="ddlink" href="#">Custom Shop</a>
<a class="ddlink" href="#">Build Mine</a>
<a class="ddlink" href="#">Learn More</a>
<a class="ddlink" href="#">Deckplan</a>
<img src="http://www.dnpinteractive.com/temp/newbdd/images/dd_boat3.jpg" width="197" height="131" alt="boat3" />
</div>
<div class="bdd_boats">
<a class="subnav" href="#" onmouseover="showDDBoat('2boat1')" onmouseout="hideDDBoat('2boat1')">150 Montauk</a>
<a class="subnav" href="#" onmouseover="showDDBoat('2boat2')" onmouseout="hideDDBoat('2boat2')">160 Montauk</a>
<a class="subnav" href="#" onmouseover="showDDBoat('2boat3')" onmouseout="hideDDBoat('2boat3')">170 Montauk</a>
</div>
</div><!-- CLOSE class="dd2" -->
<img id="placeholder_bg" src="http://www.dnpinteractive.com/temp/newbdd/images/placeholder_bg.jpg" height="424px" width="943px" alt="placeholder bg" />
</body>
</html>
Hi - I have the following classes defined in a a linked stylesheet... .side{background-image: url(images/wds_side_panel.jpg); background-position: bottom; background-repeat: no-repeat; padding-left:65px; padding-top: 20px; padding-right:24px; padding-bottom:29px; } .side_over{background-image: url(images/wds_side_panel_over.jpg); background-position: bottom; background-repeat: no-repeat; padding-left:65px; padding-top: 20px; padding-right:24px; padding-bottom:29px; } and am swapping them with an 'onMouseOver' that is within a TD I have on my page, thusly: <td class="side" onMouseDown="window.location='news.html';" onMouseOver="document.body.style.cursor='pointer'; this.className='side_over';" onMouseOut="document.body.style.cursor='default'; this.className='side';" > <a href="news.html">News</a></td> The client has reported that when putting the mouse over the td, the page behaves erratically, and the roll-over background image doesnt always appear.. Is this the best way to achieve what I want here ? Might I need to preload the image in the 2nd class? an example page of the above is: http://www.rc23.com/wds_beta/aboutwds.html Any help would be greatly appreciated. Thank you all . Mike. 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! heys all, in FF, I can get rid of that dreaded link outline via a { outline: none; } but IE7 isn't obeying. Funny enough, it's buggy, sometimes the outline is there, othertimes not. Does anyone know a sure-fire way to fix this issue, hopefully not resorting to apply this.blur() to all the links? Thanks. Real odd one here. Take a look at http://www.moxiegirlz.com/?section=moxiegirlz Note that you can click on one of the characters at the bottom to see their info. But when you do so, the characters no longer get the "hand" pointer icon (in FF and Safari, haven't tested IE). I've tried applying cursor:pointer directly to the a tags, though one shouldn't need to, and still nada. Somehow, calling a jscript in the href is killing the hand pointer. Anyone know why? I am just wondering if there is a way to simply extend a style rule from one previously defined. For instance, if I have this rule: Code:
.textarea-box {
color: #990000;
background-color: #fff;
width: 375px;
height: 200px;
border: #000 solid 1px;
}
...if I want another text area rule to be the same except for one difference, the height should be 80px, do I have to write the rule out again with a new name, incorporating the new height, or is there some nifty way to just change the height in the new rule? Thanks for help with this. j9 I have a menu bar made up of <a href> elements that have a hover style of:
PHP Code: #mainMenu a:hover { color:#000000; background-color: #66c74c; padding: 1px 4px 1px 4px; margin: 1px 1px 1px 1px; } This will provide a green colored rollover visual as the user moves their mouse over the menu bar. I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code: //--- Simplify setup by creating an array of the menus and hilight ID's --- var menus = ["menu1","menu2","menu3","menu4","menu5", "menu6","menu7","menu8","menu9","menu10"]; function J_hiliteMenu(menu) { //--- first make sure all the menu are hidden and unhilited --- for(i=0; i < menus.length; i++) { if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position var obj = document.getElementById(menus[i]); if (obj == null) continue; // if menu is not available skip it obj.style.color = "#ffffff"; obj.style.backgroundColor = "#234fd7"; } //--- hilite the menu we're interested in --- var obj = document.getElementById(menu); obj.style.color = "#000000"; obj.style.backgroundColor = "#f8f400"; } Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript? Thanks! Hi I'm putting together help documentation for an application and I would like the structure of the document to have all headings and sub headings to be dynamically numbered, for example: 1. Main 1.1. Sub1 1.2. Sub2 2. Main 2.1 Sub1 etc I've read about the pseudo class :before, but understand that this isn't supported by Explorer, or else I could use: BODY { counter-reset: chapter; /* Create a chapter counter scope */ font-family:Arial, Helvetica, sans-serif; } H1:before { content: "Chapter " counter(chapter) ". "; counter-increment: chapter; /* Add 1 to chapter */ } H1 { counter-reset: section; /* Set section to 0 */ } H2:before { content: counter(chapter) "." counter(section) " "; counter-increment: section; } Could anyone help with any suggestions as to how I could do this please? Thanks Sophie on my site I have a list with the UL Class of threads. I am not good with CSS at all I have this Code:
#threads {
padding:0;
margin:0;
}
#threads li {
list-style:none;
border-bottom:1px dotted #ccc;
display:block;
padding:2px 0px 2px 13px;
background:url(images/sub.png) no-repeat 0 0px;
}
not doing what I want, my site is mypricesavings(dot)com you can see the list on the homepage under Recent Activity, I'd like to make it so that the avatars line up on top of each other and a line between each one like the featured section located on this site, however, without the scrolling. http://demo.colorlabsproject.com/?theme=arthemia-premium thank you for attempting Hello, In the css below, why I can't set it on the same time? Code:
background: #FFF url(../images/main_bottom.gif) no-repeat bottom ;
background: #FFF url(../images/main_top.gif) no-repeat top ;
I was reading a tutorial were they always style both <tr> & <td> with the same thing... Is this needed? Or do you just need to style <tr>? Code:
table.navigation tbody tr.odd {
background: #252525;
color: #fff;
}
table.navigation tbody tr.odd td {
background: #252525;
color: #fff;
}
How would you go about creating a navbar like the one Red cross uses on the left side for generic website mapping? Red Cross Example Is this pure css with dual images? Or is this done with some effect with other forms of CSS (or even DHTML?) I did a web page for a company and it looks fine in ie7 where I tested it. The problem is when viewed in IE6 its like it ignores the sizes I put in. The box appears too big in IE6 and is the propr size in IE7. Is there any way to fix it so it would look the same in IE6 as IE7? Hey Guys, I'm trying to apply a style to all the TD's within a class of TR's. I am having trouble making the changes apply to the TD not the TR. How can I do it? Thanks! |
|||||||