Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Firefox renders special character too small. I compared in Chrome and Firefox.
You can check - http://jsfiddle.net/y23rwucp/
How can I do same size in all browsers using px:
font-size: 14px;
Thank you
Screenshot
P.S. I'm testing on Mac.
As the comments suggest, using dingbats (or any font not designed for this perpose) for this is not optimal. A proper replacement would be ×:
span{
font-size: 14px;
font-weight: bold;
}
<span>×</span>
You could also make a class and use the before. You can use this as simply
<span class="Times"></span> or put text in the span (required a tad more css)
.Times:before {
content:"\00d7";
font-weight: bold;
}
This might be worthy to add: Font Awesome does the same thing I just did with the :before, only they have a lot of icons. If you need various icons in your site, you might want to check this out.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I'm currently new(ish) at HTML. What I'm trying to do is Make a centered "Hello!" That has the font of Georgia and the font color of purple. This is what I have right now:
<div style="<font face="Georgia" color="purple"">
<center><h1>Hello!</h1></center>
</div>
I'm not even sure if I'm doing it correctly, but right now it's hard to find an anwser without having to use CSS, and I have no idea how CSS works.
Yes, CSS is required. HTML just builds the layout and framework of the page, while CSS styles it and makes it visually appealing / formatting how the page fits with everything. You should learn CSS. It's an excellent language that fits with HTML, and it will be very useful for later website development. Also, the tags <font> and <center> have been obsolete, so you shouldn't waste your time using them. You should look at the documentation for up to date HTML5 tags. Learning CSS will make this process a whole lot easier.
CSS:
.hello {
color: purple;
font-family: Georgia, Times, Times New Roman, serif;
text-align: center;
}
HTML:
<p class="hello">Hello!</p>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I would like to achieve this text format.
<p>you 10 oz bottle</p>
The text number "10" and text "oz" has same height. Is there anyway to achieve this? Or do I need some fonts to achieve this text format? Can someone please help me. Thanks in advance.
Not a lot to go on. But I'll try.
body {
font-family: Arial, sans-serif;
}
.size {
font-size: 0.75rem;
text-transform: uppercase;
}
<p>
I have a <span class="size">10 <span class="unit">oz</span></span> bottle.
</p>
Notice the source text is lowercase. After the CSS is applied it is uppercase.
Though I am a bit wary that this might not work for all fonts, numbers, letters etc. The baseline positioning and heights of some characters may not work out as well as it does with Arial. That is why I wrapped oz in a <span> so it could be individually targeted if the font size needs adjustment.
Wrap your the number in another element you can target to adjust the font-size accordingly. Or simply wrap it in small tags.
<span>You have <small>10</small> oz bottle</span>
<span>You have a <small>10</small> oz bottle</span>
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
What is the difference between
<span style="text-transform: uppercase;">some text</span>
and
<span>SOME TEXT</span>
I mean both look exactly the same, but I have read somewhere that it is better to write the text normal in html and then set text-transform: uppercase; in CSS, but does it really make a difference? I know you can use text-transform: uppercase; if you want to automatically capitalize every first letter of all paragraphs on a page with pseudo-elements (:first-letter). I think it would even use more memory and processing/rendering time if you use text-transform: uppercase;.
From a design and content perspective, the CSS option is better.
For starters, you should always use CSS for appearance. HTML is only to describe and structure content.
Now imagine you have a special term on your site that you want in all caps, but tomorrow you decide it should be in small caps or initial caps. Which is easier to change: one line in a style sheet or x number of instances buried in text?
Using CSS today will make your life easier tomorrow.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I am having an css issue on my site. The font size is not consistent across all pages. The difference is one version of bigger font size and one version of a regular small font size. The small font size is the one I prefer. If the page is showing the content in big font, it will change it back to a smaller one after reload the page for a couple of times, it also changes back to the smaller one right away if you right click and select inspect element. Thus, I am not sure how can I ping point the issue.
Here are the screenshots, one with the big font and one with the small font, and again the small font is the one I prefer.
body { font-size: 1.6rem;} might be your issue... you can axe that from your style.css and it should be more consistent. It looks like chrome might not like rem on the body as can be seen in the linked question
removing/changing the bad line from the following class definition in style.css should fix you up
body, button, input, select, textarea {
color: #404040;
font-family: sans-serif;
font-size: 16px;
font-size: 1.6rem;
line-height: 1.5;
}
Similar SO question
Text + good links from answer on other question:
"This seems to be a Chrome bug; see Issue 319623: Rendering issue when using % + REMs in CSS, and/or a partly-merged duplicate: Issue 320754: font-size does not inherit if html has a font-size in percentage, and body in rem"
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Can anyone tell me why my rollovers for my figures are 7px taller than the figures themselves?
Been looking at this for nearly 2 hours and it's driving me towards insanity.
Note: This site is nowhere near finished so there is probably lots still wrong with it but if someone could tell me where the 7px is coming from that would be great.
I can post code if needed but here is a link to the test page.
Link to the text site
Thanks.
The extra space is actually a cause of line-height. Since you are using display: inline-block; on .portfolioWork figure, line-height will have an affect on it.
Just add line-height: 0; to .portfolioWork figure and it will fix the issue.
Your CSS definition will look like this:
.portfolioWork figure {
display: inline-block;
line-height: 0;
position: relative;
width: 100%;
}