Accessibility

CSS Advisor

Background in some divs not showing in browsers but showing in dreamweaver

by paul_w_saber on March 10, 2011 Avg Rating Not yet rated   |   Log in to rate post.

Tagged with Opera 8.0 , Explorer 6.0 , Explorer 8.0 , Firefox 3.0 , Opera 9.0 , Explorer 7.0 , Safari 1.0 , Firefox 3.5 , Explorer for Mac , Safari 3 , Safari 4 , Firefox 1.0 , Explorer 5.0 , Safari 2.0 , Opera 10 , Opera 7.x , Firefox 1.5 , Explorer 5.5 , Opera 8.5 , Background

Problem

in some divs i have created the background is not showing,

Solution

if someone can pls help me

Detailed description

 this is the 1st website i ever do. i have learnt through some tutorials online and im not really an expert in css.

i have problems with the divs that have the following ids and classes: calendar, social and newsletter.

here is my html 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>Medline Events - Corporate Events Managers</title>

<link href="css.css" rel="stylesheet" type="text/css" />

<script src="includes/jquery-1.4.2.js" type="text/javascript"></script>

<script src="jQuery/js/jquery.jsocial.js" type="text/javascript"></script>

<script src="Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>

<script src="Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>

<script src="Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>

<script src="Spry-UI-1.7/includes/SpryPanelSet.js" type="text/javascript"></script>

<script src="Spry-UI-1.7/includes/SpryFadingPanels.js" type="text/javascript"></script>

<script src="Spry-UI-1.7/includes/SpryImageLoader.js" type="text/javascript"></script>

<script src="Spry-UI-1.7/includes/SpryImageSlideShow.js" type="text/javascript"></script>

<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryPanAndZoomPlugin.js" type="text/javascript"></script><script type="text/javascript">

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];}}

}

</script>

<link href="jQuery/css/style.css" rel="stylesheet" type="text/css" />

<script type="text/xml">

<!--

<oa:widgets>

  <oa:widget wid="2149023" binding="#social" />

  <oa:widget wid="2141542" binding="#ImageSlideShow" />

</oa:widgets>

-->

</script>

<link href="Spry-UI-1.7/css/SpryImageSlideShow.css" rel="stylesheet" type="text/css" />

<style type="text/css">

/* BeginOAWidget_Instance_2141542: #ImageSlideShow */

 

#ImageSlideShow.ImageSlideShow {

width: 1000px;

height: 280px;

overflow: hidden;

z-index: 2;

}

 

#ImageSlideShow .ISSClip {

background-color: #000000;

}

</style>

</head>

 

<body>

<div class="header"></div>

<div class="container">

  <div class="ban"><a href="index.html"></a><img src="banner4.jpg" width="800" height="259" /></div>

  <ul id="ImageSlideShow">

    <li><a href="eventsbg.jpg"><img src="eventsbg.jpg" alt="" width="130" height="105" /></a></li>

    <li><a href="Foto_conference_room.jpg"><img src="Foto_conference_room.jpg" alt="" width="114" height="57" /></a></li>

    <li><a href="meeting1.JPG"><img src="meeting1.JPG" alt="" width="96" height="106" /></a></li>

    <li><a href="meeting2.jpg"><img src="meeting2.jpg" alt="" width="92" height="95" /></a></li>

    <li><a href="rand4.jpg"><img src="rand4.jpg" alt="" width="89" height="95" /></a></li></ul>

  <script type="text/javascript">

// BeginOAWidget_Instance_2141542: #ImageSlideShow

 

var ImageSlideShow = new Spry.Widget.ImageSlideShow("#ImageSlideShow", {

widgetID: "ImageSlideShow",

injectionType: "replace",

autoPlay: true,

displayInterval: 8000,

transitionDuration: 2000,

componentOrder: ["view"],

plugIns: [ Spry.Widget.ImageSlideShow.PanAndZoomPlugin ]

});

// EndOAWidget_Instance_2141542

  </script>

<div class="maincontent">

<div class="right_column">

