none
Background color for div is showing up in EW design view, but not showing in browser

    Question

  • Hi,

    I'm currently doing a tutorial for Expression Web, and I'm told to insert something like this:

    HTML:

    <div id="top">
                    <div id=logo>
                        <img src="images/_logo.jpg" />
                    </div>               
                    <div id=social-media>
                        <p>
                            Connect with us.
                        </p>
                        <ul>
                            <li>
                                <a href="https://www.facebook.com/">
                                    <img src="images/fb-art.jpg" />
                                </a>
                            </li>
                            <li>
                                <a href="https://www.instagram.com/?hl=en">
                                    <img src="images/ig-art.jpg" />
                                </a>
                            </li>
                            <li>
                                <a href="https://twitter.com/?lang=en">
                                    <img src="images/tw-art.jpg" />
                                </a>
                            </li>
                        </ul>
                        <p>
                            Contact us for more information: 1 800 555 5555        
                        </p>
                    </div>
                </div>

    CSS:

    #top { width: 100%; padding: 10px 0px; overflow: hidden; background-color:#010314;
    }
    #logo { margin: 0px 0px 0px 10px; float: left;
    }
    #social-media { float: right; margin: 0px 10px 0px 0px;
    }
    #social-media p { color: #D5D8FF; font-size: 11px; margin: 4px 10px 4px 0px;
    }
    #social-media img { width: 24px; height: 24px;
    }
    #social-media ul li { display: inline;
    }

    The background color for the top div shows up in design view, but won't show up in the browser.

    Any way to fix this?

    Thanks~

    Saturday, April 15, 2017 12:05 AM

All replies

  • As shown, your code does show the top div background color. 

    You should publish your page, and give us a link.  That's the only way we can see what you are seeing, and tell you what's going on.


    Kathleen Wilber
    BrightWillow - Asp.Net Applications

    Saturday, April 15, 2017 1:10 AM
  • The CSS shown should work. Is the CSS embedded (in the <head> section of the page), or in a separate file? If the latter, did you save the CSS file after making the change and before previewing the HTML file? That will cause the page to display the value that was in the CSS before it was changed.

    BTW, all attributes except image sizes are strings and must be in quotes. Your "logo" and "social-media" divs will never be seen by the CSS parser because you haven't quoted the id attributes of either one in their declaration tags. (Note the difference between id="top" and id=logo.)

    Do what Kathy said—publish the page and provide a link to it.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    • Edited by paladyn Saturday, April 15, 2017 2:06 AM
    Saturday, April 15, 2017 1:57 AM
  • Scott,

    The page is HTML5, and HTML5 does not require quotes around attribute values.  Actually, it's been a while since HTML required quotes (since HTML2 I think) - although XHTML did require quotes, and that's what I used.  Try it: in  IE11, Chrome, Opera, and Firefox you'll see they all read it as <div id="social-media">, for example, when the markup itself has no quotes around social-media.   That said, I prefer to use the quotes, both as a matter of old habits and for clarity. You'd need the quotes anyway if you had multiple class values in your class attribute, since class="foo bar" is not the same as class=foo bar, which would parse as class="foo" and bar="".


    Kathleen Wilber
    BrightWillow - Asp.Net Applications


    • Edited by KathyW2 Saturday, April 15, 2017 6:31 PM
    Saturday, April 15, 2017 4:09 PM
  • Point taken. I'm so steeped in XHTML, having used it for so long (more than a decade), I still automatically "think in XHTML" when I read markup, and like you, out of long habit I still use quotes when writing code. Come to think of it, since I hand enter my HTML at the keyboard, EW's editor automatically provides quotes for attributes while you're typing them in, so you would have to deliberately delete them to get rid of them. ;-)

    Also, all of my existing work is in XHTML, and it is only in new stuff that I am adopting HTML5. If I ever have to refactor the older pages, I'll probably go ahead and update them to HTML5, if only for the SEO advantage of the improved new semantic elements.

    cheers,
    scott

    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    • Edited by paladyn Saturday, April 15, 2017 9:57 PM
    Saturday, April 15, 2017 8:55 PM
  • It works just fine when the page is viewed on your local machine. But you need a page(or site)-relative link for publishing online. When you save that page, the link should automatically resolve to a page-relative link.

    However, if you are not working within a site, EW cannot do that. You can't simply open EW, then open a file and start working. You must first open a site. Use "Site|Open Site..." and navigate to the folder containing your site. Once you have a site open, EW will automatically resolve absolute local links (like your example, above) into page-relative links suitable for publishing.

    BTW, looking at the path you have shown above, you don't want to create your site in that folder. Create a new folder to contain your site and name it appropriately. So, your path might be "C:/Users/Kelcy/Documents/<name-of-your-site>/index.html," for example. (If you plan to have more than one site, you might create a folder "Webs," so that path would then be "C:/Users/Kelcy/Documents/Webs/<name-of-your-site>/index.html")  When you use "Site|Open Site..." to browse to that folder, EW will automatically name the site the same as the folder name, which is your site name.  ;-)

    cheers,
    scott

    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    • Edited by paladyn Sunday, April 16, 2017 12:14 AM
    Sunday, April 16, 2017 12:09 AM
  • Mayybe, please do not do that. While I was answering your question you deleted it. Now look at that post, and try to make sense of it in the flow of the thread. That is poor forum etiquette; please refrain.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    Sunday, April 16, 2017 12:19 AM
  • Sorry, I was thinking about it and realized that the "link" I replied didn't make sense (I think)

    How exactly do I get this page-relative link?

    Sunday, April 16, 2017 8:06 PM
  • READ my reply. Beyond the first paragraph. Create a site, and always open the site before you begin work. When you do, file system-absolute links like that will automatically resolve to page-relative when the file is saved (for preview, for example).

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    Monday, April 17, 2017 6:54 AM
  • file:///C:/Users/Kelcy/Documents/expression_web_4/

    Monday, April 17, 2017 8:07 PM
  • file:///C:/Users/Kelcy/Documents/expression_web_4/
    ???

    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    Monday, April 17, 2017 10:45 PM
  • I don't know what I'm looking for! I don't know where to find the page-relative link in EW.
    Wednesday, April 19, 2017 12:12 AM
  • Your last posts have not been useful because you have not explained what you are doing or asking.  Perhaps because you deleted one of your posts.

    Start over, please, and provide complete information and explain what is going on.


    Kathleen Wilber
    BrightWillow - Asp.Net Applications


    • Edited by KathyW2 Wednesday, April 19, 2017 1:54 AM
    Wednesday, April 19, 2017 1:53 AM