Site not validating with mozilla

Dev Shed Forums Sponsor:

July 19th, 2004, 10:19 AM

dmorand

Contributing User

Join Date: Feb 2004

Posts: 78

Time spent in forums: 10 h 40 m 52 sec
Reputation Power: 5

Site not validating with mozilla

I'm working on a site: www.wirelessguy.net

I've been told that it looks fine in IE, but not mozilla. Is there something that I need to do with my CSS to get it to work with mozilla?

Here is my css code so far:

Code:

/*Main Section*/
html, body
{
	padding: 0;
	font-family: Arial;
}

.bodyMain
{
	font-family: Arial;
	margin-left: 12%;
	margin-right: 12%;
	background: silver;
}

/*Site Template Section*/
.verticalText
{
	writing-mode: tb-rl;
	filter: flipv fliph shadow;
	width: 10px;
	position: absolute;
	color: #FF9933;
	padding:10px;
}

.leftBoxText
{
	top:20%;
	font:18px;
	left: 10%;
	letter-spacing:16px;
}

.leftBoxTextUnder
{
	top:30%;
	font:14px;
	left:45%;
	letter-spacing:12px;
}

div#leftBox
{
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:12%;
	border-right:3px solid black;
	background-color:#333399;
}

div#rightBox
{
	position:absolute;
	top:0;
	right:0;
	height:100%;
	width:12%;
	border-left:3px solid black;
	background-color:#333399;
}

div#content
{
	position: absolute;
	top: 17%;
	bottom: 11%;
	height: 76%;
	width:100%;
	border: 1.5px solid #333399;
}

#titleBar
{
	background-color: #333399;
	text-align: center;	
	width: 100%;
	position: absolute;
	top: 0;
	height: 11%;
	border-top: 1px solid Black;
	border-left: 1px solid Black;
	border-right: 1px solid Black;
}

#titleBar table
{
	text-align:center;
	color: #FF9933;
	width:100%
}

#titleBar th
{
	font: bold 30px;
	letter-spacing: 10px;
}

#titleBar td
{
	font: normal 11px;
	letter-spacing: 6px;
	font-style: italic;
	padding: 7px;
}

#titleBar img
{
	width:50px;
	height:50px;
}

#bottomBar
{
	background-color: #333399;
	text-align: center;
	height: 3%;
	padding: 5px;
	border: 1px solid black;
	color: #FF9933;
	position: absolute;
	bottom: 0;
	width: 100%;
	vertical-align: middle;
}

#bottomBar table
{
	height=100%;
}

#bottomBar td 
{
	font-size: 12px;
	padding-left: 30px;
}

#bottomBar a:link
{
	display: inline;
	text-decoration: none;
	color:#FF9933;
	line-height: normal;				
}

#bottomBar a:visited 
{
	text-decoration: none;
	color: #FF9933;
}

#bottomBar a:hover 
{
	color:white;
	border-top: 1px solid #FF9933;
	border-bottom:1px solid #FF9933;	
}

#navBar
{
	background-color: #FF9933;
	border: 1px solid Black;
	color: #333399;
	text-align: center;
	height: 4%;
	position: absolute;
	top:11%;
	width: 100%;
	font-weight: normal;
}

#navBar table
{
	height=100%;
}

#navBar td
{
	font-size: 12px;
	padding-left: 30px;
}

#navBar a:link 
{
	display: inline;
	text-decoration: none;
	color:#333399;
	line-height: normal;				
}

#navBar a:visited 
{
	text-decoration: none;
	color: #333399;
}

#navBar a:hover 
{
	color:white;
	border-top: 1px solid #333399;
	border-bottom:1px solid #333399;	
}

/*iFrame Pages Section*/
body#content
{
	background:white;
}

July 19th, 2004, 01:01 PM

kk5st

Thanks Johnny Hart (BC) R.I.P.

Join Date: May 2003

Location: Dallas

Posts: 4,674

Time spent in forums: 1 Month 3 Days 15 h 15 m 50 sec
Reputation Power: 687

Validate your html.

