CSS for a rollover sprite

Here's a CSS issue.

I want to use a small icon next to a link and have this change of icon when the link is hovered over.  I have it set in place with a little Pixie:

http://Phyllis.fellowshipx.org/spriteicon.html

Question: Is my CSS good on it?  It seems to work, but I wonder if it'll cause problems anywhere.  Should I be declaring a height?

Also, when I click on this link in Firefox, it's a very wide selection rectangle.  Should I be declaring a width?  I am worried about registering a width/height, since my policy is located in ems (and I guess this could develop and create problems?).

I think it works very well, but wanted to know if anyone has any suggestions on the best ways to write code for it.

Thank you, Phyllis

Seems good.  You can add height & width in ems without penalty.

/ * This applies to all connection States * /.

a: {enlargeicon}
Width: 8th;
height: 1.5em;
background-image: url (enlarge.gif);
background-repeat: no-repeat;
padding-left: 20px;
Display: block;
}

/ * If link and visited have the same styles, use a comma * /.

a.enlargeicon:link,
{a.enlargeicon:visited}
color: #013976;
background-position: 0px 0px;
}

/ * remember the accent * /.

a.enlargeicon:hover,
a.enlargeicon: active,.
a: {enlargeicon:focus}
color: #C37C00;
background-position: 0 - 19px;
}

Nice to see Sprites!  I wish that more people used. :-))

Nancy O.
ALT-Web Design & Publishing
Web | Graphics | Print | Media specialists
http://ALT-Web.com/
http://Twitter.com/ALTWEB

Tags: Adobe Developers

