CSS - Css Clip Property - Explanation Required
Hi,
i need a simple, clear and easy to understand explanation of the parameters given to the CSS 'clip' property. i understand what the clip property does in essence - basically clips a rectangle from the given image - but i do not understand how the points given to the rect() function work - i cannot visualise it. My book does not describe it very well and the websites i have visited dont either. Therefore id be grateful if someone could give me a simple explanation Thanks Similar TutorialsAs you might know, IE6 and IE7 have a separate syntax for CSS clip attribute: Standard CSS: Code: .myclass{ clip:rect(0,286px,168px,251px); } IE6 and IE7 do not like the commas : Code: clip:rect(0 286px 168px 251px) My question is: Does IE8 keep the IE6 and IE7 behavior? Or it follows, finally the standards? I don't have (nor I don't want to) IE8 installed, so that... The address is www.clydesdaleframes.com/test/index.html In FF the top image is clipped correctly. But in IE 6&7, it is not. Also, another problem to tack on here... at the bottom , I want the background of my unordered list to go all across like the caption at top which is a heading. FF works but IE doesn't once again. HELP!!! Thanks, Chris What I don't understand about the following code is why the body background color is showing inbetween the divs that mark the header, content, and footer. I want no separation between the divs (margin 0, or so i thought). Can someone explain what's going on? Help very much appreciated. <html> <head> <style> body { background-color: black; } #header { background-color: red; margin: 0; } #content { margin:0; background-color: #ffffff; } #footer { margin: 0; background-color: red; } </style> </head> <body> <div id="header"> <h3>Header</h3> </div> <div id="content"> <p>Content</p> </div> <div id="footer"> <h3>Footer</h3> </div> </body> </html> Hi there, Just playing around with some CSS menu tricks when I came accross this piece of CSS which I don't understand. Code: #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{ display: none; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{ display: block; } I know that it is being used to display and hide a popup menu, on mouse over. How is this read though? Thanks. Hi, I have been trying to get up to speed on the workings of css positioning and have hit a stumbling block very early on. I would like to know what 'normal' means when the w3schools docs say that: (I'd provide a link but this site forbids me to do so) 'A relative positioned element is positioned relative to its normal position.' Could anyone provide a definition or explanation? I'm battling to figure out the basics here. Thanks Jim Hello I would like to know the difference between: *name .name #name thanks Hi I have put together a home page using code from around the web and adjusted it until I have something that I like I think. My home page uses some css for color and style but I want to repeat my menu throughout the site, and clean up the css but dont have a clue what to do. I am not sure I can do this but if I put up my code and home page template would someone look at it for me please? Thank you Tiler Is there such a thing as using an alt property for <img> tag? This would be awfully useful for SEO Heya everyone, The next item on my todo list is to work on a design for DynaSig with just CSS for layout rather than the current tables. I haven't used CSS to create a really complex template before and I am not sure where to start. I want it to look pretty much exactly the same as the original. So. What do I do first? What should I learn and complete first? I'm kinda stuck on this one, and I don't want it to get put on the back-burner. Thanks for ideas/tips/comments/help/whatever comp Hello All, First time poster here. I am pretty new to CSS and this is one of my first attempts so bear with me. On the page below the image on the right and footer are touching. I have tried adding a "margin-bottom" to the main content area and also a "margin-top" to the footer wrap but neither seem to work. Generally I want to put a space of roughly 15px between both. This issue arises on Firefox, Safari & Chrome. Seems to work fine in IE. www . kmsjoinery . com/wip/lamella.php Any help would be greatly appreciated. Hi Guys, Hope someone can help out here.. I am trying to create a page with a header and footer and a middle portion for the content. I am not used to using CSS and I thought I had it working but when I test in IE it doesn't quite work as expected.. The footer removes itself from the bottom of the page and the scrollbars for the maincontent extend below the footer.. You'll see what I mean if you open this in IE: http://www.modelglamorous.com/div_test.htm http://www.modelglamorous.com/css/mainstyle.css It works perfectly in Firefox but not in IE.. I think it's something simple but I am not sure how to fix it.. TIA, N. I'm trying to create some links that swap background images when you mouseover them. The non-CSS solution (which looks exactly how I want it to look) is located he http://84.9.221.75/domains/backingt...Musicindex.html My attempt at creating a CSS equivalent of those links is located on this page: http://84.9.221.75/domains/backingt...Musicindex.html I just need some help with the CSS I'm using on the latter page...I read up a little on how to do this, but it's obvious I'm still doing something wrong... I need the buttons and the text inside the buttons to line up and appear like they do in the first URL....can anyone give me some pointers here? Thank you. This style is use useful or not @property-group title-style() { color: #004080; font-weight: bold; } @property-group standard-vmargins() { margin: 1.33ex 0; } title, subtitle, titleabbrev { display: block; property-group: title-style(); property-group: standard-vmargins(); } This is not support IE... I'm pretty new to css but now use one css file for all of the formatting of my entire website. The only problem I see with that (I say problem because I can't figure out a way around it) is that all of my hyperlinks throughout the website have only one normal state, hover state, active state and visited state. Is there a way to make more than one hyperlink set of formats? Like if I wanted to make one for each page? I could do something like ahomepage:link, ahomepage:visited, ahomepage:active or something??? Code: a:link, a:visited, a:active { font-size:12px; font-weight:normal; font-family: times; text-decoration:none; color : #000000 } a:hover { font-size:12px; font-weight:normal; font-family: times; text-decoration:underline; color : #000000 } Ok what i want to happen is that when person clicks on a link i want a div to appear/be visible underneath that link. But i want that div to not take any space unless i click on a link. I recently did something similar BUT the div was taking the space but was just hidden. Thanks for all the continued help/support. . . Makes learning CSS so much easier! Link: www.vairlinecms.com Question: I set the html up like this on purpose to grasp the concept. <p> tags are block level containers. So each new set of <p> tags should equal start on new line. w/the float property holding a value of left, it floats all content to the left. Since each instance of float occurs in its own container...the two different <p> sets should not be affected. In short, the password: paragraph should be on a new line, not both on the same line. There should be no need to clear it because they are in their own containers - which are block level. Where is my logic/understanding of CSS flawed? HTML: Code: <div id="clientLoginBoxBody"> <form action=#"> <br /> <p class="user">Username:</p> <p class="pass">Password:</p> </form> </div> CSS: Code: #clientLoginBoxBody p.user, p.pass { float: left; margin: 0; margin-left: 10px; padding: 0; font-size: 12px; text-align: right; } Hi, i am very new to css and I am confused about the difference between margin-top vs top please help Regards Ltoso My documentation for css shows that content: url(); works in navigator but not in ie. The info I've got is dated. Does the content property work in the newer ie browsers? I am trying to figure out how I can get this red curve to align to the bottom of the page, while also being able to move up and down with the size of the browser window. http://www.woodrichwebworks.com/psa/psa_comps/bycor/html/redtest.html Any help would be great. I am wondering if there is some way to make a <div> layer automatically expand to the full height of the screen similar to the way that one would use width=100% when talking about the width of a page. I have a layer that I want to extend to the bottom of the page no matter what resolution the user has on their screen. Maybe the layer could just extend all the way until the next layer? Any Ideas? Thanks Jamie |