|
CSS - Difference Between Css2 And Css3
What is the Difference between CSS2 and CSS3 ???
Similar TutorialsHi. I like to know what're the differences. I know that css3 has more properties. It can do rounded corner border easily and also some new ways to write css. Is this css3? input[type="submit"] Also I remember seeing websites mentioned css3 can be written in module or something like that? What other differences? Thanks. So, I'm looking for a tool that will crawl and suck down my website (just html, not images) and then examine my stylesheet and compare the rendered page output with css and help me eliminate unused styles definitions, styles for identical properties with different names, unfound class attribute names and that sort of thing. The reason I need a spider is that my site runs on ATG and rql queries are pain to write when looking for styles in the repositories, and so I'd like to check the the final rendered page output, and not have to comb through my jhtml and my repositories separately. I've downloaded a couple tools. Style Studio and Style Master and neither will crawl my live site and check css, and the one that was supposed to go through my local resources didn't search for unused styles, just invalid css2 (which i can do at w3c anytime!) Ok, if that made sense to anybody and anybody knows the answer please let me know. Even a css2 seeker or something that will work on my site once i've crawled it with another spider tool would be cool too. I have 4000 lines of css and doing this by hand is driving me insane. thanks everyone. d hello all, have a small problem with CSS when viewing the site with Firefox ... please help you are my last hope. Here is what Firefox doesnt like Code: background: url("images/tiler.gif") top y-repeat;
in IE everything looks fine but Firefox misses the image ... when i put a background color of the table ... the color is displayed but picture is not ... anybody has a solution ? I see Firefox doesnt like alot of css styles ... does anyone know a knowledge base with replacements or something like that ... ??? Thanks in advance guys ! Link: http://www.vairlinecms.com/template.html I cannot for the life of me figure out why Testting is not aligning vertically with About Us (To have the same space between top of Testting and menu bar as there is for About Us.) Any ideas? CSS: Code: /*
Author: Matt
File: default.css
Desc: contiains all of the CSS styles.
Legal: This code is not to be used without the written consent of the author.
*/
/* ===== Defaults ===== */
body {
background: #CCC;
font-family: verdana, tahoma, serif;
}
a {
}
h1, h2, h3 {
}
p {
}
/* ===== Wrapper ===== */
div#wrapper {
position: relative;
width: 976px;
height: 600px;
margin: 0 auto;
padding: 0;
background: #FFF;
border: 10px solid #FFF;
}
/* ===== Header ===== */
div#header {
position: absolute;
top: 0;
left: 0;
width: 976px;
height: 197px;
margin: 0;
padding: 0;
background: url(images/header.jpg) no-repeat;
}
/* ===== Navigation ===== */
ul#navigation {
position: absolute;
top: 154px;
left: 0;
float: left;
width: 976px;
margin: 0;
padding: 0;
list-style-type: none;
background-color: blue;
}
ul#navigation li {
display: inline;
}
ul#navigation a {
display: block;
float:left;
margin: 0;
padding: 0 .5em 0 .5em;
font-weight: bold;
line-height: 25px;
text-decoration: none;
color: #FFF;
border-right: 1px solid #FFF;
}
ul#navigation a:hover {
color: #FFF;
background: red;
}
/* ===== Content ===== */
div#content {
position: absolute;
top: 185px;
left: 0;
margin: 0;
padding: 0;
}
div#content #leftSide {
float: left;
width: 700px;
margin: 0;
padding: 0;
}
div#content #leftSide h1 {
color: blue;
margin: 0;
padding: 0;
}
div#content #leftSide p {
color: #000;
margin: 0;
margin-bottom: 10px;
padding: 0;
font-size: 13px;
}
div#content #rightSide {
float:left;
width: 200px;
margin: 0;
padding: 0;
}
div#content #rightSide h1 {
}
div#content #rightSide p {
}
/* ===== Content Boxes ===== */
div#content #clientLoginBox {
}
div#content #clientLoginBox h1 {
}
div#content #clientLoginBox p {
}
/* ===== Footer ===== */
div#footer {
}
HTML: Code: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>vAirlineCMS.com | Virtual Airline Support Center</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="default.css" rel="stylesheet" type="text/css" /> <head> <body> <div id="wrapper"> <div id="header"> <ul id="navigation"> <li><a href="#">Home</a></li> <li><a href="#">Demo</a></li> <li><a href="#">Sign-Up</a></li> <li><a href="#">Support & Contact</a></li> </ul> </div> <div id="content"> <div id="leftSide"> <h1>About Us</h1> <p>This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. </p> <h1>Features</h1> <p>Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test.</p> </div> <div id="rightSide"> <h1>Testting</h1> </div> </div> </div> </body> </html> Hi! I need a very good CSS2 quick reference where I can rapidly see what is supported in which browsers and a short description of the property. Thank you! Hello, I have attached my zip file and this is my first attempt on CSS2 (plenty of comments in the code), if some could look at it and recommend any suggestion and why that would be TERRIFIC. My main question is, what happens if the is say...4-5 paragraphs of text on the home page, under "Company Overview", the page then looks stupid, how do i extend the containers around the #middleContainer so that it looks intact. If you want to see the page it is also accessible at http://awo.loadedtechnologies.com/ Thanks you for your Help Greetings, I posted this question in the HTML forum, too, but I realize that maybe the answer to this question would better be provided by CSS2, rather than using HTML tables, as the latter may be deprecated in the future--it seems--as a layout tool. I used to be able to position an image, or anything basically, in a table cell that is in the "absolute middle" of a web page, i.e. centered horizontally and vertically, using Dreamweaver MX. But, for some weird reason, I cannot do it anymore using Dreamweaver MX 2004. No matter what I try, the image or contents of the cell or table are always at the top of the page, centered horizontally, yes, but not vertically. I tried nesting a table within a table, and I tried using a percentage-based 3x3 table, but nothing works. I noticed that the "height" attribute of a table is deprecated now, thus, you should not give a table a "height" of 100%. Is that the reason? And if so, then what is another way to do this now? I mean putting an image or so in the absolute middle or center of a page? Better yet... What I really want to do is to place an image in the vertical center of a page, yet a bit to the side, but within proportion to the page of the visitor. Meaning, I'd like the center of the image, for example, to always have 50% of the page over it and 50% below it, exactly; and I'd like it to have 33% of the page to its right side, for instance, and 66% to its left side, always, regardless to the visitor's resolution. Now how can I do this, especially using Dreamweaver MX 2004? Thanks for anyone taking the time to help. I'll try to attach an image to demonstrate what I mean visually. http://forums.devshed.com/attachmen...tachmentid=4599 Hi all, I'm having an issue using CSS3 selectors. I'm not quite sure if this is even possible but here it goes. Imagine the HTML below: html4strict Code: Original - html4strict Code <tr> <th><input type="checkbox" name="cb" /></th> <td>Something here</td> <td>Someting here also</td> </tr>
Is it possible with CSS to utilize the :checked selector on "tr th input:checked" and somehow set the background color for the td-s? I've tried several combinations but to no avail. And as far as I know there's no parent selector or anything that lets you traverse backwards and I'm trying to avoid JavaScript as much as possible. I'm using Firefox 2.0.0.12. Hi everyone, I am new to this website as well as CSS for the most part. I have been working on a wordpress themed website recently trying to learn as much as possible. My website is self-hosted currently so can't really give you a link to view my code. I just discovered the CSS validator and I validated my CSS file. It contains 13 errors (yikes!) and 16 warnings. However, I don't really know how to interpret it. I use notepad++ as an editor. The profile I used is CSS level 2.1: EDIT: Here is the new code for CSS 3. I only copied the errors part. Code: 23 .socialmedia img Property -webkit-transition doesn't exist : all 0.2s ease-in all 0.2s ease-in 24 .socialmedia img Property -moz-transition doesn't exist : all 0.2s ease-in all 0.2s ease-in 25 .socialmedia img Property transition doesn't exist : all 0.2s ease all 0.2s ease 38 .socialmedia img.fade:hover Property -moz-opacity doesn't exist : 1 1 39 .socialmedia img.fade:hover Property -webkit-transition doesn't exist : all 0.2s ease-in all 0.2s ease-in 40 .socialmedia img.fade:hover Property -moz-transition doesn't exist : all 0.2s ease-in all 0.2s ease-in 41 .socialmedia img.fade:hover Property transition doesn't exist : all 0.2s ease all 0.2s ease 60 #main-nav-search Value Error : padding-top -1.0 negative values are not allowed : -1px -1px 79 .menu2-top-right Value Error : border Too many values or values are not recognized : solid 0 1px 1px 1px #000 solid 0 1px 1px 1px #000 80 .menu2-top-right Property -moz-border-radius-bottomright doesn't exist : 10px 10px 10px 10px 82 .menu2-top-right Property -moz-border-radius-bottomleft doesn't exist : 10px 10px 10px 10px 87 .menu2-top-right Property -moz-box-shadow doesn't exist : 3px 3px 6px #7f7f7f,8px -10px 10px #7f7f7f 3px 3px 6px #7f7f7f,8px -10px 10px #7f7f7f 88 .menu2-top-right Property -webkit-box-shadow doesn't exist : 3px 3px 6px #7f7f7f,8px -10px 10px #7f7f7f 3px 3px 6px #7f7f7f,8px -10px 10px #7f7f7f What does it mean when it says "doesn't exist"? I'm currently having a problem getting the opacity to work. I haven't tried using RGBa yet, but it should work the same as HSLa, and right now HSLa isn't working properly. Usually when I've had a problem, it's just a matter of moving the file around in my finder(I use a Macbook) or I've missed a semi-colon or quotation mark or something.....but with this, I swear I've checked, double-checked, triple-checked everything and it's not working. And I've checked it in Safari, Chrome, and Firefox. Right now I have the Alpha element in the HSLa set to .25, which means it should be quite transparent...but all it does is make the color lighter, not transparent. If I could somehow send someone my files/images and screenshots for you to try and help, that'd be great. Otherwise I'm not sure how to go about getting help. Thanks! This is driving me nuts! I have done everything I think that they says I should do but it is not working...here is the table style I am using if I use normal border styles it works ok...please can someone tell me where I am going wrong...thank you! .nik { background-color: #FFEAA1; padding-left: 1em; padding-right: 1em; border-image: url(border.png) 0% 30% 0% 30% repeat; } oh and the image size is 100px x 100px Kriss I got transitions to work using a simple hover, but how do i make them respond to onclick? Code:
<html>
<head>
<style>
#trans {
opacity:100;
transition: all 1st ease-in-out;
}
#trans:hover {
opacity:0;
}
</style>
</head>
<body>
<img src="myimage.jpg" id="trans" />
</body>
</html>
So my code works fine in webkit(Safari/Chrome), and it almost works in Firefox. If you want to try it out for yourself, just make sure you use a large image, like 500x500 pixels or larger so you can see what I mean. In the tutorial I watched they were able to make it work in Firefox, and the video is almost 1yr old, so it should work. Code:
<html>
<head>
<title>Background Size and Images</title>
<style>
body { background: blue;
margin: 0;
padding: 0; }
#container { background: white;
width: 75%;
height: 600px;
padding: 50px;
margin: 1em auto; }
#container div { background: tan;
border: 1px solid;
margin-right: 50px;
float: left; }
#container #one { width: 80%;
height: 100px;
background: url(samplesample.png) no-repeat;
-webkit-background-size: 100%;
-moz-background-size: 100%; }
#container #two { width: 150px;
height: 50px;
background: url(samplesample.png) no-repeat;
-webkit-background-size: 150px 50px;
-moz-background-size: 150px 50px; }
#container #three { width: 100px;
height: 250px;
background: url(samplesample.png) repeat;
-webkit-background-size: 25px 25px;
-moz-background-size: 25px 25px; }
</style>
</head>
<body>
<div id="container">
<div id="one">
</div>
<div id="two">
</div>
<div id="three">
</div>
</div>
</body>
</html>
So for a long time I've seen that widths for dropdown menus must be fixed for one reason or another. Trying to make it so that the width of the dropdown was dynamic worked in IE, not Firefox, or vice versa. For instance, you had a horizontal nav menu (<ul>), with two items (<li>s), "cars" and "trucks". Under cars you have dropdown links for "Focus" and "Sky" (so the width could be very short) but for trucks you have "Chevrolet 510 Extended Cab" and "Ford Yadda Yadda Yad" (so a long width). The widths of these dropdowns would have to be specified, meaning that 1.) it wouldn't be perfect padding unless you define the perfect width and 2.) unless you want to define a different width for each dropdown, the width would have to be the same for all and you might have a buttload more padding for one (like the first item) than another (the second item). So I'm wondering, if I force my users to CSS3 (which luckily I'm working on a project where I can), does it allow us to ditch this convention, and dynamically size the width of the dropdown based on content? Maybe through display:table-cell? I've looked around and even the fanciest CSS3 dropdowns still appear to have fixed widths: http://webdesignerwall.com/tutorials/css3-dropdown-menu Hey Everyone, I am having trouble getting firefox to behave with a css3 button I have. It's mainly the linking of it but also the style gets out of whack in FireFox. It works perfect in chrome and in safari. Here is the link http://pt11.*******com/index2.php?x=videos.html Im deriving a list of photos with information from my database. I want to be able to print the webpage off without any of the information being broken up between pages. Since its coming from the database I cant just use page breaks cause then I get one image per page. Is there a solution to this? Hi! What is the difference between these two snippets of code? <ul> <li>...</li> <li>...</li> <li>...</li> </ul> and <ol> <li>...</li> <li>...</li> <li>...</li> </ol> I know ul stands for unordered list and ol for ordered list but the two examples above are the same, right? |
|||||||