I have a CSS file which takes information from a page and arranges them neatly so that when a user presses the print button on the page, it should print out the information nicely. The information has displayed a sort of like a key value pair i.e. First Name: John Doe.
The problem, however, is that the "First Name:" part or any of the other 'keys', which is under the label element, won't show up when trying to print in Safari. This is not the case for Chrome or Firefox though, which seems to print the page properly.
Having the code like this:
label { font-weight: normal; }
makes all relevant text appear on Safari, but the labels should be bold.
However, changing it to
label { font-weight: bold; }
completely makes the label disappear in Safari while making it work fine in other browsers.
If anyone has any idea what may be causing this and how I can fix it, I'd be really grateful.
Why not specify the
font-weight: bold;
if having it normal displays it, but you want it to be bold?
So interest question, hhmmm. It must be your font not support bold wight at all? Do you read spec.?
Or, if is that not so, hmm, have you tried using weight units instead? Like so 600,700,800. Hope it will help you.
Or, something can overlap your style, add !important to your value
Related
I'm using Joomla 3 and I created a blog site, I'm using a design-controll tamplate
I created a "new-article" page, but I noticed that some of the buttons don't have text in them, when I checked with firebug I discovered there's a font-size:0 on them, when I remove the V from it in firebug it displays the text. I found the file and the line and deleted ALL the font-size: 0px; lines, the simply don't exist in the file, yet the text is still invisible, and when I check Inspect-Elemnt it still shows
how it looks now:
how it looks when I remove the V from font-size:0 (and how I want it to look)
it seriously drives me NUTS
and here's the file as you can see line 2875 is EMPTY
I tryed checking on different browsers and different computers, still the text is invisible and Inspect Element shows font-size: 0px;
here's the link to the page (it's public now, later on it's supposed to be a members only page)
http://debutinvest.com/new-article
you can overwrite this in your css by adding following, that will overwrite the font-size:0px;
.btn-toolbar{
font-size:12px !important;
}
Hope this helps
It would be best to provide a link so that we can inspect ourselves.
You can also look for a text-indent with a negative value, typically something like -999.
I understand that with CSS formatting the first letter of each paragraph is possible via:
p:first-letter
{
font-size:20px;
}
However upon using this code it is impossible to highlight/select these "First Letters" from the web browser, is there a way to amend this?
Edit - It is possible to select the text, however it isn't shown visually, how can I change this?
This is a bug in Chrome/ium/WebKit: https://code.google.com/p/chromium/issues/detail?id=17528
Right, it is not visually selected but in the background it is. If I select and copy and then paste it, I get "Hello" so this just might be a problem with the different font-sizes. font-variant:small-caps works perfectly (but uses uppercase).
You might want to try Lettering.js or alternatives
http://letteringjs.com/
https://github.com/davatron5000/Lettering.js
I am using :after to add asterisks to labels that are required:
.field-name
{
color: #444;
font-family: verdana;
font-size: 0.85em;
line-height: 2em;
}
.field-name.required:after
{
content: '*';
color: #ff0000;
}
This works great when the content is not inside of a jQuery dialog. However, when using a jQuery dialog, the asterisks are only shown when the dialog is hovered-over. See this jsFiddle for an an example in IE8. Click the button and then move the mouse over the actual dialog window. In all other modern browsers, this works as expected. Is this a known bug?
Don't use CSS to add the star. Use javascript's method to add text to the end of a Dom element. CSS is not content, it's meant for styling the content.
These asterisks won't be read by screen readers when added through the CSS property content (except VoiceOver, maybe), even though it's an important information that is being conveyed.
You should add them server-side: everybody will see them, with or without running scripts. You should also add at the beginning of your form a sentence like 'Fields marked with a * are required', because not everybody knows what these stars mean.
We know IE8 has issues rendering generated content. The z-index isn't being set properly. I suggest setting a higher z-index on the parent element as mentioned here. It's possible the jQuery UI dialog's changing the positioning attribute when you hover over it. Unfortunately, I can't really test this as I'm not running IE8 here but I hope this helps.
The styles:
h2 {
color: #71D0FF;
font-size: 11px;
font-weight: bold;
margin: 0px 0px 5px 0px;
}
a.box {
color: #FFFFFF !important;
cursor: pointer;
display: block;
padding: 10px;
text-align: justify;
}
a.box:hover {
background-color: #0C0C0C;
}
a.box span.down {
display: block;
color: #D04242;
float: right;
font-size: 11px;
margin-left: 5px;
}
a.box span.up {
display: block;
color: #71D013;
float: right;
font-size: 11px;
}
span.noob {
color: #FFA142;
}
span.pro {
color: #A142A1;
}
The HTML (this is basically repeated for each link):
<a href="/library/blaze" class="box">
<span class="down">-0</span>
<span class="up">+0</span>
<h2><span class="noob">NOOB</span> BLAZE</h2>
HAS CREATED 0 MAPS, WON 0 BATTLES, AND LOST 0 MAPS
</a>
What I'm not understanding is why it renders differently in Firefox occasionally. Sometimes it shows up like it's supposed to and sometimes it shows up in this weird format as seen here:
I've never had anything like this happen before, does anyone know what's causing it? Does it even do this for anyone else? Like I stated before, sometimes it loads just fine (exact same HTML, CSS, and everything) and sometimes it doesn't. It seems kind of random. It loads just fine in IE with no weird problems at all.
Interesting. I can definitely reproduce it on FF3.6, actually I'm getting the broken version more often.
I can't get my head around it right now, but looking at it in Firefox, there is something broken with the link. If you open "inspect element" in Firebug, you will notice that the rendered DOM definitely changes between the intact and broken view. Firebug will also add _moz-rs-heading to the link, which is sort of explained here.
The first step should definitely be making the markup W3C valid and checking whether it still occurs.
I am a bit surprised that it doesn't act up more than it does.
You have put a block element (h2) inside an inline element (a). The markup is broken, and different browsers will do different things to try to make the best of it. One thing that can happen is that the browser adds an ending tag for the link before the block element.
Us an inline tag instead of the h2 tag, and use CSS to style it to look the way you want.
I'm having the same problem.
http://www.jameshughbanks.com/
I've narrowed it down to this. It ONLY happens when I put a link around multiple elements (in my case it involves one (or more) block element(s) and one (or more) in-line elements.
It is very odd as in it seems to only affect "every other" "error" you create using the method I described above. It will modify the first and third div output but not the 2nd. (at first it affected the 2nd one only, but I partially fixed the problem (it used to mess up the H2's also, but putting the link around the h2's only removed them from getting the error.
So it comes down to only being able to put a link around 1 block element, I haven't tested the error with more than 1 block element, only the mis-match of a block element and multiple in-line elements.
If anyone has any work-arounds for this issue in firefox please let me know. It does not appear to happen in IE, Opera, or Chrome.
Also for those that think this is bad markup, it is included to be valid in the next revision of html5, and it is the only way (without javascript/etc) to do these types of links. Firefox is obviously coded to show this markup properly but for some reason has some type of bug that makes it render it differently sometimes due to unknown reasons. Regardless it needs to be fixed or a work-around developed, I could make each element its own individual block and probably fix it, but that's a lot of extra unnecessary code.
Works fine for me in Safari, Chrome, and Firefox 3.5.
I've tried refreshing repeatedly. No luck in duplicating your problem. Have you tried clearing your cache?
Inspecting the element in Safari or Web Developer (FF plugin) does not reveal anything unusual either.
Is N00B BLAZE always the one that messes up every time you see an issue or is it random?
For me, sometimes Firefox doesn't properly load CSS, it's usually all of it, not partially like it's happening to you. For me tho it's loading correctly. Have you recently changed it by any chance and didn't allowed to properly refresh?
When I buzzed your site, the problem occurred for me in FF3.6. Using Firebug to peek at the HTML, the problem was that the lines that display incorrectly have an extra <a> wrapped around the text, within the <span>. Maybe some HTML included in your DB where it should only be text?
This is driving me mad...
I was doing my asp.net sandbox website when out of the blue I start to realize that in IE8 (IE7 compatible view or not) does not show CSS font proper...
in the image below I removed all CSS and add only one:
body {
font-size: 11px;
}
and this is (sadly) the result:
alt text http://www.balexandre.com/temp/2009-06-08_0927_iefont.png
Is there any soul willing to help me...? this is driving me mad since saturday night! I can't find a proper solution, I really thought is was something with CSS, so I even validate all CSS through CSS Validator and validate all the page...
nothing changed a bit of the result :(
All the help, or even a blow in the right direction is greatly appreciated.
Thank you.
P.S. both Opera and Chrome as well Safari display the same result as FF, the right result.
If the text is inside a table (as I see in your screenshots) try:
body, td {
font-size: 11px;
}
i think what Victor suggested should work. Also, next time you can try
* { font-size: 11px }
as a test. Obviously you don't want to alter other elements such as h1, h2, etc for their font sizes, but you can use the line above to try things out, so that you can guess that if the line above works, then maybe you need to specify font-size for an additional tag besides the body you originally specified.