CSS - Mozilla Equiv To Writing-mode

We've got something odd happening on our site. Check out:

newser.com/story/82843/conan-obriens-twitter-woman-shows-class.html

If you leave your browser window alone for about 5 minutes, eventually the content on the page jumps down. If you scroll, or mouseover the window, it jumps back. Any ideas on the issue?

One thing to note -- we're watch for breaking news periodically -- when something big happens, we load a banner above the nav via AJAX. Seems like this may be a factor even though it's usually empty.

It's not letting me post links since I am a new member, so copy paste the link below. (it's an image of what looks wrong in the website)
img59.imageshack.us/i/52153657.jpg/

It loads correctly in Firefox and IE8, but the middle column breaks in ie7 and ie8 in compatibility mode.

By break I mean the middle column gets shifted to the right side of the middle column and below the right column (while still in the middle column)

I have also included the general layout and css below.

I have tried changing doc types and a few small things but nothing has even effected the appearance.

The website is in a layout like this:

html4strict Code:
Original - html4strict Code <div id="wrapper1"> <div id="wrapper2"> <div id="maincol"> <div id="leftcol"> </div> <div id="rightcol"> </div> <div id="centercol"> </div> </div> <div id="footer"> </div> </div> </div>

  

 <div id="wrapper1">


     <div id="wrapper2">


         <div id="maincol">


         


             <div id="leftcol">


             </div>


             


             <div id="rightcol">


             </div>


             


             <div id="centercol">


             </div>


             


         </div>


         


         <div id="footer">


         </div>


         


     </div>


 </div> 

css Code:
Original - css Code #centercol { position:relative; padding:0 200px; min-width: 520px; } #leftcol { position:relative; top:-10px; left:-10px; float:left; width:180px; margin:0 0 -10px 0; padding:10px; z-index:100; } #rightcol { position:relative; top:-10px; right:-10px; float:right; width:180px; margin:0 0 -10px 0; padding:10px; z-index:99; } #maincol { position:relative; margin:0; padding:10px; } #wrapper1 { position:relative; text-align:left; width:100%; min-width: 950px; background:#23415C url("images/side.gif") repeat-y top right; } #wrapper2 { position:relative; text-align:left; width:100%; background:url("images/side.gif") repeat-y top left; }

  

 #centercol {


     position:relative;


     padding:0 200px;


     min-width: 520px;


 }


 #leftcol { 


     position:relative;


     top:-10px;


     left:-10px;


     float:left;


     width:180px;


     margin:0 0 -10px 0;


     padding:10px;


     z-index:100;


     }


 #rightcol {


     position:relative;


     top:-10px;


     right:-10px;


     float:right;


     width:180px;


     margin:0 0 -10px 0;


     padding:10px;


     z-index:99;


 }


 #maincol {


     position:relative;


     margin:0;


     padding:10px;


 }


  


 #wrapper1 {


     position:relative;


     text-align:left;


     width:100%;


     min-width: 950px;


     background:#23415C url("images/side.gif") repeat-y top right;


 }


     


 #wrapper2 {


     position:relative;


     text-align:left;


     width:100%;


     background:url("images/side.gif") repeat-y top left;


 } 

Any ideas on how to resolve this problem would be great.

Hi ,

I am trying to print my html page in the landscape mode.I should print this

automatically in landscape mode with css orientation landscape.

i am using the below code to print all tables in my html page in landscape

mode

@page rotated { size : landscape }
table { page : rotated }


Its not working .

Is this write or wrong?
Is there any other way to do it.

Thanks,

I have two divs

Code:

<div class="QuickLinkDisplay" dir="ltr" lang="en">
Hello, World!<br />
Test<br />
Test
</div>

<br />

<div class="ContentDisplay" dir="ltr" lang="en">
Hello, World!<br />
Test<br />
Test</div>
</body>

The corresponding styles are as follows
Code:

div.ContentDisplay
	{

	background-color: rgb( 255, 250, 238 );
	background-image: url( ../../../images/ssplash/ContentBackground.gif );
	font-size: 10pt;
	left: 200px;
	margin-bottom: 0%;
	padding: 5px;
	position: absolute;
	width: 575px;
	
	}

div.QuickLinkDisplay
	{
	
	background-color: rgb( 255, 227, 160 );
	background-image: url( "../../../images/ssplash/QuickLinkBackground.gif" );
	left: 200px;
	padding: 5px;
	position: absolute;
	width: 575px;
	
	}

The problem is, that ContentDisplay which is supposed to be displayed under QuickLinkDisplay, is printed right in the middle of QuickLinkDisplay (see it in action here The middle column is all I'm concerned about)

Anyone know how to fix this?

CSS coding started. Please see post #3

Here's the design:

Code:

<style>
a.ClassA{
background-color:#000000;
color:#ffffff;
width:200px;
height:50px;
}

a.ClassA:hover{
background-color:Red;
}
</style>

Code:

<a href=# class=ClassA>Sample</a>

IE
http://img156.echo.cx/img156/604/ie9ay.png

Mozilla
http://img156.echo.cx/img156/7571/moz6ed.png

The result I want is the same with IE

why is it different in Mozilla ?

I am trying to display a banner (image) at the top of my page with a menu under it. In IE the image aligns to the top of the menu, but in Mozilla the menu starts 15 pixels below the image. I've tried setting margin and padding to 0 for all div tags but that does not help. If I set margin=-15px for my #hnav it aligns in Mozilla, but then the menu is pushed up 15 pixels in IE.

I've tried an old IE hack from eric myers, but both IE and Mozilla read the hack code and it did not help.

Code:

<html>
<head>
<style type="text/css">
body {margin:0; padding:0;}
html {margin:0; padding:0; background-color:#646874;
  font-size:11pt; font-family:Verdana, Arial, Helvetica, sans-serif;}
img {display: block;border:none; margin:0;padding:0;}

a:link, a:visited { color: #00F; text-decoration: none; }

#pageContent {margin-left:24px;margin-top:12px;padding-bottom:45px; padding-right:7px; }
.contentImg {width:707px;padding-left: 209px;}
.padRight { padding-right: 15px; }

#banner {
   width:820px;height:149px;
   background-image:url(images/820x150.gif);
   background-repeat:no-repeat;
}
#hnav {width:820px;height:42px;background-image:url(images/navbar.gif);background-repeat:repeat-x;
   margin-top: 0px;}

