CSS - Css Displays Differently Between Local/online

hey all, i am trying to implement coolmenus dropdown menus on a site but i am having problems. In IE it is fine it is in the rght place, but in mozFF it is positioned at the top of the page wierd

here is the CSS for it which i think is possibly the problem
Code:

/* CoolMenus 4 - default styles - do not edit */
.clCMAbs{position:absolute; visibility:hidden; left:0; top:0}
/* CoolMenus 4 - default styles - end */
  
/*Style for the background-bar*/
.clBar{position:absolute; top:auto; width:10; height:10; background-color:yellow; layer-background-color:yellow; visibility:hidden}

/*Styles for level 0*/
.clLevel0,.clLevel0over{position:absolute; padding-top:3px; font-family:georgia; font-size:12px; font-weight:bold; text-align:center; }
.clLevel0{background-color:#667138; layer-background-color:#667138; color:#ffffd2;}
.clLevel0over{background-color:#A4AA54; layer-background-color:#A4AA54; color:#ffffd2;; cursor:pointer; cursor:hand; }
.clLevel0border{position:absolute; visibility:hidden; background-color:#667138; layer-background-color:#667138}

/*Styles for level 1*/
.clLevel1, .clLevel1over{position:absolute; padding:2px; font-family:georgia; font-size:11px; text-align:center;}
.clLevel1{background-color:#667138; layer-background-color:#667138; color:#ffffd2;}
.clLevel1over{background-color:#A4AA43; layer-background-color:#A4AA54; color:#ffffd2; cursor:pointer; cursor:hand; }
.clLevel1border{position:absolute; visibility:hidden; background-color:#A4AA54; layer-background-color:#A4AA54}

/*Styles for level 2*/
.clLevel2, .clLevel2over{position:absolute; padding:2px; font-family:tahoma,arial,helvetica; font-size:10px; font-weight:bold; text-align:center;}
.clLevel2{background-color:Navy; layer-background-color:Navy; color:white;}
.clLevel2over{background-color:#0099cc; layer-background-color:#0099cc; color:#667138; cursor:pointer; cursor:hand; }
.clLevel2border{position:absolute; visibility:hidden; background-color:#006699; layer-background-color:#006699}/* CSS Document */

i can get it right in FF by changing this value in the javascrpt
Code:

oCMenu.fromTop=0  //this works for IE
oCMenu.fromTop=139 // This works for Moz FF

i can't get both correct at the same time!
I am trying to position this menu in a DIV on my page which has the settings
Code:

#TitleBar {
	position:absolute;
	top: 0px;
	left: 0px;
	padding: 15px;
	padding-left:10px;
	width:100%;
	/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
	height:170px; /* 14px + 17px + 2px = 33px */
	border-style:solid;
	border-color: #A4AA54;
	border-top: 1px #A4AA54 solid;
	border-bottom: 1px #A4AA54 solid;
	border-width:1px 1px; /* top and bottom borders: 1px; left and right borders: 0px */
	
	background-color:#A4AA54;
	background-image:url(../images/logo/gglogo.JPG);
	background-position: 1% 2px;
	background-repeat:no-repeat;
	z-index:0;

/* This is a fix for IE% */
	voice-family: "\"}\"";
	voice-family:inherit;
	height:170px;
	width:100%; /* the correct height */
	}
/* "be nice to Opera 5" */
body>#TitleBar {height:170px; width:100%;}

if anyone can help me with this that would be great!! i have posted on the dhtml coolmenus forumy thing but i dont think it is very active, certainly not as good as devshed

thanks in advanced

RF

My page seems to work in IE7, Firefox & Safari but in IE6 it all is shifted to the right. Any help will be greatly appreciated as I am new to this.

Here is my code:

Code:

.css

body



{
background-color: #000000;
}


#background {
	
	position:absolute;
	width:600px;
	z-index:1;
        left: 300px;
        top: 10px;

}

#clientbackground {
	position:absolute;
	width:600px;
	z-index:1;
	left: 300px;
	top: 10px;
}
#apDiv1 {
	position:absolute;
	width:90px;
	z-index:1;
	left: 380px;
	top: 90px;
}
#apDiv2 {
	position:absolute;
	width:78;
	z-index:2;
	left: 355px;
	top: 192px;
}
#apDiv3 {
	position:absolute;
	width:78;
	height:113;
	z-index:3;
	left: 350px;
	top: 313px;
}
#apDiv4 {
	position:absolute;
	width:97;
	height:90;
	z-index:4;
	left: 362px;
	top: 433px;
}
#apDiv5 {
	position:absolute;
	width:179;
	height:230;
	z-index:1;
	left: 400px;
	top: 262px;
}
#apDiv6 {
	position:absolute;
	width:61;
	height:96;
	z-index:5;
	left: 1015px;
	top: 26px;
}
#content {
	position:absolute;
	width:550;
	height:96;
	z-index:5;
	left: 496px;
	top: 146px;
}

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: none;
padding: 5px;
left: 1200px;
border: none;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 25;
left: 0px; /*position where enlarged image should offset horizontally */
z-index: 50;
}


