Search the Community

Hi I am having problems with @font-face working in firefox and chrome @font-face { font-family: '3DumbRegular'; src: url('3Dumb.eot'); src: local('3Dumb Regular'), local('3dumb'), url('3Dumb.ttf') format('truetype'); } this works in IE8 Win7. @font-face { font-family:'UniversityRomanStd'; src: url('UniversityRomanStd.ttf'); } Works on local machine chrome/firefox but when site is live it doesn't work. Any Ideas/suggestions??? Kind regards Damien Harrison

Park Lane Vintage Wedding Car hire - Home When I was putting the site together, no problems were reported by the guy I was doing it for. I was uploading the site for him to view (on my own hosting) as I was making changes. I was also checking 'development' in the 4 major browsers without any problems at all. It is now complete and is being hosted by his son's preferred host. Now he says that in IE8, the "contact" and "link" pages have coloured bands that go horizontally right across the page. There isn't a problem in his Firefox. Oddly enough, the pages with the problems are exactly the same code as the other pages without problems, the only difference is a bit of text and the odd jpeg. I cannot replicate the problem across 7 different Windows machines and 1 Mac Pro trying at least 4 different browsers. Can anyone else take a look and see if this site gives problems in IE8 please? It might be a bit slow, and the design was not entirely my idea, so I'm not looking for a critique, just to know if anyone is getting this 'striping' across the pages mentioned. He says there are two bands across the page, and, as he looks at it, a 3rd appears. I have got him to clear his cache, refresh and reload, and he says it is still there. I have no idea what the problem is, if indeed there is one. If anyone sees the problem, please screen shot it for me!

Hi everybody, We have created a Joomla template using Artisteer software, and it displays fine in FF and IE7+, but not in IE6. I've looked in the CSS folder of the template and it even has an IE6 CSS stylesheet The images are attached. Can anybody help me? I've not posted any code as I'm not sure which bits you will need to see so please let me know. Thanks,

Hi all, For those of us who dabble in making our own web apps, i have come across Bootstrap by Twitter. Its a CSS framework to speed up development. Jamie

Hi, I'm developing a site for someone and am trying to get the menu to expand to a sub-menu on scroll over. I've currently got it working as can be seenhere by scrolling over the gallery link at the top, except I'm wanting it to be horizontal like the main menu above it. Anyone suggest a code for it? The current one I'm using is below if that can be easily modified to do it. I'm still picking up CSS so go easy CSS HOVER VERTICAL .navigation ul { margin:0px; padding:0px; } .navigation li { display:inline; height:30px; list-style:none; margin-left:15px; margin-right:15px; } .navigation li a { text-decoration:none; } .navigation li a:hover { text-decoration:underline; } .navigation li ul { margin:0px; padding:0px; display:none; display:inline-block; height:30px; float:left; list-style:none; margin-left:15px; position:relative; } .navigation li:hover ul { display:block; width:160px; } .navigation li li { list-style:none; display:list-item; } HTML </pre><li>HOME </li><br><br><li>ABOUT </li><br><br><li>GALLERY WEDDINGS ARCHITECTURE ENTERTAINMENT PORTRAITURE LANDSCAPES OTHER </li><br><br><li>CONTACT </li><br><br><li>PARTNERS </li> <br><br><br><br><br><b Cheers!