Similar Questions

  • How to customize the CSS for the right-click menu?

    I have the Chromedit extension installed, and I want to customize the design of my context menu to look "Flat" as menu right-click chrome. It would also be nice to make all the other menus, such as the Firefox button to be flat. What is the item in the context menu of firefox CSS? Specifically, I would like to know the names of the CSS elements for the

    - entire menu
    - any menu element
    

    In fact, incidentally, is there a systematic way of knowing the name of element CSS for a browser component? Any extension to this?

    Edit: I chose the solution of cor - el on the advice of jscher2000, however, for the future visitors convinience, here is the link to the complete solution of jscher2000:

    Response 584137

    Have you tried that?

    #context-openlinkprivate {
     background-color: #4281F4 !important;
     -moz-appearance: none !important;
    } 
  • CSS for the size of box selectManyCheckbox

    HI, we use jdeveloper 11.1.7.1 version andtying to apply some css for the check box of the item SelectManyCheckbox.  Need to increase the size of the box. Also by default wording is followed with the box, but I need to go back to the first label of the sequence and the checkbox should be displayed. Searched a lot on google but could not find a specific way to achieve this. Can anyone help please on the same subject.

    Hello

    Try with something like this:

    AF | selectManyCheckbox::content input [type = "checkbox"] {}

    Width: XXpx;

    height: XXpx;

    }

    AF | {selectManyCheckbox::label}

    position: relative;

    left: XXXpx;

    }

    Kind regards

    Ruben.

  • The CSS for my drop-Spry has code missing.  How can I fix it?

    I moved the spry by copy and paste CSS code to my own STYLE sheet external and made some adjustments. I'm putting anything in the same area as the vertical menu.  I can not put articles on the same ground as the menu. I tried to place images and text of absolute positioning, using the pixels, creation of containers and thing that I could think of. Nothing has worked.  My footer will not be convinced that the lower part of the menu s not the bottom of the page. !  I decided to start from scratch.  The CSS for the Spry drop down vertical menu is now empty.  How can I fix my DreamWeaver? Then I need solve the problem with the menu

    Spry menus unsuitable for modern Web sites.

    Switch to the pure HTML/CSS or JQuery menus

    Here is an example of a pure CSS menu with an indicator of page continuing to remind the visitor what page they are on

    «"" "Homepage: cards by Karen: handmade greeting cards»»»"

    View the HTML soource and see the CSS on its own stylesheet here

    www.kardsbykaren.us/kknav.CSS

  • positioning css for IE11

    I remove all the Spry lists and changing to pure CSS for my drop-down lists.

    I bought 7 software project for this on the recommendation of messages in this forum.

    The horizontal list that begins with "contact us" etc, is supposed to be located at the bottom of the thin vertical lists on all browsers works, but doesn't stay in place on IE11. It works very well on my current index (thanks to Nancy O) page.

    http://www.country-Gallery.com/

    Any suggestions? I took our photos and information on us to try to make the work easier, but not good! It's my experimental page...

    http://www.country-Gallery.com/index3.html

    Thank you!

    Janet

    Al called me and explained CSS errors in the footer DIV. It wasn't a mistake to project 7 of course and I am very grateful! You can't get better customer service than this.

  • Help get the css for pagination webapp work

    Hi I need help to get the pagination of a web application show.

    The page I am on is:

    http://www.humbugdance.com/dancelist

    It paging down.

    There are two stylesheets linked from the page, one for the modules and onne to style the rest of the page.

    I am struggling to find a rule that is causing the problem, any help would be greatly appreciated.

    If someone can tell me where I'm wrong, I'd be extremely grateful.

    I copied the below two style sheets:

    Module:

    http://jsfiddle.NET/22LYz/

    Thank you

    Post edited by: Liam Dilley

    Hey there,

    I edited your post that it was a LOT of css for a forum. I added in to a jsfiddle for you.

    Have you used firebug or use your browser check tool? Here are the things that you use to find what CSS uses an element and how to change it on the fly and then add in your CSS.

    If you provide your site connect people like me will just do tha tto find the problem for you.

    You forgot to say what your problem is what is the problem?

  • new css for jquery ui tabs

    I wish I could change the css on my widget tabs jquery on a single page without him making the css for my signs tab on other pages.  now when I change single page it changes it on the other and is not what I want to do... Thank you

    Avery

    Extract and save the new theme to your local site folder.  I'm sure that ThemeRoller gives you a demo page.  Open it in code view and you will see the scripts and CSS files, you need for your own page.

    Nancy O.

  • CSS for asp files?

    Hi-

    I am applying a css rule in an asp file (e.g., change font Times New Roman by default). Specifically, the police that I try to apply the CSS rule is in a table. When I try this

    < < style type = "text/css" >

    p {do-family: Arial, Helvetica, without serif;}

    }

    < / style >

    Nothing happens. Can someone tell me what I am doing wrong? Thank you.

    -the code added below-

    < table width = "100%" border = "0" >

    < b >

    < td width = "600" > < table width = "800" border = "0" >

    < b >

    < td colspan = "3" > < img src = "images/banner1.jpg" width = "795" height = "100" alt = "banner image" / > < table > "

    < /tr >

    < b >

    < td width = "180" valign = "top" bgcolor = "#999999" > < p > < a href = "index.asp" > Section 2 < /a > < /p >.

    < p > < a href = "Section2.asp" > Section 2 < /a > < /p >

    < p > < a href = "Schon3.asp" > Section 3 < /a > < /p > < table >

    < td width = "20" > < table >

    < td width = "400" > some dummy text. < table >

    < /tr >

    < b >

    < td width = "180" valign = "top" bgcolor = "#FFFFFF" > < img src = "images/lower_left4.jpg" width = "193" height = "67" alt = "image of footer left" / > < table > "

    < td width = "20" > < table >

    < td width = "400" > < img src = "images/template_lower_right.jpg" alt = "image of right lower footer" width = "588" height = '73' border = '0' well = "#Map" / > < table > "

    < /tr >

    < / table > < table >

    < /tr >

    < /table >

    < name of the map 'Map' id = 'Card' = >

    " < area shape ="rect"coords ="387,19,572,51"href =" http:// ..." />

    < / map >

    (1) you style all pages with CSS in the same way whether they are HTML, ASP or PHP.

    (2) your text is actually inside tags inside

    Tags

    Section 2

    Section 2

    Section 3

    If no rule CSS for

    Tags will affect the text.

    You will need style links instead.

  • Example of the need to attach different CSS for IE stylesheets

    I would like to see an example of the HTML to put together sheets of Style different CSS for different version of Internet Explorer. Any help is appreciated, thanks.

    The conditional comments CSS go between theandTags as follows.

    Or with external stylesheets as follows:

    
    
    
    

    Nancy O.
    ALT-Web Design & Publishing
    Web | Graphics | Print | Media specialists
    http://ALT-Web.com/
    http://Twitter.com/ALTWEB
    http://ALT-Web.blogspot.com

  • CSS for tabs

    Don't know why it was empty... posted reply with rewrite of my question.

    Published by: jeffles on August 21, 2009 06:19

    Welcome to the world to make the CSS for your ADF Application. As soon as you create your skin customized, you very well need all that skin, and you can only extend the Simple skin according to the manual of the developer 10 g (section 22.3.1 Guide for forms/4GL developers).

    Here are a few tips for 10g:

    (1) http://technology.amis.nl/blog/1425/customizing-blaf-for-adf-faces-easier-than-skins-for-influencing-colors-and-fonts
    (2) http://www.oracle.com/technology/products/jdev/101/howtos/adfskins/index.html
    (3) save the JDeveloper 10 g helps for reference of the skin which lists each tag. Search for: "selectors of the skin. There is also an online version: http://www.oracle.com/technology/products/jdev/htdocs/partners/addins/exchange/jsf/doc/skin-selectors.html

    (I can't check the third above because we moved since then to 11g).

    For the side 11g: it is a much nicer skin guide:

    (1) http://jdevadf.oracle.com/adf-richclient-demo/faces/components/skinningKeys/index.jspx
    (2) and the reference of the skin is in aid, also search for 'selectors of skin.

    You can search the af | panelTabbed:tab - start stuff, or the af | navigationPane - tabs:tab - start (look at the link of demo 11 g for you give more advice... it is relatively similar.) There is more info on commonly confused components that specifically mention the tabs: http://jdevadf.oracle.com/adf-richclient-demo/faces/confusedComponents/index.jspx)

    I hope this helps.

    Kenton

  • CSS for menus using graphics bars

    I'm looking for best practices and procedures for a menu bar horizontally. The menu bar is graphic, under the usual rollover effect, located in a table. For branding reasons, the text within each bearing must be graphic and not HTML.

    Go to other resources, I can build based CSS menu bars that use the same "hover" or "up" graphic, but not different graphs for each button.

    Yes, with this in mind, is it a good idea to make a menu bar CSS-based, or should I just leave it in the table. And if it is possible to make a menu bar CSS-based, how I would do at each of the different buttons rollover employs a different graphics?

    Thank you!

    You can always make a menu bar, but you'll have a lot more CSS rules since
    you will need separate link for each button style rules.

    "obeydesign" wrote in message
    News:eaaqcq$7FB$1@forums. Macromedia.com...
    > I'm looking for best practices and procedures for a menu bar horizontally.
    > The
    > menu bar is graphic, under the usual rollover effect, located in a table. For
    > brand of the reasons, the text within each bearing must be graphic and not
    > HTML.
    >
    > Go to other resources, I can build CSS based menus bars using the
    > even "hover" or "up" graphics, but not different graphs for each
    > button.
    >
    > So with this in mind, is it a good idea to make a menu CSS-based
    > bar, or
    > should I just leave it in the table. And is it possible to make a
    > Bar CSS based menus, how I would do when each of the different bearing
    > buttons employs a different graphics?
    >
    > Thank you!
    >

  • Firefox does not load CSS for the local Web site

    Hello

    I know that you have all seen this issue before but none of the answers I have found work for me. My site loads perfectly fine in other browsers, but not Firefox.

    I have a local website with a style sheet which is saved in the same folder:

    < link rel = "stylesheet" href = "style.css" type = "text/css" / > "

    I defined the character sets in HTML and CSS documents:

    HTML =
    CSS = @charset "UTF-8";

    I have the last two updates for Chrome, IE and Firefox from today.

    Any help would be appreciated.

    Thank you

    Have you checked the Web Console (Firefox/tools > Web Developer) for error messages?

    Is the local server send the type of content appropriate for all files?

    You can load the CSS file directly via the address bar?

    You can check in "tools > Page Info > general" how Firefox to view this file.

  • I am looking for a solution Server (with Te css) for the fact that Firefox uses the system DPI settings, which makes my site look (too) big.

    My site appears much too big in firefox. And I want all browsers to view my site properly.
    I know that there are settings wihtin firefox that fix this problem. But I'm looking for a solution on server side, so that visitors to my site must not be disturbed by changing their settings.

    You may need to change your site as soon as 30 Chrome and IE 11 will also use the system DPI setting (like Firefox does now).

    Possible solution:

    • Type of topic: config in the Firefox address bar and hit the Enter key.
    • If the warning that this might void your warranty , click I'll be careful, I promised.
    • Search for layout.css.devPixelsPerPx

    • Double-click layout.css.devPixelsPerPx to edit its value. The default value is - 1.0 in Firefox 22 and above. Change it to 1.0 to run as in previous versions of Firefox.

    If necessary, further adjust the value of 0.1 or 0.05. Values between 1.0 and around 0.5 to reduce the size of the elements. Use a value greater than 1.0 to increase the size. For example, a value of 1.25 will increase the font size of the 125% to account for the default DPI setting in Windows 8. Check the value that you enter. Definition of a value that is too small will take everything away and too high will explode things.

    If the web pages should always be adjusted so you can watch the extension Default FullZoom Level or NoSquint .

    To adjust the font size for the user interface, you can use the extension of theme font & size changer .

  • Problems are for formatting the CSS for responsiveness

    Hello! I'm leaving a few days in Dreamweaver cm³ and I cannot format my receptive page for ipad, I want to delete the class drop-down to the right, because it has several icons of countries who do not want to show on the screen of the ipad, more'm not able to attack the right of the element, someone help me please?

    BOM dia!

    Estou iniciando has ideal dias no Dreamweaver cc e nao estou access formatar minha pagina para responsivo don't do estou Querenda remove a class drop-down to the right porque tem varios icons of countries that nao quero show na tela para ipad, ipad, but nao estou access attack o elemento certo, por favor alguem poderia me help?

    HTML

    < header >

    < div class = "container" > <! - logo - >

    "< img id ="logo"src="imagem/logo.fw.png "alt ="logo">

    < / div > <! - logo fim - >

    < div class = 'header-azulclaro' > <! - topo parte externa - >

    < div class = "container" > <!-parte topo back paise->

    < ul class = "dropdown to the right" > <! - jogando para right - >

    < class li = "pais-01" > < a href = "#" > < /a > < /li >

    < class li = 'pais-02' > < a href = "#" > < /a > < /li >

    < class li = "pais-03" > < a href = "#" > < /a > < /li >

    < class li = "pais-04" > < a href = "#" > < /a > < /li >

    < /ul >

    < / div >

    < / header >

    CSS

    @media (max-width: 768px) {}

    . Header-azulclaro ul {display: none}

    cod.JPG

    }

    You can apply several classes to your tag of

      .  To hide the list of icons of tablets and mobile phones, add the class to support hidden - as follows:

  • APEX 5 modal page: CSS for the layout does not work

    Hi experts,

    I have problem with CSS tag in the pages of the dialog box modal.

    If I use a few CSS changes for APEX DA label (for personal reasons), it works for a normal page.

    Example:

    standard page: label #P2_X_STATUS_LABEL {make-weight: 700}-works

    modal page: label #P3_X_STATUS_LABEL {make-weight: 700}-does not work


    I tried to change the style of firebug (color, background,...) for each element on a page modal. It does not work. Also with! important attribute. I checked the 'Get matching items' jQuery selector and it shows me the correct items.


    How is that possible?

    I upgraded from 4.2 and I need this feature (base), to the works. (for modal too)


    Concerning

    J

    It will help if you demonstrate your problem to apex.oracle.com.

    Please, create a workspace of comments and provide us with credentials in order to visualize and debug your question.

    Thank you

    Sunil Bhatia

Maybe you are looking for

  • How to format the HDD on my Satellite C855 1GQ

    I have a Toshiba Satellite C855 1GQ.How to format my HARD drive for your help thanks.

  • Falat error

    I'm downloading Skype new version and when I go to sign in the new window opens with the name of error falat can someone help me please

  • Power supply replacement for Equium A60

    I have an A60 and am looking for a replacement power as mine is broken - anyone any idea where to get one and how much? Thank you.

  • Computer that does not

    I'm new to the forum here, so I'll do the best I can explain what happened. In November of 2012, my husband bought me a laptop HP 2000 - b 2, 09 (Windows 8 came with it) Walmart so I can continue with my studies. He bought a replacement plan for two

  • dv4050-ea DVDRAM GT30L code 19 error

    Hello. I've been having intermittent problems with my DVD drive and decided to investigate. Device Manager says "Windows cannot start this hardware device because its information of configuration (in the registry) is incomplete or damaged. (Code 19)