Background/image alignment varies slightly in different browsers

Hi,
To start, I'm pretty new to Dreamweaver and can't understand html to save my life so please bare with me if this has a simple solution.. I'm learning.:)
I have a site that is finally lining up 100% in Safari, however, when I open it up in Firefox all of the images seemed to have bumped over to the right 1 px, and when opened in Opera they scoot over a bit more (maybe 3 px.) I was wondering if this is because of a scroll-bar that I inserted into one of the cells.. I read something about an uneven number of pixels but can't seem to make any of the coding work. Should the cell length be odd or even?.. or does this matter? Is this even my problem? Or is there a way to simply lock your images to a specific point on the background? Any advice would be very appreciated.. please let me know if you need any more information. Thanks so much!

Posting a link to the example is usually a good way to get started. It's honestly hard to tell what is going on without seeing the source. Most people will say to first validate your HTML: http://validator.w3.org/ ; then your CSS: http://jigsaw.w3.org/css-validator/ . Once those validate, if you are still experiencing issues it is usually because of the way certain browsers interpret certain code in which case you would need to post a link.

Similar Messages

Background image aligning

Hi,
I'm making a website with a background consisting of 3
seperate images, nest to eachother in a table with 3 columns.. The
middle column contains the content of the site and should always
stay in the middle of the window while the columns on the sides
stretch till the borders of the window.
The background images add up to one picture, starting in the
middle and spreading sideways left and right.
I have a problem with the left background image, this one
should start disappearing from the left to the middle as I resize
the window, but I can't make this work, the image disappears
between column 1 and column 2..
I don't know if this explaination is clear,
if anyone can help me, please let me know
kind regards,
Kristof
Belgium

Your page throws two javascript errors when it loads.
1. The first is listed as line 2, but there is no obvious
error there, so
I'm not quite sure of its source.
2. The second is listed as line 93 -
<td width="380" rowspan="2" align="right"
valign="middle"><script
type="text/javascript">
AC_FL_RunContent( 'codebase',....
which means that you put a Flash element on your page, but
did not upload
the associated javascript file -
<script src="Scripts/AC_RunActiveContent.js"
type="text/javascript"></script>
Make sure you upload that Scripts folder too.
Your use of spaces in your file/pathnames is a serious error
onderdelen pics/homepage/knoppen home/home transport
rollover.jpg
Many browsers will see those spaces and think that they have
come to the end
of the path/filename. Never use any punctuation other than
underscores or
hyphens in your file/pathnames. This usage is making it
difficult for me to
debug the page - I don't suppose you could fix that first?
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
==================
"Kristof KMDG" <[email protected]> wrote in
message
news:f7nkgg$gh8$[email protected]..
> you can view it here
>
>
http://users.telenet.be/lemiegre/test/
>
> don't mind the broken links, the problem is on the left
, next to the main
> window, when resizing the window

Background image for whole website not displayed in internet explorer 8

hi,
i created a website in adobe muse and set the browser filling to color to choose a background image.
the background image is displayed well in different browsers BUT not in internet explorer 8.
what can i do to display it also in ie8?
greetings

Could you please provide the URL of the site, and let us check it.

How to build proportionally scaled, full bleed background images correctly

How do I build full bleed proportionally scaled background images that proportionally scale to different sizes of browser windows and without leaving any blank spaces at the right or bottom? How do I make sure that the text also scales proportionally?

With CSS:
body {background: url(your_BGimage.jpg) repeat}
You need to use small, seemless images strips or tiles that are suitable for repeating across and down the page.
http://alt-web.com/Backgrounds.shtml
Large background images or photos do not resize in browser unless you build your site entirely in Flash.
Font-size is dependant upon the end user's browser settings. Viewport size doesn't effect text size.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/

8851 Background Image size

I'm having problems with the thumbnail images on a 8551 phone.
According to the docs at www.cisco.com/c/en/us/td/docs/voice_ip_comm/cuipph/8811_8841_8851_8861/10_5/english/adminguide/P881_BK_A92A3B94_00_adminguide-8811_41_51_61-10_5/P881_BK_A92A3B94_00_adminguide-8811_41_51_61-10_5_chapter_01010.html the thumbnail image sizes for the 8851 are 25% of the main image size (which is 800x480 at 24 bit colour depth so the thumbnail would be 200x120) But a few lines further down, the docs say the image size should be 159x109 (which is NOT 25% of the background image size and is a different aspect ratio.)
I tried to open a couple of the existing thumbnails from Desktops/800x480x24 on my TFTP server, but they don't appear to be regonised as image files by my computer.
I've tried images of 159x109x24 bit colour and 200x120x24 bit colour, all PNG, but none of them work as thumbnails.
What are the specs of the thumbnail files for the 8851 phones?
GTG

Take a look at this bug:
Documentation: background image size/path for 88xx phones is 800x480x24
CSCus27001

Footer background image stretching width of screen

I want to stretch my footer image the full width of the screen to mirror my header. It's easy for the header, as you simply designate this the body background image. The footer is different owing to differing page lengths. Is the only way to do this to take the footer div out of the container div?

Hi pziecina,
Actually, I found a simpler solution by creating a wrapper div for the footer outside the container div. I cannot be bothered to utilize CS3 yet and I absolutely hate conditional comments for IE...
This tutorial explains how to do it:
http://www.sohtanaka.com/web-design/achieving-liquid-backgrounds-with-fixed-content/

MUSE - Rollovers change background image

I want to create 4 button (image thumbnails) that, when you rollover them, the page's background image changes (the background images are different to the thumbnails). And when you rollover a different thumbnail, the background image fades into a different image (again, different to it's thumbnail).
Does anyone know how to achieve this? Ultimately, I'd also like the background image to scroll at a different rate to the thumbnails.