#hnav ul {list-style:none;padding-left:20px;}
#hnav ul li {float:left;font-size:11px;padding-right:15px;background-image:url(images/divider.gif);
   background-position:right;background-repeat:no-repeat;height:30px;}
#hnav ul li a {padding-right:15px;position:relative;top:9px;text-decoration:none;color:#000;}
#hnav ul li a:hover {color:#777777;}
#hnav .curNavItem {padding-right:15px;position:relative;top:9px;text-decoration:none;color:#000;
   font-weight:bold;}

</style>
</head>

<body>
<div id="centerPage">
  <div id="mastHead">
    <div id="banner"></div>
    <div id="hnav">
      <ul>
        <li><span class="curNavItem">Home</span></li>
        <li><a href="gold.html">Gold</a></li>
        <li><a href="silver.html">Silver</a></li>
        <li><a href="ssteel.html">Stainless Steel</a></li>
        <li><a href="glass.html">Glass</a></li>
        <li><a href="gemstones.html">Gemstones</a></li>
        <li><a href="custom.html">Custom</a></li>
        <li><a href="plating.html">Plating</a></li>
        <li><a href="events.html">Events</a></li>
        <li><a href="contactus.html">Contact Us</a></li>
      </ul>
    </div>
  </div>
</div>

</body>
</html>

is there away for me to make css work in mozila? I have this for IE but when i view the site in mozilla/netscape then the tables and etc are all out of place

Code:

.10w {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	font-weight: normal;

}
.10wB {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
}
.10b {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
}

does anyone knows how to make it work?

Im new to CSS and have a problem. IE displays my webpages without problem but when testing in Mozilla only a small number of CSS borders are visible.

Here's an example. This works OK

.right {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #666666;
border-right-color: #666666;
border-bottom-color: #666666;
border-left-color: #666666;
}

But this one does not display?

.3pxspacernobackborder3 {
padding: 8px;
font-family: Verdana, Arial, Helvetica, sans-serif, "Book Antiqua";
font-size: 12px;
color: #000066;
border-top: 1px solid #666666;
border-right: 1px solid #666666;
border-bottom: 1px none #666666;
border-left: 1px none #666666;

}

This is probably somethign simple but be gentle please guys.

HELP!

this is the deal. My CSS/html looks great in IE.....BUT, when i open it in Mozilla, its like Mozilla isn't even registering the external css...only the html. Any ideas on how to make it work in both ie and mozilla?!?

Hello. I can't figure out why Mozilla Firefox won't interpret my CSS correctly. In IE my site works just fine but in Firefox it doesn't work at all. The only part of the css file mozilla is picking up is the body font.

Any ideas?

Hi. I have this DIV element which has content inside, and which has some JS code implemented on it. Every thing works like a charm.

Then, I add a transparent PNG background. Everything's still working. But for the PNG background to be transparent in IE I have to set a filter on the DIV, like this:
CSS Code:
Original - CSS Code * html #master_container /* This is the DIV element */ { background-image: none; background-color: transparent; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='./images/main_window_glass.png', sizingMethod='scale'); }

  

 * html #master_container /* This is the DIV element */


 {


     background-image: none;


     background-color: transparent;


     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader


     (src='./images/main_window_glass.png', sizingMethod='scale');


 } 

Which in turn, for some blunt and very unknown reason, cancels any functionalities of the content inside the DIV or the JS code relative to the DIV.

Here, take a look: http://pilau.phpnet.us/mctours/index.html
Compare in FireFox and IE6 and tell me if you have ANY clue!
Thanks, very much, frustrated Pilau

Is there a way to detect whether someone is using a mobile device, and write specific CSS according to whether the viewer is using a computer or Iphone/ Blackberry or other mobile device?

Any links or info is appreciated.

thanks
-

Hi.
I have a nav bar on my site which I created using Suckerfish Dropdowns.
my <UL>-s id is "nav".

Everything is working when I hide secong level list by Css: Code:

ul ul{display:none;}

But when I change it to (so as to not hide all second level lists) Code:

ul#nav ul{display:none;}

,
the browser still hides the list, but didn't show it on hover! : Code:

li:hover ul, li.sfhover ul{
 display: block; 
 }

This behaviour seems very strange for me.
Can anyone explain me that?

The address of the page is http://www.dinal.ru/new/

Thank you.
Artashes

Hello --

The CSS file is being ignored by Mozilla Foxfire (IE recognizes it). When viewed locally in Foxfire, it's OK, but not when uploaded.

<!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>
<title>Karen Homepage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="karen.css" rel="stylesheet" type="text/css" />
</head>

Any clues/help would be greatly appreciated.

Thanks -- JillC