The filter thing is an MS proprietary attribute. If you really want the rotated text, try making an image.

Here is something close to what I think you want.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta name="generator"
    content="HTML Tidy for Linux/x86 (vers 1st March 2002), see www.w3.org" />
    <meta name="editor" content="Emacs 21" />
    <meta name="author" content="Gary Turner" />
    <meta http-equiv="content-type"
    content="text/html; charset=ISO-8859-1" />

    <title>footer demo with borders</title>

<style type="text/css">
/*<![CDATA[*/

html, body, #container {
    min-height: 100%;
    height: 100%;
    }

html>body,html>body #container {
    height: auto;
    }

html, body {
    padding: 0;
    margin: 0;
    }

body {
    color: #333;
    background: silver;
    font: 100% sans-serif;
    }

p {
    font-size: 1em;
    }

h1 {
    font: bold 1.6em Arial, Helvetica, sans-serif;
    letter-spacing: .5em;
    text-align: center;
    margin-top: 0;
    }

img {
    position: relative; /*required for some IE idiocy with floats*/
    border: 2px inset orange;
    }

#container {
    position: absolute;
    top: 0;
    left: 50%;
    width: 80%;
    margin-left: -40%;
    background-color: white;
    border-left: 1px solid black;
    border-right: 1px solid black;
    }

#main {
    height: auto;
    padding: .5em;
    margin-bottom: 3em;
    }

#banner {
    position: relative; /*required again for IE--this is stupid*/
    margin: -.5em -.5em 0 -.5em;
    background-color: darkblue;
    color: orange;
    text-align: center;
    padding-bottom: 0;
    }

#banner p, #footer p {
    margin: 0;
    }

#subbanner {
    width: 100%;
    margin-bottom: 0;
    color: darkblue;
    background-color: orange;
    border-bottom: 1px solid black; 
    }

#footer {
    position: absolute;
    bottom: 0;
    color: orange;
    background-color: darkblue;
    width: 100%;
    text-align: center;
    }

.slant {
    font-style: italic;
    font-size: 1.2em;
    font-weight: bold;
    }

.clearing {
    clear: both;
    height: 0;
    font-size: 0;
    }

/*]]>*/
</style>
  </head>

  <body>
    <div id="container">
      <div id="main">
        <div id="banner">
          <img src="bullseye.jpg" alt="Logo" height="75" width="75"
          style="float: left; margin: 10px;" /> <img src="bullseye.jpg"
          alt="Logo" height="75" width="75"
          style="float: right; margin: 10px;" /> 

          <h1>American Communications</h1>

          <p class="slant">An Authorized Cingular Agent</p>

          <p class="clearing">&nbsp;</p>

          <div id="subbanner">
            <p>generic nav links</p>
          </div>
          <!-- end subbanner -->

        </div>
        <!-- end banner -->

        <p>You would put your frame her in place of these
        paragraphs.</p>

        <p>We have centered the content
        container while maintaining a dynamic width. The container is
        80% the width of the viewport. Using relative placement on an
        AP element seems to preclude variable borders. It does not seem
        possible to not have the container AP and keep the footer
        placement.</p>

        <p>Change the background color of the container to affect the
        main content area.</p>
      </div>

      <!-- end main -->

      <div id="footer">
        <p>generic footer stuff</p>
      </div>
      <!-- end footer -->
    </div>
    <!-- end container -->
  </body>

</html>

__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

My html and css workshop, demos and tutorials.
Ask a better question, get a better answer.

July 20th, 2004, 07:10 AM

petersmart

Contributing User

Join Date: Jan 2004

Location: Northamptonshire

Posts: 38

Time spent in forums: 2 h 12 m 14 sec
Reputation Power: 5

You need to make ABSOLUTELY sure that all your css is valid.

IE and opera are fairly forgiving as to tiny errors in your css, netscape isn't, and goes ape**** for even a tiny error !!

If you go here:

http://www.w3.org/

you can get your css validated.

__________________
Tried and tested FREEBIES-4-YOU !!

http://www.freebies-4-you.com

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: