I have an HTML webpage with both English and Portuguese languages, that are swapped when I press a flag at the top of the page. This is done through a class in a span. Typical usage:
<div>
<span class="por1">Portuguese text 1</span>
<span class="eng1">English text 2</span>
Some text 3 that is correct in both languages
</div>
By default, I have in CSS (English is the default language):
.por1 { display: none }
.eng1 { display: inline-block }
When I press the flag, the languages are swapped using obvious javascript.
This works perfect in a desktop, no errors in W3C, but in mobile devices (only) the texts 1 and 2 inside both spans is smaller than text 3. I erased all the #media, and the thing still gives problems.
However, if I erase the two CSS lines .por1 and .eng1 above, of course both texts 1 and 2 appear simultaneously, but now with the correct size. Hence, it seems to have something to do with the display tag...?
Hence, the behaviour is as I have two spans .por1 and .eng1 CSS for mobile devices, but I have not. In fact, debugging the page in Chrome shows that the two spans have no special formatting.
This is the page. Take a look at it in a smartphone and you will see two different sizes in the title already.
EDIT I simplified the page to the maximum. Look at the page now, whose complete code is this, including CSS:
<!DOCTYPE html>
<html>
<head>
<title>Crazy</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
body { font-size: 24px; }
.por1 { display: none }
.eng1 { display: inline-block }
h2 { font-size: 2em; }
h3 { font-size: 1.7em; }
</style>
</head>
<body>
<h2> <span class="por1">Borboletas e Mariposas</span><span class="eng1">Butterflies and Moths</span> <br> (Rhopalocera, Heterocera) </h2>
<h3> oplus <span class="por1">Borboletas </span><span class="eng1">Butterflies </span> (Papilionoidea) </h3>
<div class="inner"><span class="por1">asa-de-vidro </span><span class="eng1">Glasswing </span> (Greta sp.)</div>
<div class="inner"><span class="por1">mariposa-walker</span><span class="eng1">Walker's moth</span> (Lepidoptera, Erebidae: Sosxetra grata)</div>
<div class="inner"><span class="por1">mariposa </span><span class="eng1">herilia moth </span> (Erebidae: Letis sp. (herilia?))</div>
</body></html>
If I remove the fist <div class="inner">, the page is still rendered with crazy font sizes. But if I remove the second, or the third, the page is rendered correctly (??!!). In fact, if I remove (herilia?) from the third <div class="inner">, it is also rendered correctly!! Actually, if I remove the ? it is also rendered correctly. Same happens if I remove the oplus. No idea what is happening!
EDIT 2
Screenshot of the wrong rendering:
Screenshot of the correct rendering (same HTML code with the (herilia?) removed):
EDIT 3 If I change h3 { font-size: 1.7em; } to h3 { font-size: 1.5em; }, the problem is gone!
I think you are experiencing a problem that I experiment in the past. It's the autoadjusting of the font size setted by webkit mobile browsers.
I usually use this trick to avoid autosizing
div { max-height: 9999px; }
You can apply to the div or the spans, try and tell me what is the result.
Edit
You need to make this kind of tricks too avoid the effect. The problem seems to be something about the bad viewport configuration and texts below 18 pixels. The browser thinks that is a text that the user can't read and apply autosizing to allow user to read it.
Try to specify the font-size for your span tags
If I understand you well, you know you can play with the font size in CSS, but you don't want to, as I understood from one of your comments.
I suggest controlling the font size through javascript dynamically to fit your multiple contexts, if you need any help with that just let us know.
Related
I made a report of Qweb in odoo 10. Put my css in tag and place it in ".page" class div. Like this
<div class="page">
<style type="text/css">
.header,
.footer {
display: none !important;
}
</style>
</div><!--end of page-->
It is working perfectly on screen but when I generate PDF or take print from the screen by CTRl + P. It doesn't shows the css colors, backgrounds, padding and margins. I have consulted following link:
Plus I also have one solution. If we apply this tag it reflects some of the properties on the printing page.
t-attf-style="background: #333;color: #FFF; padding: 10px 0px; margin: 0px 0px 0px 6px;"
Is there any way to print the backgrounds and some different font colors on printing page other than these options. The first link is not making any changes and the second solution don't work for all properties plus its very time taking to place this tag with all the HTML tags.
I am facing this problem from last one year. That would be great help and a new learning If someone helps me sort this problem.
Thanks
Well the right answer is always the one through that separate module of defining and calling color fields as done in custom invoicing module. But I suggest a hack. Create images of that color and put them on that area with position: absolute and adjust the remains(text) on it. Plus for font and other things t-attf-style works perfectly.
<style type="text/css"> span:hover { } span[title]:hover:after { color: yellow; } </style> <span title ="this is text"> Testing </span>
In the browser I am using (Google Chrome), the code above displays two tooltips, one that looks like expanded text, and one that seems to be generated by the browser. How do I fix this so that there is only one tooltip showing when I scroll over the word "Testing"? I want to keep the yellow one.
You can't change the appearance of the tooltip since its browser-dependent.
However if you want to style your tooltips, you can use JS libraries like JS Toolip.
I have an element with text and a break tag.
<div id="mobile-menu-button-a" class="mobile-menu-bar-item">
Rubber<br />
Stamps
</div>
It is changing letter-spacing from one page to the next ever so slightly on Chrome. Below it is visible between the letter bs.
This is causing a visible shift in the navigation bar.
I have looked at the inspect element and there is no computer letter-spacing in either instance.
I have tried setting this style, but it did not resolve the issue.
.mobile-menu-bar-item {
letter-spacing: initial;
}
I have also tried using an approach that did not use the break tag, but this did not resolve the issue either.
<div id="mobile-menu-button-a" class="mobile-menu-bar-item">
<span>Rubber</span>
<span>Stamps</span>
</div>
.mobile-menu-bar-item span {
display: block;
}
What could be causing this shift in letters?
It is a large HTML document, but will post code that may be relevant as requested.
My main issue is that my CSS does not load with the elements. I'm placing my CSS/HTML insde the HTML boxes as a lot of styling is not allowed directly in the HTML. There are a bunch of other frustrating things with Google Sites but this is what I need help with right now.
I'll navigate/refresh my page and all of my elements will display without CSS. Then after a few seconds the CSS is applied and things look how I want.
How do I get the CSS to load correctly? I can't have my menus and object load looking all crazy.
Here is a random example of code that does this (anything I've put into these boxes does this)
<style type="text/css">
span
{
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
</style>
<p>
<span>T</span>he first letter in ths paragraph is styled
with CSS to be 400% larger than the rest of the text.
</p>
UPDATE: I've spoken with a Google Apps rep and they opened a ticket as the css not loading is a bug. No word on the time frame but they are working on it.
I have the same problem and a workaround can be
<style type="text/css">
.show-on-load {
display: block !important;
}
span
{
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
</style>
<p class="show-on-load" style="display: none;">
<span>T</span>he first letter in ths paragraph is styled
with CSS to be 400% larger than the rest of the text.
</p>
This way the content doesn't display until the CSS is loaded. Unfortunately, I can't use this workaround myself because I have to support IE8 and style tags don't load at all there.
Edit: use opacity instead so IE8 is supported
I'm creating a site with a horizontal navbar in which the buttons are designed as elements, making them easy to differentiate, and they individually light up when you a:hover over them. Here's a link: http://allpropestmanagement.net/commercial2.html
Obviously not a finished product.
My current problem involves that big purple field on the far right of the navbar, the one that's not a button. That too is an element, but with hover disabled and a whole load of nonbreaking spaces to pad it. That's the problem. I would like that purple field to extend all the way to the right end (with a tiny margin, like it does on the left side). The trouble with nbsp, as you can imagine, is that there's a finite number of them, and they don't scale. So if the navbar is the perfect length on my computer with, say, 16 nbsps, on someone else's machine it won't reach all the way and on yet another person's it will reach too far.
The html looks like this:
<div id="navmenu">
<form>
Home
Commercial
Meet The Pro
Contact
<a id="farright" style="border-top-right-radius:25px;">
<i> "We'll get the job done right!"
</i></a>
</form>
</div>
I feel odd saying this, but the css is kind of bulky and I'm having trouble formatting this post. Perhaps I'll add it in a few minutes once this post is visible, but the css file is "smithmicropurple.css".
Anyway, I would like a way to stretch that element so it always fits correctly, or if not, some other method that achieves the same effect. I have already tried setting widths individually for each element and that doesn't appear to work.
I like to do these types of things to "help" others (rarely, if I'm lucky), but also to help me learn more about html/css.
So I've given it the old college try with this FIDDLE.
HTML
<div class='holderdiv'>
<a href='#'>One</a>
<a href='#'>Two</a>
<a href='#'>Three</a>
<a href='#'>Four</a>
<a href='#'>We'll Get the Job Done Right!</a>
</div>
I won't post the CSS because it's pretty long. It's in the fiddle.
Please don't consider this a "real" answer. Perhaps just something to think about.
Semantically, I am not sure why the parent is a form element, i'd suggest changing that to a HTML5 <nav> element. (assuming you're using HTML5, of course)
The approach taken here is to set the child elements to display:table-cell, and give the targeted element, #farright a width of 100% to fill the remaining space. Also, text-align:center will effectively center all the child elements. No need for %nbsp;
#navmenu {
font-size: 14pt;
margin: 5px 0 0 5px;
}
#navmenu form {
width: 940px;
}
#navmenu form > a {
display: table-cell;
white-space: nowrap;
text-align:center;
}
#navmenu #farright {
width:100%;
}