locked
Issue with background and background-repeat attributes (tbc) RRS feed

  • Question

  • Please bear with me as I am new to Expression Web 4. I am webmaster for a non-profit. The site I inherited was something of a mess. I've cleaned it up a lot, but in the process broke one thing I'm so far unable to fix. The site uses ConstantContact to gather names for a mailing list. There is (not quite working now) a quite attractive button one clicks on to join the mailing list. The button is created, best I can tell, with a fairly complex table structure, with numerous Table, TR and TD tag entries followed by a series of gifs with statements like the following -

    background="imgssl.constantcontact.com/ui/images/visitor/bevel_bg_right_blue.gif"

    There are 8 of those gifs. Together the effect, when it worked, is the impression of an almost 3 dimensional button with rounded corners. The issue I'm having, I think, has to do with the background attribute. The center of the button shows white rather than the intended blue background. I think I need to be repeating those tiny gifs in the cells but I can't work out how to do it. In the tag properties panel the background attribute shows in a Misc category rather than an actual Attribute. The background attribute appears to only apply at the "body" level. And here is where I may have gone astray. In the original web site there was a CSS "body" tag defined for each page that had two attributes. One was 

    background-image: url("page.html") (where page was the name of the web page) and
    background-repeat: repeat

    I created a dynamic web template for the site (there was already a style sheet), and as part of that removed each of those individual page body tags. I have tried reintroducing them in the editable region of the DWT but it has not worked. I've looked all through the program help to see where else I might be able to specify the background-repeat attribute but can't find anything. Any help will be greatly appreciated.

    Sunday, February 8, 2015 11:27 PM

Answers

  • I will point out that your code is not the same on the two pages.  Look in Code View and compare them.

    Your DWT version has typos in the td cell, with the quote after center, and nothing in the quotes after the equal sign and a single quote after the equal sign after align.  On your other page, you have an "autostyle5" here (and many other places on the page) that is not in the DWT page.   None of this explains why the background isn't blue on the DWT page.

    <td bgcolor="#003399" center"="" style="padding: 10px; align=">

    You have multiple style sections in the both pages.  You only need one: put all the styles in it.  (And, it would be far, far better to define styles with real names, and put them on an external CSS sheet.)

    Now to specific problem you are asking about:

    Your NSPS_styles.css in your testbed area assigns a white background to all TD cells.

    The NSPS_styles.css in your regular site area does not.

    That's the difference between the blue vs. white backgrounds.  You are using an HTML attribute, bgcolor="#003399", to try and make the table cell have a blue background.  First, that is deprecated, and a CSS style should be used, but more importantly in this case, in a contest of an element td style vs that HTML attribute, the element style wins: white background.  If you had in inline CSS style for that blue background, that would win instead.

    (By the way, your thread topic references background repeat properties.  That has nothing to do with the button not being blue.)




    • Edited by KathyW2 Monday, February 9, 2015 7:25 PM
    • Marked as answer by Swegnson Monday, February 9, 2015 11:58 PM
    Monday, February 9, 2015 7:22 PM

