|
CSS - Css Won't Display At All In Mozilla
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;
}
Similar TutorialsHi, I am having problems with the layout in IE and Mozilla Whats happening is i have a 3 colummn layout but i dont see the footer in both browsers Second problem is the right hand div i want it to extend till the bottom of the footer white is the background color for the right hand nav Normally the right hand will have more text content then the left hand div will have Third problem is in IE there is a huge gap between the top horizontal nav after contact me button and the gap is smaller in Mozilla Fourth problem is the left hand nav width problem in mozilla in IE it aligns right at the end of the Selling tab. In mozilla its little bit less them the selling tab Can someone tell me what i am doing wrong 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>
<title>Realtor.</title>
<link href='style1.css' type='text/css' rel='stylesheet' />
<style type="text/css">
#dlmenu {height:10em;}
#menu {list-style-type:none; margin:0 0 10px; padding:0; position:absolute; width:183px; background:#B0C4DE; z-index:100;}
#menu li {display:block; padding:0; margin:0; position:relative; z-index:100;}
#menu li a, #menu li a:visited {display:block; text-decoration:none;}
#menu li dd {display:none;}
#menu li:hover, #menu li a:hover {border:0;}
#menu li:hover dt a , #menu li a:hover dt a {background:#1874CD center center; color:black; }
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {background:#1874CD;}
#menu table {border-collapse:collapse; padding:0; margin:-4px;}
#menu dl {width: 183px; margin: 0; background: #B0C4DE; cursor:pointer;}
#menu dt {margin:0; padding: 0; border-top:1px solid #cce;}
#menu dd {margin:0; padding:0; text-align:left; }
.gallery dt a, .gallery dt a:visited {display:block; color:#fff; padding:5px 5px 5px 10px; background: #007FFF center center;}
.gallery dd a, .gallery dd a:visited {color:#000; min-height:1em; text-decoration:none; display:block; padding:4px 5px 4px 20px; background: #1874CD;}
* html .gallery dd a, * html .gallery dd a:visited {height:1em;}
.gallery dd a:hover {background:black; color:#1874CD;}
</style>
</head>
<body style="background:#B0C4DE;">
<div class="page_wrapper">
<div class="page_header"></div>
<div class="menu_bar">
<div id="tabsJ">
<ul>
<li><a href="default.aspx" title="Home"><span>Home</span></a></li>
<li><a href="buying.aspx" title="Buying"><span>Buying</span></a></li>
<li><a href="selling.aspx" title="Selling"><span>Selling</span></a></li>
<li><a href="relocation.aspx" title="Relocation"><span>Relocation</span></a></li>
<li><a href="searchmls.aspx" title="Search MLS"><span>Search MLS</span></a></li>
<li><a href="localinfo.aspx" title="Local Info"><span>Local Info</span></a></li>
<li><a href="vma.aspx" title="Virtual Market Analysis"><span>Virtual Market Analysis</span></a></li>
<li><a href="calculator.aspx" title="Calculator"><span>Calculator</span></a></li>
<li><a href="contact.aspx" title="Contact Me"><span>Contact Me</span></a></li>
</ul>
</div>
</div>
<div style="clear:both;"></div>
<div class="lefthandmenu">
<div id="dlmenu">
<ul id="menu">
<li>
<dl class="gallery">
<dt><a href="mortgagecal.asp" title="Mortgage Calculator">Mortgage Calculator</a></dt>
</dl>
</li>
<li>
<dl class="gallery">
<dt><a href="loanamorcal.asp" title="Loan Amortization Calculator">Loan Amortization Calculator</a></dt>
</dl>
</li>
<li>
<dl class="gallery">
<dt><a href="loancal.asp" title="Loan Calculator">Loan Calculator</a></dt>
</dl>
</li>
<li>
<dl class="gallery">
<dt><a href="loancal.asp" title="Loan Calculator">Rent vs Buy Calculator</a></dt>
</dl>
</li>
<li>
<dl class="gallery">
<dt>
<a href="mailto:ssss@sssssssss.com">
<b><font color="black">Ssssss Ddddddd<br/>
<i>Broker Associate</i><br/>
<font size="2em">RRRRRR 11 Rrrr ReeeeeRealty<br/>
3212 North 12th St.<br/>
New England, DE 111111<br/>
213-234-1234<br/>
ssss@sssssssss.com</font></b></font></a>
</dt>
</dl>
</li>
</ul>
</div>
</div>
<div class="righthandmenu">
<h4>Calculators</h4>
<p>A mortgage calculator for every need
Whether you're buying a home or refinancing an existing loan, we have a mortgage calculator that can help you make the right decisions. Determine exactly which deal offers the lowest monthly payments, how much home you can afford, and whether it makes sense to rent or buy.</p>
</div>
<div style="clear:both;"></div>
<div class="footer">
heelo</div>
</div>
</body>
</html>
Code:
body {
text-align: center;
background-color: #D5D0B0;
margin-bottom:10px;
color:black;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.page_wrapper {
margin-left: auto;
margin-right: auto;
width:799px;
text-align: left;
background: #FFFFFF url('../img/content_bg.gif') top left repeat-y;
}
.page_header {
height: 198px;
background: #FFFFFF url('../images/banner.jpg') bottom left no-repeat;
clear: both;
}
.menu_bar {
margin:0px;
padding:0px;
clear:both;
}
#tabsJ {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
}
#tabsJ ul {
margin:0;
padding:5px 0px 0px 0px;
list-style:none;
}
#tabsJ li {
display:inline;
margin:0;
padding:0;
}
#tabsJ a {
float:left;
background:url("tableftJ.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsJ a span {
float:left;
display:block;
background:url("tabrightJ.gif") no-repeat right top;
padding:5px 9.4px 5px 9.41px;
color:#24618E;
}
#tabsJ a span {float:none;}
#tabsJ a:hover span {
color:#FFF;
}
#tabsJ a:hover {
background-position:0% -42px;
}
#tabsJ a:hover span {
background-position:100% -42px;
}
.lefthanddiv
{
width:799px;
margin:15px 10px 15px 10px;
}
h2 {
color:#000000;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 125%;
font-weight: bold;
margin: 10px 0 0 0;
padding:15px 0px 0px 0px;
color:red;
}
ul {
list-style-type: square;
}
h5 {
color:#000000;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 100%;
font-weight: bold;
margin: 5px 0 0 0;
padding:5px 0px 0px 0px;
color:red;
}
.paraclass
{
padding: 1px 25px 3px 0px;
}
.container
{
width:879px;
background:#1C86EE;
}
.lefthandmenu
{
float:left;
width:200px;
padding:1px 0px 0px 0px;
}
.righthandmenu
{
float:left;
width:579px;
padding:1px 10px 10px 10px;
}
#menu1 {
width: 187px;
}
#menu1 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu1 li a:link, #menu1 li a:visited {
color: #E4D6CD;
display: block;
background: url(menu1.gif);
padding: 6px 0 0 8px;
}
#menu1 li a:hover {
color: #FFF;
background: url(menu1.gif) 0 -32px;
padding: 6px 0 0 8px;
}
.newul {
list-style: none;
margin: 0;
padding: 0;
}
h4 {
color:#000000;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 125%;
font-weight: bold;
margin: 3px 0 0 0;
padding:3px 0px 0px 0px;
color:red;
}
.sig
{
padding:5px 5px 5px 5px;
font-size:75%;
}
#footer {
width: 879px;
margin: 0 auto;
background: #ffc;
border: 1px solid #000;
}
thank you so much for all your help I am attaching the pictures as they look in both browsers 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. 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? 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?!? I am trying a technique at this site, http://www.anncompton.com/test. The format works in IE but not Mozilla. It seems to be the div's with a repeat-y that are failing. Below is a subset of the code - somewhere in this is the problem. <!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=iso-8859-1" /> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" media="screen" href="test.css" /> </head> <body> <div id="page"> <div id="pagea"> <div id="pageb"> <div id="pagec"> <div id="header"><img src="images/Banner2.gif" alt="Ann Compton" name="logo" id="logo" /></div> <div id="sidebar"> <h5>Cell: 910-699-6919<br /> Res: 910-699-4441 </h5> <a href="mailto:ann@mindspring.com">ann@mindspring.com</a> </div> </div> </div> </div> </div> </body> </html> <!--body { background:#e5f6f4 url(images/huntbkg.gif); margin:10px 0; padding:0px 5px 15px 10px; font:small/1.6em Verdana, Arial, Helvetica, sans-serif; text-align:center; color:#333; } #page { background:#B8BFD8 url(images/pg_topright.gif) no-repeat right top; margin:0 auto; padding-top:0px; width:995px; text-align:left; } #pagea { background:url(images/pg_right.gif) repeat-y right top; width:995px; } #pageb { background:url(images/pg_bot.gif) no-repeat right bottom; padding:0 0px 20px 0px; width:995px; } #pagec { background: url(images/grnbar.gif) repeat-y top left; width:990px; } --> 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. 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'); 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
}
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 have a problem. The page with css is loaded as I would expect in MSIE. However in Mozilla 1.6 and Firebird, the css is ignored. Code:
<?xml version="1.0" encoding="utf-8"?>
<!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="nl-nl" lang="nl-nl">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="/css/preek.css" />
<title>God is tegenwoordig</title>
The page will only load in Mozilla and Firebird as expected when I leave out the lines: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Changing towards another doctypes does not change a bit. The css-file is served as text/css - so that's fine. Further, the html is validated and ok, same goes for the css. Sitting with my head in my hands... Hope you can help me, because page looks like the old days (mosaic) I'm designing a site and have an absolute div with a z-index of -1. This div has a background image. On top of this div I have a normal layout table with my content, in effect I wanted a background image that didn't tile, so I threw it in a div. When i view it in IE6 everything looks nice, but when I view it in firefox, the image doesn't show up, the dive borders dont show up and any text I put in the div doesn't show up. Any thoughts or workarounds why the image isn't showing. Thanks chuck_samsonite _______________________________________________ Lloyd: Oh yeah! It's right here, Samsonite! I was way off! I knew it started with an S though! 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 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 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 Hi all i am using the CSS display property to show/hide selected text on a webpage. The user clicks on a link which then shows hidden text and then clicks on another link to hide the text. This works fine in IE but not in Mozilla. does anyone know what i can do to make it work in Mozilla ? atttached is a zip file of my webpage/code thanx chris Well I'm having a lot of display problems in Netscape and Mozilla when trying to use CSS, but I'll start with a simple question: Should the following not work in Netscape/Mozilla? Code: <div style="border: 2 solid #000000;">test</div> And if that doesn't work, is there another way that is supported? hello I'm having a problem loading a background image using CSS. The code works fine in IE6 but in Mozilla Firebird and Opera 7 it doesn't display the images at all. All other styles are applied properly but those background images just don't show (in firebird and opera). I am linking the external stylesheet using this code: <link rel="stylesheet" href="/test/includes/style.css" type="text/css" media="all" /> so that's an absolute URL to the CSS file. In this file I create the selector like this: #nav a { background: transparent url(/test/images/bl_curve.gif) bottom left fixed no-repeat; } so that's using an absolute URL for the image. The entire page is valid XHTML and CSS, as confirmed by the W3C validators. Any ideas? Pat |
|||||||