Div alignment in firefox

Hi can anyone tell me why this page looks fine in ie and
opera but in
firefox thetimetable goes off to the right? It was working
fine so not sure
what I've done to it.
http://www.aucklandbuskersfestival.co.nz/night.php
thanks
Karen

You're welcome :-)
"KarenJ" <[email protected]> wrote in message
news:fmedf6$dj$[email protected]..
> Tim, Thank you! As usual with me it seems i need someone
else to point out
> what is staring me in the face.....
>
> Cheers,
>
> Karen
>
> "TC2112" <[email protected]> wrote in message
> news:fme89p$oo1$[email protected]..
>> Hello,
>>
>> Change this:
>>
>> .night {
>> width: 527px;
>> margin: 0px 0px 0px 3px;
>> }
>>
>> To this:
>>
>> .night {
>> width: 527px;
>> margin: 0px 0px 0px 3px;
>> float: left;
>> }
>>
>> Take care,
>> Tim
>>
>>
>> "KarenJ" <[email protected]> wrote in message
>> news:fmdsvf$dlf$[email protected]..
>>> Hi can anyone tell me why this page looks fine
in ie and opera but in
>>> firefox thetimetable goes off to the right? It
was working fine so not
>>> sure
>>> what I've done to it.
>>>
>>>
http://www.aucklandbuskersfestival.co.nz/night.php
>>>
>>> thanks
>>> Karen
>>>
>>
>>
>

Similar Messages

Aligned in Firefox but not in IE.

I'm a complete newbie to webdesign have a wee problem. Whilst designing a website I was testing totally out of firefox, website goes live and check it at
work... not aligned. Can anyone help?
Have posted the code below.
Huge thanks to anyone inadvance.
Fen
Edited - Cos I some linked the webpage not the code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Scorrier House Cross Country Course</title>
<style type="text/css">

</style>
</head>
<body>
<table width="101%" height="100%" border="0">
<tr>
    <td width="180" height="0"> </td>
    <td width="460" height="1000" valign="baseline" bgcolor="#FFFFFF"><table width="100%" border="0">
      <tr>
        <td><a href="/index.html"><img src="Images/place holder.JPG" width="900" height="150" border="0" /></a></td>
      </tr>
    </table>
      <table width="100%" border="0">
        <tr>
          <td width="100"><div align="center" class="a"><a href="index.html" class="a">Home</a></div></td>
          <td width="100"><div align="center" class="a"><a href="/jumps.html" class="a style1">Jumps</a></div></td>
          <td width="100"><div align="center" class="a"><a href="/course.html" class="a style1">Course</a></div></td>
          <td width="100"><div align="center" class="a"><a href="/prices.html" class="a style1">Prices</a></div></td>
          <td width="100"><div align="center" class="a"><a href="/location.html" class="a style1">Location</a></div></td>
          <td width="100"><div align="center" class="a"><a href="/contact_us.html" class="a style1">Contact us</a></div></td>
        </tr>
      </table>
      <table width="100%" border="0" cellpadding="20" cellspacing="0">
        <tr>
          <td><p> </p>
          <p> </p></td>
          <td><div align="center"><img src="Images/horses 048.JPG" width="700" height="450" /></div></td>
          <td> </td>
        </tr>
      </table>
      <blockquote>
        <p>Welcome to Scorrier House cross country course. The course is in the breathtaking Cornish countryside, set in rolling farmland and woodland. </p>
        <p>The course is just over two miles long and securely fenced. Due to a good grass covering, we have a good going all year around. </p>
        <p>With a vast range of jumps and open fields, it is ideal for schooling, or simply hack around in a relaxed atmosphere taking in the beautiful countryside. All of our jumps have options to avoid them, so you can jump as much or as little as you wish. There is also plenty of flat space to warm up in. </p>
        <p>We are ideally situated, just a short distance from the A30. Once you arrive at the course, there is plenty of parking with some hard standing. </p>
        <p> </p>
      </blockquote></td>
    <td width="180"> </td>
</tr>
</table>
</body>
</html>

