|
CSS - Problem With Css In Netscape/firefox
I am having a problem changing the bg colors of my tables in netscape and firefox using CSS...
Ive tried everything i know, You can view the pages at RateHQ.com look at it in IE and Netscape Any ideas would be great! Thanks, Derek Similar TutorialsI have the following CSS: #main_navmenu{ padding-top:10px; width:120px; height:80%; float:left; margin-left:7px; font-size:11pt; text-align:center; padding-right:10px; } #main_navmenu a:link{ color:#777777; width:100px; background-color:#FDF4EE; text-decoration:none; font-weight:bold; border:1px solid #663333; margin-top:2px } #main_navmenu a:visited{ color:#777777; width:100px; background-color:#FDF4EE; text-decoration:none; font-weight:bold; border:1px solid #663333; } #main_navmenu a:hover{ color:#000000; width:100px; background-color:#DDD4CE; text-decoration:none; font-weight:bold; border:1px solid #663333; } why in IE do the link buttons look fine, with a width of 100px, and a nice gap between them. In FireFox, there is no gap between the buttons, and each button is only as wide as the text inside it. Thanks in advance for any help Does anyone know why firefox and netscape would interpret a div differently than IE6 and Opera? Here is my CSS: Code: #featured_prod{
background-image:url(images/featured_prod.jpg);
background-repeat:no-repeat;
color:#000000;
font:Arial, Helvetica, sans-serif;
font-size:10px;
text-align:center;
width:350px;
height:200px;
position:absolute;
padding:160px 20px 20px 130px;
left:16px;
top:21px;
}
and the markup: Code: <div id="featured_prod"> <a class="mylinks" href="">Click here for more information.</a> </div> Okay, everything looks okay to me in the code but it does this in both firefox and netscape: cick for image Notice that the red highlight is the outline of the div. And this is how it looks in both IE6 and Opera7: click for image The problem is that the text "Click here for more information" does not line up correctly due to the different browser interpretations. Any wisdom? I'm trying to learn this CSS thing (driving me crazy!!) and I'm having problems. I validated my HTML (using HTML 4.01 Transitional) and it came back 100% perfect. I validated the CSS, and I did as many of the corrections as I could figure, and I got back this when I re-validated the .css file: Quote: To work as intended, your CSS style sheet needs a correct document parse tree. This means you should use valid HTML. Warnings URI : file://localhost/U:\iQuire2\stylesheets\indexstyles1.css Line : 15 (Level : 1) You have no background-color with your color : a:link Line : 16 (Level : 1) You have no background-color with your color : a:hover Line : 18 (Level : 1) You have no background-color with your color : a:visited Line : 25 (Level : 1) You have no background-color with your color : h6 Line : 25 (Level : 1) You have no background-color with your color : h6 Line : 25 (Level : 1) You have no background-color with your color : h6 Line : 25 (Level : 1) You have no background-color with your color : h6 Line : 25 (Level : 1) You have no background-color with your color : h6 Line : 25 (Level : 1) You have no background-color with your color : h6 This is my .css file as it stands now: css Code: Original - css Code body {background:#ffffff; color:#000000; padding:0 0 0 0; margin:0 0 0 0; width:100%;} /* Page DIV Tag Stylesheet Codes */ div { position:absolute; top:1px; right:90%; bottom:auto; left:0px; } /* Hyperlink 'a href' Tags Handling */ a:link {color:#0000ff; background:transparent; font-weight:bold; text-decoration:none;} a:hover {color:#0000ff; background:transparent; font-weight:bold; text-decoration:underline;} a:active {color:#0000ff; background:#ffff00; font-weight:bold; text-decoration:none;} a:visited {color:#800000; background:transparent; font-weight:bold; text-decoration:none;} /* Text Formatting Primary Tags */ h1,h2,h3,h4,h5,h6 { font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#000080; } h1,h2,h3 {text-align:center;} h4,h5,h6 {text-align:left;} h1 {font-size:2em;} h2,h4 {font-size:1.5em;} h3,h5 {font-size:1em;} h6 {font-size:.75em;} p { font-family:TimesNR, Times, serif; font-size:.875em; text-align:left; } p.ctr { font-family:TimesNR, Times, serif; font-size:.875em; text-align:center; } p.arial { font-family:Arial, Helvetica, sans-serif; font-size:.75em; text-align:left; } p.arialc { font-family:Arial, Helvetica, sans-serif; font-size:.75em; text-align:center; } p.footertxt { font-family:Arial, Helvetica, sans-serif; font-size:.75em; text-align:center; font-weight:bold; } p.fineprint { font-family:Arial, Helvetica, sans-serif; font-size:.5em; text-align:center; font-weight:bold; } p.breadcrumbs { font-family:Arial, Helvetica, sans-serif; font-size:.5em; font-weight:bold; text-align:left; } /* SPAN Tag Text Formatting */ span.bold {font-weight:bold;} span.ital {font-style:italic;} span.und {text-decoration:underline;} span.boldital {font-weight:bold; font-style:italic;} span.boldund {font-weight:bold; text-decoration:underline;} span.bolditalund {font-weight:bold; font-style:italic; text-decoration:underline;} span.italund {font-style:italic; text-decoration:underline;} /* List Formatting */ ul {text-align:left;} li {font:normal bold normal .75em Arial, Helvetica, sans-serif;} /* Table Formatting */ table { border-width:0px; width:auto; } td { border-width:0px; width:auto; text-align:left; vertical-align:top; } table.topbanner { border-width:0px; width:100%; } td.headrlogo { border-width:0px; width:156px; text-align:center; vertical-align:middle; padding:2px; } td.headrtxt { border-width:0px; width:90%; text-align:center; vertical-align:middle; padding:2px; } td.headrbuttons { border-width:0px; width:auto; text-align:center; vertical-align:top; padding:0; background-image:url(blugradient_50x25.jpg); } table.buttontb { border-width:0px; width:auto; margin:0 0 0 0; } td.butntoplvl0 { border-width:0px; padding:1px; width:115px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:9pt; text-align:center; vertical-align:middle; } td.butntoplvl1 { border-width:0px; padding:1px; width:115px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:9pt; color:#ffffff; text-align:center; vertical-align:middle; background-color:#5984c8; } table.tborder { border-width:1.5px; border-style:solid; border-color:#000080; width:auto; margin-right:auto; margin-left:auto; } td.dborder { border-width:1px; border-style:solid; border-color:#000080; text-align:left; vertical-align:top; } td.dborderctr { border-width:1px; border-style:solid; border-color:#000080; text-align:center; vertical-align:middle; } table.footer { border-width:2px; border-style:solid; border-color:#000080; width:100%; } td.footertd { border-width:0px; width:auto; text-align:center; vertical-align:middle; padding:8px; }
With how it's written currently, it looks great in Microsoft Internet Explorer 6x. But when I try to bring up the same page that looks so well in IE in Netscape or Mozilla Firefox, everything becomes "squished" to the left-side of the browser window. So, for someone who's more comfortable with .css than I am (I'm working from books), can you tell me where I went wrong in this thing? I can understand if the hyperlink formatting might not be "up to code" so to speak (warning from W3C CSS Validator above), but would it affect the formatting of the entire document?? I want to avoid forcing the layout into a specific width, so I tried using percentages and "auto" for styles so that it will be a fluid layout. As I said, IE shows it just the way I want it to look. Firefox & Netscape squash everything down as if there were no formatting whatsoever. Do I need to have separate .css code for each browser?? I don't have a Mac, but my boss does and I'm sure he'll want the site to look good working through Safari too (can't test it) HELP!!! I'm a little new to the use of css for layouts and had a few little problems on the way. The major problem I haven't been able to solve can be seen in the following 2 pictures. From what I have read before IE misinterrupts the box idea a bit so it might be the fact that IE is just showing it up wrong giving me false hope. IE - URL Netscape - URL I want to have the div have a minimum height as I state in the stylesheet, and then the div will stretch to the height of the text if that is higher than the minimum height. The code I have comes out the way I wish it to in IE but in Netscape and Firefox, the background color stays to the div height given, but the text overflows. I have tried playing with the overflow options but this did not seem to work. I have a feeling it is just a simple solution but I may be far off with the way it is designed with the blocks and inline, etc. I looked at a few examples and tutorials on the web and this is what I have come up with. The actual website of this has lots more content but I am trying to not make it too complicated and then I will apply it to the site. Any help would be greatly appreciated. URL is URL Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<p>logo</p>
</div>
<div id="headerPic">
<p>headerpic</p>
</div>
</div>
<div id="menu">
menu
</div>
<div id="middle">
<div id="contentPic">
<p>d</p>
</div>
<div id="content">
<p>
overflowing text is here
</p>
</div>
</div>
<div id="footer">
<div id="footerLeft">
<p>left footer</p>
</div>
<div id="footerCenter">
<p>center footer</p>
</div>
<div id="footerRight">
<p>right footer</p>
</div>
</div>
</div>
</body>
</html>
********************************************* Code:
#wrapper {
background-color: #000000;
width: 750px;
text-align: left;
margin: auto;
}
body {
background-color: #CCCCCC;
margin: 0px;
text-align:center;
}
#header {
background-color: #FFFF00;
display: block;
height: 100px;
}
#menu{
background-color: #00FF00;
display: block;
width: 750px;
height: 50px;
}
#middle{
background-color: #CC0099;
display: block;
height: 320px;
}
#footer {
background-color: #6699CC;
display: block;
height: 30px;
}
#logo{
display: inline;
width: 200px;
height: 100px;
float: left;
}
#headerPic {
display: inline;
width: 550px;
height: 100px;
float: left;
}
#contentPic {
display: inline;
width: 200px;
height: 320px;
float: left;
}
#content {
display: inline;
width: 550px;
height: 320px;
float: left;
}
#footerLeft {
display: inline;
width: 100px;
float: left;
}
#footerCenter {
display: inline;
width: 450px;
float: left;
}
#footerRight {
display: inline;
width: 200px;
float: left;
}
Hello; Could anyone tell how to kill the scrollbars from IE, Firefox, Netscape.,please. My following code just work for IE, it doesn't not affect another browsers. #newst {overflow: scroll; overflow-y: scroll; overflow-x: hidden; overflow:-moz-scrollbars-vertical;} <textarea name="newst" id="newst" rows="10" cols="45" ></textarea> I have just put my website live and it is running perfect in MS Explorer but in firefox and netscape the links at the bottom of the page are not working properly. Site URL is http://www.updatetechnology.ie here is the code i have for these links: <TD><span class="grey"><a href="copyright.htm">Copyright</a> | <a href="sitemap.htm">Sitemap</a> | <a href="links.htm">Links</a> </span></TD> and the corrseponding css class: .grey {font-family: Arial, Helvetica, san serif; font-size: 9pt; TEXT-DECORATION:NONE; COLOR:#ffffff; } .grey A{ COLOR:#ffffff; font-family: Arial, Helvetica, san serif; font-size: 9pt; font-weight: bold; font-style: normal; text-decoration: none; font-variant: normal; text-transform: none; } .grey A:HOVER{ COLOR:#000000; font-family: Arial, Helvetica, san serif; font-size: 9pt ;font-weight: bold; TEXT-DECORATION:none } .grey A:MOUSEOVER{ COLOR:#000000; font-family: Arial, Helvetica, san serif; font-size: 9pt; font-weight: bold; TEXT-DECORATION:NONE } In netscape when you roll over these links it is just keeping to the default site roll over colours whereas it should be set to the .grey class i defined.......... has anyone come across this before?? and if so is there a solution out there. Thanks hi, im trying to get a long text to wrap in a div with a given width PHP Code: <div style=" width: 100px; word-wrap: break-word; "> aaweofajw;eofija;weoifja;weoifja;woeifja;woeifja;wieofj </div> however, the closest thing i found is "word-wrap: break-word;" which only works in IE. is there anyway i can get it to work in netscape or firefox? thanks! justin Here is the site I am working on: http://testlableon.ourcampusbookstore.com/index.php There are 3 navigation bars on the template. The first one (navbar) is the black one right under the header. The second one (userbar) is right under the navbar and it is supposed to be light gray (#eeeeee). The third one is the at the bottom of the page (footerbar) and is supposed to have a black (#000000) background. If you look at the site in ie, all the background colors are displayed correctly. If you look at the site in firefox or netscape though, the userbar and footerbar are not having their background colors displayed. Any ideas? Just testing this in different browsers and noticed that the image is shown in the background but does not go to the background-position that is specified. This works for IE. Does anyone know if there is a different way of doing this? <STYLE type="text/css"> BODY { background-image:url(awesome.gif); background-repeat:no-repeat; background-position:50 220; background-attachment:fixed } </STYLE> Thank you for an insight into this little glitch. The CSS background-position: right; is not working in Firefox/Netscape, and just aligns the background image to the left. Know why? Hey CSS experts, I have a weird problem with CSS in Firefox and Netscape. I am using CSS to manage my fonts using the the div class and span class strings. However, I've noticed that Firefox and Netscape insert additional spaces between some text areas. This happens when I define things both as a div class and as a span class. What makes this increasingly weird is that I can have two nearly identical lines of code and one will display extra spaces and one will not. Case in point: These are two exaple lines of code: <tr> <td><div class="navtext">130 South Main Street</div></td> </tr> and <tr> <td><div class="navtext">Saturday - 10 a.m. to 1 p.m.</div></td> </tr> The first line doesn't end up with spaces between it, but the second line doesn't. I chose these example because only a couple lines of code seperate them. I am an extreme CSS newbie and would greatly appreciate any help with this problem. Thank you in advance! Jordan Coffey P.S. Here is a link to the site so that you can see it for yourself: www.countrysidetrvl.com I am using CSS to generate a printer-friendly webpage for Internet Explorer. The same CSS however is not working with Netscape or FireFox. I am using the following doctype in my html file. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> The contents within the <DIV> and <P> tags I am trying to hide using Print CSS works correctly in Internet Explorer 6.0. However, the contents are getting printed when Netscape 7.1 or FireFox is used. Can someone help? I posted this by accident in the html forum , so im asking he I have this in my CSS page: Code:
a.mainlevell:link, a.mainlevel:visited {
display: block;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
font-family: Verdana, Helvetica, Arial, sans-serif;
margin-bottom: 1px;
font-size: 12px;
}
a.mainlevell:hover {
color: #FFFF00;
font-size: 12px;
}
And I use this style for four links: Code: <a href="mobile.html" class="mainlevell">Home</a> <a href="m_about.html" class="mainlevell">About Us</a> <a href="m_games.html" class="mainlevell">Games</a> <a href="m_links.html" class="mainlevell">Links</a> When viewing in IE, all the URL's using m_* in the file name works with the CSS; the one referencing mobile.html doesn't. However, putting an m_ in front of the mobile.html makes the link work. Why? This happens only in IE. firefox/opera/netscape/etc ; the links all show up fine and work as supposed to. However, I have a similar set up for another menu that does almost the same CSS as the above: Code:
<table width="100%" border="0" cellspacing="2" cellpadding="3">
<tr>
<td align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="home" width="14" height="14" id="home"></td>
<td bgcolor="#990000"><a href="mobile.html" class="menulevel" onMouseOver="MM_swapImage('home','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Home</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="one" width="14" height="14" id="one"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('one','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="two" width="14" height="14" id="two"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('two','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="three" width="14" height="14" id="three"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('three','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="four" width="14" height="14" id="four"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('four','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="five" width="14" height="14" id="five"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('five','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
<tr>
<td width="18" align="center" bgcolor="#990000"><img src="images/dmp_off.gif" name="six" width="14" height="14" id="six"></td>
<td bgcolor="#990000"><a href="m_blah.html" class="menulevel" onMouseOver="MM_swapImage('six','','images/dmp_on.gif',1)" onMouseOut="MM_swapImgRestore()">Blah</a></td>
</tr>
</table>
and this one works fine ( even with the mobile.html) Hello all, When trying to position:absolute an object within another relatively positioned and left floated in netscape 7.1, for some reason the contained element ignores the parents position:relative property and goes to the top left edge of the body. Try www.signplanning.com in Netscape 7.1 and you will see that compared to I.E. the left-side is pushed up and it should look like the Internet Explorer. Thanks in advanced. BAF I've been trying get a template working to transfer my site over to CSS (I've been reading about it and it seems to be the way to go) - have been working on it all weekend and have cracked a 3 column grid that seems to work well. You can see where I've got to he http://www.discographynetwork.com/nav2.php The only small problem I have in ie is a missing pixel to the left of the home button. If you have a suggestion for that I'd be grateful. However, when I looked at it in Mozilla and Netscape the buttons mess up and the tag line doesn't stay in it's div. Can someone point me in the right direction. Thanks. Hi, i have 2 links with email and website. After visited these two links, both should appear yellow (a:visited). Well, with the IE everything functions marvelously, but with the Netscape only one link (website) functioned, but email does not activate itself yellow after the attendance. Here is the Code: Code:
style type="text/css">
<!--
a:link {color: #000000; font-family: Verdana; font-size: 10px; text-decoration:none; }
a:visited {color: #ffff00; font-family: Verdana; font-size: 10px; text-decoration:none;}
a:hover {color: #ffcc33; font-family: Verdana; font-size: 10px; text-decoration:none;}
p {
font-family: Verdana;
font-size: 12px;
color: #ccffff;
}
body {
background-color: #9095af;
}
.style1 {color: #ccffff; font-family: Verdana; font-size: 11px; }
.style2 {color: #ccffff; font-family: Verdana; font-size: 20px; }
.style3 {color: #000000; font-family: Verdana; font-size: 12px; }
.style4 {color: #000000; font-family: Verdana; font-size: 10px; }
-->
</style>
if($email) {
$eintrag= "<tr><td><span class='style3'>$text</span></td></tr>";
$eintrag.="<tr><td><a href='mailto:$email'>$email</a>, <span class='style4'>$datum</span></td></tr>";
$eintrag.="<tr><td><hr></td></tr>\n";
}
if($website) {
$eintrag= "<tr><td><span class='style3'>$text</span></td></tr>";
$eintrag.="<tr><td><a href='$website'>$website</a>, <span class='style4'>$datum</span></td></tr>";
$eintrag.="<tr><td><hr></td></tr>\n";
}
What's the problem here??? Greetings Hi.. I'm having a problem with floating on a CSS stylesheet. For some reason my text keeps apearing way off to the right of where it is supposed to.. It works fine with IE but not with Netscape. Any ideas? You can view the page he www.localalberta.com The CSS: www.localalberta.com/completeStyle.css Thanks Guys.. Hello, I have two errors with the repeat background but i need to use this. How can i get round this? Cheers. the site seems to work perfectly in IE. it gets garbled in netscape. i know its something to do with the box conventions and the way the browsers interpret margin/border/padding etc.. heres the link to my site http://ccc.1asphost.com/pacemakerproject/final%20website%20folder/index.htm is there an easy way to resolve this problem.. Have exhausted my knowledge base and hoping someone ou there can help. Trying to get Box1 to either autostretch to same the length as box2 & 3 or get the container background to show up in Mozilla & Netscape. Code: <head>
<style type="text/css">
<!--
body {
text-align: center;
margin: 0px;
padding: 0px;
background: #333;
}
.central {
margin-right: auto;
margin-left: auto;
position: relative;
width: 780px;
text-align: left;
}
#container {
float: none;
margin: 0 auto;
width: 780px;
text-align: left;
background: #AAA;
}
#top, #navbar, #middle, #footerblock {
float: left;
width: 780px;
}
#top {
background-color: #DDD;
height: 75px;
}
#navbar {
background-color: #EEE;
height: 25px;
}
#footerblock {
background-color: #666;
height: 25px;
}
#box1 {
background-color: #AAA;
float: left;
width: 260px;
height: 200px;
}
#box2 {
background-color: #BBB;
float: left;
width: 260px;
height: 400px;
}
#box3 {
background-color: #CCC;
float: left;
width: 260px;
height: 400px;
}
-->
</style>
</head>
<body>
<div class="central">
<div id="container">
<div id="top">top</div>
<div id="navbar">navbar</div>
<div id="middle">
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>
</div>
<div id="footerblock">footer</div>
</div>
</div>
</body></html>
|
|||||||