.html

<html>
<head>
<title>*******</title>
<link rel="stylesheet" type="text/css"
href="style.css" />
<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>
</head>

<body onLoad="MM_preloadImages('images/about.jpg','images/clients.jpg','images/work.jpg','images/facility.jpg','images/client.gif')">


<div id="background"><img src="images/background.gif" width="800" height="600" /></div>

<div id="apDiv1"><a href="about.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','images/about.jpg',1)"><img src="images/about.jpg" name="Image1" width="90" height="94" border="0"></a></div>
<div id="apDiv2"><a href="clients.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/clients.jpg',1)"><img src="images/clients.jpg" name="Image2" width="77" height="113" border="0"></a></div>
<div id="apDiv3"><a href="work.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/work.jpg',1)"><img src="images/work.jpg" name="Image3" width="78" height="113" border="0"></a></div>
<div id="apDiv4"><a href="facility.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','images/facility.jpg',1)"><img src="images/facility.jpg" name="Image4" width="97" height="90" border="0"></a></div>
<div id="apDiv6"><a href="(URL address blocked: See forum rules)" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','images/client.gif',1)" target = _blank><img src="images/client.gif" name="Image5" width="61" height="96" border="0"></a></div>

</body>
</html>

Thanks for your help!!!

Hi all,

There is a serious positioning problem going on with my page. It looks right in Firefox3, but in IE7 the spacing is messed up and the top left photo fails to display. I imagine it has something to do with the padding or margin for my text. Please help! I have validated in both CSS and HTML. Also, can anyone recommend any sort of tool to help with things like this in the future? I am in an intro web class so I failed to cross check browsers, bear with me...

Thanks in advance,
Amanda

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" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Dachsund Rescue of Houston</title>

<style type="text/css">

body{
background: url(images/background.jpg) no-repeat top center;}

#contain{	
		width: 800px;
		height: 640px;
		margin-left: auto;
		margin-right: auto;
			}
#menu{		width: 466px;
		height: 98px;
		float: right;
		margin-top: 15px;
		}
#dog{		width: 491px;
		height: 257px;
		margin-top: 19px;
		margin-left: 22px;
		
float: left; }
		
/* margin-top is the menu plus the remaining pixels (19) so, from the very TOP of the page. I guess you keep "adding"
*/
		


#community{	float: right;
		background: url(images/community_spot.jpg) no-repeat;
		width: 231px;
		height: 259px;
		margin-top: 19px;
		margin-right: 22px;
		 }

#arrival{	
	clear: right;
	background: url(images/arrivals.png) no-repeat;
	width: 800px;
	height: 286px;
}

.communitytext {
font-family: helvetica;
font-size: 10pt;
color: #000000;
padding: 160px 10px 0 15px; /*up, right, bottom, left */
margin: 5px auto 5px 10px; /*up, right, bottom, left */
}

.arrivaltext {
font-family: helvetica;
font-size: 10pt;
color: #000000;
padding: 105px 10px 0 10px; /*up, right, bottom, left */
margin: 15px 10px 5px 10px; /*up, right, bottom, left */
}

