Favicons out of alignment in Chrome and Opera, although fine in Firefox

Go down

Solved Favicons out of alignment in Chrome and Opera, although fine in Firefox

Post by jkh on Tue 31 Jul 2018 - 14:31

Having spent most of yesterday on skouliki's forum making favicons in Pixlr I ended up making them slightly bigger so they could be more easily seen, however, they look fine in Firefox but have noticed they don't look fine in Chrome or Opera.

As you can see, the wording 'Madeleine Beth McCann'  is at the top in Firefox but at the bottom in Chrome.




In Firefox the wording lines up all across the top:



But in Chrome it looks like this where the first line of text is at the bottom and the rest is at the top:


In the css, it says alignment top so I have no idea how to make the text line up correctly in Chrome (and possibly other browsers that I don't have).

Skouliki gave me a code to use, but it hasn't worked and Chrome/Opera still looks horrid.

Code:
li.header dd, li.header dt {
     line-height: 4em;
}

I've tried reducing the line height to 3em and 2em - it still looks fine in Firefox, but not in Chrome.

Can anyone suggest anything other than making all the images smaller again please because that would just make me terribly upset as it took all day to make all the favicons? Laughing

My forum url: https://jillhavern.forumotion.net/
avatar
jkh
Forumember

Posts : 419
Reputation : 14
Language : english

http://jillhavern.forumotion.net/

Back to top Go down

Solved Re: Favicons out of alignment in Chrome and Opera, although fine in Firefox

Post by skouliki on Tue 31 Jul 2018 - 15:39

you must have this in your css for every icon cat17,cat16,cat15 etc

Code:

.cat17:after {
    content: url(https://i.servimg.com/u/f46/14/38/83/10/news310.png);
    vertical-align: top;

to every code add this ...
Code:
position: absolute; 
margin-left: -50px;

so every code will look like this
Code:

.cat17:after {
    content: url(https://i.servimg.com/u/f46/14/38/83/10/news310.png);
    vertical-align: top;
position: absolute;
    margin-left: -50px;
}

then add this to your css
Code:

.table-title, .table-title h2 {
      padding-left: 30px;
}

with this i have thid result in Chrome




avatar
skouliki
Manager
Manager

Female Posts : 4915
Reputation : 803
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Favicons out of alignment in Chrome and Opera, although fine in Firefox

Post by jkh on Tue 31 Jul 2018 - 15:41

Thank you skouliki, I'll go and try that.
avatar
jkh
Forumember

Posts : 419
Reputation : 14
Language : english

http://jillhavern.forumotion.net/

Back to top Go down

Solved Re: Favicons out of alignment in Chrome and Opera, although fine in Firefox

Post by skouliki on Tue 31 Jul 2018 - 15:44

Ok lets hope this will work
avatar
skouliki
Manager
Manager

Female Posts : 4915
Reputation : 803
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Favicons out of alignment in Chrome and Opera, although fine in Firefox

Post by jkh on Tue 31 Jul 2018 - 15:57

That seems a lot better to me in Chrome - does it look ok to you? It's only the normal size favicons that look silly now, but at least there's only 3 of them to re-do.

How was you able to see the code and how was you able to adjust it so you could see it correctly in your third result?
avatar
jkh
Forumember

Posts : 419
Reputation : 14
Language : english

http://jillhavern.forumotion.net/

Back to top Go down

Solved Re: Favicons out of alignment in Chrome and Opera, although fine in Firefox

Post by skouliki on Tue 31 Jul 2018 - 16:02

Yes in my laptop looks all alignment ..also i check your forum with my ipad/chrome same great result
firefox seems also ok

in order to find the correct codes we use DevTools to seek the correct forum element to style it

the codes are for the larger icons ..i had to decide either the largest or the smallest
avatar
skouliki
Manager
Manager

Female Posts : 4915
Reputation : 803
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Favicons out of alignment in Chrome and Opera, although fine in Firefox

Post by jkh on Tue 31 Jul 2018 - 16:06

Well, thank you very much (yet again!). I think it's all solved now.

You're an asset to this forum. :rose:
avatar
jkh
Forumember

Posts : 419
Reputation : 14
Language : english

http://jillhavern.forumotion.net/

Back to top Go down

Solved Re: Favicons out of alignment in Chrome and Opera, although fine in Firefox

Post by skouliki on Tue 31 Jul 2018 - 16:08

glad i could help.... it was a lesson to me also to try to find the solution

Problem solved & topic archived.
Please read our forum rules: ESF General Rules
avatar
skouliki
Manager
Manager

Female Posts : 4915
Reputation : 803
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum