Content background positie not good

'm Working on a website to make
http://www.aurelie-en-sven.be/cover.html
IE7 is in the perfect, but Firefox and Safari have much else
to see.
The content background position is too high or too low.
What do I use the best setting to get this correct?
Thank you for your remarks
Frederik

Then when you have done that, change this -
<div id="container">
<div id="header"
style="height:30px;margin-top:125px;">
to this -
<div id="container" style="padding-top:125px;">
<div id="header" style="height:30px;">
and see what happens.
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
==================
"Frederik10en" <[email protected]> wrote in
message
news:[email protected]...
> 'm Working on a website to make
>
http://www.aurelie-en-sven.be/cover.html
>
> IE7 is in the perfect, but Firefox and Safari have much
else to see.
> The content background position is too high or too low.
>
> What do I use the best setting to get this correct?
>
> Thank you for your remarks
>
>
> Frederik
>
>
>
>
> <!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>Naamloos document</title>
> <link href="../CSS/kleine-achtergrond945-795.css"
rel="stylesheet"
> type="text/css" />
> <script src="../SpryAssets/SpryMenuBar.js"
> type="text/javascript"></script>
> <link href="../SpryAssets/SpryMenuBarHorizontal.css"
rel="stylesheet"
> type="text/css" />
> </head>
> <body class="oneColFixCtrHdr">
> <div id="container"
style="margin-top:0px;background-position:margin-top:
> auto;">
> <div id="header"
style="height:30px;margin-top:125px;">
> <ul id="MenuBar1" class="MenuBarHorizontal">
> <li><a href="../index.html"
title="Home">Home</a> </li>
> <li><a href="#"
title="Cover">Cover</a></li>
> <li><a href="#"
title="Foto's">Foto's</a></li>
> <li><a href="#"
title="Slideshow">Slideshow</a></li>
> <li><a href="#"
title="Gastenboek">Gastenboek</a></li>
> <li><a href="#"
title="Contact">Contact</a> </li>
> <li><a href="#"
title="Bedankt">Bedankt</a></li>
> </ul>
> </div>
> <div id="mainContent">
> <h1>Hoofdinhoud </h1>
> <p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Praesent
> aliquam, justo convallis luctus rutrum, erat nulla
fermentum diam, at
> nonummy
> quam ante ac quam. Maecenas urna purus, fermentum id,
molestie in,
> commodo
> porttitor, felis. Nam blandit quam ut lacus. Quisque
ornare risus quis
> ligula.
> Phasellus tristique purus a augue condimentum
adipiscing. Aenean
> sagittis.
> Etiam leo pede, rhoncus venenatis, tristique in,
vulputate at, odio.
> Donec et
> ipsum et sapien vehicula nonummy. Suspendisse potenti.
Fusce varius urna
> id
> quam. Sed neque mi, varius eget, tincidunt nec, suscipit
id, libero. In
> eget
> purus. Vestibulum ut nisl. Donec eu mi sed turpis
feugiat feugiat.
> Integer
> turpis arcu, pellentesque eget, cursus et, fermentum ut,
sapien. Fusce
> metus
> mi, eleifend sollicitudin, molestie id, varius et, nibh.
Donec nec
> libero.</p>
> <h2>Kop niveau H2 </h2>
> <p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Praesent
> aliquam, justo convallis luctus rutrum, erat nulla
fermentum diam, at
> nonummy
> quam ante ac quam. Maecenas urna purus, fermentum id,
molestie in,
> commodo
> porttitor, felis. Nam blandit quam ut lacus. Quisque
ornare risus quis
> ligula.
> Phasellus tristique purus a augue condimentum
adipiscing. Aenean
> sagittis.
> Etiam leo pede, rhoncus venenatis, tristique in,
vulputate at, odio.</p>
> </div>
> <div id="footer">
> <p>Aurelie en Sven bedanken u voor uw bezoek op
deze Online
> Trouwablbum</p>
> </div>
> </div>
> <script type="text/javascript">
> 
> </script>
> </body>
> </html>
>
>
>
>
> ----------------------------------------------------
>
> @charset "utf-8";
> body {
> margin: 0; /* het is een goede gewoonte om de
instellingen voor margin
> (marge) en padding (opvulling) van het element body op
nul in te stellen
> en
> daarmee op de standaardinstellingen van de verschillende
browsers */
> padding: 0;
> text-align: center; /* hiermee centreert u de container
(het hoofdobject)
> in
> IE 5*-browsers Vervolgens wordt de tekst ingesteld op de
> standaardinstelling
> van links uitlijnen in de kiezer #container */
> color: #000000;
> background-image:
>
url(../ACHTERGRONDEN/kleineachtergrond2-hartjes-alleen.jpg);
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 10px;
> background-repeat: no-repeat;
> background-position: center top;
> }
> .oneColFixCtrHdr #container {
> width: 945px; /* de automatische marges (d.m.v. auto),
in combinatie met
> een
> breedte, centreren de pagina */
> border: 0px none #000000;
> text-align: left; /* hiermee wordt de instelling
text-align: center voor
> het
> element body genegeerd. */
> background-image:
url(../ACHTERGRONDEN/kleineachtergrondcontent3.gif);
> margin-top: auto;
> margin-right: auto;
> margin-bottom: 0;
> margin-left: auto;
> background-repeat: no-repeat;
> background-position: center top;
> height: 795px;
> top: 0px;
> }
> .oneColFixCtrHdr #header {
> height: 10px;
> padding-right: 0px;
> padding-bottom: 0;
> padding-left: 0px;
> margin-top: 0px;
> margin-left: 300px;
> margin-right: 40px;
> }
> .oneColFixCtrHdr #header h1 {
> margin: 0; /* door de marge van het laatste element in
het element div
> voor
> #header op 0 in te stellen voorkomt u het wegvallen van
marges ? een
> onverklaarbare ruimte tussen div-elementen. Als om het
element div een
> rand
> loopt, is dit niet nodig aangezien dit tevens het
wegvallen van de marge
> voorkomt */
> padding: 10px 0; /* door het gebruik van padding
(opvulling) in plaats
> van
> een marge (via het element margin) kunt u het element
van de randen van
> het
> element div vandaan houden */
> }
> .oneColFixCtrHdr #mainContent {
> width: 670px;
> padding-top: 0;
> padding-right: 0px;
> padding-bottom: 0;
> padding-left: 0px;
> height: 480px;
> margin-top: 5px;
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 12px;
> color: #000000;
> margin-left: 235px;
> text-align: center;
> }
> .FOTOLINKS {
> float: left;
> margin-right: 20px;
> }
>
> .oneColFixCtrHdr #footer {
> margin-top: 100px;
> margin-bottom: 0px;
> margin-left: 265px;
> padding-top: 0;
> padding-right: 10px;
> padding-bottom: 0;
> padding-left: 10px;
> width: 600px;
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 12px;
> font-style: italic;
> font-weight: bold;
> color: #6699FF;
> }
> .oneColFixCtrHdr #footer p {
> margin: 0; /* door de marges van het eerste element in
de footer
> (voettekst)
> in te stellen op 0 vermijdt u het risico dat de marge
wegvalt ? een ruimte
> tussen div-elementen */
> padding: 10px 0; /* door het gebruik van padding
(opvulling) voor dit
> element
> maakt u ruimte (op dezelfde manier als door middel van
een marge), zonder
> het
> probleem van wegvallende marges */
>

