stockphotoguy
Level 1 (8 points)
Safari

Q: safari 9.1.3 not displaying textedit html/css correctly

I'm trying to learn html/css and I am going through a basic instructional course that has you type some html and css style and then open it in Safari.

 

I have gone to the textedit preferences and selected plain text, I have unchecked .txt extension and have saved as index.html to try it in safari and it will not display correctly, are there other settings I have to set in textedit or safari in order for it to display correctly. below is my simple html text. Safari will not display the style.

 

<html>

<head>

<title>Starbuzz Coffee</title>

<style type=“text/css”>

body {

background-color: #d2b48c;

margin-left: 20%;

margin-right: 20%;

boarder: 2px dotted black;

padding: 10px 10px 10px 10px

font-family: sans-serif;

}

</style>

 

</head>

<body>

<h1>Starrbuzz Coffee Beverages</h1>

 

<h2>House Blend $1.49</h2>

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

 

<h2>Mocha Caffe Latte, $2.35</h2>

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

 

<h2>Cappuccino, $1.89</h2>

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

 

<h2>Chai Tea, $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

Thanks,

Mike

iMac, iOS 9.3.5, my iOS is 10.11.6 safari is 9.1.3

Posted on Sep 4, 2016 12:51 AM

by VikingOSX,Solvedanswer
VikingOSX VikingOSX
Level 7 (20,544 points)
Mac OS X
A:

I almost never use TextEdit, because I either need a proper word processor, or a real programmer's editor. Now that you have discovered TextWrangler, and used it to a favorable result, good fortune in your web development learning curve. Watch those typos though.

Posted on Sep 4, 2016 6:53 PM

Close
stockphotoguy

Q: safari 9.1.3 not displaying textedit html/css correctly

  • All replies
  • Helpful answers

  • by Eric Root,

    Eric Root Eric Root Sep 4, 2016 6:25 AM in response to stockphotoguy
    Level 9 (69,546 points)
    iTunes
    Sep 4, 2016 6:25 AM in response to stockphotoguy

    Have you tried giving the file a .css extension?

  • by VikingOSX,

    VikingOSX VikingOSX Sep 4, 2016 7:37 AM in response to stockphotoguy
    Level 7 (20,544 points)
    Mac OS X
    Sep 4, 2016 7:37 AM in response to stockphotoguy

    Spelling, quote type, and syntax are important in HTML/CSS. The red marks indicate corrections in your CSS.

    <html>

    <head>

    <title>Starbuzz Coffee</title>

    <style type="text/css">

    /* you can also just use the <style> tag */

    body {

    background-color: #d2b48c;

    margin-left: 20%;

    margin-right: 20%;

    border: 2px dotted black;

    padding: 10px 10px 10px 10px;

    font-family: sans-serif;

    }

    </style>

     

    I suggest that you stop using TextEdit, and start using the free TextWrangler. It is a programmer's editor. There are better, more power programmer's editors, but this one is free, and will get the job done for you.

     

    The proper naming convention for your document is the html extension, because the CSS is inclusive. Your code when corrected will look as follows in Safari 9.1.3 on OS X 10.11.6.

     

    Screen Shot 2016-09-04 at 10.27.37 AM.jpg

  • by stockphotoguy,

    stockphotoguy stockphotoguy Sep 4, 2016 8:44 AM in response to VikingOSX
    Level 1 (8 points)
    Safari
    Sep 4, 2016 8:44 AM in response to VikingOSX

    I fixed my typo like you showed and I am still getting the same result which looks like black text on white with no color, font  or border like how it came up for you which is correct but is not coming up for me.

  • by stockphotoguy,

    stockphotoguy stockphotoguy Sep 4, 2016 8:46 AM in response to Eric Root
    Level 1 (8 points)
    Safari
    Sep 4, 2016 8:46 AM in response to Eric Root

    When I save it as a .css extension it shows up as html layout like this:

     

    <html>

     

    <head>

     

    <title>Starbuzz Coffee</title>

     

    <style type=“text/css”>

    body {

    background-color: #d2b48c;

    margin-left: 20%;

    margin-right: 20%;

    border: 2px dotted black;

    padding: 10px 10px 10px 10px

    font-family: sans-serif;

    }

     

    </style>

     

     

     

    </head>

     

    <body>

    <h1>Starrbuzz Coffee Beverages</h1>

     

    <h2>House Blend $1.49</h2>

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

     

    <h2>Mocha Caffe Latte, $2.35</h2>

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

     

    <h2>Cappuccino, $1.89</h2>

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

     

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

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

     

    </body>

     

    </html>

  • by VikingOSX,

    VikingOSX VikingOSX Sep 4, 2016 9:54 AM in response to stockphotoguy
    Level 7 (20,544 points)
    Mac OS X
    Sep 4, 2016 9:54 AM in response to stockphotoguy

    Post your updated code back here. Did you use TextWrangler as I suggested, or did you use TextEdit again?

  • by stockphotoguy,

    stockphotoguy stockphotoguy Sep 4, 2016 5:19 PM in response to VikingOSX
    Level 1 (8 points)
    Safari
    Sep 4, 2016 5:19 PM in response to VikingOSX

    So I started over writing it new in TextWrangler and it worked. Before I was copy and pasting from textedit to text wrangler so whatever the problem was it was copying that problem from text edit. Something with the textedit preferences is my guess as I tried doing this on my iMac from 2011 and the textedit had no problem just this new 2016 iMac and latest textedit version which preferences are different from my preferences from 2011 version.

  • by VikingOSX,Solvedanswer

    VikingOSX VikingOSX Sep 4, 2016 6:53 PM in response to stockphotoguy
    Level 7 (20,544 points)
    Mac OS X
    Sep 4, 2016 6:53 PM in response to stockphotoguy

    I almost never use TextEdit, because I either need a proper word processor, or a real programmer's editor. Now that you have discovered TextWrangler, and used it to a favorable result, good fortune in your web development learning curve. Watch those typos though.