Background Image & different browsers

I am struggling with a background image. If it looks good in
Firefox, it doesn't in Explorer and visa versa. here is my code.
Maybe I am not doing it right. I'm a brand newbie!! My first issue
was it repeated. the actual image height is 256, but when I put 256
in the height, it repeats, or has a big black space.
<tr>
<td height="150" colspan="7" style="background-image:
url(gfx/home-main-banner.jpg); background-repeat:
no-repeat;" class="contenthome"><p>You are uniquely
distinctive and so is your skin. In many ways your skin reflects
and defines who you are. At Porselene, we develop world-class skin
care products for the enrichment of healthy skin, youthful
appearance and high quality of life. So go ahead, define your
skin.</p>
<p class="contenthomeview"><a href="shopping.php"
class="homeview">VIEW OUR EXQUISITE LINE OF SKIN CARE</a>
</p></td>
</tr>

The height attribute of the table tag is invalid HTML. It was
never part of
the HTML specification. That's what's causing the error
message you are
getting. Remove it from the table tag, e.g.,
<table width="760" border="0" cellpadding="0"
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"kale_O" <[email protected]> wrote in
message
news:[email protected]...
> Here's an example:
>
> Error Line 12, Column 64: there is no attribute
"height".
>
> ?="#F2F2F2"><table width="760" height="108"
border="0" cellpadding="0"
> cellspa
>
> ?
>
> You have used the attribute named above in your
document, but the document
> type you are using does not support that attribute for
this element. This
> error
> is often caused by incorrect use of the "Strict"
document type with a
> document
> that uses frames (e.g. you must use the "Transitional"
document type to
> get the
> "target" attribute), or by using vendor proprietary
extensions such as
> "marginheight" (this is usually fixed by using CSS to
achieve the desired
> effect instead).
>
> This error may also result if the element itself is not
supported in the
> document type you are using, as an undefined element
will have no
> supported
> attributes; in this case, see the element-undefined
error message for
> further
> information.
>
> How to fix: check the spelling and case of the element
and attribute,
> (Remember XHTML is all lower-case) and/or check that
they are both allowed
> in
> the chosen document type, and/or use CSS instead of this
attribute. If you
> received this error when using the <embed> element
to incorporate flash
> media
> in a Web page, see the FAQ item on valid flash.
>
> What is wrong with the height? I removed it, reuploaded,
but it still says
> there is an error.
>

