|
CSS - 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;
}
Similar TutorialsMy site looks differentin the browser battle. http://awo.loadedtechnologies.com/ Please have alook at the sourec and help. I.E. Is the one that looks normal. The menu and image on the right are out of whack...WHAT CAN I DO THANK YOU Greetings... I've looked all around for a solution, and can't find one. Any help that anyone could provide would so greatly appreciated. My site http://www.baltimoregamers.com displays the div boxes incorectly in Firefox. I am using quite an unusual layout with one big picture as a plate for the entire site... I then lay div boxes/layers ontop of the plate to position text exactly where I want it to go. It works flawlessly in IE, but displays a too far down and to the right in FF/Mozilla. I am new to using CSS and I'm sure that something is off somewhere in the code. Thank in advance for any help. Feel free to e-mail me he dekay@baltimoregamers.com Here is the CSS code. It's based off the sliding doors techniques which you can see here. Code: .orangebox {
margin:0 auto 8px auto;
color:#fff;
}
.orangebox .hd .c{
font-size:1px;
height:13px;
}
.orangebox .ft .c{
font-size:1px; /* ensure minimum height */
height:16px;
}
.orangebox .hd {
background:url(images/tl.gif) no-repeat 0px 0px;
}
.orangebox .hd .c {
background:url(images/tr.gif) no-repeat right 0px;
}
.orangebox .bd {
background:url(images/ml.gif) repeat-y 0px 0px;
}
.orangebox .bd .c {
background:url(images/mr.gif) repeat-y right 0px;
}
.orangebox .bd .c .s {
background:#f9ab2d url(images/ms.jpg) repeat-x 0px 0px;
}
.orangebox .ft {
background:transparent url(images/bl.gif) no-repeat 0px 0px;
}
.orangebox .ft .c {
background:transparent url(images/br.gif) no-repeat right 0px;
}
Here is the css validation error from W3C: Code: Line: 402 Context : .orangebox .hd .c Invalid number : background Too many values or values are not recognized : url(images/tr.gif) no-repeat right 0 Any idea what is causing this? Hi, I am trying to validate my CSS using the Jigsaw CSS Validator. http://jigsaw.w3.org/css-validator/validator I keep receiving the following error. Quote: Line: 1895 Context : #save attempt to find a semi-colon before the property name. add it Line: 1895 Context : #save Property progid doesn't exist : DXImageTransform Line: 1895 Context : #save Parse Error - DXImageTransform.Microsoft.AlphaImageLoader(src='../../../../includes/images/iconSave.png', sizingMethod='none'); Line: 1896 Context : #save Parse error - Unrecognized : } With regards to the following piece of text: Code: #save
{
height:40px;
width:40px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../../../includes/images/iconSave.png', sizingMethod='none');
}
#save[id]
{
height:40px;
width:40px;
background-image:url(../../../../includes/images/iconSave.png);
}
Is it because i'm trying to use an MS Filter in my CSS, if so where else can I place this - in the code? Doesn't that defeat the object of CSS though? Any help much appreciated. Thanks, Jay. edit:figured out here is my css stylesheet. I try to validate and I get warnings. some things i was able to fix, others I am unsure of. Code: .ul {list-style-image: url("images/bullet_blue.gif");
vertical-align:middle;}
body {
background-color: #999999;
background:url(images/bkg_black.gif);
font-size:15px;
color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
h4 {
color: #0099FF;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
h2 {
color: #FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
th{
background-image:url("images/tbhead.gif");
}
a:link {color: #FFFFFF; text-decoration: none; font-family:Verdana, Arial, Helvetica, sans-serif;}
a:active {color: #FFFFFF; text-decoration: none; font-family:Verdana, Arial, Helvetica, sans-serif;}
a:visited {color: #FFFFFF; text-decoration: none;font-family:Verdana, Arial, Helvetica, sans-serif;}
a:hover {color: #0099FF; text-decoration: underline;font-family:Verdana, Arial, Helvetica, sans-serif;}
a:link.email {color:#000000; }
a:active.email {color:#000000; }
a.visited.email {color:#000000; }
#container
{
width: 87%;
margin: 20px auto;
background-color: #000000;
color: #FFFFFF;
border: 1px solid #333333;
line-height: 130%;
}
#top
{
padding: .5em;
background-color: #000000;
border-bottom: 1px solid gray;
}
#nav
{
padding: .5em;
background-color: #000000;
border-bottom: 1px solid gray;
}
#content
{
padding: 2em;
max-width: 36em;
}
#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333333;
background-color: #999999;
border-top: 1px solid gray;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}
#index{
float:left;
width:65%;
border-right:2px solid #000;
border-bottom:2px solid #000;
margin-right:15px;
padding-bottom:20px;
}
#indexright{
width:35%;
float:right;
top: 5px;
}
ul#navlist
{
padding: 3px;
margin: 8px;
list-style-type: none;
color: #ffffff;
background-color: #000000;
}
ul#navlist li { display: inline; }
ul#navlist li a
{
width: 10%;
color: #ffffff;
background-color: #000000;
padding: 0.2em 1em;
text-decoration: none;
border: 1px solid #ffffff;
}
ul#navlist li a:hover
{
background-color: #369999;
color: #ffffff;
}
.lyrics {
font-size:10px; }
.table {
font-size:12px;}
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? 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? 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>
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?!? 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. http://www.em1.nl/martijn/test.html It works perfect in IE, but in mozilla it doesn't, anyone has a solution? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
#script {
display: block;
width : 200px;
cursor : pointer;
}
A:HOVER {
color : Yellow;
}
A {
color : White;
font-weight : bold;
font-size : 12px;
font-family : Arial, Helvetica, sans-serif;
text-decoration : none;
}
body {
font-family: arial, helvetica, serif;
}
</style>
<script>
function showhide(id){
if (document.getElementById){
obj = document.getElementById(id);
if (obj.style.display == "none"){
obj.style.display = "";
} else {
obj.style.display = "none";
}
}
}
</script>
</head>
<body bgcolor="#000000" link="#FFFFFF" vlink="#00FF00" alink="#FFFF00">
<div style="display: block;" onMouseOver="showhide('script');" onMouseOut="showhide('script');"> <a href="#">Move mouse over this<br></a><font id="script" style="display: none;">
<a href="">link 1 Works perfect in IE</a><br>
<a href="">link 2 BUT mozilla it doesn't :-)</a><br>
<a href="">link 3 anyone knows a solution?</a><br>
<a href="">link 4 ...............Thx</a><br></font></div>
</body>
</html>
Hi, I am facing a terrible problem where in the following css code(setting of height) is working for Mozilla 3.0 but is not working for IE 6 in Css .fsSearchIE{ height:5px !important; background: red!important; border: 1em solid green; margin: 0 auto !important; } In html <fieldset class="fsSearchIE" > my code </fieldset> Would be thankful Sandeep Please see the screenshots below. Im using offsetTop + offsetHeight of the headings (Menu1, etc) to assign style.top to the sub menus. They appear when you mouseOver the headings. See how there is a pixel or two of whitespace in IE6 w/sp1? Why is that? Any help would be greatly appreciated. PS - I tried this on another PC with IE6 and sp2, and it was fine. These are the style declarations: Code: .menuHeading{
padding-left:3px;
font-size: 8pt;
font-weight: bold;
background-color: #ffffff;
color: #000000;
cursor: default;
position: relative;
margin-bottom: 0px;
border-width: 0px;
border-style: none;
}
.menuHeading_highlight{
padding-left:3px;
font-size:8pt;
font-weight:bold;
background-color:#fff392;
color:#000000;
cursor:default;
position: relative;
margin-bottom: 0px;
border-width: 0px;
border-style: none;
}
.subMenu{
font-size:8pt;
color:#cc9900;
width: 200px;
visibility:hidden;
cursor:default;
position: absolute;
padding:0px;
margin-top:0px;
margin-left:0px
}
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 Hello. I am looking for the equivalent of createStyleSheet for the mozilla. I try to do the following and in ie it works but mozilla cannot understand it. Thanks a lot var css = document.createStyleSheet('new'); My work wasn't allowing us to have Mozilla on our computers so when I began my website I had to code for IE. Well now that we have clearance for FireFox, I've tested it and it appears that my CSS isn't even there when opening the page in Mozilla. It just looks like straight HTML. I know that due to my work being crazy I'm doing this a bit backwards (should always code for Mozilla and debug in IE), but this is what I have to work with and I need your help. Here is the CSS reference: Code: <link href="D:\Play\PersonalWebsite\WebContent\CSS\Style.css" rel="stylesheet" type="text/css" media="screen" /> Here is the CSS: Code: body {
background-color:#666633;
background-image:url(http://i444.photobucket.com/albums/qq161/JadieGlitch/bg.jpg);
background-repeat: repeat-y;
margin: 0;
padding: 0;
font-family: "Trebuchet MS",Tahoma,Lucida Sans,Arial,Verdana,Helvetica,sans-serif;
}
@media screen {
div#lockedLeftContainer, div#lockedTopContainer {
position: fixed;
}
div#lockedTopContainer{
background-color: #191916;
height: 204px;
width: 1500px;
background: url() no-repeat;
left: 0;
}
a img {
border:none;
}
div#linkList h3 {
display: none;
}
div#lockedLeftContainer, div#lockedLeftContainer a {
left: 0;
top: 270px;
width: 185px;
height: 100%;
font-size: 12px;
padding: 5px;
padding-right: 10px;
font-weight: bold;
color: #FFF;
}
div#lockedLeftContainer a:hover {
color: #191916;
}
div#News {
margin-left: 445px;
padding: 10px;
padding-left: 20px;
padding-bottom: 0;
height: 100%;
}
div#supportingText{
height: 100%;
}
.clr {
clear:both;
}
div#News h3, div#supportingText h3 {
display: block;
background: url(http://i444.photobucket.com/albums/qq161/JadieGlitch/hatching.gif) left top repeat #191916;
margin: 0;
padding: 0;
padding-left: 20px;
color: #FFF;
font-size: 24px;
line-height: 50px;
text-transform: lowercase;
width: 100%;
}
div#News h4, div#supportingText h4 {
display: block;
background: url(http://i444.photobucket.com/albums/qq161/JadieGlitch/hatching.gif) left top repeat #191916;
margin: 0;
padding: 0;
padding-left: 20px;
color: #FFF;
font-size: 24px;
line-height: 50px;
width: 100%;
}
div#News p, div#supportingText p {
font-size: 14px;
color: #191916;
line-height: 1.5em;
padding-left: 10px;
}
div#clear {
clear:both;
}
div#News a, div#supportingText a {
color: #191916;
}
div#News a:hover, div#supportingText a:hover {
color: #FFF;
}
div#News abbr, div#News acronym, div#supportingText abbr, div#supportingText acronym {
border-bottom: 1px dotted #191916;
}
div#footer {
display: block;
height: 20px;
background: url(http://i444.photobucket.com/albums/qq161/JadieGlitch/hatching.gif) left top repeat #191916;
padding: 3px;
font-size: 12px;
line-height: 20px;
text-align: center;
margin-bottom: 10px;
}
div#footer a {
color: #fff;
font-weight: bold;
}
div#footer a:hover {
color: #000;
}
div#linkList {
position: fixed;
left: 210px;
top: 310px;
width: 240px;
font-family: Baskerville,Georgia,Garamond,"Times New Roman",serif;
}
div#linkList ul {
list-style: none;
padding: 0;
margin: 0;
height: 100%;
}
div#linkList ul {
list-style: none;
}
div#linkList ul li {
border-bottom: 1px solid #630;
}
div#linkList ul li a {
display: block;
padding: 5px;
font-weight: bold;
font-size: 12px;
color: #663;
text-transform: uppercase;
text-decoration: none;
height: 100%;
}
div#linkList ul li a:hover {
border: 1px solid #000
}
div#linkList div#lselect ul li, div#lStore ul li {
padding: 5px;
padding-left: 20px;
padding-right: 20px;
height: 100%;
}
div#linkList div#lselect ul li a:hover, div#lStore ul li a:hover {
color: #000;
}
div#linkList div#lselect ul li a.c, div#lStore ul li a.c {
display: inline;
text-transform: none;
font-size: 10px;
color: #191916;
}
div#lStore ul li a.c:hover {
text-decoration: underline;
}
div#linkList div#lselect, div#linkList div#lStore, div#linkList div#lresources {
margin-top: 10px;
}
div#linkList div#lselect h3, div#linkList div#lStore h3, div#linkList div#lresources h3 {
display: block;
height: 35px;
margin: 0;
padding: 0;
}
div#rotate_ad {
display: block;
height: 150px;
margin: 0;
padding: 0;
}
div#linkList div#lselect h3 span, div#linkList div#lStore h3 span, div#linkList div#lresources h3 span {
display: none;
}
div#linkList div#lselect h3 {
background: url(http://i444.photobucket.com/albums/qq161/JadieGlitch/PhotoGallery.gif) center top no-repeat;
}
div#linkList div#lresources h3 {
background: url(http://i444.photobucket.com/albums/qq161/JadieGlitch/Resources.gif) center top no-repeat;
}
div#contactInfo {
position: absolute;
left: 210px;
top: 400px;
}
div#newsimage {
position: relative;
left: 25px;
top: 25px;
}
Description of example: A div with an h5 as box title, and another div containing some text. The h5 text is one long string to force the outer div to expand. http://files.contradix.com/css1.html On IE: - the 'innerbox' DIV (pink) doesn't expand to the width of the box DIV (orange border) so I get a white space on the right hand side.. Even setting width: 100% doesn't work On Mozila: - Extra long text spills outside of its containing div. Yuck. Any pointers on how to make this work equally well on Mozilla and IE such that the inner div is 100% and the text from the h5 doesn't spill out and willl expand the outer div if ncessary? thanks -j. My site is http://www.shiningstarsyouth.com/. If you render the page in IE and Mozilla it seems that Mozilla renders my nav bar a couple of pixels lower than IE. Also the hover link style sheet that I used on the links in the upper right of the page work in Mozilla, but not in EI. The long vertical grey line that goes down the center of the page also renders differently in length. Why do these differences exist |
|||||||