I developed different responsive boxes for the news in the website I'm working in. And everything seems to be working fine except for the news inside the slider on the top of the main content. It displays properly in Chrome, Opera and even in Internet Explorer, but not in Firefox. The problem seems to be in the article elements, specifically in the following lines of CSS code:
.home .first-level-post {
margin: 0px;
width: 100%;
padding-top: 45.1613%;
}
It's supposed to have a height of 280px, that's why I chose 45.1613% as its value. The container's width is of 620px, and it's 45.1613% is 280px.
When I switch the padding-top property off, it takes the 93.3333% value which belongs to the article elements present outside the slider (which are 300px wide), displaying as it should, but that value does not work in the other browsers.
I've been dealing with this for a while I can't seem to find a solution.
You can properly check this issue right here.
Thanks in advance, guys :)
Firefox is interpreting your padding based on a height of 0 due to inheriting from your .home article class.
Changing your CSS to this seemed to fix the issue for me in Firefox and not have an adverse effect in Chrome:
.home .first-level-post {
height: 100%;
margin: 0;
padding-top: 45.1613%;
width: 100%;
}
Related
EDIT: had originally said the wrong iOS version (it's basically the latest, 9.3.5)
EDIT: thanks to the kind soul who edited the question to include the snippet.
not sure why my chrome browser is not allowing editing of snippets in the question editor anymore.
First up:
I tried to make a stack snippet for this question, but unfortunately the snippets editor is not allowing me to edit any code in chrome on a chromebook. I'm not entirely sure why stack overflow don't just write a simple importer that converts a jsfiddle link into the stack snippet format. If the editor does not work, I am forced to resorting to much maligned cut and paste code and link question format.
Anyway the link for my fiddle is https://jsfiddle.net/vwm2opf7/1/
A "full screen" link for that fiddle is
https://jsfiddle.net/vwm2opf7/1/embedded/result/
(because my issue is a mobile web issue it's best just loading that second link to observe the problem).
The code portions are here
html {
font-size: 16px;
font-family: Arial;
}
body {
overflow: hidden;
}
#div_page_header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 140px;
color: #FFFFFF;
background-color: #102339;
}
#div_image_banner {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
#img_banner_pic {
width: 100%;
height: 100%;
object-position: top left;
object-fit: contain;
}
<body>
<div id="div_page_header">
<div id="div_image_banner">
<img alt="logo" src="http://www.graphicdesignbylisa.com/wp-content/uploads/generic-logo.jpg" id="img_banner_pic">
</div>
</div>
</body>
What I'm expecting it to see the logo graphic auto scaled,and inset 10px from the top left hand corner, and scaled to fit vertically to 10px from the bottom of the blue box, with the aspect ratio retained. basically exactly like this:
now in chrome on the desktop, it behaves correctly
on android chrome, it behaves correctly also.
using any browser (eg safari, chrome, opera, even the lastpass browser) on an iphone 4S running iOS 9.3.5, you get the logo image centered in the blue panel.
I'm assuming it a webkit issue.
I'm after a css-only solution to correctly position the logo, with scaling.
The reason for the 2 div approach, is i have found (in desktop at least) the only way to get the object-position to work correctly with an inset is to do this which then allows 100% to be used for width and height. even a calc (100%-20px) does not work properly. the reason for the inset is i'm using media queries to fine tune positioning for different sized screens. (not in this example, but i prefer to reduce example code to the bare minimum to show the problem, as in doing this it reduces complexity, and often I find the solution before finishing the question)
Yes, Safari 7.1-9.1 support object-fit but not object-position (see object-fit on caniuse)
No way around it other than using a polyfill like object-fit-images that will also fix object-fit in IE9+
I made a website which displays correctly on desktop but on mobile devices I get a large white margin on the right side of the screen. I tried every solution I found so far, meaning the following basically:
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
overflow-y: auto;
}
Tried every combination but the most I could get out of it is that I didnt have the margin but instead a vertical scrolllbar which isnt too good either. Could please someone help me with my issue?
You can see this problem here.
You should set also max-width: 100%;, or try to find element in your html code (using development tools in your browser) which has width property value higher than mobile screen resolution.
I found that the .menu2 class element have negative margin value. Setting this to 0, and changing width of .main element to 100% instead of value in ems solved this problem in my browser.
I've noticed that Firefox isn't displaying an SVG logo on this page - http://silodrome.com - It works in IE10+ as well as Chrome and Safari without any issue. The CSS being used for the logo is;
a#logo, a#logo:visited {
width: 90%;
max-width: 350px;
margin: 45px 0 10px 0;
display: inline-block;
position: relative;
z-index: 0;
}
a#logo img {
width: 100%;
height: auto;
}
a#logo:hover {
opacity: 0.75;
}
And the HTML being used on the page is;
<li><img src="http://silodrome.com/wp-content/themes/silodrome/img/logo.svg" width="" height="" alt="Silodrome" /></li>
I've been Googling this relentlessly but I can't find a solution, any advice would be greatly appreciated, I can provide more information if needed. This is a new custom Wordpress theme.
Removing display:table-cell property from #topLinks li{...} seems to display the svg properly in firefox but the RSS feed button gets pushed upwards !
There is nothing wrong with the SVG but the problem lies with the display property !
Will post a right solution soon :)
For one thing, you've explicitly set the width and height attributes of the SVG-containing img to 0. Even if you had these set to the correct sizes, using the attributes is bad practice. However, I think Firefox is ignoring this anyway; at least I can't make the image re-appear by using the dev tools to change the attributes.
I think your problem is that the SVG never reports is size. You define the viewBox in the SVG file, but not the image dimensions. So Firefox's table-cell sizing algorithm shrinks it as small as it can get: 0px × 0px.
Solutions are either to specify the size on your HTML page in CSS, or to give it the image itself a width or height. (Or, of course, do both.)
View this jsFiddle in a WebKit-based browser like Chrome or Safari and then compare it to what you see when you view it in a non-webkit based browser like Firefox or Internet Explorer.
You will see that they're obviously not the same. Below is Chrome on the left and Firefox on the right:
The reason for this is that the fallowing small CSS markup is interpreted differently by WebKit compared to how every other browser interprets it:
span.upArrow.menu{
margin: 36.1% 0 0 12.5%;
}
More exactly: WebKit interprets 36.1% not as 36.1% of the page width but rather 36.1% of the element width or height.
The reason for using percentages in the first place is because the site scales up and down depending on the scale of the screen. This piece of code is for the menu. So the site as it is now looks fine if you use the default browser on an Android or iPhone. But there's a huge ugly triangle in the middle of the content on a Windows phone or if the user uses Opera or Firefox.
So my question then becomes. Is there any way to work around this bug in WebKit?
If it's possible one could write separate markup for webkit and non-webkit browsers. But perhaps even better would be to find a solution which works in both cases.
Take a look at this fork.
I've changed the approach slightly, setting the menu items to position: relative and positioning your arrows rather than adding a margin to achieve the layout.
Here's the updated CSS (remove the additional div and span from the selectors, they aren't necessary):
.menuButton{
display: inline-block;
width: 32%;
padding: 2% 0;
position: relative;
}
.upArrow.menu{
bottom: 0;
left: 50%;
margin-left: -15px;
}
The negative margin matches the border width of your arrow, ensuring it will always be in the exact centre whatever else happens with your layout.
That is happening because, arrow span doesn't have proper position. make that span position as absolute and the menuButton as position:relative.
div.menuButton{
display: inline-block;
width: 32%;
padding: 2% 0;
position:relative;
}
span.upArrow.menu{
position:absolute;
bottom:0; left:45%
}
DEMO
I am having a CSS class with the following code. I am trying to put a DIV at a distance of 140px from the top of webpage and to put it in the middle (equal distance from left and right). It is displaying correctly in Firefox and Google Chrome but not displaying correctly in Internet Explorer 8. Can anyone tell me what is the problem with this code? Also can anyone give me some link with browser compatibility guide?
div.main
{
padding: 0px;
width: 980px;
/*height:1350px;*/
/*border: 1px solid red;*/
margin: 0 auto; /*helps in getting the DIV to be in middle i.e. equal distance from left and right*/
overflow: hidden;
margin-top:140px;
}
I find QuirksMode most helpful for browser compatibility info, plus it has some other great info.
The problem, however, depends on more than just the CSS. In order to answer your question, we'll need to see some HTML and the rest of the CSS you've got. And a description of what's incorrect with IE's rendering. Without seeing that, my first suggestion is to make sure you're using a strict DOCTYPE.
Note that centering the DIV will only center it in the containing block (probably BODY), which, wichout an explicit width, will only be as wide as the content and not the full width of the window.
margin-top:140px; is "the problem". To reach your aim use:
padding-top instead of margin-top;
if you cann't - make a wrapper div and apply padding-top to it;
or apply position: relative/absolute; top: 140px; to the div. It is suitable
sometimes.