<div id="calendar">

  <table width="100%" border="1" align="center" cellpadding="1" cellspacing="1" id="table">

    <tr>

      <th colspan="7" valign="top">March 2011</th>

    </tr>

    <tr style="font-family: Verdana; font-size:x-small">

      <th>Sun</th>

      <th>Mon</th>

      <th>Tue</th>

      <th>Wed</th>

      <th>Thu</th>

      <th>Fri</th>

      <th>Sat</th>

    </tr>

    <tr align="left" valign="top" style="font-family: Verdana; font-size:x-small">

      <td>&nbsp;</td>

      <td>&nbsp;</td>

      <td>1</td>

      <td>2</td>

      <td>3</td>

      <td>4</td>

      <td>5</td>

    </tr>

    <tr align="left" valign="top" style="font-family: Verdana; font-size:x-small">

      <td>6</td>

      <td>7</td>

      <td>8</td>

      <td>9</td>

      <td>10</td>

      <td>11</td>

      <td>12</td>

    </tr>

    <tr align="left" valign="top" style="font-family: Verdana; font-size:x-small">

      <td>13</td>

      <td>14</td>

      <td>15</td>

      <td>16</td>

      <td>17</td>

      <td>18</td>

      <td>19</td>

    </tr>

    <tr align="left" valign="top" style="font-family: Verdana; font-size:x-small">

      <td>20</td>

      <td>21</td>

      <td>22</td>

      <td>23</td>

      <td>24</td>

      <td>25</td>

      <td>26</td>

    </tr>

    <tr align="left" valign="top" style="font-family: Verdana; font-size:x-small">

      <td>27</td>

      <td>28</td>

      <td>29</td>

      <td>30</td>

      <td>31</td>

      <td>&nbsp;</td>

      <td>&nbsp;</td>

    </tr>

  </table>

</div>

<div class="social">Social</div>

</div>

<div class="content"><div class="sidebar">

    <ul class="nav">

      <li><a href="index.html">Home</a></li>

      <li><a href="about.html">About us</a></li>

      <li><a href="#">Our Services</a></li>

      <li><a href="#">Gallery</a></li>

      <li><a href="#">Contact us</a></li>

    </ul>

</div>

    <h1>EXPERIENCE THE DIFFERENCE...</h1>

    <div align="center"> </div>

<p><img src="" alt="" name="banner" width="50" height="250" id="img" /></p>

    <div class="txt">

      <p>At <strong>MEDLINE events</strong>, we provide  unique and creative services for your corporate events. Whether you want to organize  business conferences, press events, product launchings, employee trainings, or  any other kind of event, we are the <em>right</em> pick for you.</p>

      <p>With the topmost level of quality  and professionalism, we offer you <em>fully tailored services</em> that are feasible,  efficient and carefully planned. From design to implementation, our account  managers will handle every aspect of your event to the tiniest detail making it <em>successful</em> and <em>memorable</em>.</p>    

    </div>

      <div class="newsletter">Newsletter\</div>

</div>

<br class="clearfloat"/>

</div>

</div>

<div class="footer">

    <p>&copy;  February, 2011- Medline Events - All Rights Reserved</p>

</div>

</body>

</html>

heres my css
 
@charset "utf-8"
 
body {
}
body {
margin: 0px;
padding: 0px;
text-align: center;
background-color: #2F4173;
}
 
.header {
height: 40px;
width: 100%;
background-color: #031A56;
text-align: left;
display: block;
border-bottom-width: 7.5px;
border-bottom-style: double;
border-bottom-color: #2F4173;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-image: url(header%20back.jpg);
min-width: 750px;
max-width: 2500px;
}
 
 
.container {
width: 1000px;
text-align: left;
height: 100%;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
margin-top: -47px;
background-color: #2c4047;
position: relative;
}
 
 
 
.ban {
width: 1000px;
margin: 0;
padding: 0;
}
#img   {
background-color: #132762;
padding: 0;
margin-left: 5%;
width: 50%;
}
.maincontent {
width: 1000px;
margin: 0;
padding: 0;
background-color: #2C4047;
}
.content {
float: left;
width: 600px;
padding-top: 5px;
margin-top: 15px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(container%20back.jpg);
z-index: 3;
position: relative;
}
.sidebar {
width: 125px;
padding-bottom: 10px;
background-color: #2C4047;
color: #FFF;
font-size: 16px;
background-position: right bottom;
background-repeat: no-repeat;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #FFF;
margin-top: -40px;
float: left;
margin-left: 30px;
background-image: url(container%20back.jpg);
display: inline;
}
 
