|
CSS - Odd Error On Firefox (an Error I Ve Never Seen Before)
Hello Fellas:
http://global.espritwebdesign.com/muros.html This webpage will display correctly on IE, Chrome and Safari But not on Firefox 11 What strikes me the most is the error is very odd. Im Clueless. Can you visite the web page see it for yourself, and maybe give me a hint what could be? Any clues? Similar TutorialsOnce again, errors arise in the different browsers. I'm working on a clients website and I have it looking exactly how I want it in Firefox, but of course it fails in IE. Here is the link to the website: http://www.amnbooks.com/test1.html And to the CSS: http://www.amnbooks.com/css/standard.css hi everyone, i have been trying to align border left/right correctly in ff but it always crates gap on top and bottom (see screenshot) while on ie it works as supposed to (screenshot below) here is my code Code: #center_container{margin-left:118px;margin-top:24px;}
#center_container_text{
width: 522px;
border-left:1px solid #757d7b;
border-right:1px solid #757d7b;
}
#banners{float:right;margin-top:20px;margin-bottom: 10px;width:100px;border: 1px solid black;}
Code: <div id="center_container">
<div id="banners">
<p>a</p>
<p> </p>
<p> </p>
<p> </p>
<p>asd</p>
<p>asd</p>
<p>as</p>
<p>d</p>
</div>
<div><img src="images/box_header.gif" name="Categories_header" alt="" /></div>
<div id="center_container_text">
<p>a</p>
<p> </p>
<p>asd</p>
<p>asd</p>
<p>as</p>
<p>d</p>
<p>asd</p>
</div>
<div><img src="images/box_bottom.gif" name="Categories_bottom" alt="" /></div>
</div>
thx. Hey folks, here's an odd problem that's got me totally stumped. I've got a nine item unordered list, each of which is a link that contains both text and a background image. The background image is a large spritebox. I'm using background-position to shift the spritebox to display the sprite specific to the a:link and also to display a separate a:hover version. Looks great in Safari and CSSEdit, but in Firefox four of the links are misplaced and the sprite is incorrect. The hover state is correct, however. This is hard to explain, but the example should help illustrate the problem. My thought was that it was related the psuedo class of a:link, but nothing I've tried seems to help. Any thoughts? The example file contains both the HTML and the CSS (just to simplify this problem for this forum). The full background image and the file containing the sprites is at my website, artmeetsearth dot org slash 2011 slash codetest dot html. To get the image type socialmediaicons.jpg instead of codetest. Thanks for any help you can offer! I am getting a CSS validation error It is: 251 * Parse Error / textarea { border: 1px solid silver; width: 80%; } If I comment the CSS in question out, it gives me another CSS error a little bit farther down in the stylesheet... not sure why it is doing that or how to just fix this validation error, as the ones that come up after it are similar. My end goal is to make the page look normal in FF2. Currently in FF2 some of the text in the purple "Sesame Street" box is blocked out. I didn't create this page, but have been asked to figure out why it looks like this in FF2. I am no CSS expert, but would love to hear from one! Thanks for your help. I'm getting an error on IE5 for Mac on one of my pages, and I've been unable to figure out how to fix it. Here's the page (the problem is in the MPI Status Bar area): http://medieval.shadowedrealm.com/mpi/index.php If you have Firefox or IE6 on your computer, I'm sure it works fine. The problem seems to only be on IE5 for mac, where the browser stretches each of the <li>s all the way across the page, making the page extremely wide. Basically, I tried to set my CSS so that there are 6 rows of three columns each. I'm pretty sure that this has to do with the strictness of the IE5 mac browser, and I've read articles about trying to fix similar problems to this one on various sites, but I still can't figure out how to fix this specific problem. Here's my CSS code for the status bar: Code: .statusbar {width: 532px;
margin-left: 10px;
opacity: .60;
filter: alpha(opacity=60);
-moz-opacity: .60;
display: block;
text-align: left;
background: #000000;
border: 4px ridge #2B5E17;
}
.titleback{height: 20px;
width: 528px;
background: #00032F;
border-top: 1px solid #16570B;
border-bottom: 1px solid #16570B;
border-left: 1px solid #114E6F;
border-right: 1px solid #114E6F;
}
.titleback ul{padding: 0;
margin: 0;
list-style-type: none;
width: 526px;
}
.titleback li {width: 240px;
float: left;
margin-left: 2px;
margin-top: 2px;
text-align: center;
font-weight: bold;
font-size: 12px;
}
.title{color: #FF0000;
height: 20px;
width: 520px;
padding: 2px;
font-weight: bold;
margin-left: 2px;
text-align: left;
font-size: 13px;
}
.text{width: 520px;
height: 96px;
font-weight: bold;
font-size: 9px;
margin-left: 1px;
}
.text ul{padding: 0;
margin: 0;
list-style-type: none;
width: 520px;
margin-left: 2px;
}
.text li {width: 168px;
height: 16px;
display: inline-block;
float: left;
margin-left: 1px;
border-left: 1px solid #808080;
border-right: 1px solid #808080;
}
.category {width: 168px;
margin-left: 2px;
margin-top: 1px;
}
.mostrecent{width: 528px;
height: 15px;
padding: 1px;
background: #1F1F1F;
border-top: 1px solid #16570B;
border-left: 1px solid #114E6F;
border-right: 1px solid #114E6F;
text-align: center;
font-weight: bold;
font-size: 9px;
}
Here's the HTML for the status bar, minus the php code: Code: <div class="statusbar">
<div class="titleback">
<div class="title">
MPI Status Bar
</div>
</div>
<div class="text">
<ul>
<li>
<div class="category">
<a href="http://medieval.shadowedrealm.com/mpi/category.php?Category=Agriculture">
Agriculture</a>
<?php
//PHP code
?>
</div>
</li>
This code repeats for two more similar <li>s before I close off the <ul> tag, and then I repeat with similar <ul>s five more times before I close off the title <div>. Hopefully this makes sense. Does anyone know how I can correct for this error within my CSS code? hello..i have just started to learn css over the web..& was testing out my page in IE & FireFox..& came across same error , my styles are gone in Firefox.. how can i fix it? Site link is provided below. Thanks -------- testing ------ http://midnite-pandaz.com/visionmag/ When trying to validate my CSS with W3C, I keep getting parse error on this code :- ul#menu li a.home:hover, ul#menu li a.home:active, ul#menu li a.port:hover, ul#menu li a.port:active, ul#menu li a.multi:hover, ul#menu li a.multi:active, ul#menu li a.web:hover, ul#menu li a.web:active, ul#menu li a.about:hover, ul#menu li a.about:active, { background-position: center center; } The code is part for a horizontal 3 state navigation menu using images. Use relative rather than absolute units in CSS property values. WCAG1 AA 3.4 , Absolute units are cm, mm, in, pt and pc, as well as absolute size keywords like x-small. Partially sighted users often use the "large fonts" mode of Windows, which makes each pixel larger than usual. This usually causes problems with pixel based layouts, which also perform badly on handheld and widescreen displays. Percentage values "stretch" according to screen size and work on a large range of display sizes. hello again folks, Man I am lost on this warning any help? Below is my print.css file body { color : #000000; background : #ffffff; font-family : "Times New Roman", Times, serif; font-size : 12pt; width: auto; background-position: center center; } a { text-decoration : underline; color : #0000ff; } Thanks once again for all your help! whonoes The site looks okay in ie6, but in ie8 it's off. Could someone take a look? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns= <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="Northwest Open Access Network one of the largest in the region with Internet, Ethernet and TDM at service levels more advanced than in some metro areas." /> <meta name="keywords" content="ASP, ISP, ILEC, CLEC, IXC, RSP, DNS, DWDM, Northwest Open Access Network, Noanet" /> <title>Noanet Network Services</title> <link href="dictionary.css" rel="stylesheet" type="text/css" /> </head> <body style="padding: 0px; margin: 0px; background-color: #0E0E0C"> <div style="width: 100%; height: 183px; background-color: #0E0E0C"> <div style="background-image: url(images/2-14.jpg); background-repeat: no-repeat; background-attachment: scroll; background-position: center top; margin-right: auto; margin-left: auto; width: 1115px; height: 183px"> <div style="width: 140px; height: 183px;float:left;"></div> <div style="width: 549px; height: 183px;"> <div style="height:15px;"></div> <div style="margin-top:7px; margin-bottom:7px;"><a href="index.htm" class="menu">HOMEPAGE</a></div> <div style="margin-top:6px; margin-bottom:7px;"><a href="overview.htm" class="menu">OVERVIEW</a></div> <div style="margin-top:6px; margin-bottom:7px;"><a href="tech-support.htm" class="menu">TECH SUPPORT</a></div> <div style="margin-top:6px; margin-bottom:7px;"><a href="Contact%20Options.htm" class="menu">CONTACT OPTIONS</a></div> <div style="margin-top:6px; margin-bottom:7px;"><a href="Network-Services.htm" class="menu">NETWORK SERVICES</a></div> <div style="margin-top:6px; margin-bottom:7px;"><a href="Infrastructure.htm" class="menu">INFRASTRUCTURE</a></div> <div style="margin-top:6px; margin-bottom:0px;"><a href="Press-info.htm" class="menu">PRESS INFO</a></div> </div> </div> </div> <div> <div style="background-position: center top; margin-right: auto; margin-left: auto; width: 1115px; height: 932px; background-image: url('images/nn_02-2-long.jpg'); background-repeat: no-repeat; background-attachment: scroll;"> <div style="margin-right: 150px; margin-left:290px;margin-top:60px; text-align:justify;"> <h1>Network Services</h1> NoaNet delivers leading-edge technologies across an extensive high-speed backbone transport network to wholesale providers such as ILECs, CLECs, IXCs, RSPs, ISPs, ASPs and cable companies.<br /> <br /> NoaNet service offerings include: <br /> <br /> <span class="style6">IP services</span><br /> NoaNet Internet features path-protected, unaggregated transport across the NoaNet backbone to the <a href="POP.htm" title="Point Of Presence. The IXC equivalent of a local phone company's central office. The POP is a long distance carrier's office in your local community (defined as your LATA). A POP is the true place your long distance carrier, called an IntereXchange Carrier (IXC), terminates your long distance lines just before those lines are connected to your local phone company's lines or to your own direct hookup. Each IXC can have multiple POP's within one LATA. All long distance phone connections go through the POPs.">PoP</a> closest to the customer. <br /> <ul> <li>At least four multi-homed upstream tier-one providers in Seattle and Portland </li> <li>Automatic fail-over within 50ms of interruption </li> <li>IP Addressing, <a href="BGP.htm" title="Border Gateway Protocol is a Gateway Protocol which routers (other non-router devices also maybe involved as intermediaries) employ in order to exchange appropriate levels of routing information.">BGP</a> routing and <a href="DNS.htm" title="Domain Name Server. Domain Name Servers, also known as resolvers, are a system of computers which convert domain names into IP addresses,which consist of a string of four numbers up to three digits each.">DNS</a> </li> <li>IPV6 Support </li> </ul> <p /> <span class="style6">TDM transport circuits</span><br /> NoaNet can design and deliver complex multi-point <a href="TDM.htm" title="Time Division Multiplexing. A technique for transmitting a number of separate data, voice and/or video signals simultaneously over one communications medium by interleaving a piece of each signal one after another.">TDM</a> rings over SONET, as well as two-point circuits. <ul> <li>Equivalent to DS-3 (<a href="STS-1.htm" title="Synchronous Transport Signal level 1. An electrical signal that is converted to or from Sonet's optically based signal; equivalent to the OC-1 signal of 51.84 Mbps.">STS-1</a> or 51.84 Mbps) and <a href="OC-3.htm" title="Optical Carrier Level 3. A SONET channel equal to three DS-3s, which is equal to 155.52 Mbps. ">OC-3</a> through <a href="OC-192.htm" title="Optical Carrier-level 192. SONET channel of 9.953 thousand million bits per second (Gbps). How you calculate the capacity of an OC-192 is to multiply times 192 by 51.840 million bits per second and thus you get 9.953 thousand million bits per second--gigabits per second. ">OC-192</a> </li> <li>Protected or Single-Thread configurations </li> </ul> <p /> <span class="style6">Ethernet services</span> <br /> NoaNet provides scalability, security and ease of configuration over a resilient Gigabit Ethernet network. <ul> <li>Connect two or more sites that use Internet, data, video and/or VOIP applications </li> <li>Billed on an "pay as you grow" basis, with the ability to <a href="burst.htm" title="A method of transmission that combines a very high data signaling rate with very short transmission times. ">burst</a>. </li> <li>Capacity is guaranteed and unaggregated </li> <li>Ethernet WANs can be designed to handle 10Mb to <a href="10GigE.htm" title="10 Gigabit Ethernet. Positioned as a high-speed technology for MAN (Metropolitan Area Networks) applications, 10GbE is a developing IEEE 802.3ae standard that will enable networks to scale from the traditional 10 Mbps beyond the common 100 Mbps and increasingly common 1 Gbps, up to 10 Gbps.">10GigE</a>. </li> </ul> <p /> For more information about our Network Operations Center, please refer to the <a href="noc.htm">Technology Center overview</a>. Please review the NoaNet Terms and Conditions in the <a href="documents/MSA_original_72903.pdf">Master Services Agreement (MSA)</a> which is the basis for all services. Contact NoaNet for additional information. </div> </div> </div> </body> </html> Hi, I dont get this, I have this code: Code: @media screen and (min-width: 1023px){
#menu {float:left; width:756px; margin:0; padding:0 5px 0 5px;}
#menu ul {list-style:none; margin:0; padding:0; width:150.2px; float:left;}
#menu ul ul .level3{width:355px;}
#menu ul ul .level4{width:200px;}
#menu ul ul .level5{width:240px;}
#menu ul ul .level6{width:150px;}
#menu p {display:block; border-width:1px; border-style:solid; border-color:#ccc #888 #555 #bbb; margin:0;
padding:2px 3px; color:#000099; text-align:center;background:url("background5.gif");
font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold;}
#menu ul ul .level2{display:block; border-width:1px; border-style:solid; border-color:#ccc #888 #555 #bbb;
margin:0; color:#000099; background:#FFFFFF; text-align:left; font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px; font-weight:bold; padding-left:1px; padding-top:3px; padding-bottom:3px; text-decoration:none; width:200px;}
#menu a.links{display:block; border-width:1px; border-style:solid; border-color:#ccc #888 #555 #bbb; margin:0;
color:#000099; background:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold;
padding-left:1px; padding-top:3px; padding-bottom:3px; text-decoration:none;}
#menu ul ul .level2:hover {color:#000099; background:#FFFF66;}
#menu a.links:hover {color:#000099; background:#FFFF99;}
#menu a.topmenu{text-decoration:none;}
#menu a.topmenu:hover {color:#000099; text-decoration:none;}
#menu li:hover {position:relative; z-index:500;}
#menu ul ul {position:absolute;}
#menu ul ul ul {top:-1px; left: 100%;}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;} }
And w3.org checker gives me this error: Feature width doesn't exist for media screen Does not get it, cant I use width inside @ media? Dont see how I can do it without out. Thanks Helen My pages work fine in most browsers, but the positioning of the menu bar is wrong in IE7 browsers. I only discovered by chance when someone told me. The menu bar is offset too the right and upwards, part covering the logo. http://www.firstpokertips.co.uk/ I have looked and looked but cant find why this would be. In other browsers it is fine. Thanks for any advice. I have been designing for a few years now, and never come across this error when I use w3c CSS validation, but when I attempted to validate my CSS for a wordpress theme I've created, I received the following error: Quote: Parse Error Lexical error at line 1, column 3. Encountered: "D" (68), after : "<!" My CSS is valid, as I keep it really simple, but from a quick Google search, it would seem that w3c CSS validation is attempting to validate my XHTML before my CSS? Does anyone have any suggestions (aside from pasting the CSS directly into the validation page)? Here is my CSS: Code:
body {
background : #003 url(images/bground.png) repeat-x;
color : #fff;
font-family : Arial, Helvetica, Georgia, Sans-serif;
font-size : 11px;
margin : 0;
padding : 0;
text-align : center;
}
a {
color : #66f;
text-decoration : none;
}
p {
line-height : 14px;
margin : 0;
padding : 0 0 8px 0;
}
h1 {
background : url(images/h1-logo.png) no-repeat;
color : #300;
font-family : Arial, Helvetica, Georgia, Sans-serif;
font-size : 48px;
height : 48px;
margin : 0;
padding : 0 0 0 56px;
}
#index-header {
height : 48px;
margin : 0;
padding : 24px;
text-align : left;
}
#index-header h1 a, #index-header a {
color : #300;
text-decoration : none;
}
.hdr1 {
float : left;
}
.hdr2 {
float : right;
}
.hdr2 ul {
font-size : 12px;
font-weight : bold;
list-style : none;
}
#navigation {
background : url(images/navbar.png) repeat-x;
height : 32px;
}
.nb {
float : left;
}
.nb2 {
float : right;
}
ul#navbar {
height : 16px;
margin : 0 12px;
padding : 0;
}
ul#navbar li {
float : left;
font-size : 13px;
font-weight : bold;
line-height : 16px;
list-style : none;
margin : 0;
padding : 8px;
}
ul#navbar li a {
color : #333;
text-decoration : none;
}
form#searchform {
float : right;
margin : 0;
padding : 6px;
}
form#searchform #s {
background : inherit;
border : 1px solid #333;
}
form#searchform #searchsubmit {
background : inherit;
border : 0;
color : #333;
font-family : Arial, Helvetica, Georgia, Sans-serif;
font-size : 13px;
font-weight : bold;
}
#index-wrapper {
border : none;
margin : 0;
padding : 12px;
width : 100%;
vertical-align : top;
}
#slideshow {
background : url(images/Natural-Wonders.gif) no-repeat;
height : 300px;
width : 400px;
}
#recentposts {
padding : 0 0 0 12px;
text-align : justify;
width : auto;
vertical-align : top;
}
.index-post {
background : #306 url(images/post-h2.png) repeat-x;
margin : 0 0 12px 0;
padding : 6px;
}
.index-post h2, .index-post h2 a {
border-bottom : 1px solid #666;
color : #fff;
font-size : 16px;
font-weight : bold;
margin : 0 0 4px 0;
padding : 0;
text-decoration : none;
}
.postmetadata {
border-top : 1px solid #666;
color : #666;
font-size : 10px;
}
.tags {
margin : 0;
padding : 0;
vertical-align : top;
width : 400px;
}
#footer {
border-top : 1px solid #666;
margin : 12px 0;
padding : 12px 0 0 0;
}
#footer a {
color : #999;
text-decoration : none;
}
And just for good measure, here's the portion of the <head> tag that it is referring to: 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 profile="http://gmpg.org/xfn/11"> I'm not sure what settings I changed, but now my page doesn't display properly on IE 5.0 Win. My right column is getting pushed to the bottom and I get that error on page message on IE 5.0. IF anyone has that browser installed, can you take a look and see if you notice any glaring problems?? It looks fine in IE 6, Mozilla, Firefox, and Opera. But, I'd like it to work in IE 5.0 as well, or at least well enough. But, the right column dropping down doesn't look good. Thanks in advance. The site is http://www.marginalspace.com and I am using Wordpress for the index.php page. I don't think it's a php error. At least I don't think so. Thanks! Amit Hi, I am trying to center my page wrapper. It centers in FF, but not IE. I just cannot see what is wrong. This is my CSS: PHP Code: body{ margin: 0 auto; } #wrapper{ width: 900px; margin: 0 auto; } Any ideas? hey guys i have wrote this up so i can display 2 background images on my page but nothing shows up at all any idea why? Code: <style type="text/css">
<!--
html {
background-image: #FFFFFF url((URL address blocked: See forum rules));
background-repeat: repeat-y;
background-position:0px 155px;}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
body {
background-image: transparent url((URL address blocked: See forum rules));
background-repeat: repeat-y;
background-position:15px 0px;
}
-->
</style>
I keep getting an error but only when I run the site in IE8: Code: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727) Timestamp: Fri, 13 Mar 2009 16:59:31 UTC Message: Syntax error Line: 1 Char: 25 Code: 0 It keeps pointing to this line of code at the top: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> But if I don't use that the Divs and some CSS seem to break. With or without that code it works great in FireFox. I have no idea what's going on with this. I'm working on a project right now using multiple panels on a site. The idea I am moving forward with has a panel of a solid color with a small 15x15 image in 3 of the corners. I have the basic concept down of staticly moving an image to the three corners, but when I then assign a background color to the container it does not fill the space between the images, only the center. Any ideas/direction would be great! Code: <div id ="filterDIV" style = "background-color: #666666;"> <div style="position:absolute; top:0;right:0; width:15px; height:15px; background-image:url(tr.gif); float:left"></div> <div style="position:absolute; bottom:0;left:0; width:15px; height:15px; background-image:url(bl.gif); float:left"></div> <div style="position:absolute; bottom:0;right:0; width:15px; height:15px; background-image:url(br.gif); float:left"></div> test </div> I've been developing a template and there is a visual inconsistency in IE6 and 7 that I have been unable to repair. My initial thought was that it was just a whitespace bug, but removing the space between all the tags has been ineffective. The problem is a small gap (1-3px) that appears between the styled list items on "Solutions" and "Whitepapers" siderails in the left column. This only happens in IE. I'm also having issues with the Suckerfish dropdowns not positioning properly in IE7 only. I'm about ready to give up and write IE it's own sheet, but I hate that. Any help would be really welcomed. CSS File: http://www.aidenbordner.com/test/template/css/style.css Template: http://www.aidenbordner.com/test/template/index.html Hi all, great forums! Yall have helped me so much, never registered though so thanks Anyways I can't seem to find the cure for this problem. So far it works perfectly in firefox, IE 6 not so great. Each box should be spaced equally from the edges and each other. In IE6 there is a large gap on the left side. I've tried several combinations of margins, padding, and changing the size of the content box itself, nothing works, screws everything up in one or the other browsers. Here is the code: ( for the content box, it was supposed to be 676px wide but I had to have 2 subtracted for the border. In the end it needs to be a total of 676px wide in order to fit with the header.) CSS: Code:
html, body {
background: #131414 url(images/bgslice.jpg) repeat-x top center;
font-family: arial,verdana,sans-serif;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
color: #333333;
text-align: center;
}
#content {
margin-left: auto;
margin-right: auto;
padding: 0;
background: #EDEDED;
height: 400px;
width: 674px;
max-width: 674px;
border: 1px solid #2C383C;
text-align: left;
}
.bluebox {
border: 2px solid #2C383C;
margin: 8px 0 0 8px ;
padding: 0;
float: left;
}
HTML: Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)">
<head>
<title>The Party Quest - Are you coming out tonight?</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css" media="all">@import "css.css";</style>
</head>
<body>
<div id="content">
<div class="bluebox" style="width: 242px; height: 145px;">
test
</div>
<div class="bluebox" style="width: 242px; height: 145px;">
test
</div>
<div class="bluebox" style="width: 146px; height: 145px;">
test
</div>
</div>
</body>
</html>
Thank you so much for any help you guys can supply! |
|||||||