I need a bit of help with this... Im doing some work on our website and I want to incorporate a few CSS3 elements into the mix. The elements are box-shadow, border-radius and text-shadow. As you can see from the 3 screen shots, in chrome, everything works as it should. There is a shadow around the outside of the site, the horizontal menu has a drop shadow under the text and headings on the page have rounded corners. Opera has a shadow around the outside of the page, drop shadow under the text but no rounded corners for the headings. IE9 has a shadow around the site, no drop shadow under the text and no rounded corners on the headings. 1. Box Shadow - this should work in IE9 but I have had to include a line in the css to run a file called ie-css3.htc. I would have included this anyway to make it work in IE8 but why doesnt it work in IE9 without it. Heres the css im using to create a box shadow around the outside of the page. .shadow { -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 1); -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 1); box-shadow: 0px 0px 15px rgba(0, 0, 0, 1); behavior: url(https://slp2.somerset.gov.uk/schools/rbsc/_catalogs/masterpage/ie-css3.htc); } 2. Border Radius - Aparently this should also work in all three browsers but it only seems to work in Chrome, Firefox and Safari. Opera and IE9 dont seem to be able to cope with the rounded borders. heres the css im using .ms-WPHeader td { border:1px black solid; height:24px; padding: 0px 0px 0px 8px; background:url(https://slp2.somerset.gov.uk/schools/rbsc/Images/button_bg.jpg); border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; behaviour:url(https://slp2.somerset.gov.uk/schools/rbsc/_catalogs/masterpage/ie-css3.htc); } 3 - Text Shadow - This should work in all browsers but again, it doesnt appear to work in IE9. CSS below .ms-topnav { font: bold 13px "Verdana"; border:none; border-right:2px solid [url=http://www.edugeek.net/misc.php?do=dbtech_usertag_hash&hash=fff]#fff[/url] background-color:transparent; background-image:none; background-repeat:repeat; background-attachment:scroll; height:40px; text-shadow:1px 1px black; behavior: url([url]https://slp2.somerset.gov.uk/schools/rbsc/_catalogs/masterpage/ie-css3.htc[/url]) } All of the browsers im using should support CSS3 by default and I cant see any reason why its not working. The site is based around Sharepoint. Im starting to think that it might only be my computer that is not displaying the site correctly but because ive got the only copy of IE9 in the school, I cant test on anyone else. Does anyone have any experience with CSS3 and help me out. Its not a major problem but I would like to get it right. And sorry for such a long post. Thanks! James

We're looking for a student to teacher blogging and social network solution. Each teacher wants their own page with the ability to add docs, images and links only on their page. I would like it to synch with our Active Directory (it's a local web server) so I don't have to manage another set of user/passwords. Any suggestions on a solution you have success with?

