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>

Similar Messages

CSS Logo position problem

Hello
I have been recently working on a web project. In the project I have a css file Thats suppose to position the logo image.
This is the css code:
/** LOGO */
#logo {
width: 830px;
height: 90px;
margin: 0 auto;
margin-top: 10px;
margin-left: 200px;
background: url(images/img04.jpg) no-repeat left top;
Margin-top moves the logo down and margin-left moves the logo in alignment. The problem is that when I view the
page on different screen sizes margin-left makes the logo image automatically move to the middle of the page.
Instead of staying in the required position.
Can any one help.
Thanks.

Hi Thanks so much for the reply.
I want to add more information.
This is the css:
body {
    margin: 0;
    padding: 0;
    background: url(images/img01.jpg) repeat-x left top;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #66665E;
h1, h2, h3 {
    margin: 0;
    text-transform: uppercase;
    font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
    font-weight: normal;
    color: #0C95C9;
h1 { font-size: 44px; }
h2 { font-size: 18px; }
h3 { }
p, ul, ol {
    margin-top: 0;
    line-height: 240%;
    text-align: justify;
ul, ol { }
blockquote { }
a { color: #0C95C9; }
a:hover { text-decoration: none; }
a img {
    border: none;
img.left {
    float: left;
    margin: 7px 30px 0 0;
img.right {
    float: right;
    margin: 7px 0 0 30px;
hr { display: none; }
.list1 {
.list1 li {
    float: left;
    line-height: normal;
.list1 li img {
    margin: 0 30px 30px 0;
.list1 li.alt img {
    margin-right: 0;
#wrapper {
/* Header */
#header-wrapper {
#header {
    width: 920px;
    height: 45px;
    margin: 0 auto;
/* Menu */
#menu {
    float: left;
    width: 640px;
    height: 45px;
#menu ul {
    margin: 0;
    padding: 10px 0px 0px 5px;
    list-style: none;
    line-height: normal;
#menu li {
    display: block;
    float: left;
#menu a {
    display: block;
    float: left;
    margin-right: 3px;
    padding: 3px 25px 2px 25px;
    text-decoration: none;
    text-transform: capitalize;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
#menu a:hover { text-decoration: underline; }
#menu .current_page_item a {
    height: 20px;
    background: #FEC200 url(images/img02.jpg) repeat-x left top;
    color: #FFFFFF;
#menu .first {
    background: none;
/* Search */
#search {
    float: right;
    width: 250px;
    height: 45px;
#search form {
    float: right;
    margin: 0;
    padding: 12px 30px 0 0;
#search fieldset {
    margin: 0;
    padding: 0;
    border: none;
#search input {
    float: left;
    font: 12px Georgia, "Times New Roman", Times, serif;
    border: none;
#search-text {
    width: 135px;
    height: 18px;
    padding: 3px 0 0 5px;
    border: 1px solid #333333;
    background: #ECF9E4;
    color: #000000;
#search-submit {
    height: 25px;
    margin-left: 10px;
    padding: 1px 10px;
    background: #C0C0C0 url(images/bg_grey.jpg);
    color: #000000;
/* Page */
#page {
    width: 920px;
    margin: 0 auto;
#page-bgtop {
    padding-top: 30px;
    /** LOGO */
#logo {
    width: 920px;
    height: 90px;
    margin: 0 auto;
    background: url(images/img04.jpg) no-repeat left top;
#logo h1, #logo p {
    margin: 0px;
    line-height: normal;
    text-transform: lowercase;
    font-weight: normal;
    color: #FFFFFF;
#logo p {
    text-transform: lowercase;
    font-size: 10px;
#logo h1 {
    padding-top: 54px;
    font-size: 34px;
#logo a {
    text-decoration: none;
    color: #FFFFFF;
/* Content */
#content {
    float: center;
    width: 920px;
    height: 800px;
    padding-top: 0px;
    padding-right: 0px;
/* Post */
.post {
    background: url(images/img07.jpg) repeat-x left bottom;
    margin-bottom: 25px;
.post .title {
    height: 30px;
    color: #549900;
.post .title a {
    text-decoration: none;
    color: #585D60;
.post .date {
.post .meta {
    margin-top: -10px;
    padding: 2px 30px 2px 16px;
    background: url(images/img03.gif) no-repeat left 8px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 10px;
    color: #66665E;
.post .meta span {
    display: block;
    margin-top: -10px;
.post .meta a { }
.post .entry {
    padding: 10px 0;
.post .links {
    margin: 0 250px 0 0;
    padding: 0 0 0 0px;
.post .links .comments {
.post .links .permalink {
    padding-left: 17px;
/* Sidebar */
#sidebar {
    float: left;
    width: 177px;
    padding-left: 22px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #585D60;
#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: normal;
#sidebar li {
    margin-bottom: 30px;
    padding: 0 0 10px 0px;
#sidebar li ul {
#sidebar li li {
    margin: 0;
    padding: 7px 10px 10px 7px;
    background: url(images/img07.jpg) repeat-x left bottom;
#sidebar p {
    margin: 0;
    padding: 0px 10px;
#sidebar h2 {
    height: 26px;
    margin: 0 0 10px 0px;
    padding: 12px 0 2px 7px;
    text-transform: capitalize;
    font-size: 18px;
    font-weight: normal;
    color: #464F54;
#sidebar p {
    line-height: 200%;
#sidebar a {
    text-align: left;
    text-decoration: none;
    font-weight: normal;
    color: #585D60;
/* Calendar */
#calendar {
#calendar caption {
    padding-bottom: 5px;
    font-weight: bold;
#calendar table {
    width: 100%;
    border-collapse: collapse;
    border-bottom: 1px solid #24130F;
    border-left: 1px solid #24130F;
    border-right: 1px solid #24130F;
#calendar thead th {
    padding: 5px 0;
    text-align: center;
    border-top: 1px solid #24130F;
    border-left: 1px solid #24130F;
    background: #24130F;
#calendar tbody td {
    padding: 5px 0;
    text-align: center;
    border-top: 1px solid #24130F;
    border-left: 1px solid #24130F;
    border-bottom: 1px solid #24130F;
#calendar tfoot td {
    padding: 5px;
    border-left: 1px solid #24130F;
    border-bottom: 1px solid #24130F;
#calendar tfoot #next {
    border-top: 1px solid #24130F;
    text-align: right;
#calendar tfoot #prev {
    border-top: 1px solid #24130F;
#calendar .pad {
    border-bottom: 1px solid #24130F;
#calendar #today {
    background: #24130F;
/* Footer */
#footer {
    width: 920px;
    height: 49px;
    margin: 0 auto;
    padding-top: 50px;
#footer-bgcontent {
    margin: 0px;
    padding: 0px;
    height: 99px;
    background: #394144;
#footer p {
    margin: 0;
    text-align: center;
    line-height: normal;
    text-transform: uppercase;
    font-size: 10px;
    color: #FFFFFF;
#footer a {
    color: #E5FFC4;
This is the Mainpage:
<!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>Uimodo</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="../style/style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="jquery/jquery-1.4.3.min.js"></script>
</head>
<body>
<div id="wrapper">
    <div id="logo">
</div>
<hr />
    
    <div id="header">
      <div id="menu">
        <ul>
          <li><a href="Vidmin.php" class="first">Home</a></li>
          <li><a href="Other.php">Other</a></li>
        </ul>
      </div>
      
      <div id="search">
        <form method="get" action="">
          <fieldset>
            <input type="button" id="search-submit" onclick="window.location.href='now.php'" value="UPLOAD NOW" />
          </fieldset>
        </form>
      </div>
      
</div>
    
    
    <div id="page">
    <div id="page-bgtop">
        <div id="content">
          <table width="920" border="0" align="center" cellpadding="4">
            <tr>
              <td height="42" valign="top"><table width="415" height="41" align="right">
                <tr>
                  <td width="215" height="35" align="center"> </td>
                  <td width="60" align="center"><a href="" target="_blank"><img src="../Logo/fblogo.png" alt="" width="34" height="33" /></a></td>
                  <td width="124"><a href="" target="_blank"><img src="../Logo/twitlogo.png" alt="" width="34" height="33" /></a></td>
                </tr>
              </table></td>
            </tr>
            <tr>
              <td height="72" valign="top" align="center"><table width="859" height="72" border="0">
                <tr>
                  <td width="293" height="49"><div align="center"><font size="5" color="#333333">Signup</font></div></td>
                  <td width="14"> </td>
                  <td width="296"><div align="center"><font size="5" color="#333333">Login</font></div></td>
                </tr>
                <tr>
                  <td height="17"><div align="center" id="register"></div></td>
                  <td> </td>
                  <td><div align="center" id="loginstatus"></div></td>
                </tr>
              </table></td>
            </tr>
            <tr>
              <td height="269" valign="top" align="center"><table width="908" height="291" border="0" align="center" cellpadding="3" bgcolor="#CCCCCC">
                <tr>
                  <td width="401" height="287" align="center" valign="top"><form id="register_form" method="post" action="">
                    <table width="300" height="291" >
                      <tr>
                        <td height="23" colspan="2"> </td>
                        </tr>
                      <tr>
                        <td width="85" height="36"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif">Username :</font> <br />
                          </div></td>
                        <td width="203"><input name="realname" id="realname" type="text" size="30" value='<?Php echo $profile['displayName'];?>'/></td>
                        </tr>
                      <tr>
                        <td height="45"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif">Email :</font> <br />
                          </div></td>
                        <td><div align="left">
                          <input name="email" id="email" type="text" size="30" value='<?Php echo $profile['email'];?>'/>
                          <input name="propic" id="propic" type="hidden" size="30" value='<?Php echo $profile['photo'];?>'/>
                          </div></td>
                        </tr>
                      <tr>
                        <td height="81"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif">Security :</font> <br />
                          </div></td>
                        <td><div align="center"><img src="CaptchaSecurityImages.php?width=150&height=40&characters=8" alt="captcha"/></div>
                          <p>
                            <input name="security_code" id="security_code" type="text" size="30" />
                            </p></td>
                        </tr>
                      <tr>
                        <td height="45"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif">Password:</font> <br />
                          </div></td>
                        <td><div align="left">
                          <input name="password" id="password" type="text" size="30" />
                          </div></td>
                        </tr>
                      <tr>
                        <td height="45"> </td>
                        <td><div align="left">
                          <input type='submit' name="submit" id="submit" value='Sign Up'/>
                          </div></td>
                        </tr>
                      </table>
                    </form></td>
                  <td width="6" align="center"></td>
                  <td width="475" align="center" valign="top"><form method='post' id='login_form'>
                    <table width="300" height="176" >
                      <tr>
                        <td height="19" colspan="2"> </td>
                        </tr>
                      <tr>
                        <td height="36"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif" >Email :</font> <br />
                          </div></td>
                        <td><div align="left">
                          <input name='emailenter' type='text' id='emailenter' size="25" />
                          </div></td>
                        </tr>
                      <tr>
                        <td height="45"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif">Password :</font> <br />
                          </div></td>
                        <td><div align="left">
                          <input name='passcode' type='password' id='passcode' maxlength='15' size="25" />
                          </div></td>
                        </tr>
                      <tr>
                        <td height="45"> </td>
                        <td><div align="left">
                          <input type='submit' name='submit' value='Login'/>
                          <a href="ForgotPassword.php">Forgot Password?</a></div></td>
                        </tr>
                      </table>
                    </form></td>
                </tr>
              </table></td>
            </tr>
            <tr>
              <td height="23" valign="top" align="center" > </td>
            </tr>
          </table>
</div>
        
        <div style="clear: both;"> </div>
    </div>
    </div>
    
    <div id="footer-bgcontent">
    <div id="footer">
        <p>Copyright (c) . </p></div>
    </div>
    
</div>
</body>
</html>
Please just focus on the logo div. It suddenly moves to the middle on different screen size etc. Hope you can help.

CSS background colour problem

Hi
I know that I am overlooking something incredibly simple,
however I am really new to Dreamweaver and can't seem to figure out
where I'm going wrong.
I basically want to use CSS to make the background of my page
grey. The rule I have is quite simply:
.background {
background-color: #CCCCCC;
However when I apply it to the page, all that appears is a
row of grey at the very top and that's it. No matter what I try I
just can't seem to make it cover the entire background.
If anyone could help me out, that would be great.
Thanks
Nicola

It *should* work the same, either externally linked or
internally embedded.
The fact that it doesn't means you have made an error
somewhere. The fact
that you don't have an identification of the error means that
you have not
provided enough information.
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
==================
"Nic26" <[email protected]> wrote in message
news:g4vaig$kdj$[email protected]..
> Thank you!
>
> I have managed to get it working.
>
> I had previously created the CSS as an external style
which wasn't
> working,
> however as soon a I made it an internal style with the
code you had all
> given
> me, it worked.
>
> Thanks again!
> Nicola
>

Css text & background positioning in one statement ?

When I use the code below the text is not centered
vertically, but is more toward the top.
Can I move the text down without using 2 selectors? One for
the box and another for the text ?
thanks

OK - let's try again.
<style type="text/css">
#info {
position:absolute;
top:50px;
left:0px;
width: 1024px;
height: 25px;
text-align:center;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-weight: bold;
color: #FFFFFF;
background:#990000;
</style>
If you are not using a background image so that the
'background' shorthand
style contains information about the image and its position,
you would be
better off using 'background-color'. Using 'background', as
you have, will
reset all the other values implicit in that 'background'
style to their
default values, which may unexpectedly change the expression
of other rules.
To make the text appear vertically centered in the container,
modify the
rule -
<style type="text/css">
#info {
position:absolute;
top:50px;
left:0px;
width: 1024px;
height: 25px;
line-height:25px;
text-align:center;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-weight: bold;
color: #FFFFFF;
background:#990000;
</style>
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
==================
"jerr3d" <[email protected]> wrote in
message
news:gf2hsc$o25$[email protected]..
> thanks, but unless I missed something that did not
really answer my
> question

Spry Menu Bar Positioning Problem in IE

I have a Dreamweaver-created Spry Menu Bar drop down menu which works perfectly in every browser on my Mac and on my PC . . . EXCEPT Internet Explorer (who woulda thunk it?!!)
In all browsers except for IE, the 3 submenu items under "Door Systems" and "Gallery" appear exactly as they should in a vertical row, positioned just below the brown line below the navigation links and all the same width. But in IE they appear higher up and with different widths. IE is ignoring the rules for width and position.
<ul id="MenuBar2" class="MenuBarHorizontal">
    <li><a class="MenuBarItemSubmenu" href="closet_doors_gallery.html">DOOR SYSTEMS</a>
      <ul>
        <li><a href="sliding_doors_nyc_nj.html">DOOR PROFILES</a></li>
        <li><a href="bifold_doors_nyc_nj.html">PANELS COLORS</a></li>
        <li><a href="room_dividers_nyc_nj.html">DOOR SYSTEM TYPES</a></li>
      </ul>
    </li>
</ul>
<ul id="MenuBar3" class="MenuBarHorizontal">
    <li><a class="MenuBarItemSubmenu" href="#">GALLERY </a>
      <ul>
        <li><a href="#">SLIDING DOORS</a></li>
        <li><a href="#">BI-FOLD DOORS</a></li>
        <li><a href="#">ROOM DIVIDERS</a></li>
      </ul>
    </li>
</ul>
Here is the page where you can see the problem if you view it with IE, and see that it's fine in Safari, and Firefox,    Chrome and Opera, Mac or PC:
http://2113web.com/indeco/index.html
I have a feeling it's a simple fix of the css, but I can't figure it out - I would really appreciate anyone's help with it - thank you!
Below is the CSS:
@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%;
    font-weight:bold;
    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;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: auto;
    float: left;
    white-space: nowrap;
/* 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: auto;
    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;
    top: 63px; /*THIS POSITIONS THE SUBMENU BELOW THE TOP MENU*/
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    float: none;
    background-color:#f5f5e8;
    height:25px; /*THIS POSITIONS THE SUBMENUS HEIGHT*/
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    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;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
    border:none;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: transparent;
    padding: 0.5em 0.75em;
    color: #59330d;
    text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    background-color: transparent;
    color: #afa06f;
/* 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: transparent;
    color: #afa06f;
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;
Perry

Hi and thank you very much. It was a little confusing as to whether you meant to add the rules you suggested or to replace them, or a combination of both, but I puzzled it out. I created a new MenuBarHorizontal.css file in a blank page and then made the changes you suggested and it works! Yay! I had to do a bit of tweaking to get it to look just the way I wanted, but it now works correctly in ie 7 and 8 and still works fine in everything else.
Interestingly enough, I had to change the margin-top: 63px; rule in "ul.MenuBarHorizontal ul.MenuBarSubmenuVisible" to 40px to get it positioned properly vertically, and I had to get rid of the "border-bottom: solid 1px #EEE;" in "ul.MenuBarHorizontal ul li", which caused the submenu items to have quite a lot of vertical space between them - I'm not sure why!
I also had to get rid of all the syling rules in the "SUBMENU INDICATION: styles if there is a submenu under a given menu item" section, as well as the one you added: "ul.MenuBarHorizontal a.MenuBarItemSubmenu {
    padding: 0.5em 2em 0.5em 0.75em;"
With that done, it works great in both ie7 and ie8, so thank you for the help. Below is the new css that works, in total.
Not being as familiar with the subtleties of CSS as you and many others obviously are, I'm REALLY curious as to exactly what is different that causes this to work now, and would be happy to hear your expanation, if you feel like taking the time to explain. If not, no problem - it works and that is the most important thing! So, thank you again -
Perry
@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: 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;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: auto;
    float: left;
/* 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: auto;
    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;
    margin-top: 40px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    display: block;
    float: none !important;
    width: auto;
    white-space: nowrap;
/* 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;
    background-color: #f5f5e8;
    padding: 0.5em 0.75em;
    color: #333;
    text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
      background-color: #f5f5e8;
    color: #afa06f;
/* 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: #f5f5e8;
    color: #afa06f;
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
/* 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
/* 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
/* 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
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);
    background: transparent;
/* 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;

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

CSS Background Shifts Down

So, i am working on my school's website in my Web Development Course, and everything seems to be going fine. I have enctountered a problem, i have a divider holding a table that is our navigation bar, and below it the content of the site. When it is in the design/code view, it looks fine as displayed in Figure 1
then when it is previewed in any browser, or in live view, it moves it down like 10ish pixels...there is no margins on any of the div either.
and here is the code for you to look at.
<!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>Belmont High School - Home</title>
<style type="text/css">

</style>
<script src="/Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript">

</script>
</head>
<body class="oneColFixCtr" onload="MM_preloadImages('file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage- Bing and Ryan/images/Home_DOWN.png','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage- Bing and Ryan/images/home_OVER.png','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage- Bing and Ryan/images/aboutus_DOWN.png','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage- Bing and Ryan/images/aboutus_OVER.png','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage- Bing and Ryan/images/departments_DOWN.png','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage- Bing and Ryan/images/departments_OVER.png','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage- Bing and Ryan/images/sports_DOWN.png','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage- Bing and Ryan/images/sports_OVER.png','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage- Bing and Ryan/images/guidance_DOWN.png','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage- Bing and Ryan/images/guidance_OVER.png')">
<div id="container">
<div class="header" id="header">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="148" id="bhs_header" title="Belmont High School Slideshow">
    <param name="movie" value="movie/header_slideshow.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="6.0.65.0" />
    
    <param name="expressinstall" value="/Scripts/expressInstall.swf" />
    
    
    <object type="application/x-shockwave-flash" data="movie/header_slideshow.swf" width="800" height="148">
      
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="6.0.65.0" />
      <param name="expressinstall" value="/Scripts/expressInstall.swf" />
      
      <div>
        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
      </div>
      
    </object>
    
</object>
</div>

<div id="navigation">
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td><a href="index.html" target="_top" onclick="MM_nbGroup('down','group1','home','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage/images/Home_DOWN.png',1)" onmouseover="MM_nbGroup('over','home','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage/images/home_OVER.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/home_UP.png" alt="Home" name="home" width="80" height="30" border="0" id="home" onload="" /></a></td>
      <td><a href="index_aboutus.html" target="_top" onclick="MM_nbGroup('down','group1','aboutus','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage/images/aboutus_UP.png',1)" onmouseover="MM_nbGroup('over','aboutus','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage/images/aboutus_OVER.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/aboutus_DOWN.png" alt="About Us" name="aboutus" width="80" height="30" border="0" id="aboutus" onload="" /></a></td>
      <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','depts','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage/images/departments_DOWN.png',1)" onmouseover="MM_nbGroup('over','depts','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage/images/departments_OVER.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/departments_UP.png" alt="Departments" name="depts" width="80" height="30" border="0" id="depts" onload="" /></a></td>
      <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','sports','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage/images/sports_DOWN.png',1)" onmouseover="MM_nbGroup('over','sports','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage/images/sports_OVER.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/sports_UP.png" alt="Sports" name="sports" width="80" height="30" border="0" id="sports" onload="" /></a></td>
      <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','resources','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage/images/resources_DOWN.png',1)" onmouseover="MM_nbGroup('over','resources','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage/images/resources_OVER.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/resources_UP.png" alt="Resources" name="resources" width="80" height="30" border="0" id="resources" onload="" /></a></td>
      <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','guidance','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage/images/guidance_DOWN.png',1)" onmouseover="MM_nbGroup('over','guidance','file:///U|/Fall-Spring2010_11/Web Design/BHS website 2011-2012/Homepage/images/guidance_OVER.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/guidance_UP.png" alt="Guidance" name="guidance" width="80" height="30" border="0" id="guidance" onload="" /></a></td>
    </tr>
</table>
</div>

<div class="bubble" id="bubble">
<p>Mission Statement</p>
<i><p><font size="3">The mission of Belmont High School is to develop contributing
<br>members of society who are communicators and life long learners.</br></font></p></i>
<p>Statement Of Purpose</p>
<i>
<p><font size="3">Belmont High School establishes a learning environment which promotes intellectual and creative growth and social, emotional and physical development. The professional staff, with the support of the residents of the Shaker Regional School District, recognizes and accepts the responsibility to foster academic excellence in all areas of curriculum and to develop young adults who possess skills, knowledge, and social responsibility. Belmont High School realizes that learning is lifelong and that our goals include present day and lifelong learning opportunities.</font></p>
<p><a href="http://www.maps.google.com" target="_blank">Directions</a>
    </p>
</i></div>

<div class="content" id="content">
<div class="left">
<table width="200" height="421" border="0">
<tr>
    <td width="65" height="21" align="right" scope="col">Quick</td>
    <td width="125" scope="col">Links</td>
</tr>
<tr>
    <td height="42"> </td>
    <td>Teacher Pages</td>
</tr>
<tr>
    <td height="42"> </td>
    <td>Student Handbook</td>
</tr>
<tr>
    <td height="42"> </td>
    <td><p>Plato (Summer Recovery Program)</td>
</tr>
<tr>
    <td height="42"> </td>
    <td> </td>
</tr>
<tr>
    <td height="42"> </td>
    <td> </td>
</tr>
<tr>
    <td height="42"> </td>
    <td> </td>
</tr>
<tr>
    <td height="42"> </td>
    <td> </td>
</tr>
<tr>
    <td height="42"> </td>
    <td> </td>
</tr>
<tr>
    <td height="42"> </td>
    <td> </td>
</tr>
</table>
</div>
<div class="center" id="center">
    Welcome to Belmont High School!
    <p>We take pride in our school and our community. This site is your online resource for information about us as well as recent news and upcoming events. </p>
    <p>Located in Belmont, New Hampshire, Belmont High School was built in 1998 and services approximately 467 students.<br />
    </p>
<p>The student body is made up of students from the towns of Belmont and Canterbury.
The high school is part of the Shaker Regional School District.</p>
    <font color="#999999"><p>THE CAKE IS A LIE!!!</p></font><img src="images/serving-the-communities.png" width="350" height="30" alt="Serving The Communities Of Belmont And Canterbury" /><br> </br>
    <br> </br>
    This site was created by the students in Mr. Fricks Website Development Course
</div>

<div class="right" id="right">
<table width="201" border="0">
<tr>
    <th width="10" scope="col"> </th>
    <td width="181" scope="col">Announcements:</td>
</tr>
</table>
<ul>
On Saturday, May 14th from 9am-12:30pm at Bedford High School auditorium there will be a NH MILITARY SERVICE ACADEMY DAY.</ul>
<ul>Year books are now on sale for $35.00 reserve your copy today.</ul>
<ul>Senior Breakfast 6/3</ul>
<ul>Congratulations to Mr. Hill for receiving the 2010 NH JumpStart Teaching Award</ul>
<ul>The BHS Robotics team qualified for the 2011 VEX Robotics World Championship</ul>
<ul>Congratulations to Mr. Acquilano " Class M Athletic Director of the Year".</ul>
<ul>Congratulations to Mr. Wormald on being selected as one of the five finalist for the 2010 Great American Teacher of the Year</ul>
</div>

</div>

</div>

<script type="text/javascript">

</script>
</body>
</html>

Browsers add their own default margins and padding to markup elements. You may want to use a Reset CSS. Or add a universal selector rule to the top of your CSS code:
* {margin: 0; padding: 0}
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Background display problem in div

Hi everyone,
I have a two column fixed with header and footer page. In the
body section I put in two div containers for the different sections
of text that I wanted to have. I put in a background image for the
div but when I view it the bottom of the background image is being
cut off. Can anyone help me with this problem so that I can get the
image to show completely.
Thanks,
Robert

Hi Robert,
To make the whole image show as the background, you'll want
to make the
div's height and width the same size as the image.
To avoid any box-model issues (more info:
http://www.quirksmode.org/css/box.html)
you should remove the padding for
that div from the CSS.
You can use margins applied to the <p> tags in that div
to align your text
the way you want.
Assume the image is 300x300 for the example below:
.bodyText1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
height:300px;
width:300px;
background-color: #eee9ca;
margin-top: 10px;
background-image: url(../Images/indexbodyimage.gif);
background-repeat: no-repeat;
background-position: top;
.bodyText1 p {margin: 2px 10px;}
The .bodyText p class says "give all <p> tags in the
container .bodyText1 a
top and bottom margin of 2px and a left and right margin of
10px.
I hope that helps.
Take care,
Tim
"ryonker" <[email protected]> wrote in
message
news:fjqndc$8s8$[email protected]..
> Here is the HTML code and the the CSS code will follow.
I hope that this
> is
> what you are looking for. Thanks for any guidance.
>
> HTML CODE:
> <div id="mainContent">
> <div class="bodyText1" id="bodyText1">
> <p class="style3">
For Business Owners</p>
> <p>Understand your target market</p>
> <p>Create or refine your marketing plan</p>
> <p>Drive your plan implementation</p>
> <p><br />
> <br />
> <br />
> Contact us for a free marketing evaluation: <a
>
href="mailto:[email protected]">[email protected]</a></p>
> <p> </p>
> <p> </p>
> </div>
>
> CSS CODE:
> .bodyText1 {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 12px;
> background-color: #eee9ca;
> padding-top: 5px;
> padding-right: 10px;
> padding-bottom: 10px;
> padding-left: 10px;
> margin-top: 10px;
> background-image: url(../Images/indexbodyimage.gif);
> background-repeat: no-repeat;
> background-position: top;
>

CSS Background frustrations

Hi Guys,
I've come across an issue I regularly have and am determined
to find out why
and to solve it.
Basically, the problem is applying background images to divs.
Works fine in
IE but never in FF.
FireFox takes it's positioning from the top left hand corner
of the browser
window (or body tag) and *not* the div to which the style is
applied.
Why O Why does it do this. Have I missed something?
Currently working on the following which demonstrates the
issue:
http://www.scstechsolutions.co.uk/06/blank.asp
I have looked at the CSS Specs and taken a quick tour though
the newsgroup
and it would seem that this should work... Don't think it
likes me :-(
Many thanks
Justin

Good luck, Justin. The observation you made about the
position of the
background element when using fixed is exactly the reason why
IE is the
outlier, once again.
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
==================
"Justin Reid" <[email protected]>
wrote in message
news:[email protected]...
> That did the job nicely thanks Murray, I didn't know
that about
> 'background-attachment:fixed'.
> As for the background position, I was trying loads of
things and just got
> carried away...
>
> Many thanks for your help.
>
> Justin
>
>
> "Murray *ACE*" <[email protected]>
wrote in message
> news:[email protected]...
>>> FireFox takes it's positioning from the top left
hand corner of the
>>> browser window (or body tag) and *not* the div
to which the style is
>>> applied.
>>
>> Using 'background-attachment:fixed' on any element
other than the body
>> tag is dangerous for this very reason. I'm not sure
why you want to use
>> it with this layout, though. And why you are using
>> 'background-position:inherit' also seems a bit
strange to me.
>>
>> Why doesn't something like this work?
>>
>> #container {
>> width:760px;
>> margin:0px auto;
>> height:100%;
>> background-color:#91948a;
>> border-right:#75766f 1px solid;
>> border-left:#75766f 1px solid;
>> }
>> #container #head {
>> background-color: #75766f;
>> border-bottom:#d4e112 solid 2px;
>> }
>>
>> #content1a {
>> width:739px;
>> height:382px;
>> margin:10px auto;/*just showing where the area is*/
>> /*background-attachment: fixed;*/
>> background-image: url(../images/container.gif);
>> background-repeat: no-repeat;
>> /*background-position:inherit;*/
>> }
>> #content2 {
>> width:739px;
>> height:382px;
>> /*background-attachment: fixed;*/
>> background-repeat: no-repeat;
>> background-image: url(../images/crossed.jpg);
>> }
>>
>>
>> --
>> 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
>> ==================
>>
>>
>> "Justin Reid"
<[email protected]> wrote in message
>> news:[email protected]...
>>> Hi Guys,
>>>
>>> I've come across an issue I regularly have and
am determined to find out
>>> why and to solve it.
>>>
>>> Basically, the problem is applying background
images to divs. Works fine
>>> in IE but never in FF.
>>> FireFox takes it's positioning from the top left
hand corner of the
>>> browser window (or body tag) and *not* the div
to which the style is
>>> applied.
>>>
>>> Why O Why does it do this. Have I missed
something?
>>>
>>> Currently working on the following which
demonstrates the issue:
>>>
http://www.scstechsolutions.co.uk/06/blank.asp
>>>
>>> I have looked at the CSS Specs and taken a quick
tour though the
>>> newsgroup and it would seem that this should
work... Don't think it
>>> likes me :-(
>>>
>>> Many thanks
>>>
>>> Justin
>>>
>>
>>
>
>

Centering ap div position problem

Hi people, I'm new to dreamweaver and have what seems to be a basic problem but one that I can't fix, even after looking on the forums and web.
My problem is when I go into design mode I can drag my "ap divs" around so they are in the centre of my screen (webpage) and nicely lined up, however once I test the website in any web-browser they are no longer centered and seem to reposition themselves at random. I've included some screen-shots so you can see what I mean.
Website in design view
Website in webbrowser
Here is my code so you can look at it and spot my mistakes.
<title>index</title>
</head>
<style type="text/css" >
body
background-image:url('background.png');
background-repeat:no-repeat;
background-position:50% -2%;
background-color:#D7D7D7;
</style>
<style type="text/css">
#apDiv1 {
          position:absolute;
          width:578px;
          height:57px;
          z-index:1;
          left: 535px;
          top: 1526px;
          overflow: hidden;
          background-color: #transparent;
          color: #F90;
</style>
<style type="text/css">
#apDiv2 {
          position:absolute;
          width:937px;
          height:288px;
          z-index:1;
          left: 360px;
          top: 14px;
          overflow: hidden;
          background-color: #transparent;
          color: #F90;
</style>
<div align="center" id="apDiv1">This page was created by me on 28th Decmber 2099. Updated - 29th December 2099. </div>
<div align="center" id="apDiv2"><img src="banner.png" width="928" height="284" /></div>
</html>
If you can see the solution to my problem or if there is another/better way of centering text/banners using ap divs, then please let me know. Thanks in advance.

The biggest mistake that those new to Dreamweaver make is using Absolutely Positioned <divs>.
Why, because in most instances they will 'restrict' your construction. By their nature being Absolutely Positioned they do NOT move away from the co-ordinates that you give them. What you are seeing is the background image moving, its an illusion.
I would never advise anyone to use AP positioning unless they have a great deal of experience in positioning.
One way to control AP <divs> is to surround them in a 'wrapper' <div> (see code below)
<div id="wrapper">
<div align="center" id="apDiv1">This page was created by me on 28th Decmber 2099. Updated - 29th December 2099. </div>
<div align="center" id="apDiv2"><img src="banner.png" width="928" height="284" /></div>
</div>
Then use css to make the wrappers position 'relative' and to center it horizontally using margin: 0 auto (see below)
#wrapper {
position: relative;
width: 578px;
margin: 0 auto;
Your AP <divs> will now take their co-ordinates from the top/left of the 'wrapper' <div>
So alter your left positioning to 0 in your apDiv1 and apDiv2 (see below)
#apDiv1 {
          position:absolute;
          width:578px;
          height:57px;
          z-index:1;
          left: 0;
          top: 1526px;
          overflow: hidden;
          background-color: #transparent;
          color: #F90;
#apDiv2 {
          position:absolute;
          width:937px;
          height:288px;
          z-index:1;
          left: 0;
          top: 14px;
          overflow: hidden;
          background-color: #transparent;
          color: #F90;
As the default position is left you don't really need to declare it but it does no harm if you do.

Css background image fix

Hi
I have some css code that adds png image to a webpage. The problem is that white edges appear when page uploaded to server.
body {
    background: url(images/plate.png) no-repeat;
    background-position: center top;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
The pngs core content is 920 in width. In the edges these is some design space. How can I have the design space cover the whole page with out white spaces in the edge.
Thanks.

Tony404 wrote:
body {
    background: url(images/plate.png) no-repeat;
    background-position: center top;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
add to your 'body' css:
margin: 0;
padding: 0;
body {
    background: url(images/plate.png) no-repeat;
    background-position: center top;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
margin: 0;
padding: 0;

CSS Background Image - where is it?

Hello, Have placed a fixed background image within my
CSS...it looks fine when I look at it in Dreamweaver. The problem
is when I upload to my webspace the image isn't there. Any ideas?
These are the attributes:
background-attachment: fixed;
background-image: url(images/home.gif);
background-repeat: no-repeat;
background-position: 1px;

dulcettones" <[email protected]> wrote in
message
news:f3m22g$kpu$[email protected]..> Sorry...the
URL is:
> www.notjustthenews.co.uk
> The image in question goes in the top left corner and
changes depending on
> the section you're viewing.
Remove: background-attachment: fixed; and you'll see the
image shows up on
the index page. You need to remove that on each of the rules
you have set
for the #top divs... some of them are missing the white
background color
also.
Nadia
Adobe® Community Expert : Dreamweaver
CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
~ Customisation Service Available ~
http://www.csstemplates.com.au
Spry Widget Examples
http://www.dreamweaverresources.com/spry-widgets/

Menu positioning problem when viewing in Internet explorer on a pc

Hi guys,
I have created a website for a football team and I am having problems with the menu. It looks fine in all browsers apart from Internet Explorer. The menu positioning is meant to be on the left hand side but shows far right on the screen when viewed in Internet Explorer. Does anyone know how I can resolve this issue?
http://www.stormersfc.co.uk
css sheet - http://www.stormersfc.co.uk/style.css
Hopefully someone can help.
Cheers,
Roy

Hummm....its difficult to tell. Youre using so many redundant css styles ie not needed.
Youre 'leftPan' <div> container is 140px in width but your ul (unordered list inside it is 244px wide?
Why set widths and heights when they are not needed. You have no idea what height the ul and li will be in other users browsers. A child element placed inside a parent container will stretch to the full width without specifying a width for the child element. The key to web deisgn is keeping all the maths 100% correct. If you so much as get anything out by even one px it could break the design.
#leftPan{
     margin-left: 90px;
     width: 140px;
#leftPan ul{
     width:244px;
     height:250px;
     background-position: 0 0;
     padding-top: 0px;
     padding-right: 0;
     padding-bottom: 0;
     padding-left: 0;
     margin-top: 1px;
     text-decoration: none;
I see no reason why your based structure ie the 'container', 'header', 'mainpic', sidebar1 and 'mainContent' should not work in all browsers. Now what you have inside those may be casuing the conflict. I would strip the page back to the base structure (check that it does work in all browsers) then begin to fill the containers, checking as you go.

Spry Sliding Panel bugs with Flash SWF, iFrames, CSS background images

Greetings,
I'm working on a site right now that is build with Spry 1.6
Sliding Panels. On the home panel I have integrated a looping SWF,
and scrolling iFrames on the Overview panel. After extensive
research on these forums, I'm still scratching my head at a few
bugs listed below:
• Firefox (MAC v2.0.0.14)
- The SWF on the home panel doesn't hide properly when
sliding to a different panel. I have set 'wmode opaque' parameters
to the flash file, but this seems to have not resolved the issue.
- Additionally, I've noticed that sometimes the SWF will not
finish sliding into the correct position when clicking to the home
panel (the SWF will stop sliding several pixels left of the
original positioning).
- The SWF (which happens to be a loop animation) resets every
time the home panel is visited. In my testing, this does not happen
in any other browser.
- On the Overview panel, scrolling iFrames are used on the
"Staff Profiles". These iFrames don't hide properly when clicking
through other panels, as the scroll bars are still viewable.
- Overall, the sliding animation is a bit choppy compared to
all other browsers. I can live with this, but I wonder if I have
improper code somewhere?
• Opera (MAC v9.27)
- Same issue as above concerning the fact that the SWF
appears outside of the sliding panel view port.
• IE 6
- CSS background images flash during the sliding panel
animation.
* Site page links *
Main URL
Home
Page iFrame
Overview
Page iFrame
* CSS *
Main
site-wide CSS
Sliding
Panels CSS
* Scripts *
Sliding
Panels Sript
Any suggestions, pointers would be much appreciated!
Cheers,
Chris

Greetings,
I'm working on a site right now that is build with Spry 1.6
Sliding Panels. On the home panel I have integrated a looping SWF,
and scrolling iFrames on the Overview panel. After extensive
research on these forums, I'm still scratching my head at a few
bugs listed below:
• Firefox (MAC v2.0.0.14)
- The SWF on the home panel doesn't hide properly when
sliding to a different panel. I have set 'wmode opaque' parameters
to the flash file, but this seems to have not resolved the issue.
- Additionally, I've noticed that sometimes the SWF will not
finish sliding into the correct position when clicking to the home
panel (the SWF will stop sliding several pixels left of the
original positioning).
- The SWF (which happens to be a loop animation) resets every
time the home panel is visited. In my testing, this does not happen
in any other browser.
- On the Overview panel, scrolling iFrames are used on the
"Staff Profiles". These iFrames don't hide properly when clicking
through other panels, as the scroll bars are still viewable.
- Overall, the sliding animation is a bit choppy compared to
all other browsers. I can live with this, but I wonder if I have
improper code somewhere?
• Opera (MAC v9.27)
- Same issue as above concerning the fact that the SWF
appears outside of the sliding panel view port.
• IE 6
- CSS background images flash during the sliding panel
animation.
* Site page links *
Main URL
Home
Page iFrame
Overview
Page iFrame
* CSS *
Main
site-wide CSS
Sliding
Panels CSS
* Scripts *
Sliding
Panels Sript
Any suggestions, pointers would be much appreciated!
Cheers,
Chris

-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

Css background-position problem

Similar Messages

Maybe you are looking for