Safari 9.1.3 textedit html/css not displaying does not correctly

I am trying to learn html/css and I'm going through a basis of teaching course that you type some html and css style, and then open it in Safari.

I went to textedit preferences and selected plain text, I unchecked .txt extension and saved as index.html to try it in safari, and it does not display properly, are there other settings should I set in textedit or safari so that it appears correctly. Here is my simple html text. Safari does not display the style.

< html >

< head >

< title > coffee Starbuzz < /title >

< style type = "text/css" >

{body

background-color: #d2b48c;

left margin: 20%;

right margin: 20%;

Border: 2px dotted black;

padding: 10px 10px 10px 10px

do-family: without serif.

}

< / style >

< / head >

< body >

Drinks at the coffee Starrbuzz < h1 > < / h1 >

House mix of < h2 > $ 1.49 < / h2 >

A smooth, sweet blend of < p > coffee from Mexico, Guatemala and bolivar. < /p >

< h2 > moka Caffè Latte, $2.35 < / h2 >

< p > Espresso, steamed milk chocolate syrup. < /p >

< h2 > Cappuccino, $1.89 < / h2 >

mix of espresso, steamed milk and milk foam. < /p > < p >

< h2 > the Chai, $1.85 < / h2 >

< p > a spicy drink made with black tea, spices, milk and honey < /p >

< / body >

< / html >

My iOS is 10.11.6 Safari is 9.1.3

Thank you

Mike

Have you tried to give the file an extension .css?

Tags: Mac OS & System Software

