Search Results

Search found 11922 results on 477 pages for 'css animations'.

facebook twitter digg google delicious technorati stumbleupon myspace wordpress linkedin gmail igoogle windows live tumblr viadeo yahoo buzz yahoo mail yahoo bookmarks favorites email print

Page 85/477 | < Previous Page | 81 82 83 84 85 86 87 88 89 90 91 92  | Next Page >

  • jQuery: Remove Div after 2 combined animations done?

    - by Axel
    Hi, i have a jQuery line that execute 2 animations, what i want is to remove the #flasher DIV after sliding it up by my current code. How to add a callback in this bunch of brackets? here is my code: $("#flasher").animate({opacity: 1.0}, 6000).animate({"top": "-=30px"},"slow"); Thanks

    Read the article

  • CSS Horizontal sub menu - IE 6,7 both dont working, tried with whatever hover.

    - by SHAKTI
    I'm not expert about css menus. But I know basic system to make css menu. I used this system before and works, but this time it is not working. The site is http://www.uniethos.com. Please check this site This menu works with all other latest Browsers. But not with IE 6 & 7. I know IE6 don't support hover except anchor. So before I was using Whatever Hover. But this time it is not working and even with IE7. I don't know why its happening. May be there could be some problem with my css. Please check the css. If you don't have IE 6 or 7 installed you can run one from http://spoon.net/browsers/. Require to install one plugin. The CSS I'm using for the menu is .glossymenu{ background: #B4B3B3; height: 30px; width: 100%; padding: 0; margin: 0; display:inline-block; position:relative; } .glossymenu ul { list-style: none; padding: 0px; margin: 0; padding-left: 0px; } .glossymenu li ul { display:none; position:absolute; width: 80%; top:30px; left:0px; background-color:#5B0C10; border:0px; z-index: 99; } .glossymenu li li a { padding: 0px 10px 0px 10px; } .glossymenu li li a:hover { background : #871016; } .glossymenu li{ float:left; padding: 0; } .glossymenu li a{ float: left; display:block; position:relative; color:#FFF; text-decoration: none; font-family: sans-serif; font-size: 13px; font-weight: bold; padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/ height: 30px; line-height: 30px; text-align: center; cursor: pointer; } .glossymenu li a b{ float: left; display: block; padding: 0 24px 0 8px; /*Padding of menu items*/ } .glossymenu li.current a, .glossymenu li a:hover{ color: #FFF; background: #5B0C10; background-position: left; text-decoration: none; } .glossymenu li a:visited{ text-decoration: none; } .glossymenu ul li:hover ul { display: block; }

    Read the article

  • How to organize pictures on website using css? [on hold]

    - by user3624023
    Here is my website without any CSS: http://www.wmcicompsci.ca/cs20/students/theglowcloud/Bare%20bones%20website/classics_bare.html I am new to CSS and I would like to organize pictures these pictures in this fashion: http://css-tricks.com/examples/SlideinCaptions/ I would just like this layout for the pictures but I do not need the sliding of the captions(although I would like to but it does not work my browser). I would like the captions to be like titles on top of the pictures. Here is my current html code: <!DOCTYPE html> <html> <head> <title> My favourite Fantasy books</title> <meta charset = "utf-8"> <link rel="stylesheet" href="css.css"> </head> <body> <nav id="main_nav"> <ul> <li><a href = " homepage_css.html"> Homepage</a></li> <li><a href="science_fiction_css.html">Science Fiction</a></li> <li><a href="classics_css.html">Classics</a></li> <li><a href="fantasy_css.html">Fantasy</a></li> </ul> </nav> <h1> Fantasy Genre</h1> <p> Here are my favourites:</p> <ul> <li> Goblet of Fire by J.K Rowling (4th book in the Harry Potter Series) </li> <li><img class= displayed src="pics/fantasy/goblet_of_fire.jpg" width="200" alt="Goblet of Fire book cover"></li> <li> Graceling by Kristan Cashore </li> <li><img src="pics/fantasy/graceling.jpg" width="200" alt = " Graceling book cover"></li> <li> Serpent's Shadow by Rick Riordan (3rd book in the Kane Chronicles) </li> <li><img src="pics/fantasy/serpents_shadow.jpg" width="200" alt="Serpent's Shadow book cover"></li> <li> The Hobbit by J.R.R. Tolkein </li> <li><img src="pics/fantasy/the_hobbit.jpg" width="200" alt="The Hobbit book cover"></li> <li> The False Prince by Jennifer Neilson (1st book in the Ascendance Triology) </li> <li><img src="pics/fantasy/the_false_prince.jpg" width="200" alt="The False Prince book cover"></li> </ul>

    Read the article

  • CSS div/overflow Question: Why does the first HTML file work but not the second?

    - by kidvid
    Notice how the first HTML/CSS works when you re-size the browser horizontally. It will shrink no further than around 800 pixels, but it will expand as far as you drag the right edge of the browser. It will also correctly overflow the table at the top and scroll it horizontally. The thing I don't like about the first code snippet is where the scrollbar is. I want it to show up within the borders of the fieldset, so even if I narrow the browser down to 800 pixels wide, I can see both the left and right sides of the fieldset's border. The second code snippet is exactly the same as the first except I add another div tag to the mix, inside of the field set and around the grid. Notice how the top fieldset's width won't correctly shrink when you make the viewport of your browser narrower. Any ideas on why it doesn't work, what I can do to get it to work like the first code snippet? I don't think I'm describing this clearly, but if you run the two side by side, and expand and contract the horizontal edge of your browser windows, you'll see the differences between the two. I'm pretty new to CSS and HTML layout, so my understanding of why CSS handles sizing the way it does in some situations is still really confusing to me. Thanks, Adrian Working HTML file: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Style-Type" content="text/css"></meta> <style type="text/css"> #divBody { margin-top: 5px; top:24px; margin-top: 10px; } #divContainer { top: 5px; position:relative; min-height:100%; #width:expression(document.body.clientWidth < 830? "800": "90%" ); width:90%; min-width: 800px; padding-bottom:70px; } #divMasterGrid { position:relative; margin:5px; top:5px; width:99%; margin:0 auto; overflow-x:scroll; } #divRadioButtonArea { position:relative; top:20px; height:51px; font-size: 12px; width:99%; margin:5px; } </style> <title>TEST TEST</title> </head> <body id="divBody"> <div id="divContainer" class="gridRegion"> <div id="divMasterGrid"> <fieldset style="margin: 5px;"> <legend style="font-size: 12px; color: #000;">Numbers</legend> <table border="1px"> <tr> <td>One </td> <td>Two </td> <td>Three </td> <td>Fout </td> <td>Five </td> <td>Six </td> <td>Seven </td> <td>Eight </td> <td>Nine </td> <td>Ten </td> <td>Eleven </td> <td>Twelve </td> <td>Thirteen </td> <td>Fourteen </td> <td>Fifteen </td> <td>Sixteen </td> <td>Seventeen </td> <td>Eighteen </td> <td>Nineteen </td> <td>Twenty </td> </tr> </table> </fieldset> </div> <div id="divRadioButtonArea"> <fieldset style=" padding-left: 5px;"> <legend style="color: #000; height:auto">Colors</legend> <table style="width:100%;padding-left:5%;padding-right:5%;"> <tr> <td> <input type="radio" name="A" value="Y"/><label>Red</label> </td> <td> <input type="radio" name="O" value="O"/><label>White</label> </td> <td> <input type="radio" name="W"/><label>Blue</label> </td> </tr> </table> </fieldset> </div> </div> </body> </html> Broken HTML file: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Style-Type" content="text/css"></meta> <style type="text/css"> #divBody { margin-top: 5px; top:24px; margin-top: 10px; } #divContainer { top: 5px; position:relative; min-height:100%; #width:expression(document.body.clientWidth < 830? "800": "90%" ); width:90%; min-width: 800px; padding-bottom:70px; } #divTopFieldSet { position:relative; margin:5px; top:5px; width:99%; } #divRadioButtonArea { position:relative; top:20px; height:51px; font-size: 12px; width:99%; margin:5px; } #divTable { position:relative; width:99%; margin:5px auto; overflow-x:scroll; } </style> <title>TEST TEST</title> </head> <body id="divBody"> <div id="divContainer" class="gridRegion"> <div id="divTopFieldSet"> <fieldset style="margin: 5px;"> <legend style="font-size: 12px; color: #000;">Numbers</legend> <div id="divTable"> <table border="1px"> <tr> <td>One </td> <td>Two </td> <td>Three </td> <td>Fout </td> <td>Five </td> <td>Six </td> <td>Seven </td> <td>Eight </td> <td>Nine </td> <td>Ten </td> <td>Eleven </td> <td>Twelve </td> <td>Thirteen </td> <td>Fourteen </td> <td>Fifteen </td> <td>Sixteen </td> <td>Seventeen </td> <td>Eighteen </td> <td>Nineteen </td> <td>Twenty </td> </tr> </table> </div> </fieldset> </div> <div id="divRadioButtonArea"> <fieldset style=" padding-left: 5px;"> <legend style="color: #000; height:auto">Colors</legend> <table style="width:100%;padding-left:5%;padding-right:5%;"> <tr> <td> <input type="radio" name="A" value="Y"/><label>Red</label> </td> <td> <input type="radio" name="O" value="O"/><label>White</label> </td> <td> <input type="radio" name="W"/><label>Blue</label> </td> </tr> </table> </fieldset> </div> </div> </body> </html>

    Read the article

  • Interesting links week #24 and #25

    - by erwin21
    Below a list of interesting links that I found this week: Interaction: Design Usability and All About It Frontend: CSS Lint – CSS Cleaning Tool 10 HTML Entity Crimes You Really Shouldn’t Commit Development: OWASP Top 10 for .NET developers part 7: Insecure Cryptographic Storage C#/.NET Fundamentals: Choosing the Right Collection Class Mobile: Tips to Design a Website for Mobile Marketing: 30 (New) Google Ranking Factors You May Over- or Underestimate Other: 5 Little-Known Web Files That Can Enhance Your Website Interested in more interesting links follow me at twitter http://twitter.com/erwingriekspoor

    Read the article

  • Menu widget - no jQuery nor Javascript required - pure CSS

    - by Renso
    Goal: Create a menu widget that does not require any javascript, extremely lightweight, very fast, soley based on CSS, compatible with FireFox and Chrome. Issues: May have some rendering issues in some versions of IE, sorry :-) Instruments: css file html with specific menu format jQuery-ui library - optional if you want to use your own images/colors Implementation Details: HTML: <div id="header">   <div id="header_Menubar">     <ul class="linkList0 ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">         <li class="first more ui-state-default ui-corner-top ui-tabs-selected"><a title="Home" href="/Home">Home</a>             <ul class="linkList01 ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">                 <li class="ifirst ui-state-default ui-corner-top"><abbr title="Go Home"></abbr><a title="Home" href="/Home">Home</a></li>             </ul>         </li>         <li class="more ui-state-default ui-corner-top ui-tabs-selected"><a title="Menu 2" href="/Menu2a">Menu 2</a>             <ul class="linkList01 ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">                 <li class="ifirst ui-state-default ui-corner-top"><abbr title="Menu 2 a"></abbr><a title="Menu 2 a" href="/Menu2a">Menu 2 a</a></li>                 <li class="ilast ui-state-default ui-corner-top"><abbr title="Menu 2 b"></abbr><a title="Menu 2 b" href="/Menu2b">Menu 2 b</a></li>             </ul>         </li>         <li class="more red ui-state-default ui-corner-top ui-tabs-selected"><a title="Menu 3" href="/Menu3 d">Menu 3</a>             <ul class="linkList01 ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">                 <li class="ifirst ui-state-default ui-corner-top"><abbr title="Menu 3 a"><a title="Menu 3 a" href="/Menu3a">Menu 3 a</a></abbr></li>                 <li class="ui-state-default ui-corner-top"><abbr title="Menu 3 b"><a title="Menu 3 b" href="/Menu3b">Menu 3 b</a></abbr></li>                 <li class="ui-state-default ui-corner-top"><abbr title="Menu 3 c"><a title="Menu 3 c" href="/Menu3c">Menu 3 c</a></abbr></li>                 <li class="ilast ui-state-default ui-corner-top"><abbr title="Menu 3 d"><a title="Menu 3 d" href="/Menu3d">Menu 3 d</a></abbr></li>             </ul>         </li>     </ul>     </div> </div> CSS: /*    =Menu     -----------------------------------------------------------------------------------------    */ #header #header_Menubar {     margin: 0;     padding: 0;     border: 0;     width: 100%;     height: 22px; } #header {     background-color: #99cccc;     background-color: #aaccee;     background-color: #5BA3E0;     background-color: #006cb1; } /* Set menu bar background color     */ #header #header_Menubar {     background-attachment: scroll;     background-position: left center;     background-repeat: repeat-x; } /*    Set main (horizontal) menu typology    */ #header .linkList0 {     padding: 0 0 1em 0;     margin-bottom: 1em;     font-family: 'Trebuchet MS', 'Lucida Grande',           Verdana, Lucida, Geneva, Helvetica,           Arial, sans-serif;     font-weight: bold;     font-size: 1.085em;     font-size: 1em; } /*    Set all ul properties    */ #header .linkList0, #header .linkList0 ul {     list-style: none;     margin: 0;     padding: 0;     list-style-position: outside; } /*    Set all li properties    */ #header .linkList0 > li {     float: left;     position: relative;     font-size: 90%;     margin: 0 0 -1px;     width: 9.7em;     padding-right: 2em;     z-index: 100;    /*IE7:    Fix for IE7 hiding drop down list behind some other page elements    */ } /*    Set all li properties    */ #header .linkList01 > li {     width: 190px; } #header .linkList0 .linkList01 li {     margin-left: 0px; } /*    Set all list background image properties    */ /*#header .linkList0 li a {     background-position: left center;     background-image: url(  '../Content/Images/VerticalButtonBarGradientFade.png' );     background-repeat: repeat-x;     background-attachment: scroll; }*/ /*    Set all A ancor properties    */ #header .linkList0 li a {     display: block;     text-decoration: none;     line-height: 22px; } /*    IE7: Fix for a bug in IE7 where the margins between list items is doubled - need to set height explicitly    */ *+html #header .linkList0 ul li {     height: auto;     margin-bottom: -.3em; } /*    Menu:    Set different borders for different nested level lists     --------------------------------------------------------------    */ #header .linkList0 > li a {     border-left: 10px solid Transparent;     border-right: none; } #header .linkList0 > li a {     border-left: 0px;     margin-left: 0px;     border-right: none; } #header .linkList0 .linkList01 > li a {     border-left: 8px solid #336699;     border-right: none;     border: 1px solid Transparent;     -moz-border-radius: 5px 5px 5px 5px;     -moz-box-shadow: 3px 3px 4px #696969; } #header .linkList0 .linkList01 .linkList001 > li a {     border-left: 6px solid #336699;     border-right: none;     border: 1px solid Transparent;     -moz-border-radius: 5px 5px 5px 5px;     -moz-box-shadow: 3px 3px 4px #696969; } #header .linkList0 .linkList01 .linkList001 .linkList0001 > li a {     border-left: 4px solid #336699;     border-right: none;     border: 1px solid Transparent;     -moz-border-radius: 5px 5px 5px 5px;     -moz-box-shadow: 3px 3px 4px #696969; }     /*    Link and Visited pseudo-class settings for all lists (ul)    */ #header .linkList0 a:link, #header .linkList0 a:visited {     display: block;     text-decoration: none;     padding-left: 1em; } /*    Hide all the nested/sub menu items    */ #header .linkList0 ul {     display: none;     padding: 0;     position: absolute;    /*Important: must not impede on other page elements when drop down opens up    */ } /*    Hide all detail popups    */ #header .detailPopup {     display: none; } /*    Set the typology of all sub-menu list items li    */ /*#header .linkList0 ul li {     background-color: #AACCEE;     background-position: left center;     background-image: url(  '../Content/Images/VerticalButtonBarGradientFade.png' );     background-repeat: repeat-x;     background-attachment: scroll; }*/ #header .linkList0 ul li.more {     background: Transparent url('../Content/Images/ArrowRight.gif') no-repeat right center; } /*    Header list's margin and padding for all list items    */ #header .linkList0 ul li {     margin: 0 0 0 1em;     padding: 0; } #header .linkList01 ul li {     margin: 0;     padding: 0;     width: 189px; } /*    Set margins for the third li sibling (Plan a Call) to display to the right of the parent menu     to avoid the sub-menu overlaying the menu items below    */ #header .linkList0 li.more .linkList01 li.more > ul.linkList001 {     margin: -1.7em 0 0 13.2em;    /*Important, must be careful, if tbe EM since gap increases too much bewteen nested lists the gap will make the nested-list collapse prematurely    */ } /*    Set right hand arrow for list items with sub-menus (class-more)    */ #header li.more {     background: Transparent url('../Content/Images/ArrowRight.gif') no-repeat right center;     padding-right: 48px; } /*    Menu:    Dynamic Behavior of menu items (hover, visted, etc)     -----------------------------------------------------------    */ #header .linkList0 li a:link, #header .linkList01 li a:link {     display: block; } #header .linkList0 li a:visited, #header .linkList01 li a:visited {     display: block; } #header .linkList0 > li:hover { } #header .linkList01 > li:hover a ,#header .linkList001 > li:hover a {     text-decoration: underline; } #header .linkList0 > li abbr:hover span.detailPopup {     display: block;     position: absolute;     top: 1em;     left: 17em;     border: double 1px #696969;     border-style: outset;     width: 120%;     height: auto;     padding: 5px;     font-weight: 100; } #header .linkList0 > li:hover ,#header .linkList0 .linkList01 > li:hover { } #header .linkList0 .linkList01 .linkList001 > li:hover { } #header .linkList0 .linkList01 .linkList001 .linkList0001 > li:hover { } /*    Display the hidden sub menu when hovering over the parent ul's li    */ #header .linkList0 li:hover > ul {     display: block; } /*    Display the hidden sub menu when hovering over the parent ul's li    */ #header .linkList0 .linkList01 li:hover > ul {     display: block;         background: -moz-linear-gradient(top, #1E83CC, #619FCD);     /* Chrome, Safari:*/     background: -webkit-gradient(linear,                 center top, center bottom, from(#1E83CC), to(#619FCD)); } /*    Display the hidden sub menu when hovering over the parent ul's li    */ #header .linkList0 .linkList01 .linkList001 li:hover > ul {     display: block; } /*    Set right hand arrow for list items with sub-menus (class-more) on hover    */ #header li.more:hover { } Also some CSS for global settings that will affect this menu, you of course will have some other styling, but included it here so you can see how/why some css properties were set here: /* Neutralize styling:    Elements we want to clean out entirely: */ html, body {     margin: 0;     padding: 0;     font: 62.5%/120% Verdana, Arial, Helvetica, sans-serif; } /* Neutralize styling:    Elements with a vertical margin: */ h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address {     margin: 0;    /*    most browsers set some default value that is not shared by all browsers    */     padding: 0;        /*    some borowsers default padding, set to 0 for all    */ } /* Apply left margin:    Only to the few elements that need it: */ li, dd, blockquote {     margin-left: 1em; }

    Read the article

  • Page displaying sections using opacity in CSS3 but without navigating or scrolling down [closed]

    - by Senthil Kumaran
    Here is my app - http://www.shalgreetings.com/ I am trying to override the scroll bar going down to a imagesection in CSS, so that whole app is visible with logo, header and other controls all the times when people navigate through different #sections. I am not sure where in the CSS, I am making the mistake as clicking on #sections traverses the page. Here is this app's original inspiration code, which has got this right. Anyone can point me where the problem seems to be in the above app?

    Read the article

  • Automated Website Testing/Sanity/Quality

    - by Jeff
    I am thinking about building a tool that starts from the root of a webpage and traverses the entire website gathering a list of resources such as CSS/HTML/Javascript files and then runs CSS/Javascript Lint + HTML Validator + Broken Link Finder. Before I start building something like this, I was wondering if this exists already? Thanks. I already searched Google quite a bit and couldn't find much.

    Read the article

  • Path for a beginning web developer

    - by Trickerie
    I'm an experienced iOS programmer and have recently began to dabble in web development to expand my horizons. I've found it quite interesting and was wondering what learning path I should take through all the numerous languages. Here's what I planned on doing: HTML+CSS- PHP/Jquery Does that sound reasonable? Currently I'm nearly confident with my html/css abilities, and am planning to move ahead. Any good suggestions you guys could throw my way?

    Read the article

  • Positioning of Submenu under Sprite

    - by user73897
    At http://www.shieldscompany.com, the main (blue) product menu uses a sprite and has sub-menus. Our programmer set it up so that the sub-menus are relative to the top of the browser, rather than under the sprite. On the site's sub-pages, the sub-menus appear correctly, but on the home page they appear behind a large rotating graphic. Can someone take a look at http://www.shieldscompany.com/css/nav.css and help me understand how to change this so it works properly?

    Read the article

  • HTML, JS, CSS Engines

    - by Pius
    I am just messing around, trying to figure out how stuff works and right now I have a couple questions about HTML, JS and CSS engines. I know there are two major JavaScript engines out there - V8 and JavaScriptCore (WebKit's JS engine as far as I know). Is that correct? And what are the main HTML + CSS renderers out there? Let's say I want to build a web browser using V8 (I saw it has some documentation and stuff + I like the way it works), what are the best options for me? Partially another question. Is there any bare browser that uses V8 and runs on Ubuntu at least? P.S. I am a Ubuntu user and prefer C++.

    Read the article

  • CSS not loading when site is viewed via Windows VPN

    - by Dreamling
    Internal site has recently been redesigned, but IE8 does not seem to be loading the new css rules only when viewed via VPN. I really have no clue what to look for. I can't reproduce the problem, but it's apparently affecting client for the last month. I've suggested: Reloading IE8 Checking Internet Permissions Flushing the cache I'm not really certain what direction to search for the answer. Is it likely to be a server permissions issue? a VPN connection issue? a rare ie8 CSS bug?

    Read the article

  • Free Windows 8 book on programming with html, css and javascript

    - by Dave Noderer
    Just a heads up from DevFish (http://devfish.net), a free book on writing applications for Windows 8using html, css and javascript by Kraig Brockschmidt . You can find the book here: http://blogs.msdn.com/b/microsoft_press/archive/2012/10/29/free-ebook-programming-windows-8-apps-with-html-css-and-javascript.aspx I have not finished reading this but so far it looks like it will be a great resource if you have any interest in trying the windows 8 javascript programming model. Besides all the aspects of controls, library support and animations the book also talks about how to make your own components in c#, vb or c++.

    Read the article

  • How to edit thousands of html pages at once? [on hold]

    - by Johnsy Omniscient
    I need to edit thousands of pages for a website with dynamic content added manually by the owner throughout 3 years, it has thousands of pages and I'm sure there is a better way to edit them without spending hours opening each one of them. I know it would be easy to just edit the styles.css but page dynamics like the positions of the google ad-boxes are individually edited inside the html of each page, so there is no way to solve this through css. Is there some sort of code, script and macro that can edit the pages at once?

    Read the article

  • CSS being Displayed by Google spiders

    - by vipul_vj
    I have written an article HTML Image Tag for the site and it has been indexed by Google. But when I search it, google displays HTML Image Tag - ProgrammingBulls http://programmingbulls.com/html-image-tag-1: content { font-family:verdana; font-size:14px; font-weight:normal } We often use images in a webpage. To insert images in our webpage < img tag is used in. Why is CSS displayed in the google search? I know that CSS and HTML is ignored by Google but due to some reason HTML is being displayed.

    Read the article

  • Alt text vs CSS sprites (SEO vs speed)

    - by leeoniya
    I'm reworking our site to reduce HTTP requests and blocking requests by concatenating JS, css, gzipping, loading all JS via LABjs and using CSS sprites for images that were loaded individually via <img> tags before. Progress has been great so far - 5x page load performance improvement. However, we're in the top 5 organic search ranking in google for many targeted keywords and phrases. I'm afraid eliminating so many img tags with alt attributes can hurt our SEO. Does anyone have any experience with alt tag manip/removal and effects on SEO positions? Is previous rank "sticky"?

    Read the article

  • How to fix a Sticky Footer that works, but after a browser window is resized, the footer overlaps.

    - by UXdesigner
    Good day, I've been trying to build a perfect footer who sticks at the bottom of the browser window after it's content. And I got help here @ Stack Overflow previously. But after a while, and doing a few tests, found out that after the browser window is resized, and then I scroll down , the footer overlaps...it is causing me a big headache right now and I'd like to fix this so I can move on. I'm going to post the display.css right here: @charset "utf-8"; body, html { margin: 0; padding: 0; text-align: center; position: relative; min-height:100%; /* needed for footer positioning*/ height:100%; /* needed for footer positioning*/ } .spacer { clear: both; height: 0; margin: 0; padding: 0; font-size: 0.1em; } .spacer_left { clear: left; margin: 0 0 10px 0; padding: 0; font-size: 0.1em; } hr { height: 1px; margin: 20px 0 20px 0; border: 0; color: #ccc; background: #ccc; } #container { position:relative; /* needed for footer positioning*/ min-height: 100%;/* needed for footer positioning*/ height: auto !important;/* needed for footer positioning*/ height: 100%;/* needed for footer positioning*/ margin: 0 auto -30px;/* needed for footer positioning*/ width: 1160px; padding: 0; border: 1px solid #333; text-align: left; } #header { margin: 0; padding: 5px; height:70px; } #login { font-family: Arial; font-size: 15px; color:#FFF; text-align: right; width: 440px; margin: 2px; } #login .theInput { font-family: Arial; font-size: 14px; width: 110px; margin-right: 5px; } #login .theSubmit { font-family: Arial; font-size: 10px; background-color: #333333; color: #FFFFFF; margin-right: 5px; } h1#lineainvisible { width:1160px; height:4px; position:relative; margin-top:4px; visibility: inherit; font-family:Arial, Helvetica, sans-serif; font-size:12px; } ul#nav { width:100%; height:36px; display:block; background-color:#000; background-repeat:repeat-x; } #wrapthatbanner { display:block; float:left; width:100%; height:524px; margin-bottom:20px; } #content { margin: 0px 20px 30px 20px; /* needed for footer positioning*/ } .panelsreadmore { margin-right: 10px; text-align:right; } div#content.columns { margin-left: 100px; } #content abbr, #content acronym { cursor: help; border-bottom: 1px dotted; } #content ul { list-style-type: square; margin-left: 75px; } #content ul li, #content ol li { margin: 0 0 0.4em 0; padding: 0; } #content blockquote { width: 75%; margin: 0 auto; padding: 20px; } #contentLeft { float: left; width:580px; } #contentRight { float: right; width:580px; } .sitenote { display:block; padding:6px; border:1px solid #bae2f0; background:#e3f4f9; line-height:130%; font-size:13px; margin-top: 0; margin-right: 0; margin-bottom: 0.5em; margin-left: 0; } #footer, .push /* needed for footer positioning*/ { padding: 5px; clear: both; position:absolute;/* needed for footer positioning*/ bottom:0;/* needed for footer positioning*/ height: -30px;/* needed for footer positioning*/ width:1150px; } And this is the HTML Template File. <!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> <!-- TemplateBeginEditable name="doctitle" --> <title>Title of Page</title> <!-- TemplateEndEditable --> <!-- TemplateParam name="categoria" type="text" value="home" --> <!-- Meta Tags --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- Meta Tags - Close --> <!-- CSS Loader - StartsS --> <link href="../css/main-client.css" rel="stylesheet" type="text/css" media="all" /> <!-- CSS Loader - Ends --> <!-- Drop Down Menu --> <link href="../css/dropdown.css" media="screen" rel="stylesheet" type="text/css" /> <link href="../css/default.advanced.css" media="screen" rel="stylesheet" type="text/css" /> <!-- Drop Down Menu - Ends --> <!-- Font Replacement Starts --> <script src="../cufon-yui.js" type="text/javascript"></script> <script src="../AFB_400.font.js" type="text/javascript"></script> <script type="text/javascript"> Cufon.replace('h2'); </script> <script type="text/javascript"> Cufon.replace('h3'); </script> <script type="text/javascript"> Cufon.replace('h4'); </script> <!-- Font Replacement = END --> <!-- Start VisualLightBox.com HEAD section --> <link rel="stylesheet" href="engine/css/vlightbox.css" type="text/css" /> <style type="text/css">#vlightbox a#vlb{display:none}</style> <link rel="stylesheet" href="engine/css/visuallightbox.css" type="text/css" media="screen" /> <script src="engine/js/jquery.min.js" type="text/javascript"></script> <!-- End VisualLightBox.com HEAD section --> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> </head> <body id="@@(categoria)@@"> <div id="container"> <div id="header"> <table width="100%" border="0"> <tr> <td width="67%" height="77px;"><a href="index.html"><img src="../images/Titulos/5.png" alt="" width="257" hspace="10" vspace="10" border="0" id="screen_logo" title=""/></a></td> <td width="33%" valign="top"><form id="login">Log in: <input type="text" class="theInput" name="user" /> <input type="submit" name="Submit" value="Submit" /> </form> </td> </tr> </table> </div> <!-- Aqui es donde empieza fisicamente el menu drop down --> <ul id="nav" class="dropdown dropdown-horizontal"> <li><a href="../index.html">Home</a></li> <li><a href="#" class="dir">Service 1</a></li> <li><a href="#" class="dir">Service 2</a></li> <li><a href="#" class="dir">Service 3</a></li> <li><a href="#" class="dir">Service 4</a></li> <li><a href="#" class="dir">Service 5</a></li> <li><a href="#" class="dir">Service 6</a></li> </ul> <!-- Aqui termina el menu CSS--> <!-- Reset --> <div id="wmfg"> </div> <!-- Reset --> <!-- TemplateBeginEditable name="banner-grande" --> <!-- TemplateEndEditable --> <div id="content"><!-- TemplateBeginEditable name="content" --> <p>&nbsp;</p> <!-- TemplateEndEditable --></div> <div id="footer"><a href="../terms.html">Terms and Conditions</a> |<a href="privacy.html"> Privacy Policy</a><br/> Copyright 2010. .</div> </div> </div> </body> </html> Can somebody take a look at this, and tell me what am I doing wrong ? Thanks in advance.

    Read the article

  • opacity and zIndex not getting set when hovered

    - by Catfish
    I'm messing around with a jquery carousel script and i'm trying to get it so when you hover over an image, the size will be doubled(which i have working) and the opacity will be 100. The script is here http://steph.net23.net/ImageCarousel/ This is the part i've added to double the width and height but the opacity is not taking effect. The original script came from here http://www.devirtuoso.com/2009/08/how-to-create-a-3d-tag-cloud-in-jquery/ $('#list a img').hover( function() { clearInterval(go); $(this).css('height', '200px'); $(this).css('width', '400px'); $(this).css('margin-left', '-100px'); $(this).css('opacity', '100'); var opac = $(this).css('opacity'); $(this).css('zIndex', '0'); var z = $(this).css('zIndex'); console.log("opacity = "+opac); console.log("zindex = "+z); }, function() { go = setInterval(render, 20); $(this).css('height', '100px'); $(this).css('width', '200px'); $(this).css('margin-left', '0'); });

    Read the article

  • To synchronise css styles in a browser and on a server.

    - by kalininew
    Prompt, please: whether it is possible in general from a browser (for example using firebug in firefox) to edit css a file on a server? I heard that there is an addition to firefox for connection on FTP (FireFTP). It is possible to change styles on page in firebug. Whether it is impossible to "combine" them - you change css styles in firebug, and they varies on a server? Who can heard about such miracle (not necessarily for firefox, suddenly for chrome there is such piece).

    Read the article

  • How can I use CSS pseudo-classes with GWT's UiBinder?

    - by David
    I've been using the in-line styles approach as recommended by GWT's UiBinder documentation. I'm puzzled, though, about how to use CSS pseudo-classes with UiBinder; for example, suppose I would otherwise (without UiBinder) have this CSS rule: #myLink:hover { background:blue } Can I implement that rule in UiBinder?

    Read the article

  • How do you apply CSS to the editor iframe in jwysiwyg (jQuery wysiwyg)?

    - by Walker
    Hello, I'm using a slightly customized version of jwysiwyg for a website. I'm trying to change CSS values inside the textarea replacement (the iFrame where the text gets written) - but I just can't seem to figure out how. Do I have to create a new style sheet to apply to the iFrame? Specifically, I want to change the iframe's :active and font: css settings. Thanks, Walker

    Read the article

facebook twitter digg google delicious technorati stumbleupon myspace wordpress linkedin gmail igoogle windows live tumblr viadeo yahoo buzz yahoo mail yahoo bookmarks favorites email print

< Previous Page | 81 82 83 84 85 86 87 88 89 90 91 92  | Next Page >