CSS @font-face not working with Firefox, but working with Chrome and IE

The following code works in Google Chrome beta as well as IE 7. However, Firefox seems to have a problem with this. I'm suspecting it to be a problem of how my CSS files are included, cause I know Firefox is not too friendly about cross-domain imports.But this is all just static HTML and there's no question of cross-domain.On my landing-page.html I do a CSS import like so:<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" />Within the main.css I have another imports like so:@import url("reset.css");@import url("style.css");@import...

Change text color for GtkToggleToolButton with CSS sheet (GTK+3)

I'm trying to use a CSS sheet for changing properties on my GTK/C application. In a dialog, I have a GtkToolBar with GtkToggleToolButtons. I would like that texts of these buttons are of different color.I used to write something like that in a CSS sheet:#histoToolGreen { color: green;}#histoToolBlue { color: blue;}and it was working with GTK 3.20 (but only when buttons was off). But now, with gtk update, it is not working anymore.The name of the buttons are histoToolGreen and histoToolBlue.Could you tell me how to change color of GtkToggleToolButton using a CSS sheet ? ...

Foundation: how to change h2 font-size?

On our WordPress blog, it seems the style is inherited from the foundation.css file.In particular, the font-size of headings, that we would like to change.For instance, on this page, when we inspect element, it seems that the font-size of h2 is defined in foundation.css, on line 2813.So, we changed the size of h2 in the foundation.css file, on this very particular line, but we still get the same result.It seems like something it overriding our changes.What is the right way to change headings font-size? If you change the size and it doesn't work into your css,You can Add ...

Online - avatar Image with viewport

I am using viewport for this project in order to be responsive. I want to have an avatar in the top right corner to show the user avatar and a green circle to show he is online.Problem is I can't make the circle be responsive If I increase or decrease the size the circle will move. A couple of images:BigSmallHTML: <body><img class="img-header" src="https://images.vexels.com/media/users/3/129616/isolated/preview/fb517f8913bd99cd48ef00facb4a67c0-businessman-avatar-silhouette-by-vexels.png"><p>Username</p><img class="online" src="http://www.clker.com...

button is not showing image

I use 3 buttons in my extjs script. Strange thing is that i don't see them. If i use firebug to inspect the element i see this<button id="button-1051-btnEl" class="x-btn-center" autocomplete="off" role="button" hidefocus="true" type="button"><span id="button-1051-btnInnerEl" class="x-btn-inner" style="">&nbsp;</span><span id="button-1051-btnIconEl" class="x-btn-icon" style="background-image: url("../resources/themes/images/default/grid/page-prev.gif");">&nbsp;</span></button>That is the correct gif file and it is on the server. Is...

Hiding blank lines

I have a form for printing with code that looks like this:<p><span style="font-size:18px;"><small>[GUESTADDRESS]<br /> [GUESTCITY]<br /> [GUESTCUSTOMQ4]<br /> [GUESTPOSTCODE]<br /> [GUESTCOUNTRY]</small></span></p> </td>When I want to print, I get a blank line if there is no entry for a particular field.Is there a way to hide blank lines for printing?Please keep it simple for me as I am not an expert. I think that this is CSS, but I am not sure! if there is no entry for a...

Resolution issues with Windows Phone apps?

I'm building a Windows Universal App, and at the moment, I'm making the Windows Phone app. I'm debugging using a Nokia Lumia 520 which has a 480px * 800px display.Because I'm using HTML5 & Javascript instead of XAML to build the app, I'm worried that it might look bad on a 1920*1080 Windows Phone or another Windows Phone with higher resolution. Because I have no way to test this theory, how can I be sure that all Windows Phone's will display my app correctly? Visual Studio gives you a lot of Windows Phone emulators all with different device and screen sizes . In Visu...

Font-size relative to body?