Similar Messages

  • Issue with images in different browsers

    Having an issue with different browsers -- hoped someone
    could help.
    If I open my site with IE, everything looks as it does in
    Dreamweaver -- there is no overlap of text and images/etc.
    If I open my site with Mozilla or Safari, it seems to
    arbitrarily move up some of the images over the top of text. Not
    all of the images, mind you -- just a few random ones throughout
    the page.
    Opening the following link in both type of browsers may give
    you a clue as to what is going on. What can I do to get it to look
    like it does in IE?
    http://www.centecsystems.com/centecexample/disanapplications.htm

    LOL ahem, 'scuze me. :-)
    -N
    "Walt F. Schaefer" <[email protected]> wrote in
    message
    news:[email protected]...
    > >>For that we rely on IE hacks
    >
    > In polite company we call those "conditional comments".
    > --
    >
    > Walt
    >
    >
    > "Nancy O" <[email protected]> wrote in
    message
    > news:[email protected]...
    > > First off, you are assuming incorrectly that IE is
    the good browser and
    > > Mozilla is the bad browser. Actually, it's the
    other way around. If
    you
    > > build your sites to perform well in Mozilla,
    chances are your sites will
    > > look good in all major browsers except IE. For that
    we rely on IE hacks
    > > or
    > > workarounds.
    > >
    > > Learning html and CSS takes time and effort but
    it's very doable. You
    > > would
    > > be doing yourself a big favor by learning to work
    with code now. Design
    > > view is fine for some things, like typing content
    and adding a few
    images.
    > > But eventually you have to pop the hood to check
    the oil. If hiring a
    pro
    > > isn't an option, I suggest you purchase a solid
    template to work with.
    > > Money well-spent IMHO.
    > >
    http://www.projectseven.com/products/templates/
    > >
    > >
    > >
    > > --Nancy O.
    > > Alt-Web Design & Publishing
    > > www.alt-web.com
    > >
    > >
    > >
    > >
    > > "PunIntended" <[email protected]>
    wrote in message
    > > news:[email protected]...
    > >> Unfortunately, hiring someone is not an option
    for my friend -- the
    > > recession
    > >> has hit them hard -- etc.etc. I'm doing it as a
    favor.
    > >>
    > >> One additional question -- Why are only some of
    the image files moved
    > > when
    > >> viewing in mozilla? I dont understand how
    Dreamweaver arbitrarily
    > >> chooses
    > >> which are moved and which are not.
    > >>
    > >> Also, is laying out your site in 'design' mode
    simply a bad idea? It
    > > seems
    > >> like it looks / works fine with IE, and the
    majority of the layers are
    > > correct
    > >> in mozilla -- it just doesn't deal well with a
    few of the images.
    > >>
    > >> Thank you again for all your comments - - like
    I said, am sort of a
    > > beginner
    > >> -- just looking for the best method to fix the
    problem. If the best
    > > method is
    > >> explaing to the graphic designers their
    'vision' can't be accomplished,
    > >> so
    > > be
    > >> it. I just want to know how to go about
    attacking the browser
    > > compatibility.
    > >>
    > >
    > >
    >
    >

  • Different background image (div) on each page of site complicated by template

    Hope I can explain this:  Below are specifics
    - Using Dreamweaver cs5.5
    - Making the pages from a template.
    - Each page will have a different backround image; but the image is contained in a div tag (div name is .mainbackground) which runs behind the main core of the site, the image is not in the <body>
    - The div .mainbackground is EDITABLE
    - I have already made a specific css class to assign to that div on each page so that the image is different on each page.
    - On the template page the div .mainbackground has no image class assigned to it (thus no background image)
    - Since that div is editable I can then go into each page and assign the desired image class to it - works great.  EXCEPT...... & here's my main question:
    -  In the code all of the other regions are contained IN that above mentioned div of .mainbackground SO that means that:
    - if I need to update the structure of the pages I will have to remove the Editable region that controls the background image which would be -  removing the .mainbackround editable region.  Then go back to my template, make changes and save everything - thus all the changes will carry through to my other pages.  This is good and bad because I would get all the structural changes but I would also loose all of the text specific to those pages.
    -Then when I'm finished I would have to go back and first add an editable region back to the .mainbackground class and then re-apply the background classes back to the .mainbackground to fix the images on the pages again...
    The site is very small site so I can deal with it but am I going about this all wrong?
    Is there some template feature I'm not getting?  I would like to keep using the template feature, and i do want a different pic on each page.....
    I have attached a picture showing one page so you can see the background image - which will be different on each page.

    If your Template has embedded CSS within the <head> tags, and the <head> has an editable region defined, you should be able to change styles in child pages.
    TEMPLATE CODE:
    <head>
    <style type="text/css">
    .mainbackground { }
    </style>
    </head>
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    CHILD PAGE CODE:
    <head>
    <style type="text/css">
    .mainbackground {
    background-image:url(page2-BG.jpg)
    </style>
    </head>
    Give it a try.
    Nancy O.

  • Spry Menu Bar - Different Background Image Wanted for menu items

    Hi, I've looked everywhere for help with this and just haven't found any answers yet ...
    I want my Dreamweaver CS5.5 menu to look like this design I've done in PhotoShop ...
    It's a simple one level list with no sub-levels.
    Everything is good, except I can only set one background image for all the menu items at this level.
    I want the first, last, and all the middle, menu items to use different background images.
    I have no idea where or how to insert the code to set a different background image for each individual menu item ...
    I know I could use images set one on top another in a column with rollover image swop, but the spry menu opens the door for dynamic content so I'm keen to get it working.
    Manchester city council has a great example of this style of menu design working at - http://www.manchester.gov.uk/
    They've got funky indenting of the text as well.
    ~~~~~~
    This is the code for my menu list ...
      <div class="sidebar1">
        <ul id="MenuBar1" class="MenuBarVertical">
          <li><a href="#">Home</a></li>
          <li><a href="#">News</a></li>
          <li><a href="#">Groups</a></li>
          <li><a href="#">Events</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
             <li><a href="#">Help</a></li>
        </ul>
      </div>
    This is how I set the background image (but I can only define one image) ...
    I set the image background to "Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg" through ...
    CSS Styles
    SpryMenuBarVertical.css
    ul.MenuBarVertical a
    I then select the background category
    and browse to the image file.
    doing this changes my CSS code as follows ...
    ul.MenuBarVertical li
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        position: relative;
        text-align: left;
        cursor: pointer;
        width: 170px;
        margin-top: 4px;
        margin-bottom: 4px;
        background: url(/Images/Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg);
    ul.MenuBarVertical ul
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        position: absolute;
        z-index: 1020;
        cursor: default;
        width: 170px;
        left: -1000em;
        top: 0;
        margin-right: 0;
        margin-bottom: 0;
        margin-left: 95%;
        background: url(/Images/Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg);
    ul.MenuBarVertical a
        display: block;
        cursor: pointer;
        padding: 0.5em 0.75em;
        color: #0000;
        text-decoration: none;
        font: normal 12px Verdana, Geneva, sans-serif;
        background: #EEE url(/Images/Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg);
    ~~~~~~
    These are the three images I want to apply to the top middle and bottom menu items :
    Top menu item background image - "Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg"
    Middle menu items background image - "Menu-Nav-Bar-Pic-Mid-v1-w170px-h32px.jpg"
    Bottom menu item background image - "Menu-Nav-Bar-Pic-Bot-v1-w170px-h32px.jpg"
    ~~~~~~
    As I am unable to set the menu items individually, this is how the menu looks like on my website at the moment ...
    ~~~~~~
    So near yet so far ! I'm hapy with the verdana font, the image size and spacing, but the background images I just can't set them right.
    I'd really appreciate any help on this as I'm out of ideas.
    Thank you.

    The easiest way is to use pseudo elements.
    To style the first and last menu items ifferently to the rest, merely add :first-child and :last-child respectivly as follows
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css">
    <style>
    ul.MenuBarVertical li:first-child a {
        background-color: red;
        color: white;
    ul.MenuBarVertical li:last-child a {
        background-color: green;
        color: yellow;
    </style>
    </head>
    <body>
    <ul id="MenuBar1" class="MenuBarVertical">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 5</a></li>
    </ul>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>
    In your case, in liue of the background colour, you would have an image.
    Gramps

  • How to add different background image for submenu items???

    Hi all,
    I'm pretty new to web design and CSS in particular. Here's my problem...
    I've got a Spry horizontal menu bar (untouched as yet), and I want to have a different background image for my submenu items than that of my menu items. From searching the internet I think that I need to apply a class to the submenu item (please correct me if I am wrong).
    How would I go about doing this and how would I assign the class to just the submenu items?
    Also ideally I want to have my first and last menu items to have rounded corners on one side (therefore making a rounded edge menu bar), is it possible to have a different background image for individual menu items? If so, how?
    Really appreciate any help!

    Thanks for the link! I've managed to sort the background issue, and it seems to be working fine!
    Just one little issue left to tackle...
    I want my text to be centered in my top menu items BUT aligned left in my drop down menu items. I have managed this but the text hugs the left hand side. I've tried adding a little margin to the left but that doesn't seem to affect anything???
    Here's my CSS... Any ideas which class I should be targeting or why adding the margin isn't working would save my tearing the rest of my hair out! thanks! (screenshot attached).
    @charset "UTF-8";
    /* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    LAYOUT INFORMATION: describes box model, positioning, z-order
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
        margin: 0;
        padding: 0;
        list-style-type: none;
        cursor: default;
        width: auto;
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
        z-index: 1000;
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
        margin: 0;
        list-style-type: none;
        position: relative;
        text-align: left;
        cursor: pointer;
        width: 120px;
        float: left;
        height: 24px;
        padding-top: 0;
        padding-right: 0;
        padding-bottom: 0;
        padding-left: 0;
        background-repeat: repeat-x;
        background-color: #333333;
        background-image: url(../images/navbar_bg.jpg);
        border-right-width: 1px;
        border-left-width: 1px;
        border-right-style: solid;
        border-left-style: solid;
        border-right-color: #000000;
        border-left-color: #666666;
    ul.MenuBarHorizontal li li
        list-style-type: none;
        position: relative;
        text-align: left;
        cursor: pointer;
        width: auto;
        float: left;
        height: 24px;
        background-color: #333333;
        background-image: none;
        padding: 0;
        margin: 0;
        left: -1px;
    ul.MenuBarHorizontal li li a
        list-style-type: none;
        position: relative;
        text-align: left;
        cursor: pointer;
        float: left;
        height: 24px;
        background-image: none;
        font-size: 12px;
        font-weight: normal;
        border: 0px 0 0;
        width: 120px;
        font-family: Geneva, Arial, Helvetica, sans-serif;
        padding: 0;
        margin: 0;
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul
        margin: 0;
        list-style-type: none;
        font-size: 100%;
        z-index: 1020;
        cursor: default;
        width: 120px;
        position: absolute;
        left: -1000em;
        height: 24px;
        padding-top: 0;
        padding-right: 0;
        padding-bottom: 0;
        padding-left: 0;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
        left: auto;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
        position: absolute;
        height: 24px;
        width: 120px;
        margin-top: -5%;
        margin-right: 0;
        margin-bottom: 0;
        margin-left: 95%;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
        left: auto;
        top: 0;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal li a
        display: block;
        cursor: pointer;
        text-decoration: none;
        font-style: normal;
        text-transform: capitalize;
        text-align: center;
        white-space: normal;
        padding: 0px;
        height: 24px;
        font-family: Geneva, Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 20px;
        margin: 0px;
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal li a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
        background-color: #000000;
        background-image: url(../images/navbar_bg_hover.jpg);
        background-repeat: repeat-x;
        line-height: 22px;
    ul.MenuBarHorizontal li li a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
        background-color: #000000;
        background-image: none;
        background-repeat: repeat-x;
        width: 120px;
        font-family: Geneva, Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        color: #FFFFFF;
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
        background-repeat: repeat-x;
        background-position: 95% 50%;
        background-color: #333333;
        background-image: url(../images/navbar_bg.jpg);
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
        background-repeat: repeat-x;
        background-position: 95% 50%;
        background-color: #000000;
        background-image: url(../images/navbar_bg_hover.jpg);
    BROWSER HACKS: the hacks below should not be changed unless you are an expert
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
        position: absolute;
        z-index: 1010;
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
        ul.MenuBarHorizontal li.MenuBarItemIE
        display: inline;
        f\loat: left;

  • Different background images for 1st / all other pages

    Hello
    I'm trying to set up my templates. Basically not a problem, except for the graphics-part:
    Page 1 of my letters should have a specific background image, while all following pages need a different one.
    Is this possible?
    thanks much in advance!
    david

    See Letterhead and follower sets:
    http://www.freeforum101.com/iworktipsntrick/viewtopic.php?t=182&mforum=iworktips ntrick
    Peter

  • Accordion using different background images on panels

    Hi,
    I'm creating an accordion in Dreamweaver cs3 which has seven
    panels. I would like to use a different background image for each
    panel. I have only managed to use a single image, that ends up on
    all the panels. Any ideas on this?

    It worked!!! a BIG hug to U..
    quote:
    Originally posted by:
    Newsgroup User
    I haven't done this, but I would think it would be pretty
    easy by copying
    the .AccordionPanelTab style code and pasting it over and
    over and then
    changing the class names to .AccordionPanelTab1,
    .AccordionPanelTab2, etc.
    Of course, you would also change the div references in your
    pages.
    Nancy Gill
    Adobe Community Expert
    Author: Dreamweaver 8 e-book for the DMX Zone
    Co-Author: Dreamweaver MX: Instant Troubleshooter (August,
    2003)
    Technical Editor: Dreamweaver CS3: The Missing Manual,
    DMX 2004: The Complete Reference, DMX 2004: A Beginner's
    Guide
    Mastering Macromedia Contribute
    Technical Reviewer: Dynamic Dreamweaver MX/DMX: Advanced PHP
    Web Development
    "Kimson76" <[email protected]> wrote in
    message
    news:fkudd1$1hp$[email protected]..
    > Hi,
    >
    > I'm creating an accordion in Dreamweaver cs3 which has
    seven panels. I
    > would
    > like to use a different background image for each panel.
    I have only
    > managed to
    > use a single image, that ends up on all the panels. Any
    ideas on this?
    >
    > .AccordionPanelTab {
    > height: 30px;
    > background-image:
    >
    url(file:///Macintosh%20HD/Users/kimson.ekman/Desktop/web%20development/challeng
    > er_purple/images/7.jpg);
    > background-repeat: repeat-x;
    > background-color: #122541;
    > border-top: solid 0px #1C3B5A;
    > border-bottom: solid 0px #1C3B5A;
    > margin: 0px;
    > padding: 0px;
    > cursor: pointer;
    > -moz-user-select: none;
    > -khtml-user-select: none;
    >

  • Background images are not rendering while they are in all other browsers.

    Firefox is having problems with certain .jpg images that I have uploaded to a hosting service.
    (Ex: http://img838.imageshack.us/img838/3991/hbbgardenorangepop3.jpg)
    When you set this image as your web page's background image, the image will not be rendered. However, if you go directly to the URL, the image will be rendered (except in the Beta release, where the image won't even render when you go to the URL directly).
    However, if you go to ANY other browser, the image is rendered correctly (both when you go directly to the URL and when you use the image as your background).
    == This happened ==
    Every time Firefox opened
    == Today ==
    == User Agent ==
    Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/533.4 (KHTML, like Gecko) Chrome/5.0.375.125 Safari/533.4

    I assume that you want to add that image as a background on web pages.
    How are you adding that background image?
    Are you using code in userContent.css ?
    If that is the case then please post the code, otherwise provide the steps so we can check what goes wrong.

  • Is there a way to control how a background images appear on all browsers?

    I have created a site that includes a fixed background image so that the only thing that scrolls is the main container that holds all the content. But I don't want it tiled. I want this one image to fill the entire screen behind the container. Is this possible to control from my end (by settings or by sizing the image in a certain way) or is this something that I can't control at all?

    This http://www.onextrapixel.com/2012/03/02/using-css-background-size-responsively/ may help

  • Background image displays differently when published

    I am using Captivate 5. I did a software simulation  and in Captivate the background image is correct (the one on the left) but when i preview it or publish it and view in the browser the colors are off (second image) ..I tried to play around with the brightness/sharpness but it did nothing dramatic...any suggestions?
    Hi,

    Hi there
    Generally speaking, Optimized ofen works well too. I'm unsure of the file size differences (if any) between the two settings. Because the image quality improves it would be logical to assume that the file size will increase.
    Cheers... Rick
    Helpful and Handy Links
    Begin learning Captivate 5 moments from now! $29.95
    Captivate Wish Form/Bug Reporting Form
    Adobe Certified Captivate Training
    SorcererStone Blog
    Captivate eBooks

  • How to add two different background images - left and right

    I want to get something like this

    The way I have done that is to create the right image as a full width image and then place the left hand image over top and stretch the image to the left hand side of the page.
    Use background images on boxes instead of page background. I have done something similiar in the header of this site:
    http://www.signalpointdining.ca

  • How to get background image to fill the browser and remain fixed in both IE and Firefox?

    Basically what it says in the title. I've come very close in achieving this but something just doesn't tie up in the html and css code...
    First of all, I'm using IE8 and the latest version of Firefox to test this.
    I used 2 sources of information for getting this done: 1) http://css-tricks.com/perfect-full-page-background-image/ and 2) http://stackoverflow.com/questions/8958697/css3-background-size-cover-doesnt-make-image-co ver-vertically
    In Case 1 the example on the page called CSS-Only Technique #1 gives code that works almost perfectly for me, except that obviously I need a background image, however the CSS provided there is clearly just for an image dropped in the body of a page with no regard for other content that may already be there. The html code that I put on the page is simply <img class="bg" src="../images/background_image.jpg">
    Obviously I used the CSS code provided in the example, minus the last bit which is "@media screen" etc etc, which seems irrelevant to me. Obviously substituting values to suit the image on my page.
    So what happened is that it almost worked as intended in both the browsers (which means the image filled both browsers width-wise as intended and also remained fixed when I zoomed in or out in each case) except that the image went over the top of the current content that I had there already precisely because it's not a background in this "technique". (A curious side-note is that the image didn't push down the content, as I'd have expected in normal circumstances, but went right over the top of it so it hid it (like z-index).
    One thing that does bother me about this "technique" is that if you click on View Demo just below the code provided you will see on the working example page (forest background) the image clearly works as a background and the content sits happily on top! So I don't know whether the person providing the example was trying to mislead people or what! Or he got lazy and showed a different page that didn't use the exact code he provided. No matter.
    In any case this leaves me with the job only half finished, as I still need a background image that works like the 'normal image' code provided.
    On to Case 2 and on this page the first example provided gives the CSS for the background image - namely the code within html {...} part and also shows the same 'normal image' code as given in Case 1. In this case however, although the person provided a suggestion, the css and html doesn't really tie up properly plus some of the css and html seems a bit redundant. So this time when I used the 'html portion' of the CSS code (i.e. just the bit that was most relevant) I got two different behaviours in each browser and neither of which was quite what I'm looking for. In IE8 initially the page looks fine (background fills the page and content is on top) however when I zoom in or out the background also zooms in or out accordingly so is NOT fixed. In Firefox the background image DOES stay fixed, however because the image originally is not the whole height of the browser I'm guessing the code stretches it downwards (while keeping proportions - so the image essentially enlarges) to fill all of it. The quick way to get around it is to probably add some white space to the bottom of the image just to give it enough height that it doesn't stretch/resize automatically. But it would be nice to find out anyway how to get around this in the code. Overall I would say that the result in Firefox comes closest to the desired solution but of course it doesn't help matters with IE8.
    Apologies for the lengthy description but that should at least provide plenty info for anybody that might have a possible solution for me. Essentially what would be great is if somebody could advise me how to take the code from Case 1 and apply it to a 'background' piece of coding like the type that's contained within html {...} in Case 2. Like I said, it's so nearly there but I just can't make it work atm after trying to combine the various bits of code this way and that... Alternatively, if somebody has another html-css version that works nicely for achieving this then please by all means let me know! Thanks v much in advance!

    This works in modern CSS3 supporting browsers.  But not pre-IE9.
    http://alt-web.com/TEST/Resizable-BG.shtml
    Nancy O.

  • Problems with the background image in IE

    Hi I've been optimizing some pages for the different browsers in Dreamweaver CS4. They all work fine in Safari, Firefox and Opera, Internet Explorer is, however not showing the background image I have selected. I can't for the life of me see what's going wrong! Any help wopuld be appreciated. here is the code on my index page which I built from a template. I don't know if it's the editable areas that are going wrong!
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>test site</title>
    <!-- InstanceEndEditable -->
    <link href="oneColFixCtrHdr.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    body {
    background-repeat: repeat-x;
    background-image:url(file:///Macintosh HD/Users/me/Documents/websites/face_divorce/test/images/test_back.png);
    .oneColFixCtrHdr #container {
    width: 770px;
    margin: 0 auto;
    border: 0;
    padding: 0;
    .oneColFixCtrHdr #header {
    text-align: centre;
    border: 0;
    padding: 0;
    .oneColFixCtrHdr #header h1 {
    <img src="../images/test_logo.png"
    margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
    padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
    font-size: x-large;
    text-align: right;
    .oneColFixCtrHdr #mainContent {
    padding: 0;
    .oneColFixCtrHdr #footer p {
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
    padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
    font-family: Verdana, Geneva, sans-serif;
    color: #6699cc;
    font-size: 9px;
    font-style: normal;
    line-height: normal;
    font-weight: lighter;
        text-align: center;
    -->
    </style>
    <!-- InstanceBeginEditable name="head" -->
    <meta name="Description" content="facedivorce.com.com is an online resource tool to help guide you through the various stages of divorce.  Simply click on before, during or after divorce to find everything you could ever need to do with divorce.
    " />
    </head><meta name="keywords" content="test
    " />
    <!-- InstanceEndEditable -->
    <body class="oneColFixCtrHdr">
    <div id="container">
      <div class="oneColFixCtrHdr" id="header">
        <table width="740" border="0" align="center">
          <tr>
            <td  border="0" height="38" ></td>
            <td align="right" valign="bottom"><!-- InstanceBeginEditable name="HeaderLinks" -->
              <p class="TextButtons"><a href="index.html" class="TextButtons">Home</a>   <a href="featuredcompany.html" class="TextButtons">Featured Company</a>   <a href="youngpeople.html" class="TextButtons">Young People</a>    <a href="andmore.html" class="TextButtons">And More</a>    <a href="blog/index.html" class="TextButtons">Blog</a></p>
            <!-- InstanceEndEditable --></td>
          </tr>
          <tr>
            <th height="48" align="left" valign="bottom">
    <h1><a href="index.html" title="test"><img src="images/test_logo.png" alt="test" width="245" height="46" border="0" align="left" /></a></h1>
    </th>
            <td align="right" valign="bottom"><!-- InstanceBeginEditable name="HeaderButtons" --><a href="#"><img src="images/facebook-logo.png" alt="FaceBook Button" width="48" height="48" border="0" align="bottom" /></a> <a href="#"><img src="images/twitter_square.png" alt="Twitter Button" width="48" height="48" border="0" align="bottom" /></a><a href="#"><img src="images/blogbutton.png" alt="Blog Button" width="49" height="47" border="0" align="bottom" /></a>    <!-- InstanceEndEditable --></td>
          </tr>
        </table>
        <!-- end #header -->

    Hi
    The fact you are using a Mac is why both myself and JCellini assumed you where using a pre IE7 version.
    But the code you are using to test in IE will cause a problem with any 'virtual machine' such as crossover, because it cannot reference anything outside its own assigned section of the drive, and referencing the png in the way you are would be for it an invalid reference, it also would not work in any browser when you uploaded the site.
    Change - background-image:url(file:///Macintosh  HD/Users/myname/Documents/websites/test/Test/images/test_back.png);
    To - background-image:url(images/test_back.png);
    But if the region is not editable I would suggest you temporarily make it so, externalize your css to a css file, insert a link to the external css file in your head content, then lock the region once again. This way you will always be able to edit your css without worrying about 'locked regions'.
    PZ
    www.pziecina.com

  • Background image instead of color for each sliding panel

    I'm working with sliding panels and trying to add some style to the page.  I have figured out how to put a different background color on each slide and even how to put a background image on the whole thing, but  I cannot figure out how to use multiple images (one for each pannel). When I put the images in place of the colors it works fine in the Dreamweaver screen but totally disapears in a web browser.  Here is the url:    http://www.centerofdiscovery.com/the_center_of_discovery_home_page.html
    any help would be great!

    Regarding getting the tabs to sit on top of the content panel, speaking generally here, make the containing div for both the tabs and the content panel to have a margin: 0 auto; setting.This is for horizontal alignment.
    The blue rectangle can be belayed by setting border: none; on the specific rule that applies to the "a" links within that container. It is an indication that there is a link there.
    Please rename the images that have word-spaces in their file names. Some browsers react badly to word-spaces.
    I see that you have
    <p>
      </p><div class="slidingpanelandtab">
        <blockquote>
          <p><a onclick="sp1.showPanel(0); return false;" href="#"><img width="144" height="70" class="oneColFixCtrHdr" src="Images/panneltab.jpg"/></a><a onclick="sp1.showPanel(1); return false;" href="#"><img width="144" height="70" src="Images/panneltabb.jpg"/></a><a onclick="sp1.showPanel(2); return false;" href="#"><img width="144" height="70" src="Images/panneltaba.jpg"/></a><a onclick="sp1.showPanel(3); return false;" href="#"><img width="144" height="70" src="Images/panneltabc.jpg"/></a></p>
        </blockquote>
    Which sets off your "slidingpanelandtab" class div with an empty paragraph space <p></p> and then sets off the next section not only with <p></p> paragraph spacing but also with a <blockquote></blockquote>, which will by all rights indent that element.
    I suggest that you get rid of the spurious paragraph tags and the blockquote; that should tighten up your spacing.
    Beth

  • Background image not displaying

    I'm developing pages that will each have a different background image. i've defined a div with the bg image in it and put that div in the code, but the bg image doesn't show up. i've also tried adding a bg color to the div and that doesn't show up either, so i'm sure it's not a path or file name issue. css & code below.
    @import url("./whitespace-reset.css");
    @charset "UTF-8";
    body  {
        margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
        padding: 0;
        text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
        color: #000000;
        font-family: Verdana, Arial, Helvetica, sans-serif;
    #container  {
        width: 761px; /* the auto margins (in conjunction with a width) center the page */
        border: 0;
        text-align: left; /* this overrides the text-align: center on the body element. */
        height: 871px;
        margin: 0;
        padding: 0;
        background: #FFFFFF;
    #header  {
        height: 148px;
        width: 761px;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
    #leftside {
        width: 158px;
        float: left;
        margin-top: -38px;
        padding: 0px 0px 0px 0px;
    #leftside .menu img {
        display: block;
        margin: 0;
    #leftside  ul.menu {
        padding: 0px 0px 0px 0px;
        font-style: none;
        margin: 0;
    #leftside ul.menu li {
        display: inline;
        float: left;
        margin: 0;
        padding: 0;
        list-style: none;
    #leftspacer {
        width: 31px;
        float: left;
        height: 723px;
        margin-top: -38px;
        padding-right: 10px;
        background-image: url(images/home_spacer_left.jpg);
        background-repeat: no-repeat;
    #top  {
        margin-top: 0px;
        height: 38px;
        padding: 0px 0px 0px 0px;
    #top ul.menu {
        margin-top: 0px;
        margin-left: 189px;
        float: left;
        padding: 0px 0px 0px 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        list-style: none;
    #top ul.menu li {
        display: inline;
        list-style: none;
        float: left;
        margin: 0;
        padding: 0;
    #bottom {
        height: 22px;
        left: 468px;
    #bottom ul.menu {
        margin-top: 300px;
        margin-right: -23px;
        float: left;
        margin-left: -61px;
        list-style: none;
    #bottom ul.menu li {
        display: inline;
        list-style: none;
        float: left;
    #mainContent  {
        margin: 0px 0px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
        padding: 0 0 0 0;
    #facilitiesContent {
        background: #990000 url(images/facilities_bg.jpg) repeat;
        padding: 0;
        height: 208px;
        margin: 0;
        width: 573px;
    #footer  {
        padding: 0; /* this padding matches the left alignment of the elements in the divs that appear above it. */
        background:#c0b7b2;
        height: 22px;
    #threepix {
        margin-left: 189px;
        margin-right: 0px;
        height: 114px;
    #col1 {
        position: relative;
    #col1-a {
        position: absolute;
        width: 275px;
        right: 0px;
        top: 0px;
    #col1-b {
        position: absolute;
        right: 0px;
        width: 275px;
        top: 0px;
    #pixcopyleft {
        margin-left: 189px;
        font-size: 1em;
        font-family: Arial, Helvetica, sans-serif;
        margin-top: 10px;
    #pixcopyright {
        font-size: 1em;
        margin-left: 189px;
        font-family: Arial, Helvetica, sans-serif;
        margin-top: 10px;
    #footer ul.menu {
        margin-left: 189px;
        margin-right: 0px;
        margin-top: -22px;
        padding: 0px 0px 0px 0px;
        float: left;
    #footer ul.menu li {
        display: inline;
        list-style: none;
        padding: 0px 0px 0px 0px;
        float: left;
    #footer  p  {
        margin: 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
        padding: 10 0;
    img.imageleft {
        float: left;
        margin-left: 0px;
        padding: 5px 5px 5px 5px;
    img.imageright {
        float: right;
        padding: 5px 0px 5px 5px;
        text-align: right;
    .imagecenter {
        text-align: center;
    .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
        float: right;
        margin-left: 0px;
        padding: 5px 5px 5px 5px;
    .fltlft { /* this class can be used to float an element left in your page */
        float: left;
        margin-right: 8px;
    .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
        clear:both;
        height:0px;
        font-size: 1px;
        line-height: 0px;
    h1 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1em;
        font-weight: bold;
        margin-bottom: 3px;
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "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>Core PIlates Studio </title> 
    <link href="core.css" rel="stylesheet" type="text/css" /> 
    <body bgcolor="#c0b7b2" onload="MM_preloadImages('images/nav_main_ourteam_roll.jpg')"> 
    <!--[if IE 5]> 
    <style type="text/css"> 
    /* place css box model fixes for IE 5* in this conditional comment */ 
    .thrColFixHdr #sidebar1 { width: 180px; } 
    .thrColFixHdr #sidebar2 { width: 190px; } 
    </style> 
    <![endif]--><!--[if IE]> 
    <style type="text/css"> 
    /* place css fixes for all versions of IE in this conditional comment */ 
    .thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; } 
    .thrColFixHdr #mainContent { zoom: 1; } 
    /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */ 
    </style> 
    <![endif]--> 
    <script type="text/javascript"> 
    <!-- 
    function MM_swapImgRestore() { //v3.0 
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; 
    function MM_preloadImages() { //v3.0 
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); 
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) 
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} 
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    //-->
    </script>
    <meta name="description" content="Core Pilates Studio is a classical, fully equipped pilates and Gyrotonic studio convenienly located near Vassar College in Poughkepsie, NY. We offer classical pilates, Gyrotonic and Gyrokinesis in private, semi-private and group sessions." />
    <meta name="keywords" content="core pilates studio, pilates, core, gyrotonic, gryokinesis, joeseph pilates, pilates in poughkeepsie, pilates in ny, pilates in new york" />
    </head>
    <body onload="MM_preloadImages('images/nav_main_home_roll.jpg','images/nav_main_programs_roll.j pg','images/nav_main_schedule_roll.jpg','images/nav_main_rates_roll.jpg','images/nav_main_ ourteam_roll.jpg','images/nav_main_contactus_roll.jpg')">
    <div id="container">
       <div id="header">   
        <img src="images/home_header.jpg" align="left" /><a href="index.html"><img src="images/home_logo_core.jpg"></a>     
      <!-- end #header --></div>
    <div id ="top">
      <ul class="menu">
          <li><a href="facilities.html"><img src="images/subnav_studio_facilities_down.jpg" class="menu"></a></li>
           <li><a href="rates.html"><img src="images/subnav_studio_rates_up.jpg" class="menu"></a></li>
           <li><a href="hours.html"><img src="images/subnav_studio_hours_up.jpg" class="menu"></a></li>
           <li><a href="policies.html"><img src="images/subnav_studio_polocies_up.jpg" class="menu"></a></li>
           <li><a href="directions.html"><img src="images/subnav_studio_directions_up.jpg" class="menu"></a></li>
           <li><a href="contact-us.html"><img src="images/subnav_studio_contactus_up.jpg" class="menu"></a></li>
           <li><img src="images/subnav_studio_back.jpg" class="menu"></li>
      </ul>
      <!-- end #"top" --></div>
      <div id="leftside">
    <ul class="menu">
          <li><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/nav_main_home_roll.jpg',1)"><img src="images/nav_main_home_up.jpg" name="home" width="158" height="39" border="0" id="home" /></a></li>
          <li><a href="programs.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('programs','','images/nav_main_programs_roll.jpg',1)"><img src="images/nav_main_programs_up.jpg" name="programs" width="158" height="39" border="0" id="programs" /></a></li>
          <li><a href="the-studio.html"><img src="images/nav_main_thestudio_down.jpg"></a></li>
          <li><a href="schedule.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('schedule','','images/nav_main_schedule_roll.jpg',1)"><img src="images/nav_main_schedule_up.jpg" name="schedule" width="158" height="39" border="0" id="schedule" /></a></li>
          <li><a href="rates.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('rates','','images/nav_main_rates_roll.jpg',1)"><img src="images/nav_main_rates_up.jpg" name="rates" width="158" height="39" border="0" id="rates" /></a></li>
          <li><a href="contact-us.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact us','','images/nav_main_contactus_roll.jpg',1)"><img src="images/nav_main_contactus_up.jpg" name="contact us" width="158" height="39" border="0" id="contact us" /></a><a href="our-team.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('our team','','images/nav_main_ourteam_roll.jpg',1)"><img src="images/nav_main_ourteam_up.jpg" name="our team" width="158" height="39" border="0" id="our team" /></a></li>
          <li><img src="images/nav_main_space_below.jpg" /></li>
          <li><a href="mailto:[email protected]"><img src="images/home_email.jpg" /></a></li>
          <li><img src="images/home_address.jpg" /></li>
          <li><a href="special-programs.html"><img src="images/home_logo_special.jpg" /></a></li>
       </ul>
    <!-- end #leftside --></div>
    <div id="leftspacer"></div>
    <div id="facilitesContent">
    <div id="pixcopyright"><img src="images/images/facilaties_page_images_03.jpg" class="imageright">
          <h1 align="right">What is Pilates?</h1>
          <div align="right">Whether you're a world class athlete, a couch potato, recovering from an injury, new to excercising, old, young or in between you can benefit from Pilates.</div></div><br /><br />
        <div id="pixcopyright"><img src="images/images/facilaties_page_images_03.jpg" class="imageright">
        <h1 align="right">What is Pilates?</h1>
           <div align="right">Whether you're a world class athlete, a couch potato, recovering from an injury, new to excercising, old, young or in between you can benefit from Pilates.</div></div><br /><br />
      <!-- end #facilitiesContent --></div>
      <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
    <div id="footer">
       <ul class="menu"> 
           <li><img src="images/nav_bottom_left_space.jpg"></a></li>
           <li><a href="index.html"> <img src="images/nav_bottom_home.jpg"></a></li>
           <li><a href="programs.html"> <img src="images/nav_bottom_program.jpg"></a></li>
           <li><a href="the-studio.html"> <img src="images/nav_bottom_thestudio.jpg"></a></li>
           <li><a href="schedule.html"> <img src="images/nav_bottom_schedule.jpg"></a></li>
           <li><a href="rates.html"> <img src="images/nav_bottom_rates.jpg"></a></li>
           <li><a href="our-team.htm"> <img src="images/nav_bottom_ourteam.jpg"></a></li>
           <li><a href="contact-us.html"> <img src="images/nav_bottom_contactus.jpg"></a></li>
       </ul>
      <!-- end #footer --></div> 
    <!-- end #container --></div>
    </body>
    </html>

    Start by fixing the code errors.
    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.elixir.biz%2Fcore%2Ffacilitie s.html
    http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww. elixir.biz%2Fcore%2Ffacilities.html
    Your document type doesn't match your HTML closing tags.  Modify > Page properties > Encoding > choose either HTML or XHTML (transitional) and hit Apply.
    Images require an alt attribute for better web accessibility. If you want to skip this for now and add them later, that's OK.
    but your code won't validate until you add them to each image.
    When you've fixed the code errors, repbulish the page and see if that fixes the problem.
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    http://alt-web.com/
    http://twitter.com/altweb
    http://alt-web.blogspot.com

Maybe you are looking for

  • Lack of Capture Preview in PPro CS5 Using A/D Blackmagic Multibridge Eclipse

    Hi all, Intersting issue here...just purchased and  configured a new Blackmagic Multibridge Eclipse I/O box.  SO far so good  in terms of up/down conversion etc., but having a bit of an issue  establishing a connection with our Sony PVW-2800 Betacam

  • Installing OS X on new hard drive

    I'm having a bit of a problem with my G5. I installed a new hard drive, but can't install OS X onto it. When I run the CD and I have to select a destination drive, nothing comes up. I ran the hardware test and there are no issues with the hard drive,

  • Exception excuting the BPM application

    Hi All, I want to execute my BPM Application. when I selected 'RUN' from the context menu, I got  one exception "java.lang.UnsupportedClassVersionError:bad version number in .class file" . I have imported one wsdl file for automated activity.This WSD

  • Help with an iTunes card

    My daughters friend had created an iTunes account to use her gift card that she received. Now she hasn't use her account or card in a while and now has forgotten what it was. While trying to help her out by creating a new account and using the itunes

  • Auto-lock doesn't work after updating iOS 6.

    I'm using iphone 4s. After updating iOS 6, the auto-lock function doesn't work anymore. I left it for 10 minutes and when i came back, the screen was still on although the auto-lock time is 2 minutes. I tested many times, tried to reboot but it didnt