You can use compositions for this where the triggers can be configured with image for different states and target container should be large enough to cover page area , so that when thumbnail is hovered then that specific target will appear thus page background change.
Thanks,
Sanjit

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.
>

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;

Background image is slightly repeating itself in my table

Last week, someone really helped (Murray) in helping me add a
background image to my header table, then nesting another table
inside for my links. I tried to do it manually, however, it just
wouldn't work. He then added some new code and it worked perfectly!
However, I did notice that now the background image in that table
doesn't extend the full length of the table. It cuts of 1/8th of an
inch short and then the image starts to repeat itself. It isn;t
much but doesn't look clean. Any ideas on how to change it to
flush? I tried to manuever the main table of the site over, but it
didn't have an effect. I think the background image just stayed the
same with the change. Thanks for your help once again! Code is
below but had to shorten it since ithis site only allows a certain
amount of text. website is:
www.1percentclub.org
<html>
<he
><title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script language="JavaScript">

</script>
</head>
<style type="text/css">
a {text-decoration: none;}
</style>
<body bgcolor="#000000" text="#CCCCCC" link="#33CCFF"
vlink="#33CCFF" alink="#33CCFF" leftmargin="0" topmargin="0"
marginwidth="0" marginheight="0"
onLoad="MM_preloadImages('/History-Header2008WhiteBord.jpg','/Showcase-Events-LinkWhiteBo .jpg','/Instructional-DVD-2008GLOW.jpg','/Skills-Clinics-Link-2008GLO.jpg','/Contact-Us-Li nkGLOW.jpg','/GameTimeGear-LogoGLOW.jpg','/Playitagainsports-logoGLOW.jpg','/Africa-Link_G LOW.jpg')">
<table width="60%" border="1" cellspacing="0"
cellpadding="0"
bordercolor="#FFFFFF" align="center">
<tr bgcolor="#333333" valign="top" align="center">
<td height="1125">
<div align="left">
<table width="100%" border="0" cellspacing="0"
cellpadding="0"
style="background-image:url(2008-Website-Header_FINAL_-.jpg);">
<tr valign="top">
<td height="289">
<table width="100%" border="0" cellspacing="3"
cellpadding="7">
<tr valign="top">
<td height="40">
<p><font face="Arial"
color="#333333"><b><font size="3"
color="#33FFFF"><a href="homepage.htm"><font
color="#33CCFF">Home
</font></a><font color="#33CCFF">|
</font><font color="#33CCFF"><a
href="centralcalifinest.htm">Showcase
Events</a> | <a href="clinics.htm">Skill
Clinics</a> | <a href="clinics.htm">Team
Clinics</a> | <a href="videos.htm">DVD</a>
| <a href="History.htm">History</a>
| <a href="Contact_1%25_CLUB.htm">Contact
</a></font></font></b></font></p>
</td>
</tr>
</table>
<p><br>
</p>
<p> </p>
<p><br>
</p>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0"
cellpadding="6">
<tr>
<td height="780" align="center" valign="top"
width="25%">
<table width="100%" border="0" cellspacing="0"
cellpadding="0">
<tr align="center" bordercolor="#FFFFFF"
bgcolor="#333333">
<td height="122"><a href="#"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image14','','/History-Header2008WhiteBord.jpg',1)"><img
name="Image14" border="0" src="/HistoryLinkWhite-border.jpg"
width="180" height="118"></a></td>
</tr>
<tr align="center">
<td height="125"><a href="#"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image15','','/Showcase-Events-LinkWhiteBo.jpg',1)"><img
name="Image15" border="0" src="/Showcase-Events-Link2008Whi.jpg"
width="180" height="118"></a></td>

Change this -
<table width="100%" border="0" cellspacing="0"
cellpadding="0"
style="background-image:url(2008-Website-Header_FINAL_-.jpg);">
to this -
<table width="100%" border="0" cellspacing="0"
cellpadding="0"
style="background-image:url(2008-Website-Header_FINAL_-.jpg);background-repeat:no-repeat; ">
It's time for you to apply yourself to learning HTML and CSS.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"dontsettle22" <[email protected]> wrote in
message
news:fnq7cb$a2p$[email protected]..
> Last week, someone really helped (Murray) in helping me
add a background
> image
> to my header table, then nesting another table inside
for my links. I
> tried to
> do it manually, however, it just wouldn't work. He then
added some new
> code
> and it worked perfectly! However, I did notice that now
the background
> image
> in that table doesn't extend the full length of the
table. It cuts of
> 1/8th of
> an inch short and then the image starts to repeat
itself. It isn;t much
> but
> doesn't look clean. Any ideas on how to change it to
flush? I tried to
> manuever the main table of the site over, but it didn't
have an effect. I
> think
> the background image just stayed the same with the
change. Thanks for
> your
> help once again! Code is below but had to shorten it
since ithis site
> only
> allows a certain amount of text.
>

