I have created a website and hosted, www.sellrfinance.com
The font submit button has no font, the same font is being used and shows but no the button, I have followed every guide on stackoverflow to see why this happens but at no success, adding link in the header, ect, I want to figure out the issue so I don't have it in the future.
Many thanks
The issue is with the wrong font-weight given on the submit button CSS:
change .contact button{font-weight:75%} to .contact button{font-weight:400}
The font-weight should be a number like 100, 200, 400, 700 and not a percentage value..
Related
I'm having a weird problem with a section of my site.
on an h2 tag, I want to use the CSS ellipsis property
whenever the text is overflowing the screen size.
Now, this is a repetitive section I am using on this page - and the only difference is the font applied to the h2 tag - so I know the CSS style I am using is good
(overflow: hidden, text-overflow: ellipsis, and etc...)
Can anyone help me find what is the problem?
here is a screenshot of the section that is working the right way:
here is a screenshot of the section that is not working the right way
You can visit the site at -
https://www.hacollective.com/
and test in mobile size in order to see the difference.
The id of the part with the h2 problem is "col-221542828"
Thanks in advance,
Shahar.
The problem with missing ellipse points lies in the font specified for this h2 - font-family: tzur,sans-serif!important.
Here:
.font-tzur {
font-family: tzur,sans-serif!important;
}
Which are loaded from the font-load-tzur.css file.
Check the correctness of loading this font tzur.
For example - If you put a different font, the ellipse points will appear.
I have tried to change font size of jqxtree, but nothing worked.
Below are the tries:
Appliced embbed style for jqxtree div
<div id="jqxTree" style="font-size: 8px;"></div>
Appliced css style for jqxtree div
<div id="jqxTree" class="treeClass"></div>
.treeClass{
font-size: 8px;
}
I googled and found that font size can be changble by custom theme. But I am looking for is there any way just change the font size of jqxtree without using custom theme. I know that custom theme is good option but right now my requirement is very small. As just want to change the font size do I need to load such a big js file and assuming may face any other issues and understanding css code bit stuff.
Url for change font size via custom theme: http://www.jqwidgets.com/community/topic/changing-font/#post-22806
Note: loading data via JSON. I looking to fix this issue by css if possible.
Please help me to fix this issue by simple way. Thanks in advance!!
This issue was resolved.
#jqxTree li{
font-size:8px;
}
Please refer the below fiddle,
http://jsfiddle.net/zp5qeqn5/
Thanks to all!!!
I'm trying to create an iframe target structure, but I'm having some trouble. I can't give an example of the code here, because it just turns into the actual iframe. The problems I've been having are with the font size. I'm using font size="18" but it doesn't work. I've also tried several other methods. The code I use for font color works, so I don't know how to specify the font size. I also want to use a background color on my link to make it appear more like a button but I haven't been able to find a code for that. I'm a beginner and don't know much about coding so be patient with me. Thank you.
If you can modify the iframe source.
You can do it in css like this
.class {
font-size: 18px;
}
or as inline css
<p style="font-size: 18px;">Text here</p>
I can't get a input button to change its font size unless I change the background color.
this html:
<input type="button" id="startStop" value="start" />
and this css:
input#startStop{
font-size: 3em;
}
result in this:
which is exactly the same as with no styling at all.
Nothing I do to the css changes it: making it 60em; changing how I select it; they all result in the same, default-looking button.
I inspected it in Chrome, and the style is actually hitting the element, and not getting overridden:
But somehow the computed style isn't working:
(that's with a base font-size of 1em for the whole document. and, no, changing the base font-size has no effect)
The only thing that changes the font size it is if I give it a background-color:
input#startStop{
font-size: 3em;
background-color: white;
}
results in this:
Can anybody tell me what is going on?
EDIT: #Hashem Qolami, thanks for posting it in an external editor, which I should have done. When I look at your JS bin, it looks like this:
EDIT 2: it's browser specific.
The error is only occurring on Chrome, Safari and Opera, and only on Mac.
If renders correctly on Firefox for Mac and on all browsers (IE10, Chrome, Firefox, Safari, and Opera) on windows.
Indeed this only happens on WebKit-MacOS based browsers. Seems to be a WebKit restriction so that the Aqua appearance stays always so.
As long as the Aqua appearance is enabled for push buttons, certain CSS properties will be ignored. Because Aqua buttons do not scale, the height property will not be honored. Similarly font and color customizations will also not be honored. The overriding principle for push buttons is that you will never see a button that is some “half-Aqua” mix. Either the button will look perfectly native, or it will not be Aqua at all.
Source: https://www.webkit.org/blog/28/buttons
Which explains why setting a background makes font-size works; it breaks the Aqua appearance.
#pzin's response got me started on the right track. He's right in that anything that breaks aqua will get it done. The recommended way to handle it without having to specify a background color is this bad boy:
-webkit-appearance: button;
Setting a border property should also work. But I think -webkit-appearance: none; would be the best approach, as it "turns off" the Aqua appearance on MacOS browsers, so any other form control that Aqua inhibits CSS for would subsequently be style-able with your choice of CSS. Was meant to add this as a comment, but don't have enough reputation ;_;.
I see that you successfully had solved the problem, but I wonder, if the only problem is to make the button bigger, why sticking to font-size method while you can also change the button size by width + height or padding.
I'm working on a site at the moment, and an image that is used as the background for a submit button (current the button is normal HTML button, but will be changed to an asp:Button when developed).
Another developer pointed out that this button seems to have a white background. Thinking the image wasn't saved correctly, I opened it up in Fireworks and the PNG image had a transparent background. I exporting the image again, saving it as a PNG-32 image, and overwrit the original image with the new one. The image still appears the same.
Bizarrely, this occurs in Chrome, Firefox and IE 7/8, and the other images on the page don't have white backgrounds either.
Also, I have checked the CSS and there are no styles that contain a white background colour element.
Any one got any ideas?
Many thanks!
Due to the site being built in ASP.NET, changing the button to be an linked image and using JavaScript on it then isn't an option.
However, on the developed ASP.NET site, this issue is also occurring. But I've managed to fix it in ASP.NET by doing the following:
When calling the button, I've typed this out to begin with:
<asp:Button ID="GoBtn" runat="server" CssClass="searchbutton" />
Adding the parameter "BackColor="Transparent" removes the white background from the button. So the tag now reads as:
<asp:Button ID="GoBtn" runat="server" CssClass="searchbutton" BackColor="Transparent" />
This removes the white background in ASP.NET. At a total loss to explain why the button has a white background on it. Although I have read that using a GIF could solve the problem, but I haven't had time to see if this is true or not.
EDIT (24/01/2010)
I found out how to fix this issue in the HTML document, by pure accident!
What you need to do, in the CSS you have to call the following:
background-color: transparent;
border: none;
This removes the grey/white background on the back of the button, and it also removes the border of the button.
try adding
border: none;
to your button style.
I think if you have already tried setting:
submit{background:none;}
and such. Then you should try changing the submit to be just a link with an image instead and calling it via a javascript, I'm thinking it's the button type that does it.
Edit (20th Jan):
I expected that some ASP would solve it (I can't really stand when something like ASP has to interfer with the layout of anything).
If you want to solve this for your HTML version I think you should provide a link or copy it into a fiddle, because it's probably easy to find out what's causing it. My bet is on some inherited style you can't overwrite. Sure you're not using !important or such anywhere in some generic styling?
It's kinda weird :D
check this fiddle out ..You could try to set to that input background the url of your image and just see what happens (if it's public..or you can upload it on imageshack), so we can exclude that there's a prob with that particular image