For some weird reason my background color and margin don't work in Firefox while it works great in IE. Other parts of the stylesheet work fine.. Its only this part that doesn't want to work: body{background-color: #080808; padding: 0px; margin:0px;} Is there anything I'm doing wrong?
It does not appear as though you're doing anything wrong, you'll have to post more of your source in order for us to figure out why this is happening.
The CSS: <style type="text/css"> <!-- body{background-color: #080808; padding: 0px; margin:0px;} table{height:100%; width:90%; background: #ffffff; border-left:7px solid #C6EB6B; border-right: 7px solid #C6EB6B;} .teedee{background-image: url(images/bgg2.gif); background-repeat: no-repeat; background-position: top right; } --> </style> Code (markup): the html: <html> <head> <title>Flacy!</title> <script type="text/javascript"> <!-- Begin if (screen.width == 640) { document.write('<link rel="stylesheet" href="800.css">'); } if (screen.width == 800) { document.write('<link rel="stylesheet" href="800.css">'); } if (screen.width == 1024) { document.write('<link rel="stylesheet" href="1280.css">'); } if (screen.width == 1280) { document.write('<link rel="stylesheet" href="1280.css">'); } if (screen.width == 1600) { document.write('<link rel="stylesheet" href="1280.css">'); } // End --> </script> </head> <body> Code (markup): At first I thought the problem was Java but that would mean .teedee shouldn't work either.. which works
Thanks for the code. The Java wasn't the problem.. I'm getting the same problem as before using this code.. certain parts of the css work while other parts don't (background-color, margin)
Another strange thing.. when I put the css on the page without importing it, it works fine in Firefox..
What exactly do you see/not see in FF? You want a background of a colour and then the table sits on top-- and because your table is 100%height and 90% width then the only part of the background you see is on the sides, right? Is that what you want to see? * { margin:0; padding:0; } html, body { background-color: #080808; } table { height: 100%; width:90%; margin: 0 auto; background-color: #fff; border-left:7px solid #c6eb6b; border-right: 7px solid #c6eb6b; } .teedee { background: url(images/bgg2.gif) no-repeat top right; } This is pretty much what you have but I don't see anything that would bork FF, so if the table isn't sitting in the middle this should work unless I completely misunderstood everything
Well the table is in the middle but instead of getting the background on the sides I get whitespace.. its really strange. If I put the code on the html page without importing it the css works fine..
I'm probably still misunderstanding you, though now I know what your site is looking like and what you want it to look like. Do you mean that if you put your CSS code in the html page it works, but if you have an external style sheet with a link, it doesn't? Cause yeah, there's nothing wrong with your CSS that I can see. What are you typing in your <head> when you try to "import" the css? Is the CSS always all together in one sheet? And IE sees all of it like it should but FF is selectively ignoring parts? You're using <link href="nameofcssfile.css" rel="stylesheet" type="text/css" /> or something similar right?
If I read this right (and I really only glanced) then what I'd suggest is, change the tables background colour to say blue (for testing) and leave background: red; in your body tag. If you're getting white space either side of the table then you should centre align your table, set it to a precise width and it "shud" layer onto your background. Have you got a live link we could see the page on?
Yeah it doesn't work if I use an external link.. very strange because then only certain parts of the css work. Anyways I put it all in the headers now and it seems to be working great. Thanks for all the help
Good luck, Nora. I hope you don't mean with <center>. The "margin-left: auto; margin-right:auto;" and "margin: 0 auto;" will center the table for everyone except IE5.5 and under, which uses (incorrectly) "text-align: center;"
Your javascript has a host of issues that I'm not sure is contributing to your problem, but certainly can' t be helping. The 'big' goof here is that what you are testing may not always return EXACTLY what you are looking for. A lot of people don't maximize their browser, and a lot of people run at non-standard resolutions... screen.width has NOTHING to do with browser width, and you should probably be checking for a range of values instead of exact... screen.width==1600 is useless if the person browsing has their window set to only use 900 or so pixels of the screen. (common practice for large screen users) I also see nothing to handle if javascript isn't present... and no fallback should none of the above conditions be true. THEN you have that you are using screen.width, when you should be testing window.innerWidth and it's IE specific kin... So that .js should probably look more like <script type="text/javascript"> var width; if (window.innerWidth) { /* Rest of World */ width=window.innerWidth; } else if (document.documentElement && document.documentElement.clientWidth) /* IE6 Strict */ width=document.documentElement.clientWidth; } else if (document.body) { /* IE5.x and IE6 Quirks */ width=document.body.clientWidth; } else width=800; /* always have a fallback */ with (document) do { write('<link rel=stylesheet" media="screen, projection" src="'); if (width>=1280) { write('1280'); } else if (width>=1024) { write('1024'); } else if (width<800) { write('640'); } else { /* otherwise between 800 and 1023 OR Invalid variable reference, so send 800 */ write('800'); } write('.css" />'); <script> <noscript> <link rel=stylesheet" media="screen, projection" src="800.css" /> </noscript> Code (markup): Or something to that effect. Times like this I wish the case statement in javascript accepted ranges like Wirth style languages do... but in any case notice I check ALL the possible ranges, targeting 800 just in case nothing else works.