|
CSS - Simple Error
I'm teaching myself CSS and enjoying it, but I run into problems every now and then that I'm having troubles with.
In my table I call <td class="corner">, but the bgcolor tag I set in my CSS sheet is not being picked up. I've run my code through the validator and it tells me that my line Quote: property bgcolor doesn't exist : #666666 This is my CSS code: Code: td.corner {
bgcolor: 666666;
height: 30px;
width: 15px;
}
I've played around with this, it seems simple but can't see what I'm missing. ANy help would be appreciated! Thanks! Similar TutorialsHi, 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? http://lovemeforme.org/index.php?wptheme=Scarlett+Orange if you scroll down to where it has "themes" on the sidebar, you notice the last one isn't a link and says "scarlett orange." Why does it not go past the image bullet like the others, how can I fix that? any ideas? thanks in advance. Hi, I'm trying to use CSS and php includes to simplify my website admin. What I'm trying to do is create a banner area, a left column and a right column. Each section then calls another php page. I will eventually let the right column have the correct content instead of calling another page. My problem is that none of the basic formatting is being applied to my content. The menu.htm page in bold is also calling the style.css as is the c_index.php. I have tried seperating the layout CSS and the formating CSS but it did not make a difference. When I view both menu.htm and c_index.php in seperate windows they are affected by changes in the style.css! Would somebody be kind enough to explain where the error is? Here is my code: TEST PAGE Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html> <head> <title>Planet Phillip</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="banner"><?php include "header.php";?></div> <div id="leftcontent"><?php include "menu.htm";?></div> <div id="centercontent"><?php include "c_index.php";?></div> </body> </html> STYLE.CSS Code: a:active { font-family: Verdana; color: #003300; font-size: 10pt; style="text-decoration none" }
a:link { font-family: Verdana; color: #003300; font-size: 10pt; style="text-decoration none" }
a:visited { font-family: Verdana; color: #003300; font-size: 10pt; style="text-decoration none" }
a:hover { color:#0000FF; text-decoration }
.hline { height: 1; color: #003300; text-align: left; margin-top: -6; margin-left: 36; margin-bottom:0 }
.date { font-family: Verdana; font-size: 10pt; font-weight: bold; text-align: left; margin-top: 0; margin-left: 36; margin-bottom: 0 }
.project { font-family: Verdana; font-size: 10pt; margin-left:60; font-weight: bold; margin-top:12; margin-bottom:2 }
.newsitem { font-family: Verdana; font-size: 10pt;font-weight: bold; margin-left:48; margin-right:0; margin-top:12; margin-bottom:8 font-style:italic }
.newstext { font-family: Verdana; font-size: 10pt; text-align: justify; margin-left: 60; margin-top: 0; margin-bottom: 6 }
.posted { font-family: Verdana; font-size: 10pt; text-align: right; margin-top:8; margin-bottom:30 }
.listtext { font-family: Verdana; font-size: 10pt; text-align: left; margin-left: 60; margin-top: 0; margin-bottom: 6 }
.tabletext { font-family: Verdana; font-size: 10pt; text-align: justify }
.listsitem { font-family: Verdana; font-size: 10pt;font-weight: bold; margin-left:48; margin-right:0; margin-top:12; margin-bottom:-12; font-style:italic }
.Mheader { font-family: Verdana; font-size: 10pt; font-weight: bold; text-align: right; margin-top: 0; margin-bottom: -18 }
.Mlink { font-family: Verdana; color: #003300; font-size: 16pt; text-decoration: none; text-align: right; margin-bottom: 18 }
#leftcontent {
position: absolute;
left:0px;
top:150pt;
width:120pt;
}
#centercontent {
margin-top: 50pt;
margin-left: 150pt;
}
#banner { margin-left: 60pt; margin-top: 30pt;}
Hi all, Has anyone received a Line: 0 Parse error - Unrecognized : } with the rest of the CSS document validated under W3C validator? I can't work out why it's not happy. The beginning of my CSS is: /* This is the only CSS for the Waste RE3 website */ a:link { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; color: #008000; text-decoration: none} a:visited { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; color: #008000; text-decoration: none} a:hover { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; color: #FF9933; text-decoration: underline} 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. 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? For some reason I seem to be having some trouble creating a simple border at the top of my page. Can anyone please advise me of a simple solution. The kind of thing I want to create is the one on the top of google.co.uk which simply spans the top of the page. Many thanks in advance for any help.. JD ok im fairly new to css and so i am working and learning from examples however i would like to know how one would go about changing the following table to a CSS layout using divs. Code:
<table style="margin: 0 auto" cellspacing="1" cellpadding="2">
<tr class="gen_small" style="height:50px">
<td align="center">{FORUM_OPEN}</td>
<td width="100">Open Forum</td>
<td align="center">{FORUM_LOCKED}</td>
<td width="100">Closed Forum</td>
<td align="center">{FORUM_NEW}</td>
<td width="100">New Posts</td>
</tr>
</table>
http://www.invalidheart.org/test/ works in IE fine, but in FF the background and the footer stay up at the top, when it should be scrolling down with the rest of the content. any ideas? Thanks in advance. Hello Guys, I have the following problem with my .css: #pagerank { margin: 20px 0 20px 0; padding: 8px; width: 225px; float: left; background-color: #F6F8F9; border: solid #eee 0px; background-repeat:no-repeat; background-image:url(top3.jpg); I need this background-repeat:no-repeat; to be in the same line as this: background-image:url(top3.jpg); kind of like this: background-image:url(top3.jpg) no-repeat; but I dont know how to format it correctly how do you do it? Best Reagrds, Brill I loaned my CSS book to remote colleague si I can't look at it. I have a simple td.BLUEBG {background-color: #0000BC; color: #FFFF00; font-weight: bold} now I want to put <a href=""">xxx</a> stuff in those TD's and I want them to be yellow too. I tried td.BLUEBG A:link {color: #FFFF00; text-decoration: none} and now some of those links turn yellow and some don't. Here is a snippet of my generated code: <tr> <td class=BLUEBG>Controls</td> <td class=BLUEBG>Last edit</td> <td class=BLUEBG>Approved by</td> <td class=BLUEBG><a href="xxxxxxxx.php?sortby=Manufacturer">Manufacturer</a></td> <td class=BLUEBG><a href="xxxxxxxx.php?sortby=Description">Description</a></td> <td class=BLUEBG><a href="xxxxxxxx.php?sortby=Code">Code</a></td> <td class=BLUEBG>Comments</td><td class=BLUEBG><a href="xxxxxxxxx.php?sortby=Submitter">Submitter</a></td> </tr> i have three relatively simple questions -- i want to put thumbnails on my page inside the main container-- (2 column layout) i have used some code from REAL WORLD its close but not quite there-- also the thumb sizes will be different - they are stamps- like postage stamps so some horizontal and some square -- just need a tweak here also i have a gray line running thru the site--- not sure where it is coming from but i think it might be from the link container on the sidebar-- and speaking of side bar list container-- i would like it to be centered instead of up against right side-- i played with margins and padding - i am still wading thru that concept-- but coudlnt get anything to work--- so i SURE WOULD appreciate help on these three items -- many thanks in advance-- here is link to page THE PAGE here is link to CSS CSS Ok, I bought the manual on css but still can seem to resolve what I am sure is a simple issue for someone out there. Please browse to http://tmh.netdbs.com/turnkey You see the left column, I put a red background color in just to troubleshoot, the div it is specifying the color for should ALWAYS stretch to pages bottom? What is going on here? I can't get it to do that? Thanks so much. I set the height to 100%??? Tom Hi, Does anybody know how i can have an image that switches to another image on rollover and also has a link? Thanks Im trying to position 3 divs like in this image the html will look like this: Code: <div id="container"> <div id="rightGrey></div> <div id="blueContent"></div> <div id="leftGrey></div> </div> how will the css look like ? i was wondering if someone could help me with my problem.. i would like all font on my page to be: size: 10px font: verdana ive tried to do this in css but to no hope..can someone help thanks Sorry for the confusing title, I didn't know how I could describe it better. Anyways, here is the 'problem' I am currently using for my website Cufon. Which works great. However with Internet Explorer 8 it becomes really slow. Therefor I decided to use: PHP Code: <![if !(IE 8)]> <script type="text/javascript" src="js/myriad-pro.cufonfonts.js"></script> <script type="text/javascript"> Cufon.replace('.example1') ('.example2') ('.example3') ('.example4') ('.example5'); </script> <![endif]> This works great, however not for everything. Some parts of the scripts, which calls Cufon in the script itself, it doesn't work and Cufon will still be displayed in IE8 (with all negative results from it). Several included scripts / parts have the following code in it: PHP Code: <?php echo "<script language=\"javascript\" type=\"text/javascript\">"; echo "$(document).ready(function() { Cufon.replace('.orderpart1') ('.orderpart2') ('.orderpart3'); });"; echo "</script>"; ?> Now is it possible to make a same statement as with <![if !(IE 8)]> within the PHP script(s)? So if it's any browser other than IE8 it will load the Cufon, but if it's IE8 it will not load Cufon? Hopefully someone understands what I mean here, cause it's kinda hard to explain for me... //update If I use: PHP Code: <?php echo "<![if !(IE 8)]>"; echo "<script language=\"javascript\" type=\"text/javascript\">"; echo "$(document).ready(function() { Cufon.replace('.orderpart1') ('.orderpart2') ('.orderpart3'); });"; echo "</script>"; echo "<![endif]>"; ?> My script / order form stops working completely... :S Update! It's working now!! Thanks! I have sworn that I will not use tables. Don't let me give up and use them. I want a simple header at the top of the page. The header consists of two boxes. The left one contains a logo. The right one contains some html code. The right one needs to go butt up against the left one. I have the following: Code:
#header {
position: absolute;
top: 0;
left: 0;
height: 200 px;
width: 779 px;
}
#header #logo {
background-image: url(../images/gcxn_logo.jpg);
top: 0;
left: 0;
background-repeat: no-repeat;
width: 368 px;
height: 200 px;
}
#header #summary {
top: 0;
left: 368 px;
height: 200px;
width: 411 px;
}
and my html looks like this: Code: <div id="header"> <div id="logo"> <a href="http://localhost/...."><img src="transp.gif" border="0" height="199" width="300"></a> </div> <div id="summary"> <ul> <li><a href="....">A</a> <li><a href="....">B</a> <li><a href="....">C</a> <li><a href="....">D</a> <li><a href="....">E</a> </ul> <a href="....."><img src="img.gif" border="0"/></a> </div> </div> How can I make the summary block go BESIDE the logo block and not below it! I give this 30 more minutes then I hae to use tables and get on with REAL work So say I want to put a DIV over top and image, and say that DIV happens to be about 30px wide and 10px tall. I can easily do it with: <img src="image.gif" height="100" width="100"><div style="position:relative; top: -10px; left: -30px; z-index:5; display:inline">text</div> But doing so always creates a bit of space to the right of the image, as if the DIV were there, and not at it's new spot. Basically, it creates an extra space after the image that messes everything up for me. (This isn't caused because the DIV is actually larger than 30px. It's not. And I can move it much further to the left on the image.) How do I get a div over an image without getting that extra space after the image? I suppose I could have a div that contains both the image and the layered div, then position them absolutely inside it? Is this the best solution? *** EDIT: YOU CAN SEE AN EXAMPLE HE *** http://www.poweredpages.com/sample.php Thanks. *** UPDATE. Got the space to leave after placing it as absolute inside a relative DIV. Now I have vertical alignment discrepancies between IE and Firefox. There has to be an easier way! *** |
|||||||