Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I have an interactive graphic I made in Adobe Animate (published as HTML5) and am trying to make it more accessible by adding HTML links so that someone who uses the tab key instead of a mouse can tab through the links on the graphic and so the JAWS screenreader can read it properly. I will eventually make the html links pretty much invisible (but the link bounding box will show) by setting their opacity to .01, but I have it set currently to .51 so I can better see the positioning. I'm getting different results between Safari and Firefox on the Mac and it looks different on Windows, too. On Windows in Firefox and Chrome they display pretty much the same, but the positioning is off between Safari on the Mac and both of them. Windows seems to move them over more to the right and down. The parent div has positioning set to relative and each span tag is set to relative too. I'm not sure what to do at this point to get this working consistently across browsers. Here is the link if you can take a look for me. http://www.personal.psu.edu/pzb4/simba/
Any help will be truly appreciated!
Use position: absolute for links.
Example for "May":
position: absolute;
left: 220px;
top: 226px;
z-index: 2;
text-decoration: none;
font-family: helvetica;
font-size: 21px;
text-align: center;
font-weight: bold;
font-stretch: extra-condensed;
line-height: 90%;
Updated
Else use percents instead of pixels.
position: absolute;
left: 31%;
top: 25%;
z-index: 2;
text-decoration: none;
font-family: helvetica;
font-size: 21px;
text-align: center;
font-weight: bold;
font-stretch: extra-condensed;
line-height: 90%;
Related
A web-page I've made works fine in Chrome and in Firefox when it isn't zoomed, however, the zoom breaks the layout in Firefox (but, for some reason, not in Chrome). You can see the live version.
Here is what it looks like in Firefox:
However, when zoomed in, it looks like this:
Here is the CSS code of that web-page:
body {
font-family: sans-serif;
}
#format_as_code {
font-family: "Lucida Console", monospace;
font-size: 12px;
white-space: pre;
width: calc(80 * 7.2px);
background: #111111;
color: #eeeeee;
height: calc(24 * 14.5px);
display: block;
}
h1 {
text-align: center;
}
#center {
margin-left: auto;
margin-right: auto;
width: calc(80 * 7.2px);
}
Any idea what I am doing wrong?
As long as i can tell even zooming-in in firefox doesn't break the layout (see the screenshot below). Maybe you may want to remove the width from the <span id = "format_as_code"> or set it to auto to see if anything changes at all.
Quick tip for performances thought: i've noticed that every seconds all the spans (which i think represent the pixels of your canvas) updates, even the ones that don't change at all !
This leads to a noticeable performance decrease so may want to look into it.
I'll attach a screenshot of how i see the website and how it renders on FF 79 64bit.
Hope this helped you a little!
Having issues with aligning my button text across browsers. I've combed similar questions and have tried the suggestions but to no avail (display: inline-block for my hyperlinks, line-height: 1). There is too much headroom in firefox with my buttons (see homepage slider) and it looks just fine though in Chrome. Site is: jdd.meteor.com
*I was told this question was "off topic" when I tried to ask before. Please let me know what I can do to keep this question active if it is not on topic, whatever that means, so I can make changes.
Thanks!!
Screen captures (Chrome then Firefox):
#middle-section #slider .item .content hgroup a.call-to-action {
background: #820024;
color: white;
padding: 20px 30px;
letter-spacing: 0px;
font-size: 1.2em;
}
a {
color: #00aab5;
display: inline-block;
line-height: 1;
}
I had the same issue this morning, you need to define a height as well, that solved the problem for me, it looked great in Chrome but without height it looked squished in Firefox. Hope this helps.
I'm fairly inexperienced with CSS across Browsers, so apologies if this is simple or obvious.
I have a Leaflet map with a JQueryUI Autocomplete/Combobox search functionality. Everything is working just fine. I have it looking as I want it in Chrome.
If I take a look at the combobox in Safari or Firefox it's off by a pixel or so (the button on the side is either one or two pixels above or below the input box). And as you can see in the screen shots, it doesn't look good at all. Below is the CSS code and screen shots.
My question is: what CSS properties should I be playing with to get the combobox aligned across browsers? Is there a website that will describe the cross-browser inconsistencies so I can be aware of them?
Current CSS related to Combobox:
.custom-combobox {
position: relative;
display: inline-block;
margin: 2px;
}
.custom-combobox-toggle {
position: absolute;
top: -1px;
bottom: 0;
margin-left: -1px;
padding: 0;
/* support: IE7 */
*height: 1.7em;
*top: 0.1em;
}
.custom-combobox-input {
margin: 0;
padding: 0.3em;
width: 140px;
}
.custom-combobox .ui-button-text {
height: 14px;
}
Chrome Version (looks good):
Firefox Version (looks off):
Safari Version (also off):
Got it working. The culprits were:
em sizing - apparently Chrome and Firefox have different ideas of how big an Em is with the same font
position relative vs absolute - the relative positioning of the .custom-combobox class was screwing up the positioning when compared side by side. I imagine Chrome and Firefox have slightly different values they position off of for relative positioning.
This problem exists ONLY on Mac Safari.
Other browsers / other OS works properly.
The problem:
Observe the font weight of the top navigation here: http://www.octa.com (WordPress)
Then observe the font weight of the top navigation here: http://www.octa.com/products (Magento)
Note that while they are served by different code (WP vs Magento), the css is nearly identical between the two pages.
Here's the relevant bits of the css:
nav.menu li a {
font-family: 'VegurLight','Myriad Pro',Arial,Helvetica,Sans-Serif;
font-size: 20px;
text-align: left;
}
nav.menu li a, #subnavwrapper nav li a {
color: #FFFFFF;
font-weight: normal;
height: 50px;
line-height: 50px;
padding: 0 46px 0 0;
}
nav li a {
display: block;
line-height: 1em;
text-decoration: none;
}
body {
color: #000000;
font-family: "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans- serif;
font-size: 14px;
line-height: 1.55em;
text-align: center;
background: black;
}
Note that the font is imported using #font-face.
I've tried everything - many answers here on SO and other articles. Note that none of the below styles gleaned from other answers / resources corrected the font display.
font-variant:normal;
-webkit-font-smoothing: antialiased;
text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
Try -webkit-font-smoothing: antialiased;
I've found that this simple change made Safari's font-weight property much more reliable.
(I cannot post comments so I can only add my findings to the conversation by posting.)
I have found that text in fixed position elements appears lighter weight than other types of positioning in Safari. Therefore could not be ignored as suggested in other places.
Adding --webkit-font-smoothing: antialiased does solve this , but then it looks lighter than in Firefox. Which can be fixed with -moz-osx-font-smoothing: grayscale
fiddle here to show the problem - Safari only
With the comments / prodding from #JukkaK.Korpela, I discovered a few things:
First, the root of the problem is this:
-webkit-backface-visibility: hidden;
Which was added to the code to solve an animation problem per this answer: iPhone WebKit CSS animations cause flicker
Don't know how to solve the font and solve the flicker, but I can at least choose which one to solve now.
Second, as an avid Firefox/Firebug user, I had tried using Firebug Lite in Safari, as well as another extension for Safari, and they did not work. So, for all of you out there who may be trying to troubleshoot Safari-only issues, here's a big tip:
Safari's "Develop" tool. Didn't know about it at all until I did some searching today, but it's a menu item in the toolbar. If you don't see it, then go to Preferences->Advanced, and check the "Show Develop Menu in Toolbar"
With that tool, I was able to troubleshoot and solve this quickly.
When using a <h1> tag for example, is there a reusable formula for getting the outer border of that element to PERFECTLY follow edges of the type? In theory I would expect this to work:
h1{
display: block;
font-family: sans-serif;
font-size: 38px;
line-height: 100%;
height: 38px;
}
So the line height is set to be the same as the absolute text height, which is also the height of the block. However this never works. Here is an example of what does work for sans-serif 38px;
h1{
display: block;
font-family: sans-serif;
font-size: 38px;
line-height: 28px;
height: 35px;
}
Here is another working example.
h1{
display: block;
font-family: sans-serif;
font-size: 25px;
line-height: 19px;
height: 22px;
}
This is all well and good, but it has to be calculated manually in firebug each time. There is no formula I can find to do this.
Additionally, it would be nice if any solution also worked with #font-face fonts, but I understand there is more to take into account there. (like the top alignment that only occurs on Mac).
Does such a formula exist? Is it possible to write one? How about some LESS CSS fancyness?
I agree with #ToddBFisher in the comment, and at this point for me it's more of an usability issue. Consider people can also vary the font sizes in their browsers... in that case using ems would be better. But browsers also render font differently, so something that looks amazing in a mac will look pixelated in a pc. If you want something to look perfect, use images.
Check this other question for more info on line-height: How to achieve proper CSS line-height consistency
Or this one: CSS Line-Height Guide
You can also check the usability stack for discussions about these things: https://ux.stackexchange.com/ There are pretty amazing posts in there.