CSS and Safari

I'm having problems with CSS and Safari. Class styles don't show up. They show up in Firefox. But Safari will not recognize them.
What's wrong?

There is something up I noticed it too - the work around I'm using at the moment is to split classes with the same tag into separate CSS and use @import in the main CSS file.
For instance, suppose i have CSS for body and then body.myClass - Safari ignores "myClass" when specified unless it's saved into a separate CSS file.
I first noticed this behaviour in 10.4.4

Similar Messages

CSS layout problems in Explorer (fine in Firefox and Safari)

Firstly apologies to the mods, I had mistakenly posted this
in the dynamic section also...
My problem - I am working on a CSS site (my first!) here
http://www.benfrain.com
It appears fine in Firefox (PC and Mac) and Safari (mac) but
when I view it in Explorer for Mac (5.2.3) I get a over long page
and I get no auto margin on the left.
Another small curiosity - I have noticed that my background
image on my div id "header" seems to start off again on the right.
Again, Explorer 5.2 for mac only...
My html and css both validate.
Anybody know why this is happening?

quote:
Originally posted by:
bregent
>It appears fine in Firefox (PC and Mac)
Have you tried increasing the text size?
Do you mean in the browser? I just tried it in Firefox and
after two increases the layout/style of the page kind of 'falls
apart' - how would this be rectified?

After deleteing Custom CSS and Custom Functions, cannot get FireFox to recognize audio player. Works in IE and Safari. Site is https and using bluehost.

Using the Genesis Framework on my WordPress site. I can use Safari and IE. However, when I try to use Fire Fox, it will not appear. I deleted all of my Custom CSS and Functions. Still, nothing is working. Contacted bluehost, the representative there was not able to help me out and also emailed CD Baby to see what might work. I am not sure if it is something with my site using HTTPS instead of HTTP of why this is not working? I am told the plugin works on Fire Fox but I cannot for the life of me figure out what's going on. Also changed themes and used Twenty Thirteen among others. Still the same thing. Fire Fox will not work. Tried in Text widget, and pasting on a page, and still not working. IE and Safari it is fine. Do I need to add something else within my site? Thanks ahead of time for any way to solve this situation.

There is mixed active content loaded in an iframe that Firefox is blocking as you can see by the shield icon at the left end of the location/address bar.
*https://developer.mozilla.org/Security/MixedContent
*https://developer.mozilla.org/Tools/Web_Console

CSS okay in IE but not recognized by FF and Safari

I have a style sheet for image floats that is attached to a html document within a php file that is recognized by IE but is not recognized by Firefox and Safari. I have attached it as an internal style sheet as well as an external style sheet and neither makes a difference. HELP!

