otuatail Posted July 14, 2010 Share Posted July 14, 2010 Hi I thought I would try out CSS3 as it is suported by the latest version of firefox. My example should use an image for the sides of my box. Am I doing thiss wrong or have misinterpreted the whole thing. standard { FONT-WEIGHT: normal; FONT-SIZE: 20pt; COLOR: red; FONT-FAMILY: 'Arial Narrow'; } .pic { border-image: url(border.png) 27 27 27 27 round round; border-style:solid; border-width:1px; width:200px; height:200px; } <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META HTTP-EQUIV="imagetoolbar" CONTENT="no"> <LINK rel="stylesheet" href="css3.css" type="text/css"> <title>CSS 3 Test</title> </head> <body> <div class="pic"> Test using firefox 3.6.6 & IE8 </div> <div class="standard"><br /><img src="border.png" alt=""></div> </body> </html> TIA Desmond Quote Link to comment Share on other sites More sharing options...
haku Posted July 14, 2010 Share Posted July 14, 2010 While FF does implement a lot of CSS3 selectors, they are mostly (all?) prefixed with moz-. So you want to use: moz-border-image Quote Link to comment Share on other sites More sharing options...
otuatail Posted July 14, 2010 Author Share Posted July 14, 2010 Hi I have tried that but it dosn't make any diffrence. is moz = mozilla if so that means we need diffrent css for each browser. Link: http://www.des-otoole.co.uk/css3/css3.php Desmond. Quote Link to comment Share on other sites More sharing options...
haku Posted July 14, 2010 Share Posted July 14, 2010 Yes, with CSS3 selectors, you often need more than one declaration to get the different browsers. forexample when using box-shadow, you need to use moz-box-shadow webkit-box-shadow khml-box-shadow box-shadow And even that won't target IE. But nothing does - it's IE. Quote Link to comment Share on other sites More sharing options...
otuatail Posted July 14, 2010 Author Share Posted July 14, 2010 If we go down this route then we are going to get an over bloated css file. I still can't get this simple code to work in firefox. Quote Link to comment Share on other sites More sharing options...
haku Posted July 15, 2010 Share Posted July 15, 2010 If you want to use CSS3 selectors, then you don't really have any other option at this stage in the game. As for bloat in CSS files, to give you a bit of perspective, one small image on a site will be much larger than your largest CSS file you would have on pretty much any site. So a few extra lines of CSS code isn't going to make a big difference in your download speeds. Quote Link to comment Share on other sites More sharing options...
otuatail Posted July 15, 2010 Author Share Posted July 15, 2010 Ok for this but the changes to my css sugested above still have not managed to work. Link: http://www.des-otoole.co.uk/css3/css3.php Desmond Quote Link to comment Share on other sites More sharing options...
haku Posted July 15, 2010 Share Posted July 15, 2010 Sorry, mistype in my original post. It should be: -moz-border-image you need a hyphen at the start. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.