Problem of browser compatibility with CSS in DW opacity

Hello... I am very new to Dreamweaver, (fresh outta several years of photoshop) try to learn it and have very little experience with HTML/CSS coding. I'm doing a translucent black rectangle (drawn using CSS instead of using an image of a black rectangle) which is over a plaid background (background image of the tag body with background repeat.)

In order to get this black box as transparent semi, I searched the web and found that I needed to use the Opacity property in the CSS (makes sense to me). So I hand coded because Dreamweaver didn't "opacity" as one options in the small drop down menu deal. After I did it, Dreamweaver has me in the "Browser compatibility" Panel that the 'Opacity' property was incompatible with virtually all browsers, including Firefox, Safari and Opera (mac guy). Not only that, but my black box was not translucent in the 'Design' of the preview window thing.

Just for fun, I decided to open the page in Firefox - AND IT WORKED. He showed my black rectangle like I wanted, stretched and the ADJUSTMENT of the opacity that I wanted. I opened it in Opera and Safari, which also displays my page as I wanted.

My questions are the following:

1 - Why is Dreamweaver saying this opacity setting will not work with these browsers when it actually does?

2-Why don't show up in the 'Design' preview opacity setting window but don't place in real browsers?

3 - Why is opacity not one of the features that descends when coding (like width, height, margin etc..)

In any way, please don't hate not me I'm so freakin new and I tried to search this forum and on the internet for the answer to my question and found nothing. My code is below:

The HTML code:

< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > ""
" < html xmlns =" http://www.w3.org/1999/xhtml ">
< head >
< meta http-equiv = "Content-Type" content = text/html"; Charset = UTF-8 "/ >"
< title > Tim Moen | < /Title > Designer
< link href = "styles/tim_moen_designer.css" rel = "stylesheet" type = "text/css" / > "
< / head >

< body >
< div id = "black" > < / div >
< / body >

< / html >

THE CSS:

@charset "UTF-8";
/ * CSS document * /.

{body
background-image: url (.. / images/burberry_dark_pattern.gif);
background-repeat: repeat;
background-color: #000;
margin: 0 auto;


}

{#black}
top of the margin: 20%;
background-color: #000;
height: 400px;
opacity:. 8;

}

There are dozens of CSS attributes that can (and should) be handwritten. Problem with them is that, as shadows of text, they do not appear in all browsers. I have 9 different browsers installed and test pages in EACH of them before I "Finish" site or a page of a model construction.

I try to compile for Firefox, personal preference, but I do things that work with IE because he still holds the market share (46% to 42% FF IE), and I'll only with designs that work in IE, FF, NS, Opera, Safari and Chrome.

As for your questions.

1. the verification of compatibility is probably common at the time of construction. I do not know if this item updates such as browsers, but I tend to think that it isn't. I use CS4 and there have not been updated for it in almost a year. Firefox has released 4.0, published 11 Opera and Safari 5 has released since then. The update would have found and downloaded something if it were available.

2. I could only guess. Text shadows do not appear in Design view (or IE) but they do in the browser preview. It's just a quirk of the user interface, which means 'trial and error' is the only way to get what you want.

3. Quick Access - selects which are located in the drop-down menus DW or popouts is the most common CSS designs and have been proven to work with all browsers at the time of your particular of DW build.

Hope that helps...

Tags: Dreamweaver