I've cleaned up the code in the html file within the php file per your instructions by removing the embedded CSS and deleting the <html>, <head> and <body> tags. This seemed to clear any conflicts on the php file (http://www.mdy.lib.in.us/index.php). However the page is still showing okay in IE but not in FF and Safari. Below is my revised html code...what am I not getting right?
<link href="/mdby2.css" rel="stylesheet" type="text/css" />
<p><img src="/Weekly_News/images/ScienceClublogo.jpg" width="153" height="99" class="left" />
On Thursday, April 23 at 3:30 p.m. students, ages 7 and up, can participate in a fun science experiment. Bring a bottle of your favorite soft drink for the experiment. Registration required.</p>
<p><img src="/Weekly_News/images/FamilyStoryTimelogo.jpg" width="153" height="102" class="right" />
On Saturday, April 18 at 10:00 a.m. attend this special storytime co-sponsored with Little Saints Child Care in Middlebury. There will be stories about families, a craft and a tour of the Children's Department.</p>
<p><a href="http://www.booksite.com/texis/scripts/bookletter/showlist.html?sid=5638&list=CNL3& preview=1">
<img src="/Weekly_News/images/LTAIlogo.jpg" width="122" height="87 "class="left" /></a>
The next book in the series is “The Guardians” by Ana Castillo. The lecture will be on April 21at 7:00 p.m. It will be followed by refreshments and book discussion. For more about this series see <a href="http://www.booksite.com/texis/scripts/bookletter/showlist.html?sid=5638&list=CNL3& preview=1">"Love and Forgiveness: In the presence of the enemy"</a>. </p>
<p><img src="/Weekly_News/images/GED.jpg" width="140" height="97" class="right" />
Access free online GED classes at the library. An instructor from The Learning Generation Initiative (LGI) will be available on Wednesdays from 4:00 to 8:00 p.m. & Saturdays from 10:00 a.m. to 2:00 p.m. in Community Room 3. For more information call LGI at 866-898-3908.</p>
<p><a href="http://www.mdy.lib.in.us/Kids/toddlertime.php"><img src="/Weekly_News/images/toddlerLOGO.gif" alt="Toddler Time" width="150" height="58" class="left" /></a>
<a href="http://www.mdy.lib.in.us/ToddlerTime/ToddlerTime.php"><strong>Toddler Time</strong></a> meets on Tuesdays at 10:00 a.m. Introduce your toddler to fun activities at the library. Registration required. The last winter/spring session will be on April 28th.</p>
<p><a href="http://www.mdy.lib.in.us/Kids/StoryTime/storytime.php"><img src="/images/StoryTimeLogo.gif" width="150" height="50" class="right" /></a>
<a href="http://www.mdy.lib.in.us/StoryTime/storytime1.php"><strong>Story Time</strong></a> meets on Wednesdays and Thursdays at 10:00 a.m. and 1:00 p.m. Introduce your preschooler to the world of children's literature. Registration required. The last winter/spring sessions will be on April 29th and 30th.</p>
<p><img src="/Weekly_News/images/GoGreenPink2.jpg" width="152" height="98" class="left" />
Recycle your InkJet and Laser Printer Cartridges at the library. For every acceptable cartridge, the recycler makes a donation to the National Breast Cancer Foundation.</p>

CSS: holly hack and Safari

So, the holly hack to avoid the IE 3 pixel jog breaks the container in the Safari 2.0.2, Netscape 7, Firefox on the Mac.
Adding height:1%; is what does this.
The * html #container { height: 1%;} is no different so it's the height:1% specifically.
Anybody have/know a workaround for this?

There is something up I noticed it too - the work around I'm using at the moment is to split classes with the same tag into separate CSS and use @import in the main CSS file.
For instance, suppose i have CSS for body and then body.myClass - Safari ignores "myClass" when specified unless it's saved into a separate CSS file.
I first noticed this behaviour in 10.4.4

CSS issues in Firefox and Safari

