|
CSS - :active And :focus On Safari
Hello Im trying to find a way to force
:active and :focus from temporary states to permanent effects in safari ? basically make them behave just like they behave on internet explorer. As of right now, if you go to the website using safari, you will have to press and hold the mouse button in order to see the image. is there any hack ? or fix to do this ? thanks the website is http://www.danielyanez.com and the css is http://www.danielyanez.com/Stylesheet.css it works well on IE and even in firefox, but in safari you have to keep pressing the button. Similar Tutorialsheys all, so im trying to get rid of that input:focus blue 'border' or 'outline' that happens in safari browsers. determined that if you apply a opacity: 0.99 to only the safari browsers, then it won't do that. however, this is only a fix for safari MAC. any thoughts on safari PC? thanks. Whats' wrong with this? a:active doesn't seem to work at all: Code: <style type="text/css">
#navcontainer
{
margin: 5px 0 0 5px;
padding: 0;
height: 20px;
}
#navcontainer ul
{
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li
{
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}
#navcontainer ul li a
{
background: #000000;
width: 80px;
height: 18px;
border-top: none;
border-left: 1px solid #9B9B9B;
border-bottom: none;
border-right: none;
padding: 0;
margin: 0 0 5px 0;
font-family:Arial, Helvetica, sans-serif;
color: #26DC18;
font-weight:bold;
text-decoration: none;
display: block;
text-align: center;
}
#navcontainer ul li a:hover
{
color: #930;
background: #f5d7b4;
}
#navcontainer ul li a:active
{
background: #000000;
color: #fff0000;
}
</style>
HTML [CODE<div id="navcontainer"> <ul id="navlist"> <li><a href="index.php">Home</a></li> <li><a href="inventory.php">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> </ul> </div> [/CODE] P.S. I just include this menu in a PHP page. We'll that will work iff you put # on the target page but that must not be. Thanks! Hi there, I've been battling to get this right...basically I have the following HTML setup: <input class="tboxes" type="textbox" /> <input class="tboxes2" type="textbox" /> "span.label01" is an inline element, and appears to the left of the textbox "input.tboxes". What I am trying to do attach some style to "span.label01" AND "div.box10" when the textbox receives focus. I have tried the following CSS code: input.tboxes:focus { color:#FF9900; } input.tboxes2:focus { color:#FF9900; } but nothing happens. I know this is a CSS selector issue, but I just can't seem to get it right. I have even tried adjacent sibling selectors, and nothing. Can anyone help me here? TIA! Hi, I've created a DIV ( that contains an iframe ) over a flash movie ( it could be an image also ). The problem is that if I click outside the iframe/DIV it disappears completely. Is there a way around this? Just one more question: what version of Netscape deals with iframes? Kind regards, Kepler you know that little black dotted inobtrusive focus ring that appears on links when you click them in firefox. I can make a case for shutting it down temporarily on this one link I have. I've found out ways to edit your profile and fix it. but obviously I cant go edit every visitor to my website's firefox/mozilla profile. In general I think it is a nice feature. But what css can I put on this one thing so it wont do it? OK... I went back to the original source. and it did not suffer from this problem So I went back and tweaked my css correspondingly . Now the focus ring goes where its supposed to. Good thing cuz I never heard of anybody changing it except for themself. Hi, in firefox I can do this to highlight a form element when it is selected. input[type="text"]:focus, input[type="password"]:focus, input[type~="text"]:focus, input[type~="password"]:focus, select:focus, textarea:focus { border: 1px solid #9ED175; } Is there a way I can do this in IE ? thanks scott Hi, I have a file named button.html with this code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
input:focus { border: 1px solid navy; }
</style>
</head>
<body>
<input type = "text" />
</html>
When I store it in my desktop, and open it from there, the focus works as expected. But when I store the file in Wamp and open it there either by typing C:\Wamp\www\button.html or http://localost/button.html in the URL bar, nothing happens. Can anybody explain this and offer a remedy? Here's the problem: aparently Opera places an inverse color highlight on links that receive the keyboard focus (see Javascript Development: How do I hide focus on Opera?), and I'd like to hide it. CSS3 property
Code: outline-style is useless here, and I've also tried setting the JScript Code: hideFocus property, but aparently this only works on IE. In fact, I've tried everything I can think of except blurring the link, which would completely defeat my purpose. I tried Javascript Development and got nothing, so maybe the answer is not Javascript. Is there possibly some proprietary CSS extension in Opera that would hide the highlight? If so, what is it and how do I use it? I have menu that uses its own CSS and I am having some problems with the a:active. I have accomplished changing the font color but have been unable to change the background color of the cell. See the code below.... Any help is greatly appreciated! By the way, the active link has to be used as a div. I am using a specialized menu with specific requirements :S The background command below only colors the background of the text but in the OVER css, it colors the background of the CELL.... Code: #dm_t-active_link {
font-weight: 900;
color: gold;
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 0px;
background-color: #440000;
width:125px;
border : 0px solid black;
}
.dm_t-0_over {
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 4px;
color: #BC8D31;
background-color: #550000;
border : 1px solid black;
height: 16px;
cursor: hand;
}
Hi, I have created my website but I'm having problems with the a:active link in my CSS. When I go to my site I would like the currently viewed pages link to be blanked out and unclickable, (until I view a different page.) I have tried to change the a:active part of my CSS but to no avail. The only part that seems to work in the CSS is the a:hover part, all the others seem to be ignored. Still relating to the question above, I have made the links width 229px. This seems to display fine with IE6, however NS7 compresses the layers background to the size of the text. How do I avoid this? I have tried adding an absolute position style to the layer in CSS, but I then lose the 'fluidity' of the website when the browser is resized. I have pasted my CSS below: #waita, #waitb { text-decoration:none; color:#FFFFC0; border-style:solid; border-color: #000000; border-width:2px; background-color:#000000; layer-background-color:#000000; font:bold; font-weight:bold; font-family:arial; font-size:14px; height:22px; width:230px; z-index: 100; margin: 5; } .image { border-width: 2; border-color: #000000; border-style: solid; margin: 10; } .class1 a:link { text-decoration:none; color:#000000; border-style:solid; border-color: #000000; border-width:2px; background-color:#FFFFC0; layer-background-color:#FFFFC0; font:none; font-weight:none; font-family:arial; font-size:14px; line-height:18px; width: 229px; z-index: 20; margin: 5; } .class1 a:active { text-decoration:none; color:#000000; border-style:solid; border-color: #000000; border-width:2px; background-color:#FFFFC0; layer-background-color:#FFFFC0; font:none; font-weight:none; font-family:arial; font-size:14px; line-height:18px; width: 229px; z-index: 20; margin: 5; } .class1 a:visited { text-decoration:none; color:#000000; border-style:solid; border-color: #000000; border-width:2px; background-color:#FFFFC0; layer-background-color:#FFFFC0; font:none; font-weight:none; font-family:arial; font-size:14px; line-height:18px; width: 229px; z-index: 20; margin: 5; } .class1 a:hover { text-decoration:none; color:#FFFFC0; border-style:solid; border-color: #000000; border-width:2px; background-color:#000000; layer-background-color:#000000; font:bold; font-weight:bold; font-family:arial; font-size:14px; line-height:18px; width: 229px; z-index: 20; margin: 5; } I have tried to change the two line in the a:active part: {background-color:#FFFFC0; layer-background-color:#FFFFC0;} but it seems to do nothing. Cheers, Andy is there a method similar to active, so when the user clicks the link it changes style but keeps the style change (after the mouse button is released) until the link is clicked a 2nd time at which point it goes back to its initial state and so on. i hope that makes sense I have a navigation bar similar to the one on this site. I want whatever current button that is clicked on to be a different color just like the site I linked. I thought this was done using the a:active tag but it doesn't seem to be working. It quickly changes back to whatever the default a tag specifies. Is there a trick to this? Thanks in advance. Hello I am having a little bit of trouble with an active state on my navigation. The navigation has been created with a sprite image for normal and hover states. I am now trying to make my active state the same as my hover state. I have been trying to add multiple classes to the li element since the nav background image is a class. Honestly I can't believe I haven't figured it out yet, but I'm sure this is a resolution I will not soon forget once I know the answer. I've posted my code and links to the site and code below. Many thanks in advance! Website: http://174.120.172.92/~techsol/ CSS File: http://174.120.172.92/~techsol/styl...ediatype=screen My navigation code: Code:
<!-- nav start -->
<ul id="nav">
<li class="excursions active"><a href="index.php?page=excursions">EXCURSIONS</a></li>
<li class="live"><a href="index.php?page=live-entertainment">LIVE ENTERTAINMENT</a></li>
<li class="restaurants"><a href="index.php?page=restaurants">RESTAURANTS</a></li>
<li class="top"><a href="index.php?page=top-ten">TOP 10</a></li>
<li class="hostoric"><a href="index.php?page=cannery">HISTORIC CANNERY</a></li>
<li class="shopping"><a href="index.php?page=shopping">SHOPPING</a></li>
<li class="days"><a href="index.php?page=juneau-days">JUNEAU DAYS</a></li>
<li class="access"><a href="index.php?page=local-access">LOCAL ACCESS</a></li>
</ul>
<!-- nav end -->
My navigation CSS Styles: Code: #nav{
width:542px;
position:absolute;
top:134px;
left:320px;
margin:0;
padding:0;
list-style:none;
overflow:hidden;
}
#nav li{
float:left;
margin:0 0 5px;
height:40px;
overflow:hidden;
}
#nav a{
background:url(uploads/template/bg-nav.jpg) no-repeat;
text-indent:-9999px;
display:block;
overflow:hidden;
height:40px;
}
#nav .excursions a{
width:122px;
margin:0 8px 0 0;
}
#nav .live a{
width:197px;
background-position:-130px 0;
margin:0 3px 0 0;
}
#nav .restaurants a{
width:130px;
margin:0 5px 0 0;
background-position:-330px 0;
}
#nav .top a{
width:77px;
background-position:-465px 0;
}
#nav .hostoric a{
width:173px;
background-position:0 -45px;
margin:0 9px 0 0;
}
#nav .shopping a{
width:110px;
background-position:-182px -45px;
}
#nav .shopping{margin:0 8px 0 0;}
#nav .days{margin:0 12px 0 0;}
#nav .days a{
width:103px;
background-position:-300px -45px;
}
#nav .access a{
width:126px;
background-position:-415px -45px;
}
#nav .excursions a:hover {background-position:0 -88px;}
#nav li.excursions li.active {background-position:0 -88px !important;}
#nav .live a:hover{background-position:-130px -88px;}
#nav .restaurants a:hover{background-position:-330px -88px;}
#nav .top a:hover{background-position:-465px -88px;}
#nav .hostoric a:hover{background-position:0 -133px;}
#nav .shopping a:hover{background-position:-182px -133px;}
#nav .days a:hover{background-position:-300px -133px;}
#nav .access a:hover{background-position:-415px -133px;}
Hi, I can't make my active tab look 'active' in my navigation. I have the following css: Code:
#tab_menu {
width: 200px;
margin-top: 10px;
}
#tab_menu li a {
height: 24px;
text-decoration: none;
color: #484848;
display: block;
background: url(../images/tab_menu.gif);
background-repeat: no-repeat;
padding: 8px 0 0 10px;
}
#tab_menu li a:hover {
color: #55880a;
background: url(../images/tab_menu.gif) 0 -32px;
background-repeat: no-repeat;
padding: 8px 0 0 10px;
}
.active {
color: #55880a;
background: url(../images/tab_menu.gif) 0 -32px;
background-repeat: no-repeat;
padding: 8px 0 0 10px;
}
with the following html: Code:
<div id="tab_menu">
<ul>
<li><a class="active" href="link.html">Link 1</a></li>
<li><a href="link2.html">Link 2</a></li>
<li><a href="link3.html">Link 3</a></li>
<li><a href="link4.html">Link 3</a></li>
</ul>
</div>
Any help welcomed! M. Hi there, Kindly have a look on below CSS property. What i want to ask is: when i'll click on a button, it should be look active. I mean it would have to get property of .sidebar_menu:active But it doen't works. Please elp me out from this. Code: <!--Sidebar menu button start-->
.input {
color : #FF9000;
font-size:20px;
;
}
.sidebar_menu{
border: 0px;
background: url('images/word-real.jpg') no-repeat top left;
font-size:18px;
font-weight:bold;
text-decoration:none;
color:#FFFFFF;
font-family: Verdana, Arial, Helvetica;;
width:97px;
height:42px
}
.sidebar_menu:hover {
border: 0px;
background: url('images/word-over.jpg') no-repeat top left;
color:#009BC9;
}
.sidebar_menu:active {
border: 0px;
background: url('images/word-over.jpg') no-repeat top left;
color:#009BC9;
}
br { clear: left; }
<!--Sidebar menu button End-->
Code: <a rel="11"><input type="button" value="worship" class="sidebar_menu"/></a> <a rel="22"><input type="button" value="prayer" class="sidebar_menu"/></a> <a rel="33"><input type="button" value="cell" class="sidebar_menu"/></a> <a rel="44"><input type="button" value="city" class="sidebar_menu"/></a> <a rel="55"><input type="button" value="mission" class="sidebar_menu"/></a> so what do each one do? Hi, I need some help to design an image based menu. I have been trying it for a week now but still could not achieve and going little bit mad. (Ive rewritten the same problem clearly this time hope someone can help me out) My menu image consists of 4 sections and 3 layers which looks like this: img26.imageshack.us/img26/1268/menux.gif 1.home 2.archives 3.news 4.about - (layer 1 unvistided link) 1.home 2.archives 3.news 4.about - (layer 2 hover link: mouse over) 1.home 2.archives 3.news 4.about - (layer 3 active: shows what section the visitor on afer clicking and going to that page) and my problem is with the last layer. I created the pages via admin panel of wordpress but give the links in the header.php manually myself without using codes. so the links of each section are like this home=http://localhost/wordpress/ archives=http://localhost/wordpress/?page_id=2 news=http://localhost/wordpress/?page_id=35 about=http://localhost/wordpress/?page_id=31 You can see my codes for CSS and PHP files below. Could you please have a look at my codes and provide the right code. The menu at the moment works ok except from the active side of it. I tried to give class id like "active" but failed to get it worked so please please change my wrong codes. PHP code: Code: <ul id="nav"> <li id="home"><a href="http://localhost/wordpress/">home</a></li> <li id="archives"><a href="http://localhost/wordpress/?page_id=2">archives</a></li> <li id="news"><a href="http://localhost/wordpress/?page_id=35">news</a></li> <li id="about" class="last"><a href="http://localhost/wordpress/?page_id=31">about</a></li> </ul> CSS Code: Code: #nav {
list-style: none;
padding: 0;
margin: -105px 25px;
width: 332px;
height: 30px;
background: url('images/menu.gif');
position: relative;
}
ul#nav li { width: 80px;
height: 30px;
padding: 0 4px 0 0;
text-indent: -900px;
float: left;
}
ul#nav li.last { padding: 0; }
ul#nav li a, ul#nav li a:visited, ul#nav li a:hover { display: block; width: 80px; height: 30px; background: transparent url('images/menu.gif') no-repeat; outline: none; }
ul#nav li#home a, ul#nav li#home a:visited { background-position: 0 0; }
ul#nav li#archives a, ul#nav li#archives a:visited { background-position: -84px 0; }
ul#nav li#news a, ul#nav li#news a:visited { background-position: -168px 0; }
ul#nav li#about a, ul#nav li#about a:visited { background-position: -252px 0; }
ul#nav li#home a:hover { background-position: 0 -30px; }
ul#nav li#archives a:hover { background-position: -84px -30px; }
ul#nav li#news a:hover { background-position: -168px -30px; }
ul#nav li#about a:hover { background-position: -252px -30px; }
.home ul#nav li#home a, .home ul#nav li#home a:visited, .home ul#nav li#home a:hover { background-position: 0 -60px; cursor: default; }
.archives ul#nav li#archives a, .archive ul#nav li#archives a:visited, .archives ul#nav li#archives a:hover { background-position: -84px -60px; cursor: default; }
.news ul#nav li#news a, .news ul#nav li#news a:visited, .news ul#nav li#news a:hover { background-position: -168px -60px; cursor: default; }
.about ul#nav li#about a, .about ul#nav li#about a:visited, .about ul#nav li#about a:hover { background-position: -252px -60px; cursor: default; }
The main problem i can understand from the earlier discussion is that i need to give id class for active links in header.php code but i also need to rewrite the last four lines of css code according to the codes i wrote in php file. Can someone please help? Can someone please add or rewrite the active bit (in css codes - last 4 lines from the bottom) and in php file. please. Some of my pages are long enough to cause the primary vertical scroll bar to become active but most of the pages are short enough so that it stays hidden. Because of this the entire content automatically shifts to the left to accommodate the width of the scroll bar. I don't like that. I would like it to stay in the same spot no matter what. (centered) my wrapper has margin: auto, 0px; so that the page stays centered when the window size changes. Is there a way to just bump the page to the right only when the scroll bar is active? (via my external css) Thanks a bunch. (if there is a thread about this already please feel free to just post the link to it) Also, I am going to add this head-banging dude because its just so flippin stupid. Greets, I hope someone can help me achieve this in IE6. it should be simple (famous last words?) ... but am stumped right now: What I am trying to achieve: I'm trying to get a class displayed for a link in an unordered list (Ie: Have the "home" section highlighted when I'm on the index page and so forth) Html/cfm code: Code: ... <div id="LeftMenu"> <ul> <li><a href="./index.cfm" title="Home">Home</a></li> <cfif (GetAuthUser() neq "")> <li><a href="./index.cfm?action=edit_profile" title="Edit Profile" <cfif request.action eq "edit_profile"> class="l_menu_selected"</cfif>>Edit profile</a></li> <li> </li> <li><a href="./index.cfm?logout=1" title="Logout" style="font-size: 8pt; color: red; ">Logout</a></li> <li> </li> <cfelse> <li><a href="./index.cfm?action=create_profile" title="Create Profile" <cfif request.action eq "create_profile"> class="l_menu_selected"</cfif>>Create profile</a></li> </cfif> </ul> </div> ... The css bit that goes with it: Code:
#LeftMenu
{
width: 200px;
}
#LeftMenu ul
{
margin: 0px;
padding: 0px;
}
#LeftMenu ul li
{
margin-top: 2px;
margin-left: -14px; /*WHY ON EARTH does ie set me up with some kind of funky margin on the left I didn't ask for???*/
}
#LeftMenu ul li a:link, #LeftMenu ul li a:visited,#LeftMenu ul li a:active
{
display: block;
background-color:#99cdff;
height: 28px;
width: 170px;
vertical-align:middle;
line-height:30px;
margin:0px;
padding-left: 30px;
font-weight:bold;
font-size: 8pt;
background-image: url(../images/arrow.gif);
background-repeat: no-repeat;
background-position: left center;
}
#LeftMenu ul li a:hover, #LeftMenu ul li a.l_menu_selected, .l_menu_selected
{
background-color:#6fb2f8;
}
I gather my last selector is where it's FUBAR. When parsing the page, I can clearly see the class tag is displayed... but the desired colour doesn't show up. Code: <li><a href="./index.cfm?action=create_profile" title="Create Profile" class="l_menu_selected">Create profile</a></li> Our client uses IE6 exclusively, so... no matter how nice it looks in FF (too many good developing tools to pass it up)... i need this displayed properly in IE6. As a bonus: if someone can tell me why the <li>'s are shown by default with a left padding of 20px in IE (hence, me having to resort to "margin-left: -14px;") |
|||||||