Similar Questions

  • Problem set webapp layout with css

    Hi all (Hey Liam!)

    I can't comb a webapp page layout using CSS. Usually I use tables, but I want to get a webapp layout in collaboration with CSS for this customer and I hit a roadblock.

    Here is the article by webapp on one page http://Balivillas.BusinessCatalyst.com/our-villas

    I want the short description text to sit to the right of the picture of the villa. No matter what I do with css, I can't do this simple thing.

    I have a style sheet css that govern the whole design.

    The css code in there to the point of webapp and alternative structure is in the style sheet:

    {.webappWrapper}

    float: left;

    Width: 600px;

    min-height: 260px;

    }

    {.webappSmlPic}

    float: left;

    Width: 310px;

    min-height: 260px;

    }

    {.webappSmlDesc}

    float: left;

    Width: 250px;

    min-height: 260px;

    }

    This is the code in the element and other layouts for the Web application

    < div class = "webappWrapper" >

    < div class = "webappSmlPic" >

    < h2 > {tag_name} < / h2 >

    {tag_small pic} < / div >

    < div class = "webappSmlDesc" > {tag_short("burntime") description} < / div >

    < / div >

    If I download the layout of the alternate list webapp in DW6 and put the code just above, it will not style.

    If I add this line from available to the global site style sheet the webapp style in DW:

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

    However when I put this code in the webapp patterns in the backend of British Colombia, the layout is not style. The text lies in stubbornly under photography and is not sitting to the right of it.

    I tried to do the css first as an id, then it changed to a class. It made no difference.

    I tried to insert the line referring to the style sheet in the patterns of webapp. It made no difference.

    I tried to change the reference in the default template for... / before the style sheet. It made no difference. (the Web application uses the default style sheet)

    OK so what I am doing wrong here? You can surely webapp page layouts using css style? It of the idea of layouts in a flexible way, isn't it?

    I know it will be something simple, but I can't get out.

    Thanks for all your help.

    OK, so I solved the problem on my own. (Yay for me!) ....

    Must be the style CSS code in the webapp layout as there doesn't seem to be able to reference an external style sheet.

    It seems a primitive way to do it, but what to do...

    So this is the code that I put in the webapp list and other layouts to get their style correctly:

    {tag_name}

    {tag_small pic}

    {tag_short("health") description}

  • CSS, style sheet link error, affects the browser compatibility...

    Comfort and GoLive tables, left to the CS5 Suite - Dreamweaver. Basic CSS skills, so do not have the intuitive ability to phrase the question well.

    About this particular page, I have everything just built, then copied the page index.html on a test site to:

    http://www.screamingeagles.com/client_view/ScreamingEagles_v2/index.html

    and stripped the sidebars and menu bar and began construction of a form in the "main content" box

    URL of the page in question:

    http://www.screamingeagles.com/client_view/ScreamingEagles_v2/contact/contact.html

    Noticed that a 'green line' in then verified code compatible browsers as follows:

    -Browser compatibility-

    Found 2 errors in twoColFixLtHdr.css

    Affects: Firefox 1.5; Internet Explorer 6.0, 7.0; Internet Explorer for Macintosh 5.2; Netscape 8.0. Opera 8.0, 9.0; Safari 2.0

    -Found error (bordered green in the code) as follows-

    "Line 6: < link href ="... / css/twoColFixLtHdr.css "rel ="stylesheet"type =" text/css"/ >

    Validation don't give me anything to go. Should given my modest coding skills, I just build a new page of models like a better

    alternative to worrying about the participants in the forum?

    Thanks in advance,
    J. Satterwhite
    SatGraphics.com
    Mac Pro
    Adobe Creative Suite Design

    Thanks for your help.

    I'll try to understand why the selection 'validate the current document' is grayed out, with only "setting" available. Worked for me, but will figure it out.

    Enjoy your time.

    J. Satterwhite

    SatGraphics.com

    ScreamingEagles.com

  • Fields on several Internet sites have been changed in another language. The browser is set to English, and this problem does not occur with Chrome.

    Fields on several Internet sites have been changed in another language. The browser is set to English, and this problem does not occur with Chrome. Specifically, a large part of Tumblr and Facebook menu has been changed in another language (Russian, I think). I tried reinstall Firefox, clear the cache and reset firefox to its default state. None of them helped. Any suggestions on how to fix this?

    Hey again,

    Sometimes a problem with Firefox can be a result of malware installed on your computer, you may not be aware of.

    You can try these free programs to search for malicious software that work with your existing anti-virus software:

    Microsoft Security Essentials is a good permanent antivirus for Windows 7/Vista/XP, if you do not already have one.

    More information can be found in the article troubleshooting Firefox problems caused by malware .

    I hope this helps!

    Curtis

  • My new copy of Quickbooks Pro 2012 seems to have a problem of compatibility with Explorer 9

    My new copy of Quickbooks Pro 2012 seems to have a problem of compatibility with Explorer 9.  If anyone has experienced this problem and do you know a solution?

    Hello
     
    What is the full error message?
    The average while you can also contact QuickBooks for additional help.
  • My photoshop is flashing, there are problems of compatibility with the graphics card. Help?

    My photoshop is flashing, there are problems of compatibility with the graphics card. I tried to turn off the graphics card option in photoshop, uninstalled and installed several times, but still. Please, what should I do?

    I have an Intel (R) Graphics 5500 HD and Nvidia GeForce 820 M.

    I disabled the Nvidia because it seems to me that Photoshop is not supported.

    Hey Mohit and other colleagues!

    See how I solved this problem (temporarily): workaround Photoshop for screen flashing - YouTube

    I hope that helps for a while this problem.

    Best regards.

  • Maximize compatibility with browsers in Dreamweaver CM³

    I am new to Dreamweaver CC and wonder if there is a way to maximize compatibility with browsers I design. The site seems perfect on my browser because I have the latest version of Safari and Mac OS, but other people with older browsers have reported see very different things.  I explained that different browsers display websites differently and has no way for me to control that once the site is online. However, maybe there is something I can do to minimize the on the front-end server?

    Use the best practices of the modern web and HTML code and CSS valid.  Errors are the leading cause of browser rendering problems.

    CSS - http://jigsaw.w3.org/css-validator/

    HTML - http://validator.w3.org/

    Either way, you should test your projects in more than one browser.   I have FF, Chrome, Safari and IE installed on my workbox.

    If your users have older browsers, there are a few tricks of the trade like IE conditional comments that can alleviate some problems, but without seeing a URL, it is impossible to make recommendations.

    Nancy O.

  • Please help beginner with CSS positioning fix

    Am can't get the items of paragraph to behave the way I want to that they in the header section of the page on the link below. I paragraph address remaining in the position. Paragraph h, however, does not seem to be contained by the header div. He moves to the left as the browser window is resized to be larger. I tried to add a right margin of the paragraph address but paragraph hours does not seem to recognize that. I know I'm doing something wrong, but I can't seem to find out what. The little weather widget has a similar, but not quite the same problem. He moves to the right.

    http://www.openrangeimaging.com/test/gravity-test/index-Test01.html

    I hope someone knowing good css can help me to get this set up correctly.

    Thanks in advance for any help.

    Please forgive my newbieness. I have read and studied the html/css a bit, but this is my first attempt at real world if... I am determined to produce a website standards efficiently coded.

    We all started exactly where you are right now.  Learn how to work with the code is an excellent first step. Learn how to effectively use code is part skill and part art.  More you do, the easier it gets.

    When you have time, look at this article.

    How to develop with CSS?
    http://phrogz.NET/CSS/HowToDevelopWithCSS.html

    I had heard that the styles in the HTML are to be avoided. I guess it's a guideline that can be sometimes broken?

    True enough. Do not overdo with inline styles. But to change an element on a page, it won't hurt.

    Last question, is there a site you can recommend that I could keep posting my progress to for criticism on how I'm coding? It is appropriate to use this forum for this?

    You can ask your comments here.  There are many knowledgeable DW users here to help you.

    Good luck with your project,

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

  • Refining of shape and style with CSS

    Hello
    I am new to forms of style with CSS. Have just completed my first http://www.jaydaniells.com/Client/charter/cp-corpsite/feedback.html here... .wish to refine the style so.

    Would red * (marking required fields) next to my physically larger labels (for example 15px or 140%). My stylesheet is here http://www.jaydaniells.com/Client/charter/cp-corpsite/cmscss/feedbackform.css - haven't tried to solve myself, but for some unknown reason to me (maybe that's a problem cascading) I am currently prevented resize the *'s (which are anchored with < em > tags).

    Would also like for the position of the text of 'Privacy' < p > alongside the "send comments" button (to the right of the button as opposed to the bottom of the, as it is currently). Do you use floats? If so, how exactly.

    Please in the hope that someone more experienced than me could offer quick solutions?

    Thanks in advance,
    Jay

    JD800 wrote:
    > Thank you - grateful for the help.
    >
    > The answer did not work:
    > em {}
    > do-size: 18px;
    > make-weight: bold;
    > > }
    >
    > This has however:
    > >


    > >>
    ><>
    > class = "Privacy" > privacy statement
    > >


    >
    > Thanks again,.
    > JD
    >
    >

    in fact, why use (it's for italics, but * do probably not even exist in italics)

    Instead, each * in a span tag (rather than em)
    and the style of the span tag

    . Star {}
    do-size: 18px;
    make-weight: bold;
    }

    *

    --
    SEB ([email protected])
    http://webtrans1.com | high-end web design
    Downloads: Slideshow, browser directory, mailing list

  • El Capitan compatibility with Office 2016

    Are you convinced that install OS 10.11.1 El Capitan can solve the problems of compatibility with Office for Mac 2016?

    First of all, the only available version of El Capitan is 10.11.4, second, you, what are the problems with compatibility? I'm not aware of anything. Maybe you can offer them upward.

  • Whenever I start Firefox (version 10.0 - release version) it checks compatibility with Add-ons as if I just installed firefox.

    I had the problem of the Firefox page successfully updated the opening whenever I started Firefox and have been since fixed one, but whenever I start Firefox (version 10.0) it checks compatibility with modules whenever

    Hi organicdj,

    You should watch the unsaved Preferencessection. It could be a problem with the pref file that does not store the fact that this control has already been run.

    Hope this helps!

  • Satellite Pro L100: USB2 drivers do not have compatibility with Win XP

    SAT Pro L100 - I loaded the USB 2 drivers received using a prolific USB to Serial Comm Port (Sunix - UTS1009B) a single port USB to serial port cable.

    In each instance of loading the drivers message appears "did not the Windows Logo test for compatibility with Win XP. If continue or stop, drivers do not work.

    Seems as if there is a problem loading the USB 2 drivers. need assistance?

    Expensive branded

    That s nothing unusual.
    Many 3rd party drivers have not been tested by Microsoft and the message appears so that the pilot didn't make the Windows logo test for compatibility with Win XP!

    But if you use a driver that was designed for Win XP, you just continue and finish the installation.

    So, don t worry not and follow these steps!

    Best regards

  • Discrete cards compatibility with HP ENVY h8-1403es

    Hello

    My friend wants to change his 640gt included in a HP ENVY h8-1403es for another graphics card. He wants to install a 770gtx but it seems impossible because of lower power, not enough distance to place it in the pc box and has problems with motherboard bios "IPMMB-FM (Formosa)" it seems has no compatibility with the 770gtx series and others... causing a black screen at startup bios.

    I read something about the best compatibility with the gtx 6xx series, but first of all, I want to be sure compatibility in the Bios that the models or similar.

    Can you please confirm compatibility graphics cards?, updates or bios problems?, also to ensure that the problems of knowledge. ? It is the only location only?...

    A recommendation on compatible cards?

    Thank you very much.

    Hello

    Apply the update posted last BIOS prior to a new installation of the graphics card.  You'll need to access the BIOS and disable Secure Boot to apply the update to the BIOS.

    HP Secure Boot Windows 8 themes Computer does not start after the installation of a video (Windows 8) card  

    The h8-1403es HP has 460 watts power, so if you do not want to replace the power supply then you need to find a graphics card that meets the minimum power of 460 watts nominal power graphics card manufacturers.

    If your friend wants a faster than the 640 graphics card then space must be freed up on the inside to adapt to a double wide graphics especially if the graphics card is of the order of the 770 of NVIDIA.  Graphics in the NVIDIA 770 range would require a bigger power supply.

    Consult this publication of the article.

    Sapphire R7 250 would be much better than the 640, but not in the range of the 770 of NVIDIA.

  • "the software you are installing has been Windows logo testing to verify its compatibility with Windows XP."

    so I try to install the new itunes 10 on windows xp and I get this error, "the software you are installing has not passed Windows logo testing to verify its compatibility with Windows XP." "Continue your installation of the software may impair or destabilize the right operating system, either immediately or in the future." Microsoft strongly recommends that you stop this installation vender now and contact software for software that has passed Windows Logo test. "then why I get this error? and what should I do so that he can stop? I want to say I've never had this happens in their first versions... more it says its compatible with xp. so, once again, microsoft... why I get this error?

    Hey, Yes, I find the problem. do not install the update from the apple software. installation of apple.com it won't give you the error when downloading it on their actual location.

  • Apple Mobile Device USB Driver has not passed Logo testing for compatibility with Windows XP, I ran the suggestion to "fix" 925196 that it still does not work. What can I do else?

    Bought the iPhone 3 g (not 4) trying to run the material but get the following error: Apple Mobile Device USB Driver no has not passed Windows Logo testing to verify compatibility with Windows XP continues the installation of this software may impair or destabilize the functioning of your system.

    Windows XP Service Pack 3 is running.

    I ran the 'Fix - It' 925196 solution, but the problem could not be solved. What is a malware problem?

    Hi deanie3,

    We will check if the following is useful.

    Method 1: Run the next Fixit and check the issue.

    Hardware devices do not work or are not detected in Windows

    Method 2: Follow the steps in the below article mentioned to see if it helps.

    You cannot install some programs or updates

Maybe you are looking for