All replies

  • A picture is worth a thousand words. No--do not post a picture. Post a link to the site and tell us exactly where to look and exactly what's wrong. Any time you're asking about display issues, you have to give us a link so that we can see it and examine the underlying code. Otherwise, you're sending us on a wild goose chase, playing a guessing game.

    If you don't want to make it public yet, put up a private page that's not linked in the menu structure.

    On the other hand, throw away those old buttons (if they are the old FrontPage bloated javescript kind) They are nonstandard, bloated code that do not work across all browsers and platforms. Use CSS.

    If you want the background on every page, you don't put it in the Editable regions; you put it in the noneditable regions.


    A horse walks into a bar. The bartender asks "Why the long face?" "Because I was born into servitude and when I die my hooves will be used to make glue." It was at this point that the bartender realized he would not be getting a tip.

    Monday, February 9, 2015 12:05 AM
  • Thanks very much for replying. I would have responded sooner, but I thought the forum site would send me an email to notify me of replies. You can see what I am asking about here 

    button working site ==> usps.org/norwalk

    button not working ==> usps.org/norwalk/NSPS-testbed/

    The principal difference between the sites was the creation of a dynamic web template for the latter. You can see the difference in the Join our email list buttons immediately. I also lost the centering of the table it is in. Another page, the Boating Classes page, has the same issue with the button. Any help you can provide would be very greatly appreciated.

    Monday, February 9, 2015 6:16 PM
  • I will point out that your code is not the same on the two pages.  Look in Code View and compare them.

    Your DWT version has typos in the td cell, with the quote after center, and nothing in the quotes after the equal sign and a single quote after the equal sign after align.  On your other page, you have an "autostyle5" here (and many other places on the page) that is not in the DWT page.   None of this explains why the background isn't blue on the DWT page.

    <td bgcolor="#003399" center"="" style="padding: 10px; align=">

    You have multiple style sections in the both pages.  You only need one: put all the styles in it.  (And, it would be far, far better to define styles with real names, and put them on an external CSS sheet.)

    Now to specific problem you are asking about:

    Your NSPS_styles.css in your testbed area assigns a white background to all TD cells.

    The NSPS_styles.css in your regular site area does not.

    That's the difference between the blue vs. white backgrounds.  You are using an HTML attribute, bgcolor="#003399", to try and make the table cell have a blue background.  First, that is deprecated, and a CSS style should be used, but more importantly in this case, in a contest of an element td style vs that HTML attribute, the element style wins: white background.  If you had in inline CSS style for that blue background, that would win instead.

    (By the way, your thread topic references background repeat properties.  That has nothing to do with the button not being blue.)




    • Edited by KathyW2 Monday, February 9, 2015 7:25 PM
    • Marked as answer by Swegnson Monday, February 9, 2015 11:58 PM
    Monday, February 9, 2015 7:22 PM
  • Many, many thanks Kathy I would never have caught the TD background definition issue. I frankly do not yet understand the hierarchy of which attributes control.

    Could I trouble you to take one more look and tell me why the button doesn’t center in its side of the table, and why the table it is in doesn’t center? In Design mode in EW4 both appear centered, but that doesn’t flow to the browser view. Presumably I have another conflict I’m not seeing.

    May I ask another follow-up question or two for my learning? You said - "you have multiple style sections in the both pages.  You only need one: put all the styles in it." (You should have seen the site before I took over). I am trying to get to the point where, as you say, all the styles are defined in a style sheet, but my problem, as I indicated above, is I don’t yet understand how everything works and am reluctant to fix what is still working. For example in the DWT file currently, and in the browser rendition, the NSPS heading logo appears where I want it. I created a positioning class in the CSS style sheet called .NSPS-Logo which to my eye has exactly the same attributes as the auto-style1 created in the DWT file. But when I replace auto-style1 with class =” NSPS-Logo” the logo moves. 

    Also is there a standard reference book for EW4 that I should get? Trying to learn through the online help is scattershot at best.


    Swegnson

    Monday, February 9, 2015 11:58 PM
  • I'm not going to do that. You have inline auto styles for centering scattered all over on one page, and not on the other, and nested tables are simply a mess to debug (and usually not a good way to layout a page). I'm leaving that one to you.
    Tuesday, February 10, 2015 1:26 AM
  • Adding more, in answer to your additional comments:

    There is no way to answer your second question about the logo positioning.  As I said, those pages are a bit of a mess in many ways, mostly related to autostyles, but not exclusively related to that, and there is no way to know what you really did from your general description.

    Frankly, you might have more luck starting the page cleanly from scratch than trying to incrementally fix the site you were handed.

    As for a book on EW, that's not what you need.  EW is just the tool.  Your questions are related to HTML, CSS, and styling, CSS precedence, and trying to debug what styles are applied to what.  That's independent of the tool.  And that last - debugging - is made far more complex by the mix of auto styles with no indication of what they do in their name, inline styles, and HTML attributes used for styling (which don't show up in either EW's tools or browser's debugging tools as styles).



    • Edited by KathyW2 Tuesday, February 10, 2015 3:40 AM
    Tuesday, February 10, 2015 3:25 AM
  • Well, I feel your pain, and I can only guess what the site looked like when you inherited it. We used to boat on the Sound--centered around the Old Saybrook area--farther east than you. Nice summers. I miss boating; we lost the boat in a hurricane and just never replaced it.

    Many people speak highly of Jim Cheshire's EW book. He was on the EW team at MS. I haven't read it, but it's probably a great place to start.

    Microsoft Expression Web 4 In Depth: Updated for Service Pack 2 - HTML 5, CSS 3, JQuery (2nd Edition)

    I've looked at the site, and I'm with Kathy. That's a dog's breakfast of a mess to troubleshoot.

    I'd take a breath for a moment and learn EW properly and HTML and CSS. There are links in this Forum's FAQ under Learning Resources. Start with By-Expression.com (to get handle on EW--it's an earlier version, so some commands have moved, but it's very close. Work through the exercises with Cheryl.

    Then do w3schools for tutorials in HTML and CSS. They are very good, short tutorials about specific topics.

    So--here's an idea of a problem on the site...A div is a container that holds content so that you can control it easily. Style the div, set the margins and padding, and you're set. On your site there are divs in table cells. The table is already controlling the layout, so a single div in a table cell is redundant (it's a box within a box).

    You may not want to hear this, but I wouldn't waste more time fixing this version of the site. EW comes with website templates that have already done the heavy lifting for you. The Organization 5 template has everything you need and it's laid out just like your current site--change colors and backgrounds as you wish). I'd do 2 things: Make it wider (in the CSS style sheet), and I would ditch the separate folders that they use for each page and put all your pages in the root of the site. Make all your links, then copy the plain text from the old site into the new (copy it from a browser and strip ALL the code off of it first). Adjust the styles, add the photos, and you're done. It's a short job and it will all be clean and tidy and ready for the next 10 years.

    When you do, you don't have to remake it as an exact copy, and you should convert and buttons to CSS styled links. It sounds like a big project, but trust me, it will take far less time and you'll enjoy it more. Plus--what else do you have to do for the next few months except shovel snow, right?


    A horse walks into a bar. The bartender asks "Why the long face?"
    "Because I was born into servitude and when I die my hooves will be used to make glue."
    It was at this point that the bartender realized he would not be getting a tip.


    Tuesday, February 10, 2015 4:14 AM