Hi all,
By adding a simple color change via css to my webfont h1, there is some residue from the previous color. This is only happening on some of the fonts. Any idea how this is happening?
Also, guess while I have your eyes... having trouble getting my logo image to display. I have tried multiple directory src locations including ../ ect but still not working.. :-/
On the italics font in your example, it looks like the "ease-in-out" effect is only going the width of a non-italic font. Have you tried adjusting the width of the transition?
The problem with your logo is that your server is serving it with the wrong mime type. It's being served as text/plain instead of image/svg+xml. Add this to your .htaccess file:
@Pualie_d hmmm.. removed inline-block.. Still not working though. I added inline-block so that the click area for cursor woud not extend across the whole row but only the text.
What is interesting is the inline block seems to be causing the issue with color artifacts.
the syntax is only minor differences, I don't see how that would cause issues. I especially don't like the whole roles thing and would rather uses classes.
You have div elements declared outside of HTML Doctype declaration, this has nothing to do with CSS and "rules". I've coded a sample structure for you, you can modify it if you like, but it's valid syntax... you can eliminate role or just add appropriate classes to the HTML elements.
Ok, cleared cache and works. Still not too sure what to do about in-line block. @Paulie_D do you recommend anything else for getting the desired results?
Hi all, By adding a simple color change via css to my webfont h1, there is some residue from the previous color. This is only happening on some of the fonts. Any idea how this is happening?
screen-shot
Much thanks.
We really need to see it in a live link to test/see for ourselves.
Here is the link. http://jamilopitts.com/kirby/
Also, guess while I have your eyes... having trouble getting my logo image to display. I have tried multiple directory src locations including ../ ect but still not working.. :-/
anyone?
On the italics font in your example, it looks like the "ease-in-out" effect is only going the width of a non-italic font. Have you tried adjusting the width of the transition?
You need to increase left and right padding on
h1element. Issues goes away.remove
padding-bottom:0;and addpadding:0 20px;edited to add..
where is your image located in your directory structure?
The problem with your logo is that your server is serving it with the wrong mime type. It's being served as
text/plaininstead ofimage/svg+xml. Add this to your .htaccess file:Josh is right, if you load the direct svg path, xml is rendered http://jamilopitts.com/kirby/assets/images/jte.svg
@joshblackwood tried this...still not working
It works : http://jamilopitts.com/kirby/assets/images/jte.svg
You have it as:
/assets/images/jte.svgin your code.Change to:
/kirby/assets/images/jte.svgtried that. still nothing :-/
Try
<embed src="http://jamilopitts.com/kirby/assets/images/jte.svg" type="image/svg+xml" />or
<img src="http://jamilopitts.com/kirby/assets/images/jte.svg" type="image/svg+xml" alt="">And your HTML still has syntax errors.
yes, i'll get to the syntax. the first spits out the svg code, the second does nothing.
http://jamilopitts.com/kirby/
I have no idea why it's causing the issue but removing inline-block from the h1 solves the problem.
Aren't [h1] block by default? Why would one change that?
It works
interesting... i wonder if it's a chrome issue..
@Pualie_d hmmm.. removed inline-block.. Still not working though. I added inline-block so that the click area for cursor woud not extend across the whole row but only the text.
What is interesting is the inline block seems to be causing the issue with color artifacts.
I was mentioning, to fix HTML first before you do any testing, because invalid syntax might not render your design correctly.
the syntax is only minor differences, I don't see how that would cause issues. I especially don't like the whole roles thing and would rather uses classes.
Sorry, that was the issue I was fixing. I haven't looked at the other thing yet.
You have
divelements declared outside of HTML Doctype declaration, this has nothing to do with CSS and "rules". I've coded a sample structure for you, you can modify it if you like, but it's valid syntax... you can eliminateroleor just add appropriate classes to the HTML elements.Role is part of WAI-ARIA, it's for assisted technologies and screen readers.
ok, You're right I did have order out of place, but outside of that I think my markup is fine.
Ok, cleared cache and works. Still not too sure what to do about in-line block. @Paulie_D do you recommend anything else for getting the desired results?
Would you use inline-block by default for whatever you are using this for?
If not then your problem is resolved.
Yes. Any idea as to why this would cause the color artifacts to go wrong? Possibly the inline-block is not extending the whole width of the h1 s ?
At a guess, it's a browser rendering issue as the font is italicized.
Hmmm... the font style is italicized, however it's actually regular. I wonder if it's an issue with font-squirrel?
@wragen22 Instead of setting it as "italic", set it as "oblique" and see if that solves it.
With the display on the h1 set to inline or inline block the text is actually rendering partly outside of the...erm...h1 'block'.
As such, it's not being affected by the hover color change.
I have no idea why this should be so but a few pixels of horizontal padding fixes the color issue.