|
CSS - Css Validates But Professor Says There Are Errors!
Hi, I am hoping that someone can help me out. My css validates but my professor still wants me to find what I am missing.
I know that the colored scrollbars and pngfix won't validate but my prof said it's ok to leave that without being valid. He said what he doesn't like is elsewhere. Can anyone tell me what he may be talking about since he won't help me figure it out? I have spent hours trying to figure this out and my book is no help. I'd really appreciate it. html,body{margin: 0; padding:0;} body{font: 76% Verdana, Arial, Helvetica, sans-serif; background: Black; background-image: url(../images/back.png); background-repeat: repeat-x;} html {scrollbar-face-color: #22222F; scrollbar-shadow-color: #CC2204; scrollbar-highlight-color: #CC2204; scrollbar-3dlight-color: #CC2204; scrollbar-darkshadow-color: #22222F; scrollbar-track-color: #CC2204; scrollbar-arrow-color: #CC2204;} p{margin:0 10px 10px} a{display:block;color: Yellow;padding:10px} div#content p{line-height:1.4} #logo { display:block; width: 100%; text-align: right; height: 130px; position: relative; top: 21px; } div#left{float:left;width:260px; background: transparent url(../images/menuback.png) no-repeat; behavior: url(iepngfix.htc)} div#extra{float:left;} .menu{ float:left; text-align: center; margin: 40px 0px 0px 0px; padding-left: 28px; } .menu ul{ list-style-type: none; margin: 0; padding: 0; border-bottom: 2px ridge #8c8100; } .menu li a{ font: bolder 16px Verdana, Arial, Helvetica, sans-serif; display: block; background: transparent url(../images/menb.png) no-repeat 0 100%; width:188px; height: 41px; padding: 2px 0 4px 0px; line-height: 41px; text-decoration: none; } .menu li a:link, .menu li a:visited { color: #CCBB04; } .menu li a:hover{ color: #286736; background-position: -190px 100%; } .menu li a.selected{ color: #E7E800; background-position: 0px 100%; } div#footer p{margin:0;padding: 5px 10px 0px 100px; font-weight: bold; } div#header{height:307px;margin: 0px 0px 0px 0px; background: transparent url(../images/henk.png) no-repeat; text-align: right;} div#wrapper{float:right;width:100%;margin-left:-260px} div#content{margin-left:260px; background: url(../images/sk.png) no-repeat center; background-position: top; behavior: url(iepngfix.htc)} div#extra{float:left;clear:left;padding-left: 34px; } div#footer{clear:both;width:100%; background: transparent; text-align: center;} Similar TutorialsI don't have much experience using CSS, but I flatter myself that I can at least code a sheet which is readable by my HTML pages. I've uploaded a stylesheet for my page at http://noblecarrots.com/index.php at http://noblecarrots.com/stylesheet.css rather than coding CSS in the HTML itself as I had done previously. The problem is that, during the transition, all of my styling has vanished. See for yourself - my links all check out, my CSS validates, and everything else seems fine, but you're still staring at Times New Roman and whitespace on my homepage. If this turns out to be down to a typo or something similar, then I apologize in advance. I can only imagine how much of that kind of canooli you get on this forum. Oh, and in case it makes things easier, here's my CSS. I think you'll agree it's just fine: Code: body {
font-family: Garamond, Georgia, serif;
background-color: #c9c299;
color: #41383C;
width: 30em;
text-align: justify;
margin: auto;
}
img:link {
border: none;
}
a:link {
color: #41383C;
text-decoration: none;
font-weight: bold;
}
a:visited {
color: #41383C;
text-decoration: none;
font-weight: bold;
}
a:hover {
text-decoration: underline;
font-weight: bold;
}
a:active {
color: #41383C;
}
.logo {
width: 16em;
float: left;
margin: auto;
position: relative; top: 0px;
}
.about {
width: 13em;
font-size: 0.9em;
float: right;
margin: auto;
position: relative; top: 15px;
text-align: left;
}
.briefs {
position: relative;
text-align: justify;
line-height: 100%;
margin: auto;
}
.quote {
width: 25em;
text-align: justify;
line-height: 100%;
}
ul {
width: 22em;
text-align: justify;
line-height: 125%;
}
.star {
text-align: center;
line-height: 100%;
word-spacing: 2em;
font-size: 2em;
font-family: "MS Gothic";
}
.footer {
width: 40em;
font-size: 0.9em;
}
.footer a:link, .footer a:visited, .footer a:hover, .footer a:active {
font-weight: bold;
}
h2 {
font-size: 3.75em;
line-height: 5%;
}
h3 {
font-size: 1.25em;
}
Hi, Can someone plz tell me how to fix these 3 errors? URI : http:// www. freeadverts . co . nz/0185cbcadbc86a9b9ffba4c9c7347964.css Error 1: 45 .subframe Parse Error opacity=95) Also what does 45 stand for? URI : http:// www. freeadverts . co . nz Error 2: 37 Value Error : width only 0 can be a length. You must put a unit after your number : 120 120 Also what does: a. 37 mean &; b. 120 120 mean? Error 3: 37 Value Error : height only 0 can be a length. You must put a unit after your number : 60 60 Also what does: a. 37 mean &; b. 60 60 mean? Thanx in advance. Hi all, I've just put together a "template" webpage that is controlled entirely by CSS...I'm very happy with it and it works like a dream in IE6+, but when I test on Mozilla and Opera I end up with my hyperlink text not obeying the CSS rules and find all my positioned graphics don't line up correctly either. Both Mozilla and Opera are the latest versions, I haven't tested on Netscape Nav yet but I'm concerned with the problems I'm having getting my page to display consistently... Any suggestions as to how to tackle this problem? I don't want to recreate different CSS for different browsers...but if I have to, is there a resource on the web available so you can see which CSS tags/properties render correctly with different browsers? In addition, if I use Javascript to specify certain CSS styles based on the browser type...how do I "load" those differing SS using javascript? I can do browser detection, but I'm not sure on getting different SS "loaded" based on the selection. Wow...bit of a mouthful there... Im trying to do some CSS frame emulation for a curve on my site so that it follows the screen, but (and this is a surprise, i feel) it only works in IE!! Not in firefox. Im not sure why. Here is the CSS file that holds the frame emulation: Code:
@media screen
{
body
{
margin: 0;
padding: 1em 1em 1em 14em;
color: #000;
background: #fff;
}
div.fixedBox
{
position: fixed;
top: 1em;
left: 1em;
width: 12em;
border: 1px solid #000;
background: #eee;
}
div.fixedBox p
{
margin: 1em;
}
/* Don't do this at home */
* html
{
overflow-y: hidden;
}
* html body
{
overflow-y: auto;
height: 100%;
padding: 0 1em 0 14em;
font-size: 100%;
}
* html div.fixedBox
{
position: absolute;
}
/* All done. */
}
Is there an error here? I got this off here. Not sure what is going wrong, like i said it work in IE, but not firefox, whereas the example on the above site works in both. Any ideas? edit:figured out I need someone to look at my site and see why it doesnt work right in internet explorer, and looks fine in mozilla and google chrome. I am sure it has something to do with a .css file somewhere. glockpartsrus.com/products.php?cat=46 for an example. Am putting the finishing touches to my site but in firefox 8 the top of the side menu there is a space and login part is to low as well. My site is www.carswapped.co.uk http://www.gr2b.com All my browsers load the full website perfect. However, when I try to load the website in IE 4.0 - 6+, I get an error with the navigation where it double lines the navigation rather than a single line AND it adds additional padding. Is there anyone with some experience that can aid me? UPDATE: Another major problem I am noticing with Internet Explorer below 7, is that when you pass your mouse over the "Product Title" the entire page flashes white. Please offer assistance! http://www.mydragonflygifts.com/index.php Need some major help here. Clicking the link above, you will see the problems. The whole page needs some help. Looks 100% different in FF than IE. What can I do to fix? I would pay if someone was able to fix the site 100% and possibly could use some helps on future jobs if interested. Hi, I'm getting two errors when I view my new theme but only in IE6. The first error is on long posts (Not pages) where the header and footer sections are slightly offset to the rest of the body. If I make the post shorter then the problem disappears. An example can be seen he Example The page look fine in FF 1.5.01 and Opera 8.51. The second issue is to do with the menu images on the top of every page. When I hover over the image (To select the page) the image turns black for a few moments and then returns almost immediately, whilst it doesn't effect the usability it doesn't look very good. I'm guessing it has something to do with the CSS and background images but am unclear what I should do. Any help or suggestions you can offer would be appreciated. TIA Phillip Hi, I'm just diving in to CSS layout and gradually working through CSS IE bugs. I'm having so much trouble sorting this one out though! I've got a fairly standard menu using UL and LI in a left hand container. Everything displays nicely in Firefox 1.5 and looks ok - initially in IE6 until you hover over the menus. In Firefox they change background colour and font colour as I want, however in ie6 when you hover the background doesn't change colour and the menu all squishes up together! Where am I going wrong?? Here's the CSS for the elements: Code: #leftcol{
float:left;
padding: 0;
width: 170px;
background-color: #FFFFFF;
}
#SectionNav {
background-image:url(../assets/images/sectionNavBack.png);
background-repeat: no-repeat;
background-color: transparent;
width:150px;
height: 323px;
left: 0px;
top: 0px;
padding-left: 0px;
display: block;
}
#SectionNav ul{
margin-top: 0px;
padding-top: 25px;
background-color: transparent;
list-style-type: none;
font-size: 80%;
list-style-image: url(../assets/images/ballBullet.png);
display: block;
}
#SectionNav ul li a{
color: #FFFFFF;
display: block;
margin-top: -5px;
padding-botton: 10px;
margin-bottom: 10px;
text-decoration: none;
height: 21px;
background-image: url(../assets/images/SectionBtnBack.png);
font-weight: 200;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#SectionNav ul li a:hover, #SectionNav ul li a:focus {
background-color: #0000FF;
color: #FFCC00;
}
Here's the HTML: Code: <div id="leftcol"> <div id="SectionNav"> <ul> <li><a href="index.php">Home</a></li > <li><a href="#">News</a></li > <li><a href="#">Handicaps</a></li > <li><a href="#">Leaderboard</a></li > <li><a href="#">Competions</a></li > <li><a href="#">Media</a></li > <li><a href="#">Courses</a></li > <li><a href="#">Links</a></li > </ul> </div> <!--End of SectionNav--> </div> I've played around with the various margins etc but no joy. The page can be found at: http://beta.sussexeast-gs.org.uk/index.php Excuse the colours they're there to help me with layout for now. Thanks for some reason, i cant seem to use a:visted... here, i'll show ya.. the red text below is where i am having the issue... all the other a attributes that are applied the same way work perfect... Code:
A:link { text-decoration: none; color:#FFFFFF}
A:visited { text-decoration: none; color:#FFFFFF}
A:hover { text-decoration: underline; color:#FFFFFF}
.coversystems {
text-align:center;
font-weight:bold;
font-family:"Times New Roman", Times, serif;
font-size:16px;
color:#FFF;
margin:20px 0px 0px 0px;
}
.coversystems a:link{font-weight:bold;}
.coversystems a:hover{font-weight:bold;}
.coversystems a:visted{font-weight:bold;}
|
|||||||