Safari & CSS rollover behavior problem

Hello

I have a navigation bar with working capital and active CSS (CSS3 including easing) settings that are not appear in Safari.  I suspect it has to do with the id selectors, but havn't been able to determine who is at the origin of the problem.  It works great in IE9 and FF4 and degrades well in IE8.  But for a reason, even the simple color attribute does not have the button in Safari.

Here is a link to see what I mean: http://www.juliepoguebarnes.com/bsr

Please help a confused Designer.  Any help is appreciated

-Julie

@julie

I was litle time looking at your page and by a part of the documentation of the iOS.  There, I found the answer.

First, let's look at this piece of CSS:

ul.topnav li a:hover {
     display: block;
     color: #000;
     width: 100%;
     visibility: visible;
     text-decoration: none;
     height: 49px;
     -webkit-transition: background 500ms ease;
     -moz-transition: background 500ms ease;
     -o-transition: background 500ms ease;
     transition: background 500ms ease;
     -webkit-box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 15, .2);
     -moz-box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 15, .2);
     box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 15, .2);
     background-color: #C7BBAD;

}

The first problem is that the transition is set when the transition occurs.  For all the webkit examples I could find, you must set the transition before the action.  So we will reduce these lines.  I also deleted some lines because they were identical to what has been defined in the normal state and they were so duplicate.

What I ended up with was:

ul.topnav li a:hover {
     color: #000;
     background-color: #C7BBAD;
     -webkit-box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 15, .2);
     -moz-box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 15, .2);
     box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 15, .2);
}

Then we place the cut lines in the original statement of the link:

ul.topnav li a{
     line-height: 3.5em;
     display:block;
     -webkit-transition: background 500ms ease;
     -moz-transition: background 500ms ease;
     -o-transition: background 500ms ease;
     transition: background 500ms ease;
}