Can somebody please explain to me how some simple CSS code can display so differently when viewed in IE8 and when viewed in Firefox? I've attached pictures of the particular piece, I use FF and so I've spent time making the tweaks etc to make it work and when I opened it up in IE8 it looked completely different! The CSS code for the "Send" button which is written in the section: <br /> input[type=submit] {border:1px solid #A8A8A8; background: #FBFBFB; width:100px; height:40px; margin-left:300px; }<br /> input[type=submit]:hover {border:1px solid #A8A8A8; background: #FBFBFB url('images/text_focus.png') repeat-x;; width:100px; height:40px; margin-left:300px; }*/<br /> and the actual button: It looks correct in FF but IE8 doesn't seem to apply any formatting? Similarly with the textarea, in FF the box has a grey focus image across the top when clicked, nothing in IE8. <br /> textarea:focus { background: #FBFBFB url('images/text_focus.png') repeat-x; }<br />

Been finishing off the last bit of my A Level IT cwk. But have hit a bit of an issue, i have created a horizontal menu that has drop downs however on the front page and on a page that has video content embedded the drop down bar disappears behind either the picture slide show or the embedded video. Does any one know how i can rectify this so that the menu always appear on top? Cheers

Hi, We recently updated our school website using a free template and did some customisation via Custom overrides. I know it is probably one of these that is causing the issue but cannot seem to find the problem. The website works fine on chrome and firefox, but some people who are using IE are having issue of the top banner not showing and the drop down menus disappearing. Any help would be greatly appreciated. It is Joomla with the free Afterburner2 template. The web address is Home The custom code is below: body {color:#000000} #rt-top-surround, #rt-footer {background: #0073CF;} .gf-menu .dropdown {background: #005CA5;} .gf-menu.l1 > li > .item {line-height:30px;padding: 0 20px;} .gf-menu li:hover > .item {background: #ffffff !important;} .gf-menu .dropdown ul li.active > .item {background: #ffffff;} .button, .readon, .readmore, button.validate, #member-profile a, #member-registration a, .formelm-buttons button, .btn-primary, .btn.btn-primary.disabled, .btn.btn-primary[disabled], a.btn.btn-primary.disabled:hover {background: #0073CF;} /*Menu Settings for phones and tablet*/ @media (max-width: 767px) { .layout-mode-responsive .gf-menu-device-container {background: #005CA5;} .layout-mode-responsive .gf-menu {background: #005CA5;} .gf-menu li:hover > .item {background: #0073CF !important;} .layout-mode-responsive .gf-menu li .item {line-height: 21px;} }

I only need help with this 2 layer nav bar as I have all my other code set up and working fine - need something like below - where the pipe lines ie | indicate a division in the nav bar between the links / tabs Just as an FYI trying to put something together for a charity ( animals in need / maxicare ) as it could still do with a much neater look / more professional / easier to find stuff etc Current website for them is below http://www.animals-in-need.org/ verbatim, 1st layer home | Lost & Found | Current Events | Links | Contact Us 2nd layer underneath home --> Maxicare | Animals In Need | Shop | Donations & Sponsorship Underneath Lost & Found --> Lost | Found Underneath Current Events --> News & Events | Press & Media Links tab will literally load a html page that has a number of links that will be of interest to people who visit this site which will be about 15 links so dont think they will all fit in the 2nd layer ( correct me if I am wrong ) Contact Us - Again this will be one page where I will have a google map indicating how to get to where they are located, contact telephone number, address ( usual gumph really )

Hi, I have pulled apart the Moodle clouds theme. I would like it to that the page will go to a width of 1280 but when displayed on a higer Res screen i would like to to display the background. After much messing arround i cannot find how do change it. Can anyone advise please? styles_clouds.css.txt

Its about 8px in from the very edge of the browser window if I use top:-8px left:-8px; it fits correctly any thoughts on what to check there is no CSS for the body? Wes

Link: The Simpsons in CSS http://i.snag.gy/oSETz.jpg

I am using the Twitter Bootstrap css framework on an application and have an odd issue - when I specify a select, it comes with a strange background behind the curved outer edge. You can see the curved edge and then a rectangular box. What is causing this? Other input types display correctly, it is only the select which has this.

The page behaves as expected in Chrome and Firefox, both desktop and Android versions, but with Internet Explorer triggering a CSS element that extends the page downwards causes the background to repeat rather than extend. Possibly not describing it too great, so here's some hopefully-clearing-it-up screenshots.. CSS for the background is: html { font-size: 1em; background-repeat: no-repeat; background: -moz-linear-gradient(#FFFFFF, #CCCCCC); /* FF 3.6+ */ background: -ms-linear-gradient(#FFFFFF, #CCCCCC); /* IE10 */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFFFFF), color-stop(100%, #CCCCCC)); /* Safari 4+, Chrome 2+ */ background: -webkit-linear-gradient(#FFFFFF, #CCCCCC); /* Safari 5.1+, Chrome 10+ */ background: -o-linear-gradient(#FFFFFF, #CCCCCC); /* Opera 11.10 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr=#CCCCCC); /* IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr=#CCCCCC)"; /* IE8+ */ background: linear-gradient(#FFFFFF, #CCCCCC); /* the standard */ min-height: 100%; min-width: 768px; } Any idea how (or even if?) I can prevent this happening? Happy to PM the page to members if need be, just not posting it for all-and-sundry because it identifies my school

#content { position: relative; width: 768px; margin: auto; padding-top: 20px; } Stuff VS div.content { position: relative; width: 768px; margin: auto; padding-top: 20px; } Stuff I know functionally they both do the same thing, both elements would look identical using the code above, but what's the general census as to which way (and why) the 'proper' syntax is? Going off gut-feeling, it makes more sense to me to do div.class, because you're going to have multiple different types/classes/styles of div, but then again, if I'm going to div.content, div.header, div.footer, etc, it makes more sense to #content, #header and #footer for (minutely) smaller filesizes.

Help! Can a guru check out http://www.st-leonards-pri.lancs.sch.uk/cal/calendar.html and see why it looks plain in IE (tried in 7 and 9) but is "nicely :)" formatted in FF (4) I'm sure its something simple (e.g not getting it right but FF being more forgiving than IE ) Si

is it possible to force a font down through all styles? im having a problem where font declerations from word are being passed into a schools website. and i know that if i spend my afternoon fishing out all the style declerations from the page sources it will be fine untill they copy another word doc in and i have this problem all over again. so is it possible to force a style to go down all the levels and over ride any stlyes declared on the fly?

Hello to all, First, i"m a teacher webmaster and using ideas from your site for a long time now. Great works! Thanks... I already have a joomla website and i'm trying to change my template to use yours: axe_rescheek_blue. I've downloader edugeek-package and compress the template, but it's not working. On my joomla site, i have a message saying: wrong package. I go to on the axe website but it seems you modified original template. Where can i download yours? Thank you so much. Greetings