.arrivaltext2 {
font-family: helvetica;
font-size: 10pt;
color: #000000;
padding: 3px 10px 0 10px; /*up, right, bottom, left */
margin: 15px 10px 5px 10px; /*up, right, bottom, left */
}

</style>
</head>
<body>
<div id="contain">
<div id="menu">
<a href="about.html"><img src="images/about_btn.png" alt="About button"  title="About" border="0"/></a> 
<a href="adopt.html"><img src="images/adopt_btn.png" alt="Adopt button"  title="Adopt" border="0"/></a> 

<a href="help.html"><img src="images/help_btn.png" alt="Help button"  title="Help DROH" border="0"/></a> 
<a href="resources.html"><img src="images/resources_btn.png" alt="Resources button"  title="Resources" border="0"/></a> 
<a href="contact.html"><img src="images/contact_btn.png" alt="Contact button"  title="Contact" border="0"/></a> 
</div>
<div id="dog">
<img src="images/jumping.jpg"  alt=""  title="" border="0" /> </div>
<div id="community"> <p class="communitytext">If you love animals, fostering allows you to go through 'em and love a whole bunch of  'em - without having to keep 100 dogs at your house. MORE...</p></div>

<div id="arrival"><p class="arrivaltext">Luke is a happy-go-lucky, love bug. He is between 1-3 yrs old, with black/tan dapple. He is mixed with another breed which we suspect to be a Spaniel or Catahoula. He stands about 11/2 feet tall to the top of the head and weighs 20 lbs. </p> <p class="arrivaltext2"> Luke was rescued at the 11th hour and was emaciated when he came in.With a little bit of love and a lot of food, we found that Luke has a perky, easy-going and affectionate personality. In our house we call him Casanova because everyone who meets him, falls in love with
him. He has an intense alluring stare to draw you in, then he slowly cuddles up next to you, and when you've fallen for him, he covers you with gentle kisses. </p>  <p class="arrivaltext2"> Luke was rescued at the 11th hour and was emaciated when he came in.With a little bit of love and a lot of food, we found that Luke has a perky, easy-going and affectionate personality. In our house we call him Casanova because everyone who meets him, falls in love with
him. </p> 

</div>
</div>
</body>
</html>

I have two images, the first (nameplate) i have set to be ontop and centered, whose left side "hits" the side of the window when the window gets small enough like its supposed to. The second is set beneath it (silverplate) and is smaller than nameplate(1500x800). I want this to be centered too so that when the browser is resized it follows the nameplate and doesnt move against it or go out of window. I cant seem to achieve this effect with any combination of positioning and nested divs, the silverplate always goes off the left side of the window and tracks different than the nameplate. Why dont both images behave the same? How would i make them do that?

Code:

<style>
#nameplate {
	top:0px;
	height:1500px;
	z-index:90;
	height:1500px;
	overflow:visible;
	
}

 .img {
	 position:relative;
	display:inherit;
	margin-left:auto;
	margin-right:auto;
 }


</style>
</head>

<body bgcolor="#00FF33" style="margin:0px; padding:0px; max-height:1500px; overflow:visible;">

<div id="nameplate">
<img src="Assets/NamePlate.png" style=" z-index:98; opacity:0.5;" class="img"  /> 

<img src="Assets/SilverPlate.png" style="z-index:95; left:-300px; top: -1000px; width:100px; height:100px;"   class="img"/> 
</div>

I have a project in Visual Studio 2008, ASP.Net, 2.0.

We are going from IE6 to IE8 and I'm making the changes for this move. I did all these changes by deploying the files to a test web server because I still had IE6 on my machine.

When I publish to our web server the pages render like they should.

I got IE8 last night so I figured I could just test it out on my box.

When I run it off my box, the pages look all screwed up.

I don't understand how they can look fine on the web server but not on my box. The same version of IE8 is installed on the test box I'm working with and my machine.

Anyone ever encountered this or know of anything to check?

If you have questions or need more info, ask.

Thanks for taking the time to read my question.

I have a MainBox that I have all my page in. <div id="MainBox"></div> I had a height set and both IE and FF displayed ok, but if the content was higher than the box, FF expanded and IE didn't. So I took the height off and IE expaned and FF shrunk to nothing.