And there you have it.  He now works in Chrome, Safari, and Firefox to my tests (on a Mac, so I don't mean to Windows/IE).

@jpiracci

The link you posted did not have a mention of the CSS3 transition.  Can you please send your affected link?

Tags: Dreamweaver

Similar Questions

  • Color of text in Safari CSS problems

    I don't understand, but for some reason my views of white red in safari css text. Looks fine in firefox. Any suggestions?

    sethry published in macromedia.dreamweaver:

    > I do not understand, but for some reason my white css text appears as
    > red in safari. Looks fine in firefox. Any suggestions?

    > Here is the link: http://www.vcharvesters.org/index3.php

    I don't know if this is the cause, but because you have a bad link to a css
    file, Server error page is load instead of the css. That
    error page affect red links.

    In fact, now that I look further, you link this file twice - once properly
    and once incorrectly. See if deleting this line helps:

    (I also get 404 on header_background_01.jpg)

    --
    Boyd brand "404".
    Keep-on-Learnine :)

  • I get this notice when I try to send an e-mail: Windows Live Hotmail was not able to complete this application. Microsoft may contact you regarding any issue you are reporting. When I use Safari, I have no problem. in English

    I get this notice when I try to send an e-mail: Windows Live Hotmail was not able to complete this application. Microsoft may contact you regarding any issue you are reporting. When I use Safari, I have no problem.

    Clear the cache and cookies from sites that cause problems.

    "Clear the Cache":

    • Firefox > Preferences > advanced > network > storage (Cache) offline: 'clear now '.

    'Delete Cookies' sites causing problems:

    • Firefox > Preferences > privacy > Cookies: "show the Cookies".

    Start Firefox in Firefox to solve the issues in Safe Mode to check if one of the extensions of the origin of the problem (switch to the DEFAULT theme: Firefox (Tools) > Add-ons > appearance/themes).

  • Problem with hotspot rollover behaviors & centering page

    Hello

    I have looked at many forums and tutorials in search of an answer to my problems but have failed to resolve.

    I hope that the experts in this forum can help.

    Here are my problems:

    • Can't seem to do ALL the behaviors of my hot spots.  I would like to have the hotspots highlighted or fade in/out on mouseover.  When I try to apply, nothing happens.
    • I would like to have the page centered at any time with a black background around it.  Can't seem to get this either.
    • I don't have any code in place for one of these because they would not work.  So I thought I would start here.

    Here is the link to my project, please let me know if you need something more so that I can help you to help me.

    Thank you in advance.

    http://www.saintleo.edu/uploads/VirtualTour_test-copy.html

    You are missing a link to the jQuery core library of the EUR.  Plugin scripts will not work without it.

    Lines 4 and 5 of your code, replace this:

    With this:

    Nancy O.

  • Rendering in Safari and Firefox OSX problem

    Hi all

    http://QA.Ocean-Florida.co.UK/villas/BlankVillaPageNew.htmScreen shot 2011-10-10 at 17.28.15.png

    I have a little problem with this page renders do not correctly in Safari and Firefox on my Mac.

    The image at the top right of the Group of four is missing and I can not quite understand why.

    Tips/advice gratefully received.

    Thank you!

    Damien

    Get rid of the redundant support directly in front of the css selector and see what happens:

    }

    {#main_topright}

  • Open window behavior problem

    Hello

    Can you guys please visit this page and click on the "media" footer link?

    http://www.Ekongo.org/spectacles/spectacles.html

    I thought I fixed that, but strange behavior came when I saw with IE 6.0 (the small window opens (expected behavior), followed by the same thing but in bigger window (odd behavior)).

    Even some things when tested with the most recent (as of today ' hui): google chrome, firefox, and safari.

    I can't explain it. Really! Can you help me?

    Of course, we can help.  It is a very common problem.

    Here's your code to anchor:

    Multimedia

    Note that you set the href = swf file value (correctly).  And you have added the behavior of DW open browser to ALSO open the swf file in a NEW window.  AND don't miss a thing, you have also added target = "_blank", which ALSO tells the browser to open a new window with the swf file that is listed in the href attribute.  SO, two things happen when the user clicks on the link - a NEW window opens.

    You must do TWO things to solve this problem:

    (1) REMOVE the target attribute by clicking on this link in design and the removal of this value in the target in the property inspector

    (2) ADD; return false; at the end of the event onclick, like this:

    Multimedia

    Now, when the user clicks on the link, JUST the new window will open to display the swf file.

    For some of you who may be reading this, I suggest a free utility that will add; return false; in the onclick event, as explained above AND copy the link located in the behavior of the open windows of the browser in the href attribute if you use # or javascript:; for its value.    This helps in search engine optimization.  If you have more than one or two of them to fix, this will take care of any number of them in just a moment to save a lot of time and effort yo.

    This free Extension for DW is at http://divahtml.com/products/divaFreeTools/free_dreamweaver_tools.php

    Hope that helps.

    --

    E. Michael Brandt
    
    www.divahtml.comwww.divahtml.com/products/scripts_dreamweaver_extensions.phpStandards-compliant scripts and Dreamweaver Extensions
    
    www.valleywebdesigns.com/vwd_Vdw.aspJustSo PictureWindowJustSo PhotoAlbum, et alia
    
    --
    
  • Safari CSS Background Help

    Hello

    I'm having a problem with my pages not displaying only not in safari background images. Pages have been implemented in models and background changes to each page. I have a background image defined in a container div, so I can apply a background color the remaining space. This background image is displayed in Safari on a Mac.

    http://www.pelinteriors.co.UK/new/

    Any help would be most appreciated.

    Me_PLC wrote:
    > Thanks for the reply. Newsgroup user if I insert the break of compensation where you have suggested it mess up the

    formatting of the page. Any suggestions?

    It is not possible for her to mess up the format. It's just a clearing
    break, which is necessary to 'clear' the floating who are in the
    container. This will allow the background image of cloud appears.

    In other words, you can "erase" the floats without inserting characters
    code in the page itself is to add overflow: hidden; to the container

    CSS

    This however will not display the background image visually in Dreamweaver
    Design view but will be in the browser.

    Either way, I tried
    in both Safari and
    Firefox and it works like a dream, then you must put the
    incorrect place.

  • Safari Web site loading problems

    HI - 3 days ago my safari app started developing error messages.

    When I open it and click on a website to load, it just says "there was a problem with the Web page so it has been reloaded. This message flashes for about 30 seconds and then he said finally: unable to load the Web page, or block safari.

    I tried... deleted obviously history, off the extensions... even turned control of virus / firewall to see if these parameters have an impact but nothing.

    In addition, does not load my Mac App Store. App opens but it says I can't connect to the store. Connectivity Internet is fine.

    Any ideas?

    Thank you

    Anthony

    Please download and install EtreCheck from http://etrecheck.com/

    Run it and post the report here.

  • 9.3 IOS with Safari on iPad Mini4 problems

    What is the freezing will deploy a 9.3 update to resolve the problem with the connection of the links hyperlink and Safari Apple? Also send hyperlinks don't link and freeze by email.

    9.3.1 just came out today and solves the problems of Safari and Mail.

  • Safari/SSL with SiteGround problem

    I'll have a bit of a TIFF with SiteGround technical support.  In my view, there is a problem with their server configuration, and they believe that it is a problem with Safari.  (I think it's a little of both.)  Since they cannot reproduce the problem, I'm having a time difficult to convince to take measures (they sent me here).

    If you could take a few minutes to perform a test and enter your results, I'd be very happy.

    1. Using Safari, go to https://goatdata.com/timeouttest.php
    2. Wait about 2 minutes and click on "CLICK HERE" which reloads the page.
    3. On the problem machines, Safari will wait indefinitely to load the page, click on the 2nd.  Never, it throws an error or expires - it's right there loading forever.  If this happens to you, you many need to stop loading until you enter your results.
    4. Enter your results.

    So far, I have found this problem with Safari on El Capitan, but I only have a limited number of Mac allotted to me for the test.  When Safari crashes, the server does not record demand, so it seems to be a problem of communication on a lower layer (SSL?).  It is also a function of time as if it were the TTL (Time To Live) associated with the startup problem in about 90 seconds of inactivity.

    If someone has experienced something similar, I would love to hear from you.  And if anyone knows a solution, it would be even better.

    Try another browser as a test.

    Firefox

  • CSS and TaskFlow problem

    Hello

    I have problem with styling my application files using custom css and taskflow, I find these two could not work together.

    Take a look at my file feature.xml - MAF:

    MAF.jpg

    As you see it is a unique feature that is named "test" with two pages of amx, called "untitled1.amx" id "lymphocytotoxicite.1" and "untitled2.amx" with the id "test.2", each of them includes css file in resources/css/and there are named taskflow "ViewController-task - flow.xml ' with the id"test.3"they (amx and taskflow files) located in the feature file, as you can see on the tab Applications in JDeveloper.

    So lets talk about my problem, there are two situations buggy:

    1. When the workflow is listed first in the list of the contents of the feature. Navigation between the pages of result: working, but there is no style of css files.
    2. When the workflow is listed in any other place than the first. Result: style of css files is present, but the navigation doesn't work.

    I found workaround using Word to Word and insert the style custom, but it is slow and not acceptable.

    I have also deployed on several other machines:

    • Dell Precision T1700, Windows 7
    • Dell Precision T1700, Ubuntu 14.04 (mine)
    • MacBook Pro, Mac OS x 10.11

    And the result is the same.

    I also uploaded my project on gdrive.

    Thanks in advance.

    Greetings,

    Boris

    Hello

    looked at the sample and indeed the problem comes from your configuration. You have defined 3 content for a unique feature of MAF. A function can only show unique content at a time. To determine the content to show you want to use constraints for the defined for content. A usecase for this is where you want to optimize the user interface, for example when rendering on a smartphone differently than when it is rendered on a tablet. The content that is on top is content that is displayed if there is no defined constraints which would decide on the others. So if you have a task flow on top then the other views are not visible. And for the workflow you do not set the CSS to use (which explains why the page doesn't display colored). When a page is displayed at the top, then navigation is controlled by the adfc-mobile - config.xml, which, in your test case is empty so that no navigation can occur.

    Frank

  • CSS rollover button does not

    I am trying to implement a method of changing the position of a background image. A Lite version works very well here:

    http://www.aptcoweb.com/dev/aptcoFluid/SimpleTest2.htm

    But it does not work when I plug here:

    http://www.aptcoweb.com/dev/aptcoFluid/Testindex4-14.htm

    I only tried to apply to the first question, but plan to use it for all buttons. All will have the same dimensions, so what is the most rational way to use the class and id for reducing duplication?

    You will need a separate for each button category, since you are using a different background image and positioning for each.

    Giving them that a better name would help, instead of .rollover, .rollover2, etc., I'd use .on. Home, .contact and so on.

    You could simplify your css by placing all the repetitive css on a large group selector...

    .contact, .in. Home, etc. {}

    height: xxx;

    Width: xxx;

    other repeatitive css attributes

    }

    Then your real reversal record would not be background information...

    .about {top center of background: url (youraboutpic.jpg);

    .about:hover {background: URL (youraboutpic.jpg) low center;

    .contact {top center of background: url (yourcontactpic.jpg);

    .contact:hover {background: URL (yourcontactpic.jpg) low center;

  • The stylesheet/CSS with display problem avisports collection site

    Hi guys,.

    I (finally) managed to get a version of the management assessment and systems of working capital and also managed to publish the site "avisports" sample that comes with the Download Sites WebCenter.

    Only one problem: while the content of the site and pictures to the loading section, there is no CSS style applied to anything.

    Something to note:

    (1) I tried to repost. That didn't seem to do anything.

    (2) two CSS files are referenced in the avisports - 'all.css' and «form.css» homepage When I try to access these files directly, I get a 404 (file not found) error.


    Any ideas on what could be the cause?

    Much appreciated!

    -DeAngelo Lampkin

    Looks like the avisports sampling site expects to find these CSS in the form of static files under the Web application, they are not managed as assets within Sites and therefore are not publishable. In an installation of tomcat for example they are found under

    webapps/CS/avisports/CSS/LT7. CSS
    webapps/CS/avisports/CSS/Form.CSS
    webapps/CS/avisports/CSS/All.CSS

    There are 72 files under webapps/cs/avisports, for most of the images, css and javascript. If you copy this avisports file to an equivalent location within the webapp deployed on the instance of delivery, but then the avisports site should find them.

    Phil

  • insert record behavior problem

    Although it might be a problem with mysql, I'm not sure. I use the built-in behavior insert record into DMWCS4 to download data from an online form directly to a MySWQL db table that I put in place via phpMyAdmin on the server. The SQL code of the db table is below:

    CREATE TABLE "tablename")

    "compid' int (11) NOT NULL AUTO_INCREMENT,

    'Title' varchar (55) NOT NULL DEFAULT,

    Varchar (55) "First name" DEFAULT NULL,

    Varchar (55) "First name" DEFAULT NULL,

    Varchar (55) 'Company' DEFAULT NULL,

    Varchar (55) 'Add1' DEFAULT NULL,

    Varchar (55) 'Add2' DEFAULT NULL,

    Varchar (55) 'City' NOT NULL,

    'The city' varchar (55) DEFAULT NULL,

    Varchar (55) 'Postal Code' DEFAULT NULL,

    DEFAULT NULL, 'County' varchar (55)

    Varchar (55) 'Phone' DEFAULT NULL,

    Varchar (55) 'Fax' DEFAULT NULL,

    'Email' varchar (55) DEFAULT NULL,

    'Do not contact the marker' enum('y','n') NOT NULL DEFAULT 'n',.

    PRIMARY KEY ('compid")

    ) ENGINE = InnoDB DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1;

    the problem I have is that when the form is submitted, the Firstname column in the db, regardless of what is written on the form. I tried to change this line:

    Varchar (55) "First name" DEFAULT NULL,

    TO

    Varchar (55) 'Name' NOT NULL,

    but when I test the form using MAMP I get the message error '' Firstname' column cannot be null.

    I have no idea why this is happening - if I leave the column Firstname as DEFAULT NULL I get no names in the db table, but it won't let me change - any ideas on what is happening here would be greatly appreciated. Thanks in advance.

    Just noticed a typo in:

    $insertSQL = sprintf ("INSERT INTO panda (title, first name, name, company, Add1, Add2, city, city, zip code, County, phone, Fax, Email, 'Do not contact the marker') VALUES (%s %s %s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s)',

    GetSQLValueString ($_POST ['title'], "text").

    GetSQLValueString ($_POST [' name'], "text").

    There is a space between the first and last name in the second case. This could well be the cause of the problem.

  • Positioning CSS or DW problem?

    I have problems with CSS positioning after spending several hours of reading and trial and error.  I'm starting to think that Dreamweaver is broken, and thoughts of reloading cross my mind.

    My desire is to have a background image "beneath" my page wrap div, essentially as a border surrounding it.  I posted this image of 'background' as relative position and therefore my wrap div page as absolute positioning.  The wrap of the page was given a background color and a line of text to allow me to 'see' where I am to get the correct positioning. I think that the background color of the page div wrap "show" but it is not. (?)

    I placed my palette, as we'll call it, with margins, while he was trying to put my envelope of page using the top, right, bottom and left through the CSS dialog box.  What are the values used, the div is in the lower left corner of the browser window and refuses to move.

    #palette {}
    background: url(images/pallete.png) no-repeat;
    Width: 1200px;
    height: 1400px.
    margin: 100px auto;
    position: relative;
    }

    #page wrap {}
    position: absolute;
    background: #C06;
    height: 1100px;
    Width: 960px;
    top: 100px;
    right:-120px;
    }

    It got so that the changes I've made to the CSS at this stage will not trigger even a refresh of the Panel styles CSS?  What gives?

    Thank you.

    I've never used "Live Code" before and could set more #page for my taste, but it's an approximate position, so to speak, I can only approximate its center within #palette.  I started thinking that I have the success, until I go to the browser view, where the #page position seems to pass.

    You try to use HTML as a word processor, and it's the absolute wrong approach (no pun intended)!

    Location of the item an absolute positioning is calculated based on the location of its nearest positioned ANCESTOR.  An "ancestor" is a container element, not an adjacent element (which would be a 'brother').  So, if you want to than your element to absolute positioning out of the location of a relatively positioned element, it must be a child (or descendant) of this relatively positioned element.  In other words, to make #page work against #palette, he must be inside #palette.

    If there are alternatives to ensure the positioning other than my current method, I would be interested to learn about it.  I'm not aware of the disadvantages mentioned with using this type of positioning, could you give some details please?

    There is an excellent alternative without using the positioning at all - it is called "best practices".   The disadvantages of using absolute positioning for all are:

    1. because the absolute position elements are removed from the flow of code on the page, they are immune to travel in other parts of page not positioned due to changes in browser window size or screen text size changes.

    2. because #1 is the case, and given that display text size changes can cause the container to change height, if this container is positioned absolutely, its text content may overlap other content to the screen.  More positioned in absolute terms of containers of text the worse this effect becomes quickly, producing a unusable, overlapping mess.

    3 in absolute position items on the screen regardless of where the items appear in the code, and as a result, it is entirely possible to have two parts of the text which are meaningful semantic when taken as a unit separated by a bit of code, or other pieces of text.  Thus, pages built with absolute positioning text containers are usually not semantically sensitive, which means that they would not succeed well when it is run by a system of assistance of the screen.

    4. in view of all these things, the pages that contain elements of balance and frequently positioned elements go wandering as width of the viewport is changed.

    As a result, the method most likely to be chosen by an inexperienced user due to its apparent simplicity is also the absolute worst possible approach to the construction of the page.

    Oh, by the way, the values of positioning below were obtained through 'slide' div = page in position.  I wouldn't rather Code Live, but taken into concrete values in the future.

    The approach of processing in action!  The only way to make the connection of concrete values is to have a provision already laid down on paper before you start.

    Tell more about how you want your page to look at (I don't know what you mean exactly on centering #page #palette 'up', but if you mean "before" then consider this -

    This is my page

    (Note that I deleted all the positioning, as well as all heights - of Villa is a bad idea to declare explicit heights on elements that contain text, once again because of possible overflow issues)

Maybe you are looking for

  • Cannot release all online content after upgrade to ios 9.2

    I have an iPhone 16 GB 5, which I recently upgraded to ios 9.2. Since the update, I can't release all content online (titles of Soundcloud, 8tracks playlists, Instagram, or youtube videos). I tried to remove or update the relevant applications and de

  • Software for the Fn keys

    I reinstalled Windows on my W530, but I can't find the software that displays notifications when I use the Fn key combination, nobody knows what software should I have to solve this problem? Thank you very much.

  • Real-time, semaphores and Subvi

    Hello We use a handful of semaphores in our application of Realtime (2015) on a cRIO.  For cleanliness, I wanted to encapsulate each semaphore in their own VI.  When I did the semaphores didn't work properly.  I feel like it is fundamentals of labvie

  • trial version of overlay did not

    After having created a collage on why 2008 the superposition of the Evaluation Version of words appear at the bottom of the collage, how can I get rid of this overlay?

  • 2-channel continuous data acquisition

    Hello I wonder how I could acquire signals of 2 channels at all times. I tried to find an example of vi but could not find one. In the vi below, I copied the same functions that work for a single channel, but it does not work. Best regards Ninjatovit