Similar Questions

  • Some CSS links displays does not correctly

    Hi people,

    I've built a new site, but am having problems with some of the CSS links.

    Normal links work correctly.

    However, I created a class that needs to display links in bold - but it does not work!

    This is the CSS:

    . Bold-expansion a: link {}
    make-weight: bold;
    color: #4E8AD2;
    do-size: 16px;
    }
    . Bold-expand a: visited {}
    make-weight: bold;
    color: #4E8AD2;
    do-size: 16px;
    }
    . Bold-expansion a: hover {}
    make-weight: bold;
    color: #F47C01;
    do-size: 16px;
    text-decoration: none;
    }
    . Bold-expand a: active {}
    make-weight: bold;
    color: #4E8AD2;
    do-size: 16px;
    }

    And this is the code as it appears on the page:

    "< span class =""BOLD" - large"> you can buy cool and interesting decorations and accessories of < a href ="http://www.test.com "> PartyBox < /a >. </span > </p>"

    It is not display in "BOLD" well!

    The test page is here:

    http://www.iainmoran.com/40/40th-birthday-gift-ideas.html

    No idea why this might not work please? I'm sure it's very simple, but I can't work out what it is!

    Thank you very much

    Iain.

    It's a question of specificity.

    . Bold-expand one: link is overridden by #content a: link

    Prefix your rules with #content to make it more accurate, namely:

    #content .bold-expansion a: link {}
    make-weight: bold;
    color: #4E8AD2;
    do-size: 16px;
    }
    .bold #content - expand a: visited {}
    make-weight: bold;
    color: #4E8AD2;
    do-size: 16px;
    }
    .bold-expansion #content a: hover {}
    make-weight: bold;
    color: #F47C01;
    do-size: 16px;
    text-decoration: none;
    }
    .bold #content - expand a: active {}
    make-weight: bold;
    color: #4E8AD2;
    do-size: 16px;
    }

  • Images in html do not correctly attached messages

    I was faced with html and Thunderbird emails recently, but I got a problem...
    the images included in my email are not attached and it gives me just errors, saying that the image cannot be attached, if I want to send email without it. I have images hosted online of course.
    That's what the code looks like:
    "img src ="http://www.mediafire.com/convkey/0966/3742rgmrt7tm7drfg.jpg"

    Here are a few screens (not in English, but little matter):
    1. it seems all good when I import the html code:
    http://I58.Tinypic.com/2955um0.jpg

    2. when I try to send it, the error will appear for each picture in the mail.
    http://I59.Tinypic.com/w1fww8.jpg

    Thanks for help

    SRC ="http://en.wikipedia.org/wiki/Sapphire#mediaviewer/File:Geschliffener_blauer_Saphir.jpg"moz - not-send = 'true'
    translates a web link.

    Notice the moz - not-send = 'true '.

  • Master page CSS not correctly applied to other pages

    Hello world

    I'm relatively new to Adobe Muse but I like to think I have a right understanding after completing a Lynda.com courses on the program. However, I am having trouble with a Web site, that I am currently in train. I have a master page that contains the header and footer elements / styling I want to apply to my other pages.

    It would appear that the elements and style of my master page seem to work well on my Home Page, but on all other pages, even if the elements are there, it would seem that no style has been applied. The site is the catalyst for the company and can be found at paidtotrade.businesscatalyst.com. You will be able to see the issue that I have on there when the comparison of the homepage to other pages.

    I hope there, can someone help me, any help would be greatly appreciated.

    Just found the temporary fix.  Go to the properties of your site and disable the change in the browser.  Until the bug is corrected that works.

  • InContext editor works not with custom html/css (animate files adobe edge)

    Hello

    I just created a site of catalyst for business and I chose for my own HTML/CSS/JS site (without a template). The site is made with Adobe Edge animate and the files are already uploaded to the server.

    When I connect to the admin of the catalyst business account I can see my site works but now I would like to use the incontext Editor. When I hit the edit button I see my site, but I can't change.

    In my index.html file I insert scripts like 'ice:editable="html"' and 'ice:editable="*". But still the incontext editor doesn't work.

    Example:

    <div ice-editable="html" id="Stage_UIHE-Cover_cover-title-03"><p ice-editable="html" style="margin: 0px; line-height: 36px;"><span style="font-family: times_new_romanregular, sans-serif; font-size: 40px; color: rgb(255, 255, 255);">Nepal Earthquake Aftermath:</span></p>

    I'm doing this right? Could someone help me how to insert the tags in the right way.

    Or maybe it is not possible to get the incontext Editor to work with the Edge files animate.

    I hope someone can give me some answers and point me in the right direction.

    Thank you!

    As much as I know to Edge host sites work the script must be initialized. ICE but does not play nice with dynamic content and that's why he doesn't work for this particular site.

    Don't think that there is a way around this.

    Thank you

    Mihai

  • huffingtonpost.es/com does not correctly load in safari (and firefox), but he does it in chrome

    I have problems loading of the huffingtonpost.es and sometimes .com on Safari on my mac and also in Firefox. But the web even chrome load perfectly.

    It is the only web that I have problems up to now and is not a related problem of expansion because I don't have extensions in firefox and the same problem occurs there.

    Does anyone have an idea of what's going on? It seems that something in relation to the css.

    The really strange thing is... I try to load huffingtonpost.com on safari and do not load correctly, I reload and reload and does not load correctly. Then I load in loads of Chrome perfectly and after that I try to load in safari (or firefox again), then load it. :-/ This does not always happen, but then sometimes drive me crazy.

    Thanks for any help in advance.

    Make sure your OS X software is up-to-date.

    Click on your Apple  top left of your screen.

    In the drop-down menu, click on: software update

    That should launch the App Store.

    If you see an update for OS X El Capitan and Safari, install these updates, restart your Mac and try Huffington Post on Safari and Firefox.

  • On Firefox only, I get problems with a few Joomla sites using the JA_purity template. Error: has not been loaded because its MIME type "text/html", is not "text /".

    Hello

    I updated Firefox on my computer for 13.01. Now, he struggles to read about 2 sites - both are Joomla and based on the model of JA-purity. What happens is that it fails to load the CSS files to do with the side and the top of the Joomla site menus. The file comes up with this:

    because its MIME type "text/html", is not "text/css".
    Source file: http://extensions.joomla.org/
    Line: 0

    This error does not appear with other browsers and it displays perfectly in fact in all other browsers.

    I'm new on this but I read the following article and think it could be my problem

    https://developer.Mozilla.org/en/Incorrect_MIME_Type_for_CSS_Files

    Where Im stuck, it's that I did not fully understand what to make of this article, if I could get a step by step guide to fix this problem that would be greatly appreciated.

    I apologize in advance if the answer lies somewhere here - I have had a look and couldn't get out.

    Thank you
    Alex

    I don't see that the error and all style sheets seem to load.

    Reload Web pages, and ignore the cache.

    • Hold SHIFT and click reload.
    • Press 'Ctrl + F5' or 'Ctrl + Shift + R' (Windows, Linux)
    • Press 'Cmd + Shift + R' (MAC)

    Clear the cache and cookies from sites that cause problems.

    "Clear the Cache":

    • Tools > Options > advanced > network > storage (Cache) offline: 'clear now '.

    'Delete Cookies' sites causing problems:

    • Tools > Options > privacy > Cookies: "show the Cookies".
  • I have an index page that does not correctly load the css and css works on all other pages of the site.

    http://www.boulderridgecondos.com/ does not correctly load the css, but all other pages of the site loading the css correctly. There is nothing (that I can identify) between pages.
    http://www.boulderridgecondos.com/news.htm

    I guess something is wrong in the css, I inherited this site and have exceeded the css but can't find a problem that would cause this to happen.

    Any help or suggestion looking for something would be appreciated.

    This page is saved in UTF-16 format (Content-Type: text/html (UTF-16 BOM, litte-endian)) in your text editor. The CSS file is sent as ISO-8859-1. Firefox fun to see all the files in the same encoding. The other pages are send as ISO-8859-1 and so use the CSS file. You will need to re - save this page as ISO-8859-1 and download the corrected version.

  • HTML + css + javascript is enough? Another example of application?

    Hello!

    To accept that my application is sufficient to write in html + css + javascript? like normal Web site?  or I have to use other tools?

    Where can I find another example of application? not "SketchPadStandard"?

    What types of applications rejected RIM?

    I don't know about "The Applications that provide a simple, unique, function as play sound or display a graph."

    but some other advice?

    BTW: I use the command line to create a * .bar, compile and run my application on the Simulator, but y at - it tool that will speed up this process?

    Sorry for the many questions in one thread, rookie mistakes

    Greetings!

    @kubaczento, this is the forum for the development of the AIR.  If you look at the works of the Web (HTML, etc.) you should head to the course on Web development forum which is side to it...

  • Problem with html/css object in Muse

    I did a project Muse and use widgets, but when I try to measure with the html/css object provided by Muse, the preview works perfectly but when I put it on Business Catalyst, the changes disappeared and he is back to normal...
    What should I do to make the CSS works?

    I don't know how you managed to add css to Jotform. JotForm is broadcast via iframe. Not editable any it by the css on your side. Any change in appearance, you can do in the Online Form Builder · JotForm , non-personalized css.

    Well, if we talk in general. Muse never deletes the user code inserted into the head through the properties of the page. But I do not see any css custom in the source code of your website.

  • How convet a psd to HTML/CSS file?

    How to convert a PDF file to HTML/CSS?

    I found this method: download the PSD to cloud account then the window menu > extracted but the window looks like this:

    a.PNG

    I use a version of the track. Is - what the reason why this does not work?

    The trial version is identical to the full version. Take a look at retrieves a Photoshop design into code in Dreamweaver | Adobe Dreamweaver tutorials CC

  • How to convert a font created in. HAVE in a format compatible with HTML/CSS.

    Hello

    Thanks in advance for any help with my question.

    I downloaded a font on behance, and includes the original vector inside Adobe Illustrator glyphs. I tried to save the. HAVE as one. SVG to use in my HTML/CSS code for my site, but it was not appearing in the browser.

    I used the function @font-face and bore the name of the police and the included local source url, but without success. I feel like I'm missing a step inside the Illustrator when I export the 'new police' or save the 'new police' as one. SVG.

    Are there specific measures that I need to pass by when created by using a font on the inside. HAVE for use in HTML/CSS?

    Sebastian

    SVG isn't fonts, images (vector). To create a real font, you will need software such as FontLab. Otherwise compose you some text you want in artificial intelligence, export a SVG (or image pixel) and incorporate it into your page like any other image.

    Mylenium

  • How can I change something like the border style of a framing in Muse area by adding custom html/css code?

    I'm changing the border style of a marquee selection around my head. Given that Muse is not one tool online, or support of border styles other than solid (why? I have no idea).

    I know it can be done by adding custom html/css, but so far, I've only managed to put a border dotted around the entire page. Some explain how I can do this please?
    There is no information on the forums and youtube on this subject, and it drives me crazy.

    Hello

    Please try following steps to make it work for you.

    1. place the codes marked in page design mode and preview in the browser.

    2. right click on the selection rectangle in the Navigator and select "Inspect element" (Google Chrome)

    3. Once you do this, you will be able to see that well-known codes are placed in a div with an id as #u75. In this example, it is #u75.

    4. it is the identifier that will target you for CSS.

    5. If the CSS, you will need to add following

    6. you can do a right click on the framing box in design and select "Edit HTML" and put the code before the code of renowned as mentioned below

    7. click on show preview and you will get a dotted border.

    Concerning

    Vivek

  • CodePen HTML + CSS + JS in Muse

    I need to find a way to put HTML + CSS + JS in Muse of Codepen.

    It's what I want on my site: graphic SVG in ring with animation and tooltip

    Help, please! Incidentally "insert HTML code" only works for HTML, CSS or JS.

    Hi LJDezigns,

    You're half right

    You can insert HTML and CSS in the body of a page. If you paste the HTML code and CSS (in tags style, of course) of this page Codepen in the subject of "insert HTML" Muse, you will find that it will display a black box with that (really attractive place) the header text. I've tried it.

    The problem is Javascript. I spent the age trying to JQuery UI to work on a site I'm developing, and he has not been successful. Adding additional JS libraries in the head of HTML (in the Page Properties > metadata) does not work. The injector JQuery widget only works for the addition of small JQuery code snippets to the bottom of the page.

    It does that when I edit the exported HTML pages and add the JS that I want. This approach is not recommended, because it means that re-export of Muse will erase any changes in JS. And once you start doing this, you can do everything in an environment like Dreamweaver anyway. (Maybe you could do that in Dreamweaver and place it in the Muse as an iframe?)

    In addition, from the looks of it, your Codepen example involves a few different JS libraries. I don't know why, but it is not all made with JQuery (the only library JS that Muse support natively).

    So, in short, I don't think that this will be possible only with Muse. I would like it to be, since it would mean that I could do a lot of things I want to do! But unless Muse allows users to load additional JS libraries (and, ideally, to assign IDS and classes of items), this kind of thing will not work.

    If someone smarter than me opposed to all this, I'll be happy to be proven wrong!

  • How to convert a html/css site in muse

    How to convert a html/css site in muse.

    Hello

    It is not possible to convert the html/css site in Muse. Muse only recognizes the .muse file.

    Kind regards

    Aish

Maybe you are looking for