Is there any way I can have font-sizes relative to the body font-size setting?I know I could use percentages like this:body{ font-size: 14px;}p{ font-size: 150%;}But this produces unwanted results on nested elements, where the font-size becomes relative to the parent element:li{ font-size: 150%;}li li{ /* ... */} CSS3 introduced rem(root em), which is html. Unlike em, which sets the unit relative to the parent font-size, rem will set the unit relative to the root. Here is a great article on rem: >>>CLICK HERE<<<CSS:html { font-size: 14px;}p { font-si...

Safari iPhone sometimes increases font size when going back

I've made a webpage for myself: http://av.nettfolk.no/ When I use Safari on my iPhone (5 and 6, 9.2.1), tap on a link to a certain site (Inma), and then go back to my site, some fonts increase in size.For the other sites, they don't change when I go back to my site.If I visit this certain site, and go two pages deep, then go back two steps to my site, then the fonts are the right size. I've tried a bunch of things, but I just can get this to work.Does anyone know why this is and how I can fix it? It worked when I double checked one of my previous attempts and found that ...

How to remove Firefox's dotted outline on BUTTONS as well as links?

I can make Firefox not display the ugly dotted focus outlines on links with this:a:focus { outline: none; }But how can I do this for <button> tags as well? When I do this:button:focus { outline: none; }the buttons still have the dotted focus outline when I click on them.(and yes, I know this is a usability issue, but I would like to provide my own focus hints which are appropriate to the design instead of ugly grey dots) button::-moz-focus-inner { border: 0;} [XXX]No need to define a selector.:focus {outline:none;}::-moz-focus-inner {border:0;} [XXX]...

Angular 5: fade animation during routing (CSS)

I have 2 routes :export const appRoutes: Route[] = [{ path: 'page1', component: Page1Component, data: { animation: 'page1' } },{ path: 'page2', component: Page2Component, data: { animation: 'page2' } },];My Route animation :export const routeStateTrigger = trigger('routeState', [ transition('* => *', [ query(':enter', [ style({ position: 'absolute', opacity: 0 }) ], ...

Font Scaling on iPhone 6 plus looks like rasterized scaling in Revolution Slider

I am working on a site, vimaxmedia.com and we are using revolution slider. The slider is configured to be Full Width Responsive.The problem I am having is, on the iPhone 6+ for some reason, the font looks like it is not scaling as a vector font, but a rasterized font. I have tried replicating the issue on my desktop, but I am unable to and I am unsure how to even start debugging this. I do have access to a 6+ to test.Has anyone else had this issue, and does anyone know of a fix? I figured it out. It appears that the way revolution slider is calculating the matrix3d trans...

css command that does the same effect as a.selected, but for a <p>

I want my p to change color as soon as I click on it, and come back to the original color as soon as I click on another p. Somehow like it is done for a list of a href, where you use the command a.selected. Is this possible for p? and how?Thanks. Normally, a p element is not selectable, but on modern browsers, and by the HTML5 CR, you can make it selectable by assigning a positive tabindex value to it. Then clicking on such an element will set focus on it, and it will match the :focus pseudo-class. Example:<style>p:focus { color: red; outline: none }</style>&...

CSS Font Colour when creating dropdown+hover menu

I'm trying to make a nice-looking CSS menu, for this website. (The domain is just a sandbox, not the actual website I intend to use the designed pages on!)As you may be able to see, there is a CSS menu at the top. When you hover over one of the sections, it drops down all nicely, but the sub-menu text is staying black, instead of the #CCC (grey) colour that I wanted -I need black for the hover font colour, for aesthetic reasons. I checked out the current CSS styles in the Inspector part of Google Chrome (F12), and the #CCC part of the section has been crossed out. From what...

Font renders thicker in browsers

I am using the Open Sans font on a web site, but it appears much thicker in all browsers than in Adobe Illustrator (see attached images). Why is this and is there any way I can get the font in the browser to display "thinner" please?NoteBoth the browser and Illustrator are rendering the Semibold weight (600) The issue was with aliasing. The following css solution will work for safari, chrome and firefox:-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased; [XXX]Make sure you're including the light (300) and normal (400) weights for Open Sans, then yo...

When using "Viewport Height/vh" in CSS does it include the "browser bookmark bar" in the total?

In Chrome the bookmarks bar is disabled with command+shift+b. Should I always be testing sites with this disabled for the browser to truly be "100%"? Or does having this enabled actually make the "vh 95%" for example? vh uses the size of the viewport. So if you have the bookmarks bar open, then your viewport height is going to be smaller. Would be similar to just resizing your window and make the height smaller.https://www.w3.org/TR/css-values-3/#viewport-relative-lengths The viewport-percentage lengths are relative to the size of the initial containing block. When th...

Page 1 of 144  |  Show More Pages:  Top Prev Next Last