Please note that I have been through the existing links on this topic and none seem to help in my case.
All suggest a way of how to move the text vertically so that it appears aligned. The problem in my case is that it is already aligned in Chrome, so when I try to align the text for Firefox then it misaligns the text in Chrome.
Please open the following link in Firefox (v12) and Chrome (v19).
http://jsfiddle.net/UQ4D5/
You will notice that it is shifted towards the top in Firefox but is perfectly aligned in Chrome.
Two properties in your css
display: table-cell;
vertical-align: middle;
Check to live demo http://jsfiddle.net/UQ4D5/5/
Learn to use reset.css or normalize.css for prevent small differences in browser rendering models.
And then use height=line-height trick:
div {
font-size: 100px;
text-align: center;
height: 120px;
line-height: 120px;
border: 1px solid black;
}
chrome metrics:
firefox metrics:
Height is the same in both cases.
The issue is based on the Browser default Stylesheets. I recommend you to use a proper reset Stylesheet or even normalize.css
Related
Example: https://jsfiddle.net/notayam/4mLzus0y/
I set top-padding and bottom-padding to zero, and the layout display of the box model in the inspector shows 0 above and below, but as you can see from the jsfiddle there's still blank space there. And furthermore it's not centered vertically.
Adding vertical-align: middle !important; didn't help.
I got it centered vertically by trying different values for line-height, but that doesn't get rid of the unwanted padding above and below the text.
I dug out some older code that had a similar situation (using bootstrap) that I had muddled around with long enough to get it roughly like what I want. It used display: inline-block where this uses block. and although I have no idea if that might help I tried including display: inline-block !important; here. But it still shows up as block in the inspector; it shows both my css and spectre css specifying inline-block, but then block on the element. I couldn't figure out where that was coming from or why the override didn't work.
Tips on debugging CSS more efficiently would be very welcome. I really just need to get a table to display a whole bunch of data as compactly as possible, and would love to get that to work and never have to go near CSS ever again.
The rest of the app uses Python 3/Airium/Bottle, if that might matter. Running on Firefox 100.0.2 on MacOS 12.1. I'll only be running it locally so support for other browsers doesn't matter to me.
.btn {
padding-top: 0 !important;
padding-bottom: 0 !important;
height: unset !important;
}
I don't know if I understood what you want, but here is some solution:
.btn-group .btn {
padding-top: 0;
padding-bottom: 0;
/* This is to clear line height */
line-height: 1em;
display: flex;
flex-direction: column;
justify-content: center;
}
We can transform your buttons to flex boxes, so you then can control height, and have no vertical padding.
I'm trying to position elements in a way so that when the browser width is changed, the webpage will scale everything in proportion, but what happens is that they shift a little. I don't understand why. I can adjust this okay using media queries, but they change drastically in mobile browsers. To illustrate what I'm talking about, I created an example in which I'm trying to keep this black text centered inside this green box. From my example, you'll see that scaling the browser on a desktop will keep the text in the box centered pretty well, but when switching to a mobile browser, the text will go out of the box. What can I do to keep it scaling correctly?
I realize that I can just fill the text div with a green background, but you have to understand that this is just an example of what I'm trying to do. The real webpage is much more sophisticated, so that will not be an option. I need to make sure that these divs scale appropriately. Thank you.
I provided an image to show the problem that I'm getting in my phone browser. It's a bit small, but you can see how the black text dips below the green box.
The example website: http://www.marifysworld.com
CSS:
#viewport {
width: device-width;
zoom: 1.0}
#-ms-viewport {
width: device-width}
body {
margin: 0px;
padding: 0px;
background-color: #fffff}
img {
display: block;
margin: 0px;
padding: 0px}
.text {
font-size: 2.25vw;
color: #000000;
text-align: center;
text-size-adjust: 90%}
.box {
width: 23.75%;
height: auto;
position: absolute;
left: 25%;
top: 40vw}
.divtext {
width: 20%;
height: auto;
position: absolute;
left: 26.75%;
top: 42.5vw}
HTML:
<img class="box" src="http://www.marifysworld.com/images/platform/box.jpg" />
<div class="divtext text">
Why won't this div of text stay in the center of the block in mobile browsers?
</div>
Well, you are using positions for your design but it is confusing and not possible.
Here is an idea to make this design work.
Just try it...
HTML:
<div class="box">
<div class="divtext text">
Why won't this div of text stay in the center of the block in mobile browsers?
</div>
</div>
CSS:
#viewport {
width: device-width;
zoom: 1.0}
#-ms-viewport {
width: device-width}
body {
margin: 0px;
padding: 0px;
background-color: #fffff;
}
.box{
background: url('http://www.marifysworld.com/images/platform/box.jpg');
width: 23.75%;
margin: auto;
margin-top: 20%;
}
.divtext {
width: 90%;
padding: 5% 0;
margin: auto;
}
.text {
font-size: 2.25vw;
color: #000000;
text-align: center;
}
Update: initially I thought the problem might be the (not universally supported) text-size-adjust property, but it seems this is unlikely. I leave those thoughts below just in case they are useful to someone else using that property.
Having been unable to reproduce the problem myself but seeing the useful image now put into the question I think we have to look at the actual font and how it is sized and using space. There are quite a few factors which maybe the browsers are setting different defaults for. Here's a few, there may well be more:
font-family - most obvious but is whichever browser is causing the problem using the same default font as browsers not causing the problem? Try setting a specific font and see what happens
Different fonts will take different widths for different characters. Try a monospace font - that will probably overflow - just to demonstrate the issue
kerning - no I don't fully understand how different fonts use it and what they mean by 'normal' (which is probably the browser's default) but that will also alter the space used as will...
..line height - perhaps that needs to be specifically set
font-weight will alter the space used - do all browsers/systems interpret say 400 exactly the same way
I guess there's loads more that may differ between browsers - for example how exactly do they calculate the spacing needed to center text, will they always break a line at the same place etc.
Sorry this is a waffle, but there are so many factors that could make the text overflow and I don't understand them all in enough depth.
Basically what you need is to be able to scale the text div to force it to fit - for that you would need a bit of JS I think (?or is there an equivalent of contain for divs?)
ORIGINAL STUFF:
I am seeing text stay within the green box on a mobile device (IOS Safari) so I imagine the problem you are having is with another mobile device/browser such as Android.
If this is case the area to look at is the use of the CSS property
text-size-adjust: 90%
There are a couple of things to note here:
According to MDN
This is an experimental technology. Check ... carefully before using in production.
This property is intended to be used in the case where a website has not been designed with smaller devices/viewports in mind.
According to MDN, while Chrome on Android implements text-size-adjust fully, Firefox on Android and Safari on IOS do not support the percentage version.
I may be missing something but the question explicitly states that 'the webpage will scale everything in proportion'. Apart from possible inbuilt browser margin and padding on the div, everything is expressed as vw or % so I cannot see anything else that would have an adverse affect on the text positioning.
I also cannot see why this property is being used. It may or may not be causing the problem, but it certainly may affect how text is displayed on some browsers and it seems to be, at best, redundant for a site that is designed with proportionality in mind from the start.
I have the following problem which occured in Safari 11. Safari browser does not "repaint" or "recalculate" the position of the text correctly when the styles are placed before closing body tag.
These styles causing the issue:
h1 {
letter-spacing: .2em;
text-align: center;
}
You could see the example here. The text will repositon when you click on it in Safari. Is there any workaround to position text correctly?
http://jsfiddle.net/rauot9tq/3/
or:
http://jsfiddle.net/rauot9tq/4/
In the picture below, there is misplaced text in the first line and doubled when clicked on it in the second line:
The answer to this issue is to force Safari to re-render the content.
Pure css solution is e.g. to set styles in <head> element to:
body {
display: none;
}
and in the footer:
body {
display: block;
}
Here is updated working fiddle: http://jsfiddle.net/rauot9tq/10/
Another soulution could be to force Safari to redraw using JS:
document.querySelector('body').style.display = 'none';
document.querySelector('body').offsetWidth;
document.querySelector('body').style.display = 'block';
fiddle with JS solution: http://jsfiddle.net/rauot9tq/11/
I've just came across the same issue and it looks like this yours is the only jsfiddle available with simple and proper reproduction, thank you. Though I think the cause of the issue isn't <style> before </body>, otherwise simple <span> inserted in between those two could fix the problem. I was able to solve the problem changing text container display property to inline-block, and adding width to it, so my text could still be in the center.
h1 {
letter-spacing: .2em;
text-align: center;
display: inline-block;
width: 100%;
}
Here is the fiddle: http://jsfiddle.net/rauot9tq/28/ .
Amazing...something I have gotten to work in IE and NOT Firefox! Quite the turn of events, eh?
Anyway, here's the problem. Check out the following page in both IE and Firefox:
http://www.lolstrategies.com/test/button_sample.html
I'm using this file to put together the button.
(http://www.lolstrategies.com/test/composite__V153767378_.png)
Obviously this button is centered in only IE.. what gives?!
I'm using a span for the background that is under the text and another for the tip and then floating them together with float: left as you can see by viewing the source.
So, what can I do to get this span centered in Firefox?
Thanks in advance.. please let me know if there you have any questions about this that I can help answer!
Your span.buttonLarge contains two uncleared floated block-level elements, hence no centering. In order to fix this, you could apply display: inline-block and margin: 0 auto to it.
P.S. You don't have a DOCTYPE specified, that's why your current solution works in IE - it is rendering it in Quirks mode.
Remove float: left; from .primaryLargeButtonSpan and .primaryLargeButtonEnd
after that change display: block; to display: inline; from .spriteButton span.button_label
OR change it to display: inline-block; and then, set the background property to url("./composite__V153767378_.png") no-repeat scroll left -76px transparent;
You might notice some "defect" in the ending image though...
I tried to vertically align some content into div box. to achieve this I have found some CSS that works perfect. Except for you know who it doen't: IE8. When using the display attribute with the value 'table-cell', IE is creating an invisible cellpadding/cellspacing.
.item_box{
display: table-cell;
padding:0px;
margin:0px;
width:160px;
height:160px;
text-align: center;
vertical-align:middle;
}
the two lines 'padding' and 'margin' do affect only FF, Chrome, Opera. I need it to be '0' padding/spacing to preserve the main layout. Any clue how to solve this for IE?
thanks a lot
Regarding your "invisible cellpadding/cellspacing", try experimenting with "border-collapse:collapse;" on your surrounding "display:table" container css.