What's up with that?

I've attached the code and the one pic. What can I do to get them to display the same?

right now all files go in the same folder.

Thanks,

Brad

http://www.lovemeforme.org/alecia/

I've made it so it works perfect in FF, IE, Netscape.. but in Opera it's messed up. Is there anyway I can specialize a stylesheet for just Opera?

Also, anyone know of any free services that provide screen shots for all common web browsers. I remember I had a link a while ago, but I've since lost it.

Thanks for the help in advance.

The page with the problem is this one: http://www.yazmin.net/teamintraining/photos.php

When the page loads in IE (I'm using v6, but this seems to be happening in all versions of IE), you can see my introduction text display, but then it looks like another div is being loaded and the text promptly dissappears. I don't have this problem in other browsers. Below is the relevant CSS and HTML code:

CSS:
Code:

#content {
	background-image: url(/teamintraining/images/bkg.gif);
	margin: 30px 13em 0 3em;
	padding-right: 60px;
}
 
#navigation {
  	color:#006600;
  }

.img-shadow {
  float:left;
  background: url(/teamintraining/images/shadowAlpha.png) no-repeat bottom right !important;
  background: url(/teamintraining/images/shadow.gif) no-repeat bottom right;
  margin: 10px 0 0 10px !important;
  margin: 10px 0 0 5px;
  }

.img-shadow img {
  display: block;
  position: relative;
  background-color: #fff;
  border: 1px solid #a9a9a9;
  margin: -6px 6px 6px -6px;
  padding: 4px;
  }
 

HTML:
Code:

<body>
<br><h2>Welcome to Jason and Yazmin Wickham's Team In Training Update Site!</h2><br><br>
<div id="main">
  <div id="menu">
    <div align="center"><?php include("includes/navigation.htm"); ?><p>&nbsp;</p></div>
  </div>
  <div id="content">
  <h1>Photo Gallery</h1>
  <p>As Jason and I go through training, we will make an effort to post pictures here for viewing.</p>
  <p><?php echo $gallery->getThumbnailsDisplay() ?></p>
  <br style="clear:both" />
  </div>
</div>
</body>

Any ideas? Thanks!

ok, I found the fix here. many thanks anyways.

Hi there,

I have some CSS tabs, but they are displaying differently in IE7 than FF.



This is my code:
PHP Code:
#nav {
    float:left;
    width:100%;
    background:yellow;
    height: 27px;
    font-size:93%;
    line-height:normal;
    list-style: none;
    margin: 0px;

    }
    
    
    #nav li {
    float:left;
    background:url("images/tab_left.jpg")
      no-repeat left top;
    margin:0;
    padding:0px;
    list-style: none;
    }
  #nav a, #navheader strong, #nav span {
    display:block;
    background:url("images/tab_right.jpg")
      no-repeat right top;
    padding:5px 15px 4px 6px;
    } 





and my html:

PHP Code:
<div id="nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li id="current"><a href="#">News</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div> 






Any ideas whats causing these different outcomes?

Hello all,

I'm trying to make a webpage that has about 200px padding on the left and right side and 0 padding at the top and bottom, i would like my content to be viewed in that small area. I'm wanting the background color where my content will be to be grey but i want the padded sides to stay white. Is this possible?

Like this http://www.cssbasics.com/, you see how the sides are grey and the content area is in a different color, how can i do this?


Thank you!

I am attempting to put together a site with CSS navigation for the first time. Thanks to people much smarter than I, I've been able to stitch other's lessons into something almost workable.

THE PROBLEM
I have a horizontal menu with a submenu. This submenu should also display horizontally. It does in FF, but not in either IE6 or IE7. In these browsers, it displays vertically. I have tried a lot of things and finally gave up. I validated my code and was given a pass.

I've tried narrowing down the problem and have tried searching for the answer but I just can't figure it out.

If needed, you can view the problem at www.foundationfitnesscenter.com/schedule (ignore the crappy header image, it's just there to show an idea for now).

The CSS where I feel the problem must be:

Code:

#nav #schedule-sub, 
#nav #education-sub,
#nav #classes-sub {
	display:none;
	width:90%;
	}