h1 {
color: #FFF;
padding-left: 20px;
text-align: left;
font-family: "Berlin Sans FB";
font-size: 24px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
zoom: 1;
}
.txt {
width: 60%;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 0%;
margin-left: 28%;
color: #FFF;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
text-align: justify;
font-size: 18px;
border-left-width: 7.5px;
border-left-style: double;
font-family: "Berlin Sans FB";
display: block;
border-left-color: #20336B;
}
.newsletter {
height: 160px;
width: 250px;
background-color: #969696;
margin-bottom: -15px;
position: relative;
margin-right: 30%;
clear: both;
margin-left: 20%;
background-image: url(/news.jpg);
}
.right_column {
width: 360px;
float: right;
background-color: #2C4047;
display: inline;
overflow: hidden;
}
#calendar {
background-image: url(/calendar%201.jpg);
height: 373px;
width: 350px;
background-color: #2F2E1C;
overflow: auto;
border: 0;
}
.social {
float: left;
height: 300px;
padding: 0;
background-color: #f4d793;
margin-top: 10px;
margin-right: 15px;
margin-bottom: -30px;
clear: right;
position: relative;
width: 350px;
}
 
 
 
.clearfloat {
font-size: 1px;
line-height: 0px;
clear: both;
height: 0px;
}
.footer {
 
text-align: center;
padding: 0;
font-size: smaller;
text-align: center;
color: #FFF;
margin: 0;
width: 100%;
height: auto;
border-top-width: 5px;
border-top-style: solid;
border-top-color: #0F2561;
clear: both;
float: left;
background-color: #993300;
}
 
ul , ol, dl{
margin: 0px;
padding: 0px;
}
ul.nav {
list-style-type: none;
margin-bottom: 15px;
font-size: large;
}
ul.nav li{
border-bottom-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-color: #CCC;
background-image: url(nav%20back1.jpg);
background-color: #132762;
background-repeat: no-repeat;
background-position: bottom;
}
 
ul.nav a , ul.nav a:visited{
padding-top: 35px;
padding-right: 20px;
padding-bottom: 35px;
padding-left: 20px;
display: block;
text-decoration: none;
color: #FFF;
font-family: "Berlin Sans FB";
text-align: center;
}
#table {
margin-top: 20px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
text-align: center;
}
 
 
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
color: #333;
background-color: #FFF;
text-decoration: none;
font-family: "Berlin Sans FB";
background-image: url(nav%20hover.jpg);
background-repeat: no-repeat;
background-position: right bottom;
}
a:link {
color: #FFF;
text-decoration: none;
}
a:visited {
text-decoration: underline;
color: #FFF;
}
a:hover , a:active, a:focus{
text-decoration: none;
text-align: left;
color: #FFF;
}
 
 
if someone can help it would be amazing. and if someone an check my code and tell me if i have some mistakes.
 
thank you




Tagged with Opera 8.0 , Explorer 6.0 , Explorer 8.0 , Firefox 3.0 , Opera 9.0 , Explorer 7.0 , Safari 1.0 , Firefox 3.5 , Explorer for Mac , Safari 3 , Safari 4 , Firefox 1.0 , Explorer 5.0 , Safari 2.0 , Opera 10 , Opera 7.x , Firefox 1.5 , Explorer 5.5 , Opera 8.5 , Background

Tag it on del.icio.us or Digg

Text ID: BACKGROUND_IN_SOME_DIVS_NOT_SHOWING_IN_BROWSERS_BUT_SHOWING_IN_DREAMWEAVER


Comments (1)

To add a comment, please Log in.




The problem is "auto - auto"

by Jesper-k on March 13, 2011

I guess you are refering to the classes with "background-image: xxx.jpg".
some of the images contains " " in the filename. This tells me, that you use space within the filename. That causes problems showing the image, specially using certain webservers.

Another problem lays in the commands "margin-left: auto; margin-right: auto", wich causes some browsers to collaps the tag, instead of adjusting to the height of the content.  

I hope theese two issues can help you..





CSS Advisor home
Submit a post

rss

CSS ADVISOR RSS FEEDS
Recent: POSTS | COMMENTS | EDITS


Browsers
Internet Explorer (98)
Mozilla/Firefox (49)
Opera (17)
Safari (35)
CSS Properties
Background (22)
Border (8)
Color (8)
Float (22)
Font (5)
Margin (10)
Padding (8)
Position (39)
Text (27)
Width/Height (23)