Problem with aligning buttons with background image.

Dear all,
Just an introduction, I am a newbie to dreamweaver and currently hopelessly lost in solving some problems, and wish to seek your advice and help here.
I am creating a webpage with a background that shows a line across near the top of the site. I placed an image with the line as background under the page properties. I am placing buttons on that line, so when I mouse over the buttons, the part of the line above the buttons will darken, showing that the button has been selected.
The image of the buttons include the darken lines and the words. I can align the button lines with the background line when viewing the site in 100%, but on other resolutions or if I zoom in 125% or 150%, the lines are not aligned.
Here is a picture of my dreamweaver working area, where I manually adjust the buttons to align with the background line. The button lines are already not aligned here, but they look aligned on site in 100%.
[IMG]http://i1126.photobucket.com/albums/l614/artbox11/pic1.jpg[/IMG]
Here are how the lines look at 150%. The arrows show where the button lines are not aligned with the background image line.
[IMG]http://i1126.photobucket.com/albums/l614/artbox11/pic2.jpg[/IMG]
Can anyone advise how I can align the button lines with the background image line so that whichever resolution I view the lines will be aligned from side to side? Any tips and advice will be greatly appreciated, as I have been looking around DW for a day now and cannot find out how to fix this.
Thank you!!

Dear Murray, thank you for offering to help, much appreciated.
Here are my codes. I did not write any of the codes though, I just use the design tab and built tables and insert images.
<!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=iso-8859-1" />
<title>Metamorfic</title>
<script type="text/javascript">

</script>
<style type="text/css">

</style>
<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>
</head>
<body onload="MM_preloadImages('Metamorfic Site Files/Button - About 2.jpg','Metamorfic Site Files/Button - Contact 2.jpg')">
<table width="800" border="0" align="center">
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td height="187"> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td width="116" height="32"> </td>
    <td width="552"> </td>
    <td width="110"> </td>
</tr>
</table>
<table width="1100" height="50" border="0" align="center">
<tr>
    <td width="1094" height="46"><table width="672" height="34" border="0" align="center">
      <tr>
        <td width="666" height="30" align="center" valign="bottom"><img src="Metamorfic Site Files/Button - About 1.jpg" width="122" height="28" id="Image3" onmouseover="MM_swapImage('Image3','','Metamorfic Site Files/Button - About 2.jpg',1)" onmouseout="MM_swapImgRestore()" /><img src="Metamorfic Site Files/Button - Contact 1.jpg" width="110" height="28" id="Image6" onmouseover="MM_swapImage('Image6','','Metamorfic Site Files/Button - Contact 2.jpg',1)" onmouseout="MM_swapImgRestore()" /></td>
      </tr>
    </table></td>
</tr>
</table>
<table width="800" border="0" align="center">
<tr>
    <td height="340"> </td>
</tr>
</table>
<table width="800" border="0" align="center">
<tr>
    <td width="300" align="center" valign="middle"> </td>
    <td width="25" align="center" valign="middle"> </td>
    <td width="25" align="center" valign="middle"> </td>
    <td width="25" align="center" valign="middle"> </td>
    <td width="25" align="center" valign="middle"> </td>
    <td width="25" align="center" valign="middle"> </td>
    <td width="25" align="center" valign="middle"> </td>
    <td width="25" align="center" valign="middle"> </td>
    <td width="25" align="center" valign="middle"> </td>
    <td width="300" align="center" valign="middle"> </td>
</tr>
</table>
<p> </p>
</body>
</html>

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>


CHILD PAGE CODE:
<head>
<style type="text/css">
.mainbackground {
background-image:url(page2-BG.jpg)
</style>
</head>
Give it a try.
Nancy O.

Aligning a background image, is that possible?

I have a problem with my background image. I want to align it
on the right side and 168 pixels down from the top of my webpage
but I can't find a way to aligning it on the right side or any side
for that matter. I use Dreamwever 8. Is my request impossible or is
there some way to do this? I would really appreciate anyone's help
since I seem to be stuck in my webpage making!

Use CSS -
background-position: right 168px;
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
==================
"OfCorrs" <[email protected]> wrote in
message
news:e80kee$e02$[email protected]..
>I have a problem with my background image. I want to
align it on the right
>side
> and 168 pixels down from the top of my webpage but I
can't find a way to
> aligning it on the right side or any side for that
matter. I use
> Dreamwever 8.
> Is my request impossible or is there some way to do
this? I would really
> appreciate anyone's help since I seam to be stuck in my
webpage making!
>

Background/image alignment varies slightly in different browsers

Similar Messages

Maybe you are looking for