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 Link to comment https://forums.phpfreaks.com/topic/207707-css3/ 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 Link to comment https://forums.phpfreaks.com/topic/207707-css3/#findComment-1085824 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. Link to comment https://forums.phpfreaks.com/topic/207707-css3/#findComment-1085896 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. Link to comment https://forums.phpfreaks.com/topic/207707-css3/#findComment-1085946 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. Link to comment https://forums.phpfreaks.com/topic/207707-css3/#findComment-1086137 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. Link to comment https://forums.phpfreaks.com/topic/207707-css3/#findComment-1086191 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 Link to comment https://forums.phpfreaks.com/topic/207707-css3/#findComment-1086327 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. Link to comment https://forums.phpfreaks.com/topic/207707-css3/#findComment-1086351 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.