body.classes #nav ul#classes-sub a, 
body.schedule #nav ul#schedule-sub a,
body.education #nav ul#education-sub a {
	background-image:none;
	color:#3300FF;
	font-size:100%;
	font-weight:bold;
	line-height:10px;
	margin-right:4px;
	padding:2px 10px 2px 10px;
	text-decoration:none;
	}

body.classes #nav ul#classes-sub,
body.schedule #nav ul#schedule-sub {
	display:block;
	position:absolute;	
	left:15px;
	top:95px;
	}	
body.education #nav ul#education-sub {
	display:block;
	position:absolute;	
	left:175px;
	top:95px;
	}

The HTML
Code:

<ul id="nav">
      <li class="home-list"><a href="/index.php">Home</a></li>
      <li class="classes-list"><a href="../classes/">Classes</a>
	  <ul id="classes-sub">
		<li><a href="../classes/pilates.php">Pilates</a></li>
		<li><a href="../classes/dance.php">Dance</a></li>
		<li><a href="../classes/gyrokinesis.php">Gyrokinesis</a></li>
	  </ul>
      </li>
      <li class="schedule-list"><a href="../schedule/">Schedule</a>
	   <ul id="schedule-sub">
		<li><a href="../schedule/class-schedule">View All Classes</a></li>
		<li><a href="../schedule/enroll-private.php">Enroll - Private</a></li>
		<li><a href="../schedule/enroll-group.php">Enroll - Group</a></li>
	  </ul>
      </li>
      <li class="education-list"><a href="../education/">Education</a>
	  <ul id="education-sub">
		<li><a href="../education/pilates/">Pilates</a></li>
		<li><a href="../education/dance/">Dance</a></li>
		<li><a href="../education/gyrokinesis/">Gyrokinesis</a></li>
	  </ul>
      </li>
      <li class="about-list"><a href="../about/">About</a></li>
      <li class="contact-list"><a href="../contact/">Contact</a></li>
</ul>

I designed a site,caringfriendsinc.com . Everything displays fine in Firefox, but in IE7 the images in the center of the services page are spaced apart just a little bit. It is noticeable around the edges. I can't seem to figure out how to fix it.

Thanks in advance.

Ok so i initially put my CSS iwthin my HTML document as it was just going to be a test page.

I then thought of expanding it into an actual site so wanted to transfer the CSS coding on and external CSS stylesheet.

However when doing this the layers pull to the left and out of line .. any problem causing this?

Also .. i know i have used position:absolute; tags, and using them is frowned upon when used on all layers. But without these, once again the layers again, are pulled to the left, any help would be fantastic.

Regards, Joe.

CSS within the XHTML document:

Code:

<style type="text/css">
<!--

body {
	margin: -10px;
	/*/*/margin: 0; /* */
	padding: 0;
	color: black;
	background: white;
	background-image: url(images/bg%20copy.png);
}

#content {
position:absolute;
	width:200px;
	height:78px;
	z-index:1;
	left: 112px;
	top: 0px;
}

#nav {
	position:absolute;
	border:#000000;
	border-width:thin;
	width:142px;
	height:320px;
	z-index:2;
	left: 123px;
	top: 109px;
}

.style {
background:#A01B1E none repeat scroll 0%;
border:1px solid #000000;

}
#aff {
	position:absolute;
	width:137px;
	height:29px;
	z-index:3;
	left: 123px;
	top: 553px;
}
.style1 {font-size: 12px}
#news1 {
	position:absolute;
	width:200px;
	height:43px;
	z-index:4;
	left: 307px;
	top: 108px;
}
#news2 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:5;
	left: 307px;
	top: 278px;
}
#xtreme {
	position:absolute;
	width:27px;
	height:38px;
	z-index:6;
	left: 860px;
	top: 15px;
}
-->
</style>

occasionally in Netscape my CSS code displays on the actual page, which kinda ruins things! This is now the 7th forum I have posted to, please help!!

My page is W3C HTML 4.0 transitional and CSS compliant.