Similar Messages

CSS- Background img not showing up in container

Hello, I am new to css but not to webpages. I used to design
pages using tables and now I want to learn and design using css.
But I'm having trouble and I figure its a quick fix. Note this
website is not on line I am doing my test use IE 7 and Firefox ver
2 PC Ver.
Q: I'm trying to design a website for a client and I am have
trouble try to get my background img to show up in my #container.
Here is sample of my basic layout. Hope some could help me.
@charset "utf-8";
body {
background-color: #271a0b;
background-image: url(../images/bgStrip.gif);
background-repeat: repeat-x;
#container {
width: 100%;
height: 900px;
overflow: hidden;
background-image: url(/images/backGround.jpg);
background-repeat: no-repeat;
background-position: 0;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
<link href="asset/screen.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<div id="container">Content for id
"container" Goes Here</div>
</body>
</html>
body background is working. Note: Got the codes samples from
CSS Cookbook, good book learning allot but can't seem to get it to
work. Hope some could help me.

If the page in question is one level below the root of the
site, and if the
images folder is at the same level as the root of the site,
then both links
would be correct.
Also, since background-position defaults to "0", there's no
reason to
restate it.
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
==================
"Virginia Carter" <[email protected]>
wrote in message
news:[email protected]...
> Without seeing the page on the web, it's somewhat
difficult to see exactly
> where the problem is, but this is curious:
>
> body {
> background-color: #271a0b;
> background-image: url(../images/bgStrip.gif);
> background-repeat: repeat-x;
> }
>
> #container {
> width: 100%;
> height: 900px;
> overflow: hidden;
> background-image: url(/images/backGround.jpg);
background-repeat:
> no-repeat;
> background-position: 0;
> }
>
> It's looking in two different places for those images:
>
> ../images and /images
>
> Check that and then see if you still have troubles.
>
> --
>
> Virginia Carter
> Carolina Web Creations
> ======================
> www.carolinawebcreations.biz
>
> borgru12 wrote:
>> Hello, I am new to css but not to webpages. I used
to design pages using
>> tables and now I want to learn and design using css.
But I'm having
>> trouble and I figure its a quick fix. Note this
website is not on line I
>> am doing my test use IE 7 and Firefox ver 2 PC Ver.
>>
>> Q: I'm trying to design a website for a client and I
am have trouble try
>> to get my background img to show up in my
#container. Here is sample of
>> my basic layout. Hope some could help me.
>> @charset "utf-8";
>>
>> body {
>> background-color: #271a0b;
>> background-image: url(../images/bgStrip.gif);
>> background-repeat: repeat-x;
>> }
>>
>> #container {
>> width: 100%;
>> height: 900px;
>> overflow: hidden;
>> background-image: url(/images/backGround.jpg);
background-repeat:
>> no-repeat;
>> background-position: 0;
>> }
>>
>>
>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
>> "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
>> <html xmlns="
http://www.w3.org/1999/xhtml">
>> <head>
>> <meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
>> <title>Untitled Document</title>
>>
>> <link href="asset/screen.css" rel="stylesheet"
type="text/css" />
>> </head>
>>
>> <body> <div id="container">Content for
id 'container' Goes Here</div>
>>
>> </body>
>> </html>
>>
>>
>> body background is working. Note: Got the codes
samples from CSS
>> Cookbook, good book learning allot but can't seem to
get it to work. Hope
>> some could help me.
>>