Try pasting this code into a new, blank HTML document in Code View.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Scorrier House Cross Country Course</title>
<style type="text/css">
body {
background-image: url(Images/background_047.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 900px;
margin: 0 auto;/**centers page**/
text-align: center; /**centers page in older browsers**/
font-size:90%;
p {
font-size: 0.8em;
line-height:1.3em;
text-align:left;
padding: 0 6em 0.5em 6em;
margin: 0 0 0.5em 0;}
/**links**/
a {font-size: 14px;text-decoration: none;}
a:link {color:#000;}
a:visited {color:#0033CC;}
a:hover, a:active, a:focus {font-weight:bold}
/**menu**/
.menu td { text-align: center; width: 100px;}
</style>
</head>
<body>
<table width="100%" border="0">
<tr>
<td><a href="/index.html"><img src="Images/placeholder.JPG" alt="placeholder" width="900" height="150" border="2" /></a></td>
</tr>
</table>
<table class="menu" width="100%" border="0">
<tr>
<td><a href="index.html">Home</a></td>
<td><a href="/jumps.html">Jumps</a></td>
<td><a href="/course.html">Course</a></td>
<td><a href="/prices.html">Prices</a></td>
<td><a href="/location.html">Location</a></td>
<td><a href="/contact_us.html">Contact us</a></td>
</tr>
</table>
<table width="100%" border="0" cellpadding="20" cellspacing="0">
<tr>
<td><div align="center"><img src="Images/horses048.JPG" alt="horses" width="700" height="450" border="2" /></div></td>
</tr>
</table>
<p>Welcome to Scorrier House cross country course. The course is in the breathtaking Cornish countryside, set in rolling farmland and woodland. </p>
<p>The course is just over two miles long and securely fenced. Due to a good grass covering, we have a good going all year around. </p>
<p>With a vast range of jumps and open fields, it is ideal for schooling, or simply hack around in a relaxed atmosphere taking in the beautiful countryside. All of our jumps have options to avoid them, so you can jump as much or as little as you wish. There is also plenty of flat space to warm up in. </p>
<p>We are ideally situated, just a short distance from the A30. Once you arrive at the course, there is plenty of parking with some hard standing.</p>
</body>
</html>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Why does the mandatory field indicator (*) not aligned in Firefox 4.0?

[http://i56.tinypic.com/24ng1vt.png Asterisk not aligned in Firefox 4.0]

Who makes your mouse? Is it a Logitech? If so, please see this post: http://forums.mozillazine.org/viewtopic.php?f=38&t=206293

Dreamweaver CS3 Div Alignment Problems.

I have been building a website on my new MacBook. I have it
just about done so I uploaded it to my web host to check out the
appearance. It looks great on my Mac, but I checked it on my
parents PC and it looked terrible. Being a new Mac user, I thought
it was something going on with the operating systems, but I checked
it on a Mac deskop and the alignment was still messed up. On the
Mac desktop it is too far to the left and on the PC it is too far
to the right. This is the link to the site:
http://www.potomacsouth.com/Home.html
You can click View>Source to see the code.
I noticed if you drag the window to a different size the
images behind the div move, but the div stays in place. Is there
some kind of code or something that I can do to make it stay in the
designated area on every computer regardless of settings?
Thanks.

evansdb78 wrote:
> I noticed if you drag the window to a different size the
images behind the div
> move, but the div stays in place. Is there some kind of
code or something that
> I can do to make it stay in the designated area on every
computer regardless of
> settings?
Thats because you are using Absolutely Positioned
<divs> so they stay...
well.... Absolutely Positioned i.e., they WILL NOT move as
you increase
or decrease the width of the browser window.
Solution:
Open your page and go to code view
FIND THIS PIECE OF CODE:
<div align="center"><img src="
http://www.potomacsouth.com/Site-Top.jpg"
width="832" height="558" /><br />
CHANGE IT TO:
<div style="position: relative; width: 832px; margin: 0
auto;">
<img src="
http://www.potomacsouth.com/Site-Top.jpg"
width="832"
height="558" /><br />
NOW FIND YOUR ABSOLUTELY POSITIONED <DIV> CODE:
<div id="apDiv2">
<p class="style6"><u><span
class="style8">Welcome</span></u><span
class="style8">!</span></p>
<p align="left" class="style5"> Welcome to
PotomacSouth.com where
you can leave your work and worries on the beach. Whether you
are
looking to get in on the fishing action Maryland and Virginia
waters
have to offer, or take a tour to one of our destinations via
the water
Potomac South can get you there. We offer tours of St. George
Island
and its surrounding waters including a look at what the local
fish nets
have caught, stop and see the Lighthouse, and two state
parks, Historic
St. Marys City, and Point Lookout. If food is on your
mind take an
evening cruise to catch a bite to eat at The Mooring
Restaurant. If you
have any questions or are interested in a trip today give
Captain Dan a
call or email through our Contact Us
link.</p>
</div>
MOVE IT TO DIRECTLY BETWEEN THE TWO LINES OF CODE YOU
ORIGINALLY
CHANGED. SO IT LOOKS AS BELOW:
<div style="position: relative; width: 832px; margin: 0
auto;">
<div id="apDiv2">
<p class="style6"><u><span
class="style8">Welcome</span></u><span
class="style8">!</span></p>
<p align="left" class="style5"> Welcome to
PotomacSouth.com where
you can leave your work and worries on the beach. Whether you
are
looking to get in on the fishing action Maryland and Virginia
waters
have to offer, or take a tour to one of our destinations via
the water
Potomac South can get you there. We offer tours of St. George
Island
and its surrounding waters including a look at what the local
fish nets
have caught, stop and see the Lighthouse, and two state
parks, Historic
St. Marys City, and Point Lookout. If food is on your
mind take an
evening cruise to catch a bite to eat at The Mooring
Restaurant. If you
have any questions or are interested in a trip today give
Captain Dan a
call or email through our Contact Us
link.</p>
</div>
<img src="
http://www.potomacsouth.com/Site-Top.jpg"
width="832"
height="558" /><br />
NOW FIND THE 'apDiv2' CSS IN THE HEAD SECTION OF YOUR PAGES
CODE AND
CHANGE THE 'LEFT' AND 'TOP' POSITIONING AS BELOW.
#apDiv2 {
position:absolute;
width:315px;
height:358px;
z-index:1;
left: 70px;
top: 160px;
overflow: auto;
THATS IT. IT SHOULD NOW MOVE AS YOUR BACKGROUND IMAGE MOVES

Weird PHP or Div issue with FireFox?

Not sure what's going on but a specific div code is appearing differently in Firefox and Chrome.
http://i.imgur.com/LHkhEEM.png
In FireFox, the <div> Sidebar appears OUTSIDE of the content div....
In Chrome, the <div> Sidebar appears INSIDE of the content div...
It appears fine on everyone's firefox except for mine. So is there a setting or something that I did to make this happen? or reverse? I did the firefox restart and the problem is still there. I'm losing my mind over here cause I can't edit the site.

This is the HTML:
<pre><nowiki>
<div id="sidebar">
<div class="<?php echo $tmq_sidebarwidth;?>">
<?php dynamic_sidebar( $tmq_pagesidebar ); ?>
</div>
</div>
<div class="clearboth"></div>
</nowiki></pre>
Everything is closed properly... And as mentioned, it works in everyone elses firefox. We all have the latest version - 23.0.1.
Why would this appear fine on someone elses but not mine?
''moderator added tags to show the posted code''

Floated DIV alignment woes

I have created 9 left-floated DIV 3 a row with the last div of the first row taller than the first two, how can i make the first two div of the second row occupy the space on top of them instead of aligning to the bottom of the 3rd div in the first row.

It's difficult to envision your layout, considering a float left on 9 divs should have the effect of aligning them next to one another, from left to right, like so: http://www.webmagi.com/Tests/Floating-Divs.htm
Dreamweaver leaves much to be desired with regards to visually working with CSS based layouts. You might look into Stylizer 5 for this: http://www.stylizerapp.com/ (Great video intros)

RH7 Search pane text alignment in Firefox

When I do a search in a RH7 webhelp guide in Firefox 3.0.2,
all the returned topic names touch the left-hand edge of the search
pane. In IE7 there is a one-pixel space before the text, as you'd
expect in any windows app.
Any ideas how to fix this for Firefox?

csruskin,
Welcome to Apple Discussions.
But for the fact that none of the links work, the page displays perfectly on my Safari.
W3C Markup Validation Service says:
Failed validation, 25 errors
;~)

DIV Alignment Problems

Div problems...I need to get more experienced with working
with Divs cause I always seem to run into trouble...
I am using an Accordion Magic plugin from project7 for my
navigation. In one of the panels is a list menu drop down search
form. When this one panel opens, the main content table shifts
slightly to the right. All other panels work fine.
I am sure that this is something to do with the Div or the
list/menu form. I tried removing the menu leaving only a single
link and the panel was fine. I have tried several CSS styling
changes to no avail. I have done lots of trial and error with
padding, margins and width % settings.
The page can be viewed at:
http://www.dvdflashbacks.com/williamsburghealth/index.php
I also have attached the code here:

Forgot...Here is the current CSS I am using for the form
itself:
#categorySearch2 {
text-indent: 5px;
width: 92%;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 5px;
And here is the CSS for the Panel Content:
.p7ABcontent {
font-size: 12px;
color: #333333;
background-color: #FFFFFF;
background-image: url(images/p7ap_light_gray_bevel.jpg);
background-repeat: repeat-x;
text-indent: 10px;
line-height: .75em;
padding-top: 10px;
padding-bottom: 5px;
Thanks in advance for any help with this issue!

CSS and DIV alignment problem in IE6

I am working on a new site based on a DW template. I have
modified the right layout slightly for a flash header and also for
a footer div. I am also using alternate CSS files to fix IE6
display problems.
The site looks correct in IE7 and Safari, but in IE6
something is causing the right DIV to collapse. I have tried
adjusting the padding and margins for the divs in the alternate css
file several times with different results.
Does anyone have suggestions on how to correct this that I
might be overlooking.
site can be viewed at
http://www.lasnapshotz.com
Thanks in advance.

Sorry typed the link wrong originally. Here is the real link:
http://www.lasnapshotz.com

Page Alignment in Firefox vs. IE

Hi all,
I'm having an issue with a site I'm working on. It seems to
work perfectly in FF, but when you use IE the page seems to 'shift'
to the right, but if you go full screen, it's centered (or if the
browser window is not maximized you have to scroll to the right)
I'm sure it's an easy fix, but I'm not sure where to look.
I'm confused because it works fine in FF.
Any help is greatly appreciated, thanks.
The URL is
http://feedyoursoul.org

How about changing it to this -
<table width="100%" border="0" align="center"
which I'm pretty sure is what you meant to say.
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
==================
"Malcolm _" <[email protected]> wrote in message
news:[email protected]..
> On Sun, 22 Jun 2008 13:49:20 +0000 (UTC), "jcbuche"
> <[email protected]> wrote:
>
>>Thanks for the link.
>>
>> But it seems I have bigger issues. I have a total of
40 or so errors, not
>> sure
>>if that's good or bad (I'm guessing bad)
>>
>> How do I go about fixing these, I have so many and
it seems when I fix
>> one I
>>get about 4 more that pop up.
>
> To start with - Change this:
> </style>
> <table width="100%" height="90%" border="0"
align="center"
> cellpadding="0" cellspacing="0">
>
> to this
>
> </head>
> <body>
> <table width="100%" height="90%" border="0"
align="center"
> cellpadding="0" cellspacing="0">
>
> That will make validation report less errors - about 19
I got using it
> and give you a better idea.
>
> But honestly - there is some really messy code in there.
>
>
>>
>> Is there someone I could get to fix all this for me?
I don't understand
>> alot
>>of the errors and the explanation of them seems to
confuse me more.
>>
>> <tr>
Error Line 179, Column 5: document type does not allow element
>> "tr"
>>here; assuming missing "table" start-tag. for
example.
>>
>> Thanks again.
> --
>
> ~Malcolm~*...
> ~*

Horizontal center align multiple divs

I have a container div (#div1), which contains 5 child divs (#div2, #div3, #div4, #div5, #div6) contained inside it.
The code is something like this:
<div id="div1">
<div id="div2">Content2</div>
<div id="div3">Content3</div>
<div id="div4">Content4</div>
<div id="div5">Content5</div>
<div id="div6">Content6</div>
</div>
The Content2,3,4,5,6 are all of different length.
I want to align the 5 child divs (#div2, #div3, #div4, #div5, #div6) horizontally in one row inside the container #div1, such that the vacant space inside #div1 gets uniformly distributed between the child divs and the child divs become uniformly aligned in the "center".
The main code for all child divs is (id no is the only thing changed to 3,4,5,6 etc)
#div2{
width: 23%;
position: relative;
margin:0px auto;
white-space:normal;
*display: inline;
_display: inline;
*margin: 0 2px 0 2px;
display:INLINE-block;
float:none;
The main code for container #div1 is
#div1{
margin:0px auto;
width:98%;
text-align:center;
vertical-align:top;
white-space:nowrap;
position:relative;
display:block;
float:none;
However the above code only centers the child div on localhost in IE and Chrome Browser. However on the remote production server it aligns all child divs in one row only in Chrome browser. In IE9, it aligns all the child divs in one single column below one another instead of in one row as shown when hosted on localhost.
If we change float to left or right for child div, no centering takes place and instead all the child divs align to one side. If the display property of child div is changed to block, the centering fails even on localhost. If the display is changed to inline, the div width becomes 100% automatically and it occupies the complete with of container.
Can some one advise on how to ensure uniform horizontal alignment of all child divs in one row on localhost as well as actual remote site server on IE (>=IE6, all other browsers also). I would prefer if display:inline-block is also avoided (display:block or inline is preferred) as it may not be supported in earlier browsers.

when margin-left:2%, the suggested code is making the div before gap d dropoff to next row.
Each descendent div will have an effective width of 18% + 2% = 20%. There are 5 such divs. 20% x 5 = 100%. Thus 100% of the space available in div1 will be filled - no more no less. Bear in mind that the container div is set at a percent width as well, meaning that the resulting number may not produce even results when 18% and 2% are caclulated, i.e., there will be a rounding error. Also bear in mind that the left-most div in my example will also have the margin applied. You can eliminate that by a bit more CSS trickery (this applies the margin only to divs that are not the first child of div#div1) -
<style type="text/css">
#div1 div {
          width: 18%;
          margin-left:2%;
          float:left;
#div1 div:first-child {
      margin-left:0;
#div1 {
          margin:0px auto;
          width:95%;
          background-color:#CCC;
          overflow:hidden;
</style>
That method, however, will leave some variable gap to the right of the last div because of the rounding error and the fact that you are now only using up 18% + 20% + 20% +20% + 20% = 98% of the total space.
Be aware that you will need to invoke Live mode to see this render properly in DW.
This approach is simply a variant of the approach shown on css-tricks (which will also fail depending on the width of the containing element. I suggest you NOT use a containing element that is percent sized and set a fixed width for it. That will alow you to specify your interior spacing with no rounding error.

Problem with jquery slide show conflict with vertical navigation menu in Firefox & Chrome

Problem with jquery slide show conflict with vertical navigation menu in Firefox & Chrome. Works in IE. This is my first time trying to post a question - so please be kind. I am also not good with code and am finding css a real challenge after learning to design based on tables. I'm using CS5.
The "test" page with the slide show is: http://www.reardanwa.com/index-slides.html   The same page without the slide show is http://www.reardanwa.com/
I realize the images are not ideally sized - I'll fix those once I get the pages to function. Maybe I need a different slide show? I would prefer a widget that I can modify to required size & postition. Again - I'm not good at building with code from scratch.
The problem is the naviagation links that are directly next to the slide show do not work in Firefox of Chrome. They do work in IE.
I've read about using jQuery.noConflict(); code but can't figure out the correct way to use it in my case or whether that's even part of the solution. I know my code is not well organized as I have cobbled together from various sources in an attempt to format the page the way the client wants it. Also, FYI, I will eventually try to make the page work in Surreal CMS.
I've spent sevaral days over the last several weeks trying to solve sth slide show/navigation conflict - so any specific light you can shed will be much appreciated.
Thanks in advance.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Reardan Area Chamber of Commerce</title>
<meta name="description" content="home page for Reardan Area Chamber of Commerce" />
<meta name="keywords" content="Reardan WA, chamber of commerce" </>
<script src="scripts/jquery-1.6.min.js" type="text/javascript"></script>
<script src="scripts/jquery.cycle.all.js" type="text/javascript"> </script>
<script type="text/xml">
</script>
<style type="text/css">
                              #slideshow {
                                  padding: 10px;
                                        margin:0;
                              #slideshow-caption{
                                        padding:0;
                                        margin:0;
                              #slideshow img, #slideshow div {
                                  padding: 10px;
                                  background-color: #EEE;
                                  margin: 0;
body {
          font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
          background: #004B8D;
          margin: 0;
          padding: 0;
          color: #000;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
          padding: 0;
          margin: 0;
h1, h2, h3, h4, h5, h6, p {
          margin-top: 0;           /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
           /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
.left
position:absolute;
left:0px;
.center
margin:auto;
width:95%;
.box
          position:relative;
          left:-90px;
          width:950px;
          height:350px;
          border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
          z-index:1000;
.slide{
    position:absolute;
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
          border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
          color: #42413C;
          text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
          color: #6E6C64;
          text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
          text-decoration: none;
/* ~~this fixed width container surrounds the other divs~~ */
.container {
          width: 960px;
          min-height:900px;
          padding:5px 0px 0px 0px;
          background: #E8F8FF;
          margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
          background: #E8F8FF;
          padding:10px 5px 0px 5px;
.sidebar1 {
          float: left;
          width: 225px;
          margin: 60px;
          color: #FFFF0D;
          background: #595FFF;
          border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
          padding: 5px 5px 0px 5px;
    border: 3px solid #F7F723;
    z-index:-1;
.sidebar2 {
          float: left;
          width: 275px;
          color: #FFFF0D;
          text-align: left;
          background: #595FFF;
          padding-bottom: 10px;
          border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    border: 3px solid #F7F723;
    z-index:2;
.sidebar3 {
          float: left;
          width: 275px;
          color: #FFFF0D;
          text-align: left;
          background: #595FFF;
          padding-bottom: 10px;
          border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    border: 3px solid #F7F723;
    z-index:3;
.content {
          padding: 0px 0px 0px 0px;
          width: 780px;
          float: left;
          background: #E8F8FF;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
          padding: 0px 15px 5px 10px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
          list-style: none; /* this removes the list marker */
          border-top: 0px solid #FFFF66; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
          margin-bottom: 50px; /* this creates the space between the navigation on the content below */
          font: Arial Black, Verdana, , Helvetica, sans-serif;
          font-size:1.3em;
          font-weight:bold;
          z-index:2;
ul.nav li {
          border-bottom: 0px solid #FFFF66; /* this creates the button separation */
          font: 120%/1.4 Arial Black, Verdana, , Helvetica, sans-serif;
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
          padding: 3px 0px 5px 0px;
          display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
          width: 185px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
          text-decoration: none;
          color: #FFFF0D;
          background: #595FFF;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
          background: #595FFF;
          font: 120%/1.4 Arial Black, Verdana, , Helvetica, sans-serif;
          color: #FFFFFF;
/* ~~ The footer ~~ */
.footer {
          padding: 10px 0;
          background: #595FFF;
          color: #FFFF0D;
          position: relative;/* this gives IE6 hasLayout to properly clear */
          clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
          float: right;
          margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
          float: left;
          margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
          clear:both;
          height:0;
          font-size: 1px;
          line-height: 0px;
-->
</style>
</head>
<body>
<div class="container">
<div class="header">
<a href="#"><img src="images/Chamber-Logo-2.gif" alt="Reardan Chamber Logo" width="187" height="163" hspace="10" vspace="5" align="top" /></a><img src="images/Reardan-Chamber-Title.gif" width="476" height="204" alt="Reardan Area Chamber of Commerce, Dedicated to Preserving and Enhancing Area Businesses" /><p></p>
<p style="color: #F00">This Site is under construction! Please pardon our dust as we create!</p>
</div>
<div class="sidebar1">
    <ul class="nav">
      <li><a href="about.html">About Us</a></li>
      <li><a href="history.html">Reardan History</a></li>
      <li><a href="activities.html">Activities</a></li>
      <li><a href="business.html">Business<br />
        Directory</a></li>
      <li><a href="about.html">Join the<br />
        Chamber</a></li>
       <li><a href="links.html">Links<br />
  <span style="font-size: 85%">Tourism</span><br />
      </a></li>
    </ul>
     </div>
<br />
<br />
<br />
<br />
<div class="box" +"slide">
<script type="text/javascript">
// BeginOAWidget_Instance_2559022: #slideshow
                           slideshowAddCaption=true;
$(window).load(function() {
$('#slideshow').cycle({
                    after:                              slideshowOnCycleAfter, //the function that is triggered after each transition
                    autostop:                              false,     // true to end slideshow after X transitions (where X == slide count)
                    fx:                                        'blindX',// name of transition effect
                    pause:                              false,     // true to enable pause on hover
                    randomizeEffects:          true, // valid when multiple effects are used; true to make the effect sequence random
                    speed:                              100, // speed of the transition (any valid fx speed value)
                    sync:                              true,     // true if in/out transitions should occur simultaneously
                    timeout:                    5000, // milliseconds between slide transitions (0 to disable auto advance)
                    fit:                              true,
                    height:                       '300px',
                    width:         '525px'   // container width (if the 'fit' option is true, the slides will be set to this width as well)
function slideshowOnCycleAfter() {
          if (slideshowAddCaption==true){
                              $('#slideshow-caption').html(this.title);
// EndOAWidget_Instance_2559022
</script>
<div id="slideshow">
    
    <img src="images/100_1537.jpeg" width="600" height="450" title="caption for image1" /> <img src="images/Parade-2011-2.jpg" width="300" height="225" title="caption for image2" /> <img src="images/100_1495.jpeg" width="600" height="450" title="caption for image3" />
    <div title="sample title"> Images for slide show will need to be re-sized to fit box to avoid distortion</div>
    <img src="images/beach4.jpg" width="200" height="200" title="caption for image4" /> <img src="images/beach5.jpg" width="200" height="200" title="caption for image5" /> </div>

<div id="slideshow-caption"></div></div>
<div class="sidebar2" "anotherClass editable"><p align="center"><strong>Chamber News</strong><br />
Local News item
<br />
Another New item</p>
<p align="center">lots of news this week<br />
    <br />
    <br />
    <br />
</p>
</div>
<div class="sidebar3" "anotherClass editable"><p align="center"><strong>Upcoming Events</strong></p>
<div align="center">    <a href="activities.html" style="color: #FFFF0D">Community wide yard sales</a><br />
    <br />
    <br />
    <br />
    <br />
</div>
</div>
<div class="content"><br />
<br />
</div>
<div class="footer">
        <p align="center"><span style="font-size: small">Reardan Area Chamber of Commerce</span><br />
          <span style="font-size: x-small">[email protected] - 509.796.2102</span><br />
        </p>
        
</div></body>
</html>

If you DO want the slideshow overlaping the navigation try the below css:
.sidebar1 {
    float: left;
    width: 225px;
    margin: 60px 0px 60px 60px;
    color: #FFFF0D;
    background: #595FFF;
    border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    padding: 5px 5px 0px 5px;
    border: 3px solid #F7F723;
.box {
float: left;
margin-left:-60px;
width:700px;
height:350px;
border-radius: 13px;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;

Scrolling main content in an AP Div disappearing behind other AP Divs...?

Newbie here, using CS3. No CSS power user (yet!)--general concepts, yes, but not much practice. Meanwhile two recent CS3 classes, several books, and a concerted search through online forums have failed to point me toward a fix for this prob. Any help greatly appreciated.
Prob statement: In design view the core content of my pages disappears behind my footer and a secondary box, both AP Divs, so that I cannot see or edit anything beyond the bottom edge of the core-content AP Div. Overflow for that AP Div is set to scroll. The "obscured" content shows up only as an outlined shape extending past the footer etc. (and I can see some of the obscured text "through" the footer). Down arrow doesn't get me there: it just scoots down the outlined-but-obscured section. Doubleclicking highlights everything that's obscured so that I can see the relative shapes of the paragraphs, but doesn't expose the content. This seemed to start the first time I set the content div to scroll any overflow. I've changed it back/forth since; no joy.
Rendered in IE or Firefox, all the pages with all their varying content lengths look fine. Scrollbar works great. It's just that in order to edit or compose further, I have to copy everything into Notepad or something, work there, and then paste it back into DW. Definitely non-optimum, though: can't format or add hyperlinks to the content.
I'm using AP Divs, with scroll on in the "content" AP Div, because I couldn't figure out how to create a template where the footer would slide down the page in response to varying amounts of content. Started out with a table to handle all this, but an instructor recommended AP Divs so I went that way. I'd like to resolve this, rather than just go back to using tables while leaving this AP Div oddness a mystery.
The footer is full of a Spry tabbed panels giving my legal/green/design statements and other small bits of info. The secondary box is an AP Div called "quotations" and is for friendly little bits of cute/clever nonsense at the bottom of each page.
Tried a number of different settings so far and by now I've probably truly messed things up. Can anyone suggest a fix?
The code for the template file seems long, so my apologies. However, the content type isn't allowed for attachments so I've pasted it in below.
Much appreciation!
=================================
<!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></title>
<style type="text/css">

</style>
<script src="../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

</script>

<style type="text/css">

</style>
<meta name="Description" content="Skyway Consulting: taking your information to a higher level! We do information design: planning, writing, editing, and indexing your user documentation. We also design websites, website graphics, print layouts, and logos. Basically, we want to be your source for the way your organization interfaces with the world. " />
</head>
<body onload="MM_preloadImages('../Images/Button_WebDesignOver.gif','../Images/Button_UserDocsO ver.gif','../Images/Button_LogoDesignOver.gif','../Images/Button_PrintLayoutOver.gif','../ Images/Button_ITSvcsOver.gif','../Images/Button_Home.gif','../Images/Button_HomeOver.gif', '../Images/Button_WebDesign.gif','../Images/Button_UserDocs.gif','../Images/Button_ITSvcs. gif','../Images/Button_LogoDesign.gif','../Images/Button_AboutUs.gif','../Images/Button_Co ntact.gif','../Images/Button_AboutUsOver.gif')">
<div id="LeftSidebar"></div>
<div id="Banner">
<div align="center"><img src="../Images/Banner.gif" alt="Skyway Consulting" width="335" height="184" /></div>
</div>
<div id="BannerPhone">
<p align="center">Taking your information to a higher level.</p>
<p align="center">530.965.2624</p>
<p align="center"><img src="../Images/email_Info.gif" alt="Address" width="203" height="23" /></p>
</div>
<div id="NavBar">
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td><a href="../index.html" target="_top" onclick="MM_nbGroup('down','group1','Home','../Images/Button_HomeOver.gif',1)" onmouseover="MM_nbGroup('over','Home','../Images/Button_HomeOver.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="../Images/Button_Home.gif" alt="Skyway Consulting Homepage" name="Home" border="0" id="Home" onload="" /></a></td>
      <td><a href="../webdesign.html" target="_top" onclick="MM_nbGroup('down','group1','WebsiteDesign','../Images/Button_WebDesignOver.gif', 1)" onmouseover="MM_nbGroup('over','WebsiteDesign','../Images/Button_WebDesignOver.gif','',1) " onmouseout="MM_nbGroup('out')"><img src="../Images/Button_WebDesign.gif" alt="Website Design Services" name="WebsiteDesign" width="106" height="30" border="0" id="WebsiteDesign" onload="" /></a></td>
      <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','UserDoc','../Images/Button_UserDocsOver.gif',1)" onmouseover="MM_nbGroup('over','UserDoc','../Images/Button_UserDocsOver.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="../Images/Button_UserDocs.gif" alt="User Documentation Services" name="UserDoc" width="106" height="30" border="0" id="UserDoc" onload="" /></a></td>
      <td><a href="../it_svcs.html" target="_top" onclick="MM_nbGroup('down','group1','ITServices','../Images/Button_ITSvcsOver.gif',1)" onmouseover="MM_nbGroup('over','ITServices','../Images/Button_ITSvcsOver.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="../Images/Button_ITSvcs.gif" alt="IT Services" name="ITServices" width="106" height="30" border="0" id="ITServices" onload="" /></a></td>
      <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','LogoDesign','../Images/Button_LogoDesignOver.gif',1) " onmouseover="MM_nbGroup('over','LogoDesign','../Images/Button_LogoDesignOver.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="../Images/Button_LogoDesign.gif" alt="Logo Design Services" name="LogoDesign" width="106" height="30" border="0" id="LogoDesign" onload="" /></a></td>
      <td><a href="../about.html" target="_top" onclick="MM_nbGroup('down','group1','AboutUs','../Images/Button_AboutUsOver.gif',1)" onmouseover="MM_nbGroup('over','AboutUs','../Images/Button_AboutUsOver.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="../Images/Button_AboutUs.gif" alt="AboutUs" name="AboutUs" border="0" id="Contact" onload="" /></a></td>
    </tr>
</table>
</div>
<div id="Content">
<p>Content</p>
</div>
<div id="Footer">
<div id="TabbedPanels1" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab" tabindex="0">Info</li>
      <li class="TabbedPanelsTab" tabindex="0">Legal</li>
      <li class="TabbedPanelsTab" tabindex="0">Privacy Policy</li>
      <li class="TabbedPanelsTab" tabindex="0">Green Statement</li>
      <li class="TabbedPanelsTab" tabindex="0">Design Credit</li>
      <li class="TabbedPanelsTab" tabindex="0">Webmaster</li>
    </ul>
    <div class="TabbedPanelsContentGroup">
      <div class="TabbedPanelsContent">Click for information on these topics.</div>
      <div class="TabbedPanelsContent">(c) 2009 Skyway Consulting. All content, including photographic content, is owned by Skyway Consulting. You may not copy, reproduce, modify, or publicly display, perform, distribute, or otherwise use the content provided on this site in any way for any public or commercial purpose. Skyway Consulting will not work on websites involving objectionable material, including but not limited to pornography, hatred, intolerance, or animal abuse. Our management staff's decision on what constitutes "objectionable material" is final. </div>
      <div class="TabbedPanelsContent">We recognize that your privacy is important. This privacy policy applies to all of our services and website pages. We do not set cookies. We do not sell or otherwise seek to profit from the contact information you provide, although we may preserve some information for use by Skyway Consulting. If you have questions about this privacy policy, please [link]contact us.</div>
      <div class="TabbedPanelsContent">Skyway Consulting is an American home-based business that makes every effort to conserve, reduce, reuse, and recycle.</div>
      <div class="TabbedPanelsContent">
        <p>Page design by Skyway Consulting. (Of course!)</p>
        <p>Tiling forest graphic at left by the talented Silvia Hartmann, <a href="http://silviahartmann.com/">http://silviahartmann.com/</a>. (Thank you, Silvia!)</p>
      </div>
      <div class="TabbedPanelsContent">Page problems? Contact <img src="../Images/email_Webmaster.gif" alt="Webmaster e-dress" width="177" height="18" align="absmiddle" /></div>
    </div>
</div>
</div>
<div id="Quotation">Quotation</div>
<div id="Heading">Heading</div>
<div align="center"></div>
<script type="text/javascript">

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

I hadn't looked at the code at all. I was relying on the Dreamweaver GUI to correctly guide me to a desired outcome.
I think that this is not a desirable approach to Dreamweaver, which will write perfect HTML if you let it, but it's too easy to click buttons and apply wizards without regard for the markup consequences, thereby producing a veritable pig's ear of a page. If you are going to use DW professionally, you will have to become comfortable with code. That doesn't mean you will have to spend 100% of your time in Code view, but you will definitely need to watch the code as it is formulated.
I'm not starting from an engineering background.
Neither did I. But I did start with a sincere desire to become proficient, and to learn the technology.
Murray, I get the idea of redoing my template without AP Divs, and will get into that. I don't know what "image swaps and links" mean, though. Would you mind teaching this newbie on this point?
Not at all. When you select the "NavBar" feature, you are placing elements and code on your page that were designed in the dark ages of HTML (frames). Some of the features in the NavBar will only work in a framed page (the down image and the over while down). The code is antique, invalid, and just wrong to be included. My suggestion was to forego this and just place your button images on the page (in whatever container you need to use), and apply links to them so that they link to the desired pages. Then apply swap image behaviors to them to create your rollover effects, one for each button. The result will be modern code, that has none of the legacy stuff of the navbar, and that will work fine for you. As you become more familiar with CSS you can investigate even better ways to do such menus (if you want a preview of this, Google "CSS Sprites). The latter method is usually the only way I do menus anymore. And even then, I use both text and graphics for accessability and SEO purposes.
I will say that I like your attitude. A determination to learn and improve is a winning approach.

Offset div / positioning problem in IE

I've posted this problem in another thread but it was a sub question. Anyway, the problem I'm having is positioning a div over all other divs. I've managed to get it to work perfectly fine on Firefox and Chrome the way I wanted. The problem is usually when it comes to internet explorer. I just want the image or div placed on the right side of the site but changing the properties always has the same result, internet explorer places is far beyond where it's suppose to be. I'll add images, the code, and the live site below. Any help would be appreciated.
Chrome View:
Firefox View:
*IE View (Wrong):
Website: http://emergencyclean-up.com
Code:
<!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>Emergency Clean Up Homepage</title>
<style type="text/css">
body {
          background-color: #333333;
#entireSite #sidebar #spacer {
          height: 300px;
          width: 350px;
#entireSite #sidebar #newsletter {
          background-image: url(../Images/NewsLetterBackground.png);
          height: 165px;
          width: 350px;
          color: #FFF;
</style>
<link href="main.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body onload="MM_preloadImages('../Images/Buttons/buttonOver_01.gif','../Images/WaterDamageOver .png','../Images/FireDamageOver.png','../Images/MoldRemediationOver.png','../Images/SootRe movalOver.png','../Images/OdorControlOver.png','../Images/facebook-logoOver.png','../Image s/yelp-logoOver.png','../Images/LinkedIn_logoOver.png','../Images/twitter-logoOver.png')">

<div style="width:100%;">
<div style="width:900px; margin-left:auto; margin-right:auto;">
<div style="width:100%; float:left;background-color:#333333;">

<div id="navbarArea">

<div align="center">
<div id="navbar">
<ul id="MenuBar1" class="MenuBarHorizontal">
    <li><strong><a href="index.html">Home Page</a> </strong></li>
    <li><strong><a href="About Us.html">About Us</a></strong></li>
    <li><strong><a href="Services.html">Services</a> </strong></li>
    <li><strong><a href="Testimonials.html">Testimonials</a></strong></li>
    <li><strong><a href="Contact Us.html">Contact us</a></strong></li>
    <li><strong><a href="Special Offers.html">Special Offers</a></strong></li>
</ul>
</div></div>

</div>


<div id="entireSite">

<div id= "sidebar">

<div id= "spacer">
</div>


<div id= "newsletter">
<center><font size="5">Subscribe to Our Newsletter</font></center>
<form action="subscriptionform.php" method="post" id="Newsletter">
<table width="100%" border="0" cellpadding="3">
<tr>
    <td>Name:</td>
    <td><input name="News Letter Name" type="text" size="30" maxlength="40" /></td>
</tr>
<tr>
    <td>Email:</td>
    <td><input name="News Letter Email" type="text" size="30" maxlength="40" /></td>
</tr>
<tr>
    <td>Zip Code:</td>
    <td><input name=" News Letter Postal Code" type="text" size="10" maxlength="12" /></td>
</tr>
</table>
<center><input name="Subscribe" type="Submit" id="Subscribe" /></center>
</form>
</div>

</div>


<div id= "maintext">

<div id= "titlebar">
<br />
</div>

<br />
<center><img src="../Images/Logo.png" width="500" height="160" alt="Logo" />
<br />
<br />
<center>Choose from one our various services offered here at Emergency Clean-up.</center>
<br />
<table width="100%" border="0" cellpadding="0">
<tr>
    <td><center><a href="Water Damage.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('WD','','../Images/WaterDamageOver.png',1)"><img src="../Images/WaterDamage.png" alt="Water Damage" name="WD" width="75" height="75" border="0" id="WD" /></a>
    <br />
    Water Damage</center></td>
    <td><center><a href="Fire Damage.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('FD','','../Images/FireDamageOver.png',1)"><img src="../Images/FireDamage.png" alt="Fire Damage" name="FD" width="75" height="75" border="0" id="FD" /></a>
    <br />
    Fire Damage</center></td>
    <td><center><a href="Mold Remediation.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('MR','','../Images/MoldRemediationOver.png',1)"><img src="../Images/MoldRemediation.png" alt="Mold Remediation" name="MR" width="75" height="75" border="0" id="MR" /></a>
    <br />
    Mold Remediation</center></td>
    <td><center><a href="Soot Removal.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('SR','','../Images/SootRemovalOver.png',1)"><img src="../Images/SootRemoval.png" alt="Soot Removal" name="SR" width="75" height="75" border="0" id="SR" /></a>
    <br />
    Soot Removal</center></td>
    <td><center><a href="Odor Control.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('OC','','../Images/OdorControlOver.png',1)"><img src="../Images/OdorControl.png" alt="Odor Control" name="OC" width="75" height="75" border="0" id="OC" /></a>
    <br />
    Odor Control</center></td>
</tr>
</table>
<br />
<center> For more services please click <a href="Services.html">here</a>. </center>
</div>


<div id= "bottombar">
<img src="../Images/bottomBar.png" width="900" height="25" alt="bottombar" /></div>


<div id= "hotlinks">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('FB','','../Images/facebook-logoOver.png',1)"><img src="../Images/facebook-logo.png" alt="Facebook" name="FB" width="25" height="25" border="0" id="FB" / align="left"></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('YP','','../Images/yelp-logoOver.png',1)"><img src="../Images/yelp-logo.png" alt="Yelp" name="YP" width="25" height="25" border="0" id="YP" / align="left"></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('TR','','../Images/twitter-logoOver.png',1)"><img src="../Images/twitter-logo.png" alt="Twitter" name="TR" width="25" height="25" border="0" id="TR" / align="left"></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('LI','','../Images/LinkedIn_logoOver.png',1)"><img src="../Images/LinkedIn_logo.png" alt="Linked In" name="LI" width="25" height="25" border="0" id="LI" / align="left"></a>
</div>


<div id= "copyright">
<br />
<p align="right">Content copyright 2012. EMERGENCYCLEAN-UP.COM. All rights reserved.</p>
</div>

</div>

<div id="containerEmergency"><img src="../Images/emergency contact.png" width="220" height="220" />
</div>
</div>
</div>
</div>

<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

I often find that differences between FF and IE often boil down to errors in closing page element tags... like not closing <div> or <script> tags. So first validate and fix any of those issues:
http://validator.w3.org/
a number of those 35 errors relate to closing tags.
Then to review z-indexing (stacking order) from an older post:
Maybe this will help clear up any misunderstanding you have about declared positioning as well as the use of z-indexing:
The actual display of a positioned element will depend on whether or not it's parent element also has a declared position or not.
z-indexing ONLY works with elements that have a declared position.
Using a declared position like absolute tells and browser to take that element out of the natural flow and do something different with it. So you've got the browser parsing in order from top to bottom, then throwing in some elements that are completely out of the flow.... they can be very hard to control, because there are special rules that apply to elements with declared positions.
The least understood of those rules is what I call the "Parent Rule". Giving an element a declared position like relative or absolute can have huge differences in how that element is actually displayed depending on whether or not the PARENT of that element also has a declared position.
So a div which is position:absolute for example will display one way if it's parent also has a declared position and it will display in a completely different manner if it's parent does NOT have a declared position... to review:
If a div's parent container DOES NOT also have a declared position, the child <div> will do 1 of 2 things.
If position:relative, it will position as desired but space will be left as though that element was still in the natural flow. So you may move the 500 X 100 element down and over, but a 500 X 100 space will be left, as though it was still there.
If position:absolute, child is positioned relative to browser window and that position does not change even if window contracts or expands.
So be sure to give a declared position to both the parent and the child <div>.
Neglecting to follow this rule is the main reason why the use of declared positioning fails.
And just one more point, almost never is it necessary to use a declared position, and that method certainly should not be used for general page layout.
But if and when a special situation comes up that you really do need z-indexing... then of course you will also have to use a declared position. Understanding the "Parent Rule" will make working with z-indexing and declared positions much easier and more successful.
Best wishes,
Adninjastrator

Spry menu works in Firefox and Safari, but not Internet Explorer

I designed my school website in CS4 and CS5. The left spry menu bar appears correctly in Firefox and Safari, but in Internet Explorer the gray background and buttons do not appear. You can only see the text and when you scroll over the text, it disappears even though when you click on it, the link does appear. The website is http://ml.chinookschools.org. I created the site on a mac and I am hosting it on a mac mini server on my network at school. I am a beginner with Dreamweaver and I'm not sure if someone can help me with this, but I would sure be appreciative for any help offered. Here is the source code for the main template page:
</style>


</head>
<body>
<div id="wrapper">
<div id="header"><a href="../index.html"><img src="../images/header.jpg" width="950" height="121" /></a>
    <div id="apDiv1"><a href="http://chinookschools.org/" target="_blank"><img src="../images/hslink.gif" width="170" height="60" /></a></div>
</div>
<div id="bodyArea">
    <div id="left">
      <ul id="MenuBar1" class="MenuBarVertical">
        <li><a href="../calendar.html">Calendar</a>            </li>
        <li><a href="../contactinfo.html">Contact Information</a></li>
        <li><a href="../currenthappenings.html" class="MenuBarItemSubmenu">Current Happenings</a>
          <ul>
            <li><a href="../harwoodhappen.html">Mr. Harwood - K</a></li>
            <li><a href="../haslerhappen.html">Ms. Hasler - K</a></li>
            <li><a href="../tedwardshappen.html">Mrs. T. Edwards - 1</a></li>
            <li><a href="../lewishappen.html">Mrs. Lewis - 1</a></li>
<li><a href="../whitneyhappen.html">Mrs. Whitney - 2</a></li>
<li><a href="../weinheimerhappen.html">Mrs. Weinheimer - 3</a></li>
<li><a href="../cedwardshappen.html">Mrs. C. Edwards - 4</a></li>
<li><a href="../macleodhappen.html">Mrs. MacLeod - 5</a></li>
<li><a href="../mackenziehappen.html">Mrs. MacKenzie - 6</a></li>
<li><a href="../surberhappen.html">Mrs. Surber - Ex. St.</a></li>
          </ul>
        </li>
        <li><a href="../PDFs/gifted.pdf">Gifted & Talented</a></li>
        <li><a href="../libraryhappen.html">Library News</a></li>
        <li><a href="../pto.html">PTO</a></li>
        <li><a href="#" class="MenuBarItemSubmenu">School Information</a>
          <ul>
            <li><a href="../activities.html">Activities</a></li>
            <li><a href="#" class="MenuBarItemSubmenu">Class Schedules</a>
              <ul>
                <li><a href="../harwood.html">Mr. Harwood - K</a></li>
                <li><a href="../hasler.html">Ms. Hasler - K</a></li>
                <li><a href="../tedwards.html">Mrs. T. Edwards - 1</a></li>
                <li><a href="../Lewis.html">Mrs. Lewis - 1</a></li>
<li><a href="../whitney.html">Mrs. Whitney - 2</a></li>
<li><a href="../weinheimer.html">Mrs. Weinheimer - 3</a></li>
<li><a href="../cedwards.html">Mrs. C. Edwards - 4</a></li>
<li><a href="../macleod.html">Mrs. MacLeod - 5</a></li>
<li><a href="../mackenzie.html">Mrs. MacKenzie - 6</a></li>
              </ul>
            </li>
<li><a href="../edlinks.html">Educational Links</a></li>
<li><a href="../PDFs/handbook.pdf">Handbook</a></li>
<li><a href="../PDFs/newsletter.pdf">Newsletters</a></li>
<li><a href="../schoolforms.html">School Forms</a></li>
<li><a href="../studyhall.html">Study Hall</a></li>
          </ul>
        </li>
        <li><a href="../staff.html">Staff</a>        </li>
        <li><a href="../index.html" class="MenuBarVertical">Home</a></li>
      </ul>
    </div>
<div id="right">
</div>
    <div id="footer">
      <div align="center"></div>
      <div align="center"></div>
    </div>
</div>
</div>
<script type="text/javascript">

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

You are not using the latest Spry files
The latest version of the Adobe Spry Framework is 1.6.1, this is the same version that ships with Dreamweaver CS4. If you use Dreamweaver CS3 (uses Spry 1.4), its wise to upgrade your files to the latest version. This can easily be done using the Spry Updater that can be found here.
Then, if you have a look near the bottom of SpryMenuBarVertical.css you will see that the white background colour has been specified for IE as in
@media screen, projection
    ul.MenuBarVertical li.MenuBarItemIE
    display: inline;
    f\loat: left;
    background: #FFF;
Change the value to #CCC and it will have fixed that part of the problem.
When you upgrade to the later version of Spry, make sure to keep a copy of the CSS file as a reference to modifying the new CSS file.
Gramps

Div alignment in firefox

Similar Messages

Maybe you are looking for