I have this bit of code that i cant seem to get working in
firefox or safari
.backgr {
text-align:center;
margin-left:0px;
margin-top:0px;
background-color:#CCCCCC;
border:solid 1px;
What am i doing wrong
ASP, SQL2005, DW8 VBScript, Access

Thanks for the replies... i just noticed that i forgot to
mention what was
not really working with this code...
I have span that im applying this to... its wrapping around
my screen data
to give it a easier background to read the text on...
In IE i can view my page with a grey box behind all my page
data...
But within firefox, opera and safari the box is not there and
makes my
navigation look like crap...
So would using the last reply that has all the individual
styles listed help
with this issue?
ASP, SQL2005, DW8 VBScript
"Daniel" <[email protected]> wrote in message
news:ffp1k6$f4n$[email protected]..
>I have this bit of code that i cant seem to get working
in firefox or
>safari
>
> .backgr {
> text-align:center;
> margin-left:0px;
> margin-top:0px;
> background-color:#CCCCCC;
> border:solid 1px;
> }
>
> What am i doing wrong
>
> --
> --
> ASP, SQL2005, DW8 VBScript, Access
>

Dreamweaver site looks fine in IE and Safari but not Firefox

I am fairly new to web desgin so I am hoping someout there can give me a hint as to why my site looks poorly or doesn't load on Firefox. It loos fine in Internet Explorer and Safari.
- PC system
- Windows xp professional
- CS4
Here is the website: www.biggiantsale.com
Thanks for your help!
Sarah

Looks like a mess of repeated background images to me.
To use a non-repeating background image, put the following CSS code between the
<style type="text/css"> and </style> tags in your HTML page.
body {
width: 1000px; /**choose your own page width in px**/
margin:0 auto;/**this centers page in modern browsers**/
text-align: center; /**this centers page in old browsers**/
background: red url(Images/Home-Page.png) no-repeat top middle;
Then remove the Home-Page.png background from your table.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Spry drop down menu not working when tested in ie7, does in FF and safari on mac

Please help! I have a spry dropdown menu on a page, when tested in FF and Safari it works fine, but when tested in IE the menus don't drop down and the styling to the over state seems to be being ignored. I have attached the code and css below.
As I am just on the build stage it is in a template, I have not made any editable regions on the template as yet, this should not matter should it? As is probably obvious already I am quite new to this! Please help!
CODE
<ul id="MenuBar1" class="MenuBarHorizontal">
     <li><a href="../about us/index.html" target="_self" class="MenuBarItemSubmenu"><p></p>about us</a>
       <ul>
         <li><a href="../calander/index.html" target="_self"><p></p>calendar</a></li>
         <li><a href="../oompah page/index.html" target="_self">oompah brass</a></li>
         <li><a href="../merchandise/index.html" target="_self"><p></p>merchandise</a></li>
       </ul>
     </li>
     <li><a href="../beer/index.html" target="_self" class="MenuBarItemSubmenu"><p></p>beers</a>
       <ul>
         <li><a href="../beer/book a keg/index.html" target="_self"><p></p>book a keg</a></li>
       </ul>
     </li>
     <li><a href="../events/index.html" target="_self" class="MenuBarItemSubmenu"><p></p>events</a>
       <ul>
         <li><a href="../events/oktoberfest events/index.html" target="_self"><p></p>oktoberfest events</a></li>
         <li><a href="../events/corporate/index.html" target="_self"><p></p>corporate</a></li>
         <li><a href="../events/stag hen/index.html" target="_self"><p></p>stag/ hen</a></li>
         <li><a href="../events/birthday group/index.html" target="_self">birthday/ group</a></li>
       </ul>
     </li>
     <li><a href="../sports/index.html" target="_self" class="MenuBarItemSubmenu"><p></p>sports</a>
       <ul>
         <li><a href="../bayern supporters club/index.html" target="_self"><p></p>Bayern Munich uk</a>          </li>
</ul>
     </li>
     <li><a href="../menu/index.html" target="_self" class="MenuBarItemSubmenu"><p></p>food</a>
       <ul>
         <li><a href="../menu/everyday menu/index.html" target="_self"><p></p>everyday menu</a></li>
         <li><a href="../menu/special menu/index.html" target="_self">special menu</a></li>
       </ul>
     </li>
     <li><a href="../package and tickets/index.html" target="_self" class="MenuBarItemSubmenu">packages and tickets</a>
       <ul>
         <li><a href="../terms and conditions/index.html" target="_self">terms and conditions</a></li>
       </ul>
     </li>
     <li><a href="../double knuckle challenge/index.html" target="_self">double knuckle challenge</a></li>
     <li><a href="../gallery/index.html" target="_self"><p></p>gallery</a></li>
     <li><a href="../contact/index.html" target="_self"><p></p>contact us</a></li>
   </ul>
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%;
cursor: default;
width: 900px;
text-align: center;
vertical-align: middle;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: 100px;
float: left;
height: 50px;
/* 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: 100px;
position: absolute;
left: -1000em;
background-color: #f8ba16;
color: #000099;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 100px;
color: #300;
background-color: #f8ba16;
/* 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-bottom-width: 4px;
border-bottom-style: solid;
border-bottom-color: #000099;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #000099;
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: #33C;
color: #FFF;
/* 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: #f8ba16;
color: #300;
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-repeat: no-repeat;
/* 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-repeat: no-repeat;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-repeat: no-repeat;
/* 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-repeat: no-repeat;
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;
Many thanks in advance.

Please help! I have a spry dropdown menu on a page, when tested in FF and Safari it works fine, but when tested in IE the menus don't drop down and the styling to the over state seems to be being ignored. I have attached the code and css below.
As I am just on the build stage it is in a template, I have not made any editable regions on the template as yet, this should not matter should it? As is probably obvious already I am quite new to this! Please help!
CODE
<ul id="MenuBar1" class="MenuBarHorizontal">
     <li><a href="../about us/index.html" target="_self" class="MenuBarItemSubmenu"><p></p>about us</a>
       <ul>
         <li><a href="../calander/index.html" target="_self"><p></p>calendar</a></li>
         <li><a href="../oompah page/index.html" target="_self">oompah brass</a></li>
         <li><a href="../merchandise/index.html" target="_self"><p></p>merchandise</a></li>
       </ul>
     </li>
     <li><a href="../beer/index.html" target="_self" class="MenuBarItemSubmenu"><p></p>beers</a>
       <ul>
         <li><a href="../beer/book a keg/index.html" target="_self"><p></p>book a keg</a></li>
       </ul>
     </li>
     <li><a href="../events/index.html" target="_self" class="MenuBarItemSubmenu"><p></p>events</a>
       <ul>
         <li><a href="../events/oktoberfest events/index.html" target="_self"><p></p>oktoberfest events</a></li>
         <li><a href="../events/corporate/index.html" target="_self"><p></p>corporate</a></li>
         <li><a href="../events/stag hen/index.html" target="_self"><p></p>stag/ hen</a></li>
         <li><a href="../events/birthday group/index.html" target="_self">birthday/ group</a></li>
       </ul>
     </li>
     <li><a href="../sports/index.html" target="_self" class="MenuBarItemSubmenu"><p></p>sports</a>
       <ul>
         <li><a href="../bayern supporters club/index.html" target="_self"><p></p>Bayern Munich uk</a>          </li>
</ul>
     </li>
     <li><a href="../menu/index.html" target="_self" class="MenuBarItemSubmenu"><p></p>food</a>
       <ul>
         <li><a href="../menu/everyday menu/index.html" target="_self"><p></p>everyday menu</a></li>
         <li><a href="../menu/special menu/index.html" target="_self">special menu</a></li>
       </ul>
     </li>
     <li><a href="../package and tickets/index.html" target="_self" class="MenuBarItemSubmenu">packages and tickets</a>
       <ul>
         <li><a href="../terms and conditions/index.html" target="_self">terms and conditions</a></li>
       </ul>
     </li>
     <li><a href="../double knuckle challenge/index.html" target="_self">double knuckle challenge</a></li>
     <li><a href="../gallery/index.html" target="_self"><p></p>gallery</a></li>
     <li><a href="../contact/index.html" target="_self"><p></p>contact us</a></li>
   </ul>
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%;
cursor: default;
width: 900px;
text-align: center;
vertical-align: middle;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: 100px;
float: left;
height: 50px;
/* 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: 100px;
position: absolute;
left: -1000em;
background-color: #f8ba16;
color: #000099;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 100px;
color: #300;
background-color: #f8ba16;
/* 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-bottom-width: 4px;
border-bottom-style: solid;
border-bottom-color: #000099;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #000099;
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: #33C;
color: #FFF;
/* 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: #f8ba16;
color: #300;
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-repeat: no-repeat;
/* 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-repeat: no-repeat;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-repeat: no-repeat;
/* 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-repeat: no-repeat;
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;
Many thanks in advance.

CSS and Spry not displaying

Hi, I have recently created a website using Dreamweaver. I don't know much coding at all so I did it using the design view. It is a very basic site. Just one page, styled with CSS and with Spry Tabbed Panels to reveal 4 different 'pages'
I have uploaded my website folder to the server via ftp but none of the CSS, images or spry are displaying.
I uploaded one folder which contained 2 subfolders and one html file
-SubFolder 1: Spry Assets
-SubFolder 2: Images
-index.html (with internal .css)
I can see that the folders have been uploaded but for some reason they are not being read. I would really appreciate some help as my web host says they can't help me. I can send you the html file or whatever you need if you would like to take a look. It really is a very simple website so i'm sure it wouldn't take one of you geniuses very long to figure it out!
Cheers

Thanks for your quick responses guys! Hopefully I can reach a solution with this.
In answer to your questions:
- Yes, I defined a local site folder in Dreamweaver. That is the folder I uploaded via ftp.
-Am I working with valid code? I don't know. I have not touched any of the code. I used 'design view' in Dreamweaver. Previewed in Firefox, Safari and IE and it works with no problems.
Below is the code for index.html and below that is the css code for spry tabbed panels.
index.html:
<!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>DMH Window Cleaning</title>
<style type="text/css">
.main {
    background-color: #0e414f;
    height: 480px;
    width: 960px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 50px;
.right {
    background-color: #FFF;
    float: left;
    height: 440px;
    width: 460px;
    border-right-width: 20px;
    border-right-style: solid;
    border-right-color: #0e414f;
    margin-top: 20px;
.logo {
    float: left;
    border-right-width: 20px;
    border-left-width: 20px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #0e414f;
    border-left-color: #0e414f;
    margin-top: 20px;
</style>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main"><img src="images/DMHLogo.png" width="440" height="440" class="logo" />
<div class="right">
    <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">HOME</li>
        <li class="TabbedPanelsTab" tabindex="0">SERVICES</li>
        <li class="TabbedPanelsTab" tabindex="0">ABOUT</li>
        <li class="TabbedPanelsTab" tabindex="0">CONTACT</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">
          <h1>DMH Window Cleaning is your local window cleaning service for Ipswich, Martlesham and Kesgrave. </h1>
          <p> </p>
          <p>DMH offers an interior and exterior window cleaning service for domestic and commercial properties. </p>
          <p>We have been providing a professional, reliable and regular window cleaning service to hundreds of happy customers for the past 16 years. </p>
          <p>            Just use the links above find out more, alternatively <br />
          send us an email or request a free quote</p>
          <h2> </h2>
</div>
        <div class="TabbedPanelsContent">
          <h1>We offer a range of services to domestic and commercial properties</h1>
          <p>Services: </p>
          <ul>
            <li> Window Cleaning Interior and Exterior</li>
            <li> Guttering</li>
            <li> UPVC Cleaning</li>
            <li> Conservatories          </li>
            <li>Domestic Properties </li>
            <li> All sills included free</li>
          </ul>
<p> </p>
<p><span class="servicesHeading"><strong>Domestic Properties<br />
</strong></span>
- Services offered on a once a month basis          </p>
<p><span class="servicesHeading"><strong>Commercial Properties<br />
</strong>          </span>
          - Services offered on a weekly, two weekly or monthly basis.</p>
        </div>
        <div class="TabbedPanelsContent">
          <h1>We have been providing a professional and reliable window cleaning service for the past 16 years</h1>
          <p class="quoteboxes">"DMH has been our window cleaner for many years and<br />
I would have no hesitation in recommending him. David<br />
is quick, reliable and does a great job!"<br />
<strong class="QuoteName">Ruth Carley, General Manager, Punch and Judy, Ipswich</strong></p>
          <p class="quoteboxes">"David works to a high standard and is professional, he<br />
cleans the inside and outside of Jamie Cann House. David <br />
is punctual and reliable"<br />
          <strong class="QuoteName">Teresa Page, Jamie Cann House, Ipswich</strong></p>
</div>
        <div class="TabbedPanelsContent">
          <h1>Request a free, no obligation quote<br />
          </h1>
<p>If you would like to request a no obligation quote then please do so by email or phone. </p>
          <p>email: [email protected]<br />
            phone: xxx</p>
          <p><strong>Payment</strong></p>
          <p>Please make cheques made payable to:<br />
            'DMH Window Cleaning'</p>
          <p>and post to:<br />
            6 Bramley Hill<br />
            Ipswich<br />
            IPX XXX</p>
          <p>We also accept cash in person. Details will be posted through your door once the job has been completed.</p>
        </div>
      </div>
    </div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>
Then I also have a separate 'Spry Assets' folder which has 2 files in it.
1. SpryTabbedPanels.js
2. SpryTabbedPanels.css
the css code for tabbed panels is:
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* Horizontal Tabbed Panels
* The default style for a TabbedPanels widget places all tab buttons
* (left aligned) above the content panel.
/* This is the selector for the main TabbedPanels container. For our
* default style, this container does not contribute anything visually,
* but it is floated left to make sure that any floating or clearing done
* with any of its child elements are contained completely within the
* TabbedPanels container, to minimize any impact or undesireable
* interaction with other floated elements on the page that may be used
* for layout.
* If you want to constrain the width of the TabbedPanels widget, set a
* width on the TabbedPanels container. By default, the TabbedPanels widget
* expands horizontally to fill up available space.
* The name of the class ("TabbedPanels") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabbedPanels container.
.TabbedPanels {
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    clear: none;
    width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
    background-color: #0e414f;
/* This is the selector for the TabGroup. The TabGroup container houses
* all of the tab buttons for each tabbed panel in the widget. This container
* does not contribute anything visually to the look of the widget for our
* default style.
* The name of the class ("TabbedPanelsTabGroup") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabGroup container.
.TabbedPanelsTabGroup {
    margin: 0px;
    padding: 0px;
/* This is the selector for the TabbedPanelsTab. This container houses
* the title for the panel. This is also the tab "button" that the user clicks
* on to activate the corresponding content panel so that it appears on top
* of the other tabbed panels contained in the widget.
* For our default style, each tab is positioned relatively 1 pixel down from
* where it wold normally render. This allows each tab to overlap the content
* panel that renders below it. Each tab is rendered with a 1 pixel bottom
* border that has a color that matches the top border of the current content
* panel. This gives the appearance that the tab is being drawn behind the
* content panel.
* The name of the class ("TabbedPanelsTab") used in this selector is not
* necessary to make the widget function. You can use any class name you want
* to style this tab container.
.TabbedPanelsTab {
    position: relative;
    top: 1px;
    float: left;
    background-color: #d7df25;
    list-style: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    text-align: center;
    width: 115px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #0e414f;
/* This selector is an example of how to change the appearnce of a tab button
* container as the mouse enters it. The class "TabbedPanelsTabHover" is
* programatically added and removed from the tab element as the mouse enters
* and exits the container.
.TabbedPanelsTabHover {
    background-color: #d7df25;
    font-size: 12px;
/* This selector is an example of how to change the appearance of a tab button
* container after the user has clicked on it to activate a content panel.
* The class "TabbedPanelsTabSelected" is programatically added and removed
* from the tab element as the user clicks on the tab button containers in
* the widget.
* As mentioned above, for our default style, tab buttons are positioned
* 1 pixel down from where it would normally render. When the tab button is
* selected, we change its bottom border to match the background color of the
* content panel so that it looks like the tab is part of the content panel.
.TabbedPanelsTabSelected {
    background-color: #0e414f;
    color: #d7df25;
    font-size: 12px;
/* This selector is an example of how to make a link inside of a tab button
* look like normal text. Users may want to use links inside of a tab button
* so that when it gets focus, the text *inside* the tab button gets a focus
* ring around it, instead of the focus ring around the entire tab.
.TabbedPanelsTab a {
    color: black;
    text-decoration: none;
/* This is the selector for the ContentGroup. The ContentGroup container houses
* all of the content panels for each tabbed panel in the widget. For our
* default style, this container provides the background color and borders that
* surround the content.
* The name of the class ("TabbedPanelsContentGroup") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the ContentGroup container.
.TabbedPanelsContentGroup {
    clear: both;
    background-color: #EEE;
/* This is the selector for the Content panel. The Content panel holds the
* content for a single tabbed panel. For our default style, this container
* provides some padding, so that the content is not pushed up against the
* widget borders.
* The name of the class ("TabbedPanelsContent") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the Content container.
.TabbedPanelsContent {
    overflow: hidden;
    background-color: #FFF;
    font-family: Arial, Helvetica, sans-serif;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 0px;
    padding-left: 20px;
.main .right #TabbedPanels1 .TabbedPanelsContentGroup .TabbedPanelsContent.TabbedPanelsContentVisible .quoteboxes strong {
    padding-top: 5px;
.QuoteName {
    padding-top: 20px;
    line-height: 20px;
/* This selector is an example of how to change the appearnce of the currently
* active container panel. The class "TabbedPanelsContentVisible" is
* programatically added and removed from the content element as the panel
* is activated/deactivated.
.TabbedPanelsContentVisible {
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
.main .right #TabbedPanels1 .TabbedPanelsContentGroup .TabbedPanelsContent.TabbedPanelsContentVisible h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
.TabbedPanelsContent h1 {
    color: #0e414f;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 20px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #d7df25;
    padding-bottom: 10px;
    border-top-width: 2px;
    border-top-style: solid;
    border-top-color: #d7df25;
    padding-top: 10px;
li {
    color: #0e414f;
.servicesHeading {
.TabbedPanelsContent h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #0e414f;
.quoteboxes {
    background-image: url(../images/quotebox2.png);
    height: 105px;
    background-repeat: no-repeat;
    padding-top: 15px;
    padding-right: 10px;
    padding-bottom: 15px;
    padding-left: 10px;
    width: 400px;
.quoteRight {
    background-image: url(../images/quoteboxright.png);
    background-repeat: no-repeat;
    height: 100px;
.TabbedPanelsContent P {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #0e414f;
/* Vertical Tabbed Panels
* The following rules override some of the default rules above so that the
* TabbedPanels widget renders with its tab buttons along the left side of
* the currently active content panel.
* With the rules defined below, the only change that will have to be made
* to switch a horizontal tabbed panels widget to a vertical tabbed panels
* widget, is to use the "VTabbedPanels" class on the top-level widget
* container element, instead of "TabbedPanels".
.VTabbedPanels {
    overflow: hidden;
    zoom: 1;
/* This selector floats the TabGroup so that the tab buttons it contains
* render to the left of the active content panel. A border is drawn around
* the group container to make it look like a list container.
.VTabbedPanels .TabbedPanelsTabGroup {
    float: left;
    width: 10em;
    height: 20em;
    background-color: #EEE;
    position: relative;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #CCC;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTab {
    float: none;
    margin: 0px;
    border-top: none;
    border-left: none;
    border-right: none;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTabSelected {
    background-color: #EEE;
    border-bottom: solid 1px #999;
/* This selector floats the content panels for the widget so that they
* render to the right of the tabbed buttons.
.VTabbedPanels .TabbedPanelsContentGroup {
    clear: none;
    float: left;
    padding: 0px;
    width: 30em;
    height: 20em;
/* Styles for Printing */
@media print {
.TabbedPanels {
    overflow: visible !important;
.TabbedPanelsContentGroup {
    display: block !important;
    overflow: visible !important;
    height: auto !important;
.TabbedPanelsContent {
    overflow: visible !important;
    display: block !important;
    clear:both !important;
.TabbedPanelsTab {
     overflow: visible !important;
     display: block !important;
     clear:both !important;
h1 {
    font-weight: bold;
.bottomBox {
    background-color: #0e414f;
    width: 1020px;
    margin-right: auto;
    margin-left: auto;
.box {
    background-color: #0e414f;
    width: 900px;

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

Looks fine in FF and Safari, disaster in IE8

http://www.jdcdemo.com/d4/index.html
This site displays as I set it up in FF and Safari for Windows. In IE8, it is a disaster. The menu spacing is doubled and the main image is way down in the page. I'm guessing it is a CSS and/or Doctype problem, but have not figured it out. Can someone help??
Thanks in advance,
Joe

Give your page a valid document type. As it stands now, you're page is in Quirks Mode which produces unexpected results.
Modify > Page Properties > Title/Encoding. Select either HTML or XHTML transitional.
Also, I'm not sure you need Float:Right on your #mainContent division.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

My dreamweaver site wont update in firefox, but does in ie and safari

I've updated my dreamweaver cs5 site and it show correctly in ie and safari, but not in firefox. Anyone know why, or how to fix the problem?

I see a similar Path Problem with the background images in your CSS:
#middle {
    background-image:url(file:///C|/Users/Sean%20Sullivan/Desktop/MSSM%20Web%20Files/Night%20C lub/Original%20Site%20Files/images/middle.gif);
    width:873px;
    height:21px;
#middle2 {
    background-image:url(file:///C|/Users/Sean%20Sullivan/Desktop/MSSM%20Web%20Files/Night%20C lub/Original%20Site%20Files/images/middle2.gif);
    width:873px;
    height:22px;
#content {
    background-image:url(file:///C|/Users/Sean%20Sullivan/Desktop/MSSM%20Web%20Files/Night%20C lub/Original%20Site%20Files/images/content.gif);
    width:873px;
and there are more....
HINT: Rename files, folders and images without SPACES.
Between words, you can safely use underscores _ hyphens - or UpperAndLowerCaseLetters. But please don't use spaces.
Best of luck on your new site.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Different font sizes in Explorer and Safari

Hi there, before I go completely nuts can someone give me a
hand with figuring out how I can get my plain old body text to
display at the same size in both Explorer and Safari.
I am using a Mac myself, but when entering text at size 1, it
is displaying larger in Explorer (at about the size I want) and
very small in Safari (too small to be easily readable). I have done
some research and thought cascading style sheets might be the way
to go but I have also read that the some text problems occur when
using cascading style sheets.
I haven't bothered with them previously as there hasn't been
that much text to bother with them.
Has anyone got any tips, or has used CSS to fix this problem?
Regards,
Elle V
p.s. if you are using a mac, you can check out what I mean by
viewing www.homestylefinance.com.au/company.html in both browsers.
I would be interested in hearing from a PC user to see if they are
seeing the same thing.

You can define your text sizes in many different ways:
points, pixels, em,
percentages, etc.
I personally use a percentage to define my base font-size in
my style sheet,
and then declare different text sizes in em's for different
selectors. I'd
stay away from points (which it sounds like you're using them
- due to the
fact that cross-browser display varies). I'd also stay away
from pixels,
because IE users can not resize their browser text size.
My personal suggestion would be to use em's to declare your
font sizes. Here
is an example of something you could put in your CSS document
(which you'll
want to start using):
body { font-size: 100%; }
.text1 { font-size: .75em }
HTH, take care.
Shane H
[email protected]
http://www.avenuedesigners.com
=============================================
Proud GAWDS Member
http://www.gawds.org/showmember.php?memberid=1495
Delivering accessible websites to all ...
=============================================
"Elle V" <[email protected]> wrote in
message
news:e89ngu$ga6$[email protected]..
> Hi there, before I go completely nuts can someone give
me a hand with
> figuring
> out how I can get my plain old body text to display at
the same size in
> both
> Explorer and Safari.
>
> I am using a Mac myself, but when entering text at size
1, it is
> displaying
> larger in Explorer (at about the size I want) and very
small in Safari
> (too
> small to be easily readable). I have done some research
and thought
> cascasing
> style sheets might be the way to go but I have also read
that the some
> text
> problems occur when using cascading style sheets.
>
> I haven't bothered with them previously as there hasn't
been that much
> text to
> bother with them.
>
> Has anyone got any tips, or has used CSS to fix this
problem?
>
> Regards,
>
> Elle V
>
>

Text placement in Firefox and Safari is good but not in ie7

I am using DW CS4 wit Windows Vista
When I preview my site in Firefox and Safari the text is exactly where I want it but when I look at it in IE7 the text is not in the correct position.
I designed the website using css with an image in the background of the container and then postioned text on top of the image with margins/padding on the Div tags.
Div tags LeftContent and RightContent are placed correctly, But Div Tags Quote1, Quote2, Quote3, & Quote4 do not place correctly in IE7 but they do place correcly in Safari and Firefox.
Is there some code needed for IE7?
The site also looks right in live preview
The Site is http://gigharborwashington.com/new/

Hi Gary,
Thank you for your help. I used photoshop to slice the image into 8 images and then opened in in DW CS4 and created a div tag for each image. Then I inserted a div tag for the text into each image div tag.
In Safari, Firefox and IE7 the text appears where I want it. I think I may have done this the long way but it worked. If anyone has a short cut I would like to hear it.
http://gigharborwashington.com
Thank you again.
Mike

Firefox OS is not displaying correctly. it appears that the CSS and JS are not rendering! Any help would be most appreciated!

I would have preferred to show anyone a screenshot of the web pages, but there is not an attach file on this forum. Anyway, with only Firefox OS , not my other browsers, the web pages are not rendering correctly. For example on Facebook there is no header or footer. JS is active in the browser and as I said Chrome and Safari are NOT having any problems. I am surmising that the CSS and JS files are somehow not being displayed. I may be very wrong, but I would gratefully accept any help someone has to offer. Thank you and have a great day!
Theresa

Hi Lufte,
I'm sorry to hear you are having issues with the rendering of some pages on your Firefox OS device.
Please create a new question in the thread so that we can track your issue separately:
* [https://support.mozilla.org/en-US/questions/new Ask a new question]
Please also provide the device model and version that you're currently using, and whether this issue started recently. Please let us know if you also notice any issue with the time and date displayed in your device.
Thanks,
- Ralph

CSS and Safari

Similar Messages

Maybe you are looking for