Background Position: 2 pages, same code, different outcome...

Hey guys,
    I have finished a site that uses the code following CSS:
body {
          background-color: #383637;
          background-image: url(Images/All-Background-Image.jpg);
          background-repeat: no-repeat;
          background-position: center bottom;
          margin: 0px;
    padding: 0px;
This code is the same across all pages yet on the index the background does not position itself at the bottom of the screen, it only centers itself, all of the other pages work. Here is the site:
http://christianstest.info//CherryHillRecreation/Grangerfun.com/Live%20to%20Web/index.html
You can click the blue tabs to see what I mean... I only noticed it on a screen with a resolution with a height of more than 800pixals, otherwise you can't tell I don't believe... any Ideas why this is happening?

The background attached to the body tag like that without being absolute positioned will appear at the bottom of the content, not necessarily the page. The home page is too short for that to stick to the bottom. You should try adding the background into the html tag, instead of body and setting the height to 100%. This could solve it.
html {
          background-color: #383637;
          background-image: url(Images/All-Background-Image.jpg);
          background-repeat: no-repeat;
          background-position: center bottom;
          margin: 0px;
          padding: 0px;
          height:100%;

Background movie not centered

i have a quicktime movie 720x540 that i've imported as the background movie but it's not centering it. it's cropping/shifting it. anyone know anything about this? can't find any info about the issue. tried different sizes and still no good.

Simplify your CSS with shorthand.
body {
overflow:hidden;
background-image: url(../assets/images/bg.jpg);
background-position-x: 50%;
background-position-y: 0%;
background-position: center top;
background-color: #000000;
background-repeat: no-repeat;
body {
background: #000 url(../assets/images/bg.jpg) no-repeat center center;
Nancy O.

Spry Menu Background image not working in IE

I have created a website using Dreamweaver CS5 and having trouble with my Spry bar in internet explorer. It looks great in chrome, firefox, etc, but in IE there is a white background instead of my background image and the submenus have moved WAY right.. can someone help me!
SpryMenuBarHorizontal.CSS is below:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* 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;
font-size: 100%;
cursor: default;
width: 800px;
/* 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;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: 160px;
float: left;
background-image: url(file:///E|/MAIN_website/images/menu_background.jpg);
ul.MenuBarHorizontal li a{
color:#FFF;
ul.MenuBarHorizontal li li{
background-image: url(../images/menu_background1.jpg);
ul.MenuBarHorizontal li li a{
color:#000;
ul.MenuBarHorizontal li li li{
background-image: url(file:///E|/MAIN_website/images/index_06.jpg);
ul.MenuBarHorizontal li li li a{
color:#FFF;
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover,
ul.MenuBarHorizontal a.MenuBarSubmenuVisible{
color:#33CCFF;
/* 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;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
/* 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;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 160px;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 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;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
font-family: Cambria, Arial, sans-serif;
font-size: 14px;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #FFF;
text-decoration: underline;
/* [disabled]background-image: url(file:///E|/MAIN_website/images/menu_background.jpg); */
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #33C;
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* 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-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* 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 ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* 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-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* 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 ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
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;
filter:alpha(opacity:0.1);
/* 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: #FFF;

Because I can't see your site and code in context, I will make a guess that this style is throwing off your alignment:
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: 160px;
float: left;
background-image: url(file:///E|/MAIN_website/images/menu_background.jpg);
Remove the text-align:center; from the above style.
Instead of centering your list element (li), center the link text (a) itself:
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #FFF;
text-align: center;
text-decoration: none;
font-family: Cambria, Arial, sans-serif;
font-size: 14px;
If you don't want the submenu text to be centered, do this immediately after the previous style:
ul.MenuBarHorizontal ul a {text-align: left;}
The sub-submenus are also set up by default to be jogged a bit to the right. You can adjust this style:
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
that causes sub-submenus to fly out to the right of the submenus to which they attach.
Submenus themselves (not the sub-submenus) should fall directly under the top menu item by default, once you remove the text-align: center; on the li item (above).
Beth

Background Image Not Visible in Browser

I have searched the forum but I'm not finding a solution that
works.
I'm trying to put a background .png image in a header. It
shows up in Dreamweaver but not in preview mode. I have an external
style sheet that contains this:
.twoColFixRtHdr #header {
background-repeat: no-repeat;
height: 126px;
width: 770px;
padding: 0;
background-position: left top;
margin: 0px;
background-image: url(assets/pictures/banner_3.png);
My page contains the following:
<div id="header">
<h1 class="banner_title_top">Text</h1>
<h1><span class="banner_title_bottom">Text
</span>

</h1>
The ".twoColFixRtHdr" is coming from the fact that I'm using
a pre-made Dw CSS layout.
Any help is very appreciated.
Jason

Should have made no difference.
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
==================
"j-hill" <[email protected]> wrote in
message
news:fb4cnk$fku$[email protected]..
> Out of desperation I tried to convert my image to a .jpg
and it seems to
> be working fine.
>
> Thanks,
> Jason

Background job not deleted

Hi Experts,
i want delete the "SM:SELFDIAGNOSIS" background job on solution manager system .
and i have deleted, go to next date and then delete the released job but after one day again its showing in released.
so how i can delete it properly .
Regards
jai kr.

Shiv,
First check the frequency of this job from SM37
Go to SM37 -> give your job name ->and select all the options like
delete the entries in start date and end date fileds. then execute.
If you find job in Released state ,simply go to menu Job -> click on release to schedule.
Now this job will in Schedule and won't run untill you release it.
Deleting the jobs is not good idea ,simply you can suspend it.
Regards,
Srinivas Chapa.

Apple customer service representative says: "FaceTime is not good. Don't use it."

The other day my friend and I were trying to chat using FaceTime. She keep getting connection error. We were both on WiFi network. Both of us have our Apple IDs set up on the phone. In the past I successfully used FaceTime to chat with other friends, so the problem is likely at her side. She called Apple's customer service number in her area (China), described the problem. To her surprise, instead of being asked about the details, she was told "FaceTime is not good, don't try to use it." If this is really Apple's official attitude towards FaceTIme, why would it release this product? Or, is FaceTime suppose to be only among US users?

I doubt if that is Apples official position, and it is a shame it was said to your friend.
Your friend is in China, where are you? I ask because the longer the distance between network connections the more likely connection errors can occur.

Main content text does not scale down on iPhone

Hello my Dreamweaver friends,
I'm working on a site for a friend -- a simple fixed width layout (header, footer, sidebar and main content). It looks good on Safari and Firefox. But on the iPhone and iTouch the text in the mainContent area does not scale down to size with the <h> tags and the links on the Spry navigation bar. Is there a reason for that? Is there something I could do so that it all scales down?
Another problem is that the right border I put on the Spry Navigation menu doesn't appear on my version of Internet Explorer.
The link to the page, for what its worth, is http://www.daveharrison.info/tzs/index.html
Thanks for any help!

12 tips for iPhone Web Design
http://articles.sitepoint.com/article/iphone-development-12-tips
Also see this working Demo with media queries. Resize your non-IE browser viewport and see what happens.
http://alt-web.com/TEMPLATES/CSS-centered-round-boxes.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Background does not appear after applying template

CS4
template defined and saved in template folder.
when applying template to new html page, all transfers but background image does not appear, url is in code but does not find file. any ideas???
body {
background-image: url(file:///F|/projects/BBMD Projects/bbmd site v2/images/bridgelv2.jpg);
background-repeat: no-repeat;
background-color: #D2D2D2;
background-attachment: fixed;
background-position: 75px top;
height: 400px;
width: 600px;
position: inherit;
overflow: scroll;
top: auto;
left: auto;
right: inherit;
font-family: "Lucida Console", Monaco, monospace;
font-size: small;
font-style: normal;
color: #000;
border-top-style: none;
text-align: left;
vertical-align: top;
bottom: auto;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;

template defined and saved in template folder.
when applying template to new html page, all transfers but background image does not appear, url is in code but does not find file. any ideas???
If this is a new site and a newly created template, you DON'T need to 'apply' the template.
The best way to create new child pages is to :
FILE>New>Page from Template
There will be a list of any templates you've created, select the correct one and press create. Child page created :-)
Save as newpagename.html (not inside the Template folder though !)
PS; as others have pointed out, the link to the background image is incorrect it's pointing to your harddrive. Is the file within the defined site working folder?
Nadia
Adobe® Community Expert : Dreamweaver
Unique CSS Templates | Tutorials | SEO Articles
http://www.DreamweaverResources.com
Web Design & Development
http://www.perrelink.com.au
http://twitter.com/nadiap

Css background-position problem

Hello, I get a problem with this style:
<style type="text/css" media="screen">
html {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
body {
background-color:#ffffff;
background-image:url(images/myimage.jpg);
background-position: center bottom;
background-repeat:repeat-x;
</style>
In ie7 works fine, in firefox 2 the bottom position doesn't
work...
Any suggestion ?
Thanks
howdy

Hello, this is the page, simply copy and paste.
<!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>test background</title>
<style type="text/css" media="screen">
html {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
body {
background-color:#ffffff;
background-image:url(
http://img179.imageshack.us/img179/2401/backgroundkc8.jpg);
background-position: center bottom;
background-repeat:repeat-x;
#layer1{
text-align: center;
width: 300px;
margin-right: auto;
margin-left: auto;
border: 2px double #003333;
</style>
</head>
<body>
<div id="layer1">Lorem ipsum dolor sit amet,
consectetuer adipiscing
elit. Quisque cursus, justo a tincidunt volutpat, dui orci
feugiat
justo, at varius odio est quis turpis. Integer nisl enim,
condimentum
et, eleifend et, posuere quis, risus. Nam convallis. Integer
diam dui,
accumsan mattis, dignissim at, dictum rutrum, justo. Praesent
lacinia.
Cras a diam. Aenean quis elit. Duis mauris erat, aliquet nec,
malesuada
laoreet, aliquam sit amet, magna. Ut turpis metus,
sollicitudin ac,
fermentum non, pretium eu, augue. Nunc faucibus, leo eu
pharetra
ultrices, sem augue ultricies risus, at egestas velit lectus
ac velit.
Suspendisse pretium nibh dapibus turpis. Praesent felis mi,
vestibulum
eu, pellentesque et, consequat eu, ante. Nulla accumsan enim
et pede.
Suspendisse potenti.
Donec eget nulla. Proin et est. Integer volutpat, dolor
scelerisque
bibendum egestas, lacus dui venenatis odio, vitae varius
massa eros sit
amet ligula. Curabitur tellus. Curabitur ultricies volutpat
tellus. In
sodales. Duis cursus mi eu dui placerat porta. Mauris laoreet
turpis at
nunc. Vivamus volutpat, metus dignissim accumsan hendrerit,
turpis
turpis aliquet nulla, non viverra dui dui quis quam. Mauris
sem nunc,
laoreet in, elementum vitae, tempor a, libero. Cras ac turpis
sit amet
risus cursus ultrices. Sed id quam.
Nulla tortor ligula, adipiscing nec, ornare eu, gravida in,
justo. Sed
elementum vestibulum lectus. Mauris lectus mauris, convallis
nec,
posuere quis, lacinia at, felis. Vestibulum ante ipsum primis
in
faucibus orci luctus et ultrices posuere cubilia Curae;
Aenean cursus
quam eget dui. Maecenas sapien. Aenean pellentesque lobortis
mi. Quisque
tempor ipsum in libero. Pellentesque habitant morbi tristique
senectus
et netus et malesuada fames ac turpis egestas. Class aptent
taciti
sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos.
Quisque lacus tellus, ornare quis, euismod et, lacinia sed,
justo. Proin
auctor nisi sed tortor. Fusce in justo et nisl fermentum
vehicula.
Quisque urna felis, lacinia at, viverra in, fermentum ut,
lacus. Duis
tempus. Morbi bibendum libero vitae diam faucibus placerat.
Praesent eu sapien. Sed ut velit quis magna lobortis
malesuada.
Phasellus dignissim risus ac est. Pellentesque semper sem.
Donec porta
nulla nec quam. Pellentesque aliquet risus id quam. Proin
tincidunt erat
nec nunc. Praesent euismod fringilla ipsum. Donec ornare.
Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia
Curae; Sed leo.
Proin non nisi non neque porta tempus. Proin varius velit eu
sapien.
Pellentesque pulvinar arcu id ante. Nunc eu diam. Phasellus
euismod,
felis in scelerisque pharetra, diam augue eleifend mi, a
rutrum mauris
arcu nec orci. Proin sed erat. Pellentesque et libero.
Aliquam ante
velit, ultrices ut, fermentum ac, cursus ut, est. Etiam vitae
nisl ac
metus cursus viverra. Proin non felis. Donec massa. Nullam
quam lectus,
pulvinar eget, condimentum at, tristique in, quam. Proin
vehicula
elementum diam. Proin sapien. Praesent suscipit, lorem at
dapibus
fringilla, orci elit facilisis lacus, at dictum augue velit
quis enim.
Mauris eu mauris. Aliquam rhoncus fermentum pede. Vestibulum
gravida
vulputate mauris.
Pellentesque consectetuer. Cras tellus justo, iaculis vitae,
semper at,
scelerisque porta, tortor. Pellentesque at mi sed tellus
pellentesque
ultricies. In quis pede. Integer vel tortor at dui elementum
suscipit.
Praesent interdum posuere odio. Integer mollis mattis ipsum.
Duis id
metus ut nulla molestie sagittis. Suspendisse faucibus urna
vel metus.
Sed bibendum, dolor sit amet rhoncus rutrum, lorem turpis
pharetra
tortor, quis viverra neque lorem eget massa. Lorem ipsum
dolor sit amet,
consectetuer adipiscing elit. Suspendisse vestibulum arcu
vitae odio.
Fusce enim lacus, porttitor nec, scelerisque non, viverra eu,
enim. Sed
mauris. In hac habitasse platea dictumst. Duis porta mauris
quis orci.
Donec suscipit turpis eu dui egestas suscipit. Suspendisse
potenti. Cum
sociis natoque penatibus et magnis dis parturient montes,
nascetur
ridiculus mus. In hac habitasse platea dictumst.
Cras in arcu a mi iaculis ultricies. Pellentesque sed lorem
at sem
euismod blandit. Nullam pede lacus, interdum eu, aliquam a,
pretium vel,
sem. Pellentesque fringilla leo feugiat nibh. Cras non enim.
Donec
luctus ante vel diam. Mauris volutpat sapien eget nunc. Donec
nec lectus
nec leo iaculis fringilla. Sed felis magna, cursus et,
hendrerit sit
amet, pretium at, sapien. Vivamus ornare neque facilisis
arcu. Vivamus
nisi leo, varius ac, sodales ut, dapibus eget, eros.
</div>
</body>
</html>

Background image not showing in IE9 only

The grey image (GreyBack.jpg) around the 9 centered product images on this site are not displaying in only IE9:
www.Deltron.com
Screenshot here: http://deltron.com/images/deltron-shot.jpg
It works perfectly in IE7, IE8, FF, Safari, and Chrome.
Any ideas?
Here is the CSS for that section:
.RoundedBox {
width: 479px;
padding: 10px;
border: 1px solid #E4E4E4;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
behavior: url(border-radius.htc);
margin-top: 0;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-image: url('images/GreyBack.jpg');
And the HTML:
<div class="RoundedBox">
      <p><img src="images/BannerHome.jpg" width="350" height="28" alt="Deltron Precision Product Line-up" /></p>
    <table width="73%" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="30%"><a href="javascript:;" onmouseover="MM_swapImage('Image20','','images/linear_slide_crossed_roller_bearings2.jpg' ,1)" onmouseout="MM_swapImgRestore()"><img src="images/linear_slide_crossed_roller_bearings1.jpg" alt="Linear Slides Ball Slides Crossed Roller Slides" width="153" height="148" border="0" id="Image20" onclick="MM_goToURL('parent','Linear_Slides_Ball_Slides_Crossed_Roller_Slides.html');retu rn document.MM_returnValue" /></a></td>
        <td width="2%"> </td>
        <td width="29%"><a href="javascript:;" onmouseover="MM_swapImage('Image21','','images/positioning_stages2.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="images/positioning_stages1.jpg" alt="Micrometer Positioning Stages" width="153" height="148" border="0" id="Image21" onclick="MM_goToURL('parent','Micrometer_Positioning_Stages.html');return document.MM_returnValue" /></a></td>
        <td width="3%"> </td>
        <td width="34%"><a href="javascript:;" onmouseover="MM_swapImage('Image26','','images/cross_roller_bearings2.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="images/cross_roller_bearings1.jpg" alt="Linear Bearings Crossed Roller Tables" width="153" height="148" border="0" id="Image26" onclick="MM_goToURL('parent','Linear_Bearings_Crossed_Roller_Tables.html');return document.MM_returnValue" /></a></td>
      </tr>
      <tr>
        <td><a href="javascript:;" onmouseover="MM_swapImage('Image28','','images/linear_actuators2.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="images/linear_actuators1.jpg" alt="Linear Actuators Lead Screw Actuators" width="153" height="148" border="0" id="Image28" onclick="MM_goToURL('parent','Linear_Actuators_Lead_Screw_Actuators.html');return document.MM_returnValue" /></a></td>
        <td><img src="images/spacer.gif" alt="" width="10" height="20" /></td>
        <td><a href="javascript:;" onmouseover="MM_swapImage('Image27','','images/non-magnetic-slides2.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="images/non-magnetic-slides1.jpg" alt="Non Magnetic Slides" width="153" height="148" border="0" id="Image27" onclick="MM_goToURL('parent','Non_Magnetic_Slides.html');return document.MM_returnValue" /></a></td>
        <td><img src="images/spacer.gif" alt="" width="10" height="20" /></td>
        <td><a href="javascript:;" onmouseover="MM_swapImage('Image23','','images/lead_screw_actuators2.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="images/lead_screw_actuators1.jpg" alt="Lead Screw Actuators Lead Screw Stages" width="153" height="148" border="0" id="Image23" onclick="MM_goToURL('parent','Lead_Screw_Actuators_Lead_Screw_Stages.html');return document.MM_returnValue" /></a></td>
      </tr>
      <tr>
        <td><a href="javascript:;" onmouseover="MM_swapImage('Image22','','images/crossed_roller_bearings2.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="images/crossed_roller_bearings1.jpg" alt="Crossed Roller Bearings Crossed Roller Rails" width="153" height="148" border="0" id="Image22" onclick="MM_goToURL('parent','Crossed_Roller_Bearings_Crossed_Roller-Rails.html');return document.MM_returnValue" /></a></td>
        <td> </td>
        <td><a href="javascript:;" onmouseover="MM_swapImage('Image25','','images/slide_guides2.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="images/slide_guides1.jpg" alt="Slide Guides" width="153" height="148" border="0" id="Image25" onclick="MM_goToURL('parent','Slide_Guides.html');return document.MM_returnValue" /></a></td>
        <td> </td>
        <td><a href="javascript:;" onmouseover="MM_swapImage('Image24','','images/belt_drives2.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="images/belt_drives1.jpg" alt="Belt Drive Actuators Linear Actuators" width="153" height="148" border="0" id="Image24" onclick="MM_goToURL('parent','Belt_Drive_Actuators_Linear_Actuators.html');return document.MM_returnValue" /></a></td>
      </tr>
    </table>
</div>
Thank you!
Matt

Thanks for the replies Nancy O. and Murray.
It's been so long since I did this hack (for FireFox), I don't remember anything about it.
I believe I should delete lines 80 & 81, and leave everything else, right?:
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
Is there anything else I need to do?
Murray, where did you get this code?:
Murray *ACP* wrote:
Yes - this is the result of that hack:
<div class="RoundedBox v08vnSVo78t4JfjH" style="border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; background-image: none; background-attachment: scroll; background-repeat: repeat; background-position-x: 0%; background-position-y: 0%; background-size: auto; background-origin: padding-box; background-clip: border-box; background-color: transparent;">
Dump it!
Thanks again, both of you!
Matt

-fx-background-position with negative values bug ?

Hi,
I've reported an issue that seems to be a bug with negative -fx-backgound-position values in CSS : the background image is painted out of bound of the target node.
Here is the CSS code:
/* useradd icon style: with negative offset */
.icon-useradd {
-fx-background-position: -90px 0px;
} I've created a new JIRA issue with attached screenshot :
http://javafx-jira.kenai.com/browse/RT-25522

This probably is expected behaviour.
The properties for background fills (color, insets, radius) donot work together with the properties for background images (image, position, repeat, size). They are separate and painted in separate passes in order, quote from the CSS doc below:
>
Each Region consists of several layers, painted from bottom to top, in this order:
background fills
background images
contents
border strokes
border images

Setting 'Content Copying' as 'Not Allowed' for offline PDF

Hi,
Can anyone help on the following scenario?
Generate a PDF that does not allow user to copy contents within the PDF.
Setting the Document Restriction - 'Content Copying' as 'Not Allowed'
As this PDF is to be open offline, there will be no direct connection to the livecycle server hence not able to connect to the Rights Management Server to verify the policy.
How can this be achive?
Ryan.

Ryan
You are correct in your understanding. Just to clarify one point though, the client machine does require the "Principal" key be downloaded from the RM server and "Synchronize for offline" is one way to get the key. In addition to this, when a user "authenticates" to the RM server to open a policy protected document, a "synchronization" occurs in the background and if there are "new" principal keys for other policies they will be downloaded even if they are not reklated to the document the user is currently accessing.
Now, in addition to Rights Management, Adobe has two other "encryption" options.
You could password protect the document to prevent "content copying", but this is not a very secure option, password protection is easily cracked, there is no user authentication, and third party PDF viewers may not respect\enforce the password protection.
Another option, which is very secure is to use the "Encrypt with certificates" option, where the PDF is encrypted for a user based on the users x509 certificate (public key). The user then uses their corresponding private key to authenticate themselves and view the document. Encrypt with certificates allows you to enforce authentication and you can allow\deny the same "permissions" that you can with RM protection. There is no requirement for a server, but the "certificate management" (certificate creation\provisioning\revocation) capability requires a PKI. Also, the user will need to have their private key available to open the document.
Hope this helps.
Steve

Content Selector is not loading during deployment

Hi Alll,
I am using weblogic portal 10.2 and MySQL 5.0.
I have created content selector during developement using workshop.
and deployed the same EAR in Staging server.
But content selector is not loaded after deployment.
I got confirmation after checking adminconsole ->> Content Selectors(Which will be displayed in home page of admin console after login)
And i can see that , other changes ,,JSP Changes...are reflected as part of deployment.
Please let me know what might be the poblem,for not loading content selector??
Is there any number of restrictions on number of content selectors for an environment??
Srinivas

hi
production mode does have the behavior you see, and there are good reasons why this must be so.
You mean to say, we need to propagate Content selectors from STAGING to PRODUCTION??Yes you need to propagate from an environment which has all the data you want correctly to your production environment. You can scope the propagation to only Content Selectors (if you want, the documentation has data how you can do this) and you can run this via GUI or via ANT.
regards
deepak

Content background positie not good

Similar Messages

Maybe you are looking for