I have several simple web pages that contain a similar layout. All these pages are embedded in a bigger product within iframe, to keep them independent. Since the iframe can be resized in any way and expanded, can go fullscreen and so on, the page should adapt to it. The chosen solution was to rescale the whole content, as it makes it dramatically simple to create (and media-queries wouldn't work).
I have noticed however a problem when testing on Firefox (v68 x64). When I scale down divs with borders, at some point the borders are scaled inconsistently. Different sides of the divs will either show or not any border. The resulting effect is horrible, and I noticed that this does not happen with other browsers (not even IE11 :D).
I prepared a little jsfiddle to show what happens: jsfiddle
.container {
width: 400px;
height: 400px;
background: black;
transform-origin: 0 0;
padding-top: 30px;
transform: scale(0.4);
}
.btn {
border: 2px solid white;
margin: 20px 30px;
height: 50px;
color: white;
line-height: 50px;
padding-left: 20px;
}
<div class="container">
<div class="btn">Btn 1</div>
<div class="btn">Btn 2</div>
<div class="btn">Btn 3</div>
</div>
This happens when I downscale a div that contains other divs with borders. In this example the second button appears to not have a top-border.
I obviously don't expect all pages to scale down indefinitely and still look good, just have consistent borders that do not disappear. In other browsers it works much better. Does anybody know how this problem could be solved/improved? I am not able to change the underlying conditions (scaling requirements, embedding the page), but I have full access to the page itself and I'm able to change it.
Let me know if you require more details (e.g. Screen details, default page resolution...etc).
NOTE: The suggested duplicate has nothing to do with this issue, while the problem "looks similar", a quick read would show that the browser in question is different, the basis of the problems are completely different, and going further, none of the solutions work.
Related
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.
On my website, when I show adverts on mobile, I get an odd yellow rectangle obscuring the right-hand side of my Google AdSense:
That's my own wobbly question mark in the the yellow space, and I've fill-flooded the background to make it stand out more.
I've examined the styles through the Chrome Developer Tools window, but I cannot find anything set to yellow in the style hierarchy, and I'm using mostly the bog-standard minileven WordPress-supplied theme. What could be causing this? How can I correct the CSS to get rid of this? Ads look fine on the desktop version, only mobile.
A typical page is this one.
Looking at your site and viewing an Ad I do see some extra spacing (the one I viewed is different than the one in your screenshot)
When I view the DOM this is the code that is causing the extra spacing:
<td class="rh000c">
<div class="rh-box-empty rh000"></div>
</td>
Here is the related CSS:
.rh000c {
height: 102px;
padding: 0;
width: 2px;
}
.rh000 {
background-color: #ffffff;
display: inline-block;
height: 102px;
overflow: hidden;
padding: 0;
width: 2px;
}
For some reason the Ad is passing this code into its iframe so I don't think there is much you can do to remove it. (Well, there might be ways to remove this code but you might violate your service agreement with the Ad agency if you do)
If I were you I would contact the Ads company you are using (it seems that you are using Google Ads) and ask them about this issue directly. Hope that helps.
I had another closer look at the problem, and for some reason or other there is a rule like this:
embed, iframe, object {
width: auto;
}
For some reason that I can't work out, this overrode the explicit <iframe width="320", so by trial and error I found that adding this to my custom CSS:
.mobile-theme .adsbygoogle iframe {
width: inherit;
}
Overrode the width: auto; and I now no longer get my yellow border. There's still a bit of an ugly yellow border at the link widget at the bottom, but at least that's not obscuring anything, so I'll ignore it for now...
I just came across something
#element {
left: 50%;
margin-left: -(elemntwidth/2)px;
}
being (elemntwidth/2) already a number like 30px, for ex.
I would like to know if this is a safe way of crossbrowsing the responsive elements positioning so I can abandon the way Im doing right now with .jQuery
$('#element').css(left: (screenwidth - element / 2) + 'px');
More than everything Im interested in a cross mobile device browsers efective solution and this css only I found it clean and simple, so simple that I need to ask if this could be true. Thanks
CSS Frameworks have this functionaility baked in.
Checkout: Foundation 3
Otherwise, you will need to rely heavily on Javascript and Media Queries to achieve pixel perfection.
Not to mention this is the first of many problems you will encounter to acheive cross devices / browser stable elements. All of these things have been carefully thought out for you alreacdy.
This is a way. For some elements it works, resposive, centered and no jQuery.
HTML
<div class="element ver1">TESTE</div>
<div class="element ver2">TESTE</div>
<div class="element ver3">TESTE</div>
<div class="element ver4">TESTE</div>
CSS
.element {
position: relative;
width: 90%;
background: black;
margin: 0 auto 10px;
text-align: center;
color: white;
padding: 20px 0;
}
.ver1{width: 80%;}
.ver2{width: 70%;}
.ver3{width: 60%;}
.ver4{width: 40%;}
Wroking Demo | Final result full screen
AFAIK this solution is browser compatible. it's even better than {margin-left:auto; margin-right:auto;} in some cases. but there is an other interesting point by centering DOM-elements this way:
e.g. if your whole page-wrapper is centered with {left:50%,...} and the browser window width is smaller than the wrapper you cannot see the whole content by scrolling to left and right. the browser cuts the content. try it...
Try to scroll left and right to see the white left- and right-border...
The other known solution is to set {margin-left:auto; margin-right:auto;} but afaik this just works together with {position:relative;}- not with {position:absolute;}-elements
It's been a long time when I started up with this unconventionally solution...
use this code snippet:
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -(height/2);
margin-left: -(width/2);
}
this works even if the parent dimensions change.
The code you have will work - I've used the same approach many times - so long as you know the dimensions of the element you are centering.
Note that you can use the same approach using percentage based widths to work better with responsive layouts.
You're on the right track.
Here's a quick and dirty round corners technique I've been playing around with.
<!-- assuming the div isn't statically positioned -->
<div>
<img src="box_TL.png" style="position:absolute;top:0;left:0;"/>
<img src="box_TR.png" style="position:absolute;top:0;right:0;"/>
<!-- other content -->
<img src="box_BL.png" style="position:absolute;bottom:0;left:0;"/>
<img src="box_BR.png" style="position:absolute;bottom:0;right:0;"/>
</div>
Yeah it's ugly, but it's fast, the corners are fluid, it avoids nested divs and requires no javascript. The corner images and content order makes no difference, but I thought it might be more intuitive to order corners and content this way.
Question: How terrible is this technique? Is it passable or should I abandon it completely?
I'd use jQuery Corner Plugin. It's very fast and works in all modern browsers, and also in IE6.
It's terrible. Your markup should be content, and your layout should be in the style. Not intermingled. You should go with:
<div class="whatitis">
bla blah ... content here
</div>
and the style:
.whatitis {
background: whatever;
border: whatever;
border-radius: 1em;
-moz-border-radius: 1em
-webkit-border-radius: 1em;
}
Yes, sure, some browsers won't get rounded corners. But if you hack up a solution that will give properly rounded cornsers even in browsers that does not support that, you will have a complex solution, and odds are that your site will not work att all in some other browsers. So you should ask yourself: What is more important, that the site works at all in some browser X or that you get rounded corners in some other browser Y?
Addition: Using the jQuery plugin mentioned in another answer (or some other pre-packaged solution) might be accepptable. As long as it does not require any extra <div>, <img> or other tags.
It's a terrible solution, sorry :-)
It's true that you don't need any JavaScript or nested div elements. The JavaScript is easily avoidable, no matter what. But is four irrelevant img elements better than a few nested div elements? The img element is supposed to contain image content, using it for layout purposes is basically the same as using tables for layout. Yes, it works, but it's wrong, and it ruins all semantic value.
If I were you, I'd do it this way (excuse the silly class-names, they are just there to illustrate):
The markup
<div class="boxWithRoundedCorners">
<div class="roundedCornersTop">
<div class="roundedCornersTopRight"></div>
</div>
<p>Your content goes here, totally unaffected by the corners at all. Apply all necessary margin and other styling to make it look good.</p>
<div class="roundedCornersBottom">
<div class="roundedCornersBottomRight"></div>
</div>
</div>
The CSS
.boxWithRoundedCorners { background: red; }
.roundedCornersTop {
background: url(topLeftCornerPlusTheTopOfTheBox.gif); /* Should be pretty long. Assuming your corners are 20*20px, this could for instance be 1000*20px, depending on how large the box would ever be in the real world */
height: 20px;
}
.roundedCornersTopRight {
background: url(topRightImage.gif);
width: 20px;
height: 20px;
float: right;
}
.roundedCornersBottom { background: url(topBottomCornerPlusTheBottomOfTheBox.gif); /* same "rule" as above */
height: 20px;
}
.roundedCornersBottomRight {
background: url(bottomRightImage.gif);
width: 20px;
height: 20px;
float: right;
}
Got it? Hang on, I'll put up an example somewhere :-)
Edit: Just threw up an an example!
Anyhow, this method will ensure a complete flexibility regarding height and width of the box, and the layout within the box always works the way it should, unaffected by the corners.
Yes, it gives you some nested divs with no purpose other than the layout - but then again, that's what DIVs are used for. IMGs should always be content-related imagery.
You could do it with all the corners being 15*15px and setting the background-color of the container. However, when stretching these images like this, you get the opportunity to add shadows, gradients or other effects. This is what I'm used to do, so I did this this way with the stretched images.
This method is well tested out, and should as far as I know/remember work fine at least all the way back to IE 5.5.
This is a very old topic, but since it's re-appeared on the front page, I'll add a comment.
In the last few months, a new solution has appeared for rounded corners, which solves the issue for all relevant versions of IE (6,7,8).
CSS3Pie is a 'hack' for IE which allows you to set up rounded corners in your CSS and not worry about it anywhere else. At a stroke, you can throw away all those extra divs in your markup and those jquery plugins, and just specify it in your stylesheet the way it should be.
All other browsers support rounded corners in CSS, and have done so for long enough that you don't need to worry about older versions.
CSS3Pie also helps with CSS gradients and box shadows in IE too, so it's a very big win for cross-browser developers.
you'll come into issues with IE6 using PNGs so you will either need to add the correct CSS filter background to divs instead of images or use javascript to help turn the png images into transparent gifs with the png background added.
http://www.twinhelix.com/css/iepngfix/
If the box is fixed width, then there's an interesting trick you can do which works in IE8 and the rest (but not IE7-):
div.rounded {
width: 600px;
padding: 0 10px;
}
div.rounded:before,
div.rounded:after {
display: block;
content: "";
width: 600px;
height: 10px;
}
div.rounded:before { background: url(images/rounded_top.png); }
div.rounded:after { background: url(images/rounded_bottom.png); }
Unfortunately this doesn't work with anything that has a fluid width, and it's not copatible with older IE browsers, but I still like it :)
I have a problem with my website and how it appears in some browsers:
http://www.karentiede.com
In Firefox 2.0 and many other browsers, the "content" column overflows to the left and appears on top of the decorative border, making some of the content unreadable.
One Q&A in here suggested that making all the pages HTML 4.01 Strict DOCTYPE might help make all browsers work the same, but that question was the reverse-worked in Firefox and didn't work in IE. Is there another/different fix I should try?
From the CSS:
.column2 {
float: right;
width: 80%;
}
From any of the pages that act up:
<body id="schedule_toc">
<div id="col1_schedule_toc">
<div class="column2">
When I check the site in http://www.browsershots.org, it looks bad on initial display in a lot of the browsers. I've had one or three (probably Firefox) readers tell me they couldn't see the text and I suspect they were probably more sophisticated users than I am a CSS-writer.
I took a look at the page and the problem only appears when you re-size the page.
The problem is your right div is 80% so when the screen becomes smaller and ratios change and that 80% then overlaps into your left background.
Take a look at http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/ to see how to set up a "static-fluid" layout.
The reason why this is happening, it seems, is because the image (floated left) isn't the height of the entire page. So, when the page isn't wide enough to accommodate both the image and the text next to each other, the text breaks to the next available whitespace.
Try floating both elements to the left, and apply a left-margin equal to the width of the "decorative" column to column2 as such:
.column1 { float: left; width: 125px; }
.column2 { float: left; margin-left: 125px; }
.clear { clear: both; }
You'll need a clearing div below both elements:
<div class="column1">...</div>
<div class="column2">...</div>
<div class="clear"></div>
The problem is definitely ratios, as pointed out by savageguy. If what you are wanting is a fixed-width left column with a variable width right (main) column then you could use this (not tested but should work):
#col1_schedule_toc {
width: 175px;
float: left;
}
.column2 {
float: right;
width: 100%;
}
EDIT: Incidentally, I noticed that (at least on the page I looked at) you also aren't closing the left column before you open the right, so technically the right column is inside the left, which will cause issues with my suggested fix. So you also need to move the closing div for col 1 so that it's above the opening div for col 2.
EDIT 2: Plus, as pointed out by Plan B, you'll also need a clearing div beneath both elements to prevent the parent (container) div from collapsing:
div.clear {
clear: both;
font-size: 1px;
line-height: 1px;
overflow: hidden;
}
In addition to savageguy's right-on-point advice, the image you have in the page (your picture, etc.) to the left is a fixed width. This is why, when the browser is re-sized, that 80% suddenly becomes too wide.
On column2, setting a left margin of the width of the image + the amount of separation you want (for example, 160 should work, but you can play with it), then making the width of the column2 100% (of the remaining width) should prevent your overlap.
[Edit: Plan B also offers a very robust solution.)