I`m working on the website based on blogger platform and I have a problem with css styling.
The website is: http://wibracjezdrowia.blogspot.com/p/opinie-klientow.html
Problem: In Chrome browser everything is working okey but when I check in Internet Explorer than there is a problem with position of logo and green sign "GABINET TERAPII NATURALNYCH" - I mean that there are not in one row as they appear in Chrome.
Can anyone help to solve this problem?
Thanks! :)
the problem is the size of #header div.
You can change the max-width of this div to a lower value and it should be fine:
#header {
float: right;
width: 100%;
max-width: 690px;
color: #444;
margin: 0;
padding: 0;
}
I've changed the max-width from 735px to 690px and it worked well.
It's not much of an answer to the direct issue, but have you considered using Bootstrap to more easily style the elements of your website for desktop and mobile use?
Just before </head> (closing head tag) add the following code to target only IE:
<!--[if IE]>
<style>
*, *::before, *::after{box-sizing: content-box}
</style>
<![endif]-->
Related
So, I am working on a web project, when I encountered a problem when viewing the website on, pretty much, any mobile device. The problem was that, when you first enter the page, the full width of the page would not be displayed, only a small portion of it. I am looking for a solution to correct this problem, without changing all of my code, or implementing a framework, such as bootstrap.
The domain is the-salon.uk if you would like to see the problem for yourself.
Thanks, all.
Harrison
How it appears on Desktop - Screenshot
How it appears on mobiles - Screenshot
Just add
<meta name="viewport" content="width=device-width, initial-scale=1.0">
after the <html> tag. This will make sure your website covers the device's viewport.
You could fudge it by explicitly specifying the width in the meta viewport tag... eg:
<meta name="viewport" content="width=1000px, initial-scale=1.0">
To be perfectly clear, that won't make for a great user experience. It's quite bad in fact, but it will keep all of the content on the page. Users will have to pinch-zoom to use anything though.
Like the comments say, you should look into responsive design. It's really too broad a topic for a SO answer, but it involves using a combination of percentage based/flexible items and css media-queries (look it up) to change the layout of the page at certain screen widths.
Hope that helps somewhat! I'd slap in the change to the meta-viewport as a hot-fix since your site is already live, and then go about the process of learning how to make it responsive. I definitely don't advocate using that viewport trick long term.
If you want everything to fit on the screen, I highly suggest using percentages rather than pixels. Instead of width: 400px, I suggest:
width: 100%
This ensures that the block takes up a certain percentage regardless of which device you are running on.
I can't see your source code, so I can't give any specific feedback. Hope this helps!
Odds are you have width set to an absolute value, I would change this if you have it in the css:
width:{Amount}px
To something more like this
width:{Amount}%
This type of declaration is a relative value meaning it changes with either the size of the browser or the position/size of other elements. If it doesn't resize, odds are you have it set to an absolute value (using the px keyword).This might be useful for you
EDIT
Oop apparently someone said the exact thing as I was typing this up RIP, GG Knightsoul
Add this code will fix your problem.
#media (max-width: 520px) {
.menu { width: 100%;}
.menu li {
float: none
height: 32px;
width: auto;
padding: 0px 6px;
}
#greeting {
padding-right: 25px;
padding-left: 25px;
}
#banner {
background-repeat: no-repeat;
width: 100%;
height: 200px;
max-width: 800px;
background-size: contain;
background-position: center;
background-image: url(/Images/home_background.jpeg);
}
}
*{
box-sizing: border-box;
}
body{
height:100%;
width:100%;
margin:0;
}
<meta name="viewport" content ="width=device-width,initial-scale=1,user-scalable=yes" />
Try this.
Hope this helps.
I have created the following list item which works fine in chrome and every other browser that I have tried. It, however, does not work in IE.
I have created this application using the vue framework and have had multiple issues with Internet Explorer that have been able to be solved but I have been unable to find anything where other people have had a similar issue to this.
For some reason, once an item within the list has been selected the list then works as normal, but on the initial load of the page, the list is as shown in the images above. Also, the list is unable to scroll in IE until an item within the list has been selected.
Here is the list being CSS.
ul{
background-color: white;
padding-top:10px !important;
padding-bottom: 10px !important;
height: 100%;
max-height: 450px;
overflow: auto;
}
And the code used for the scroll bar that works fine in other browsers.
.col-4, .col-8{
padding:0;
overflow: hidden;
overflow-y: -moz-hidden-unscrollable;
}
html{
-ms-overflow-style: -ms-autohiding-scrollbar;
}
#-moz-document url-prefix() {
.list-group{
margin-right: -16px;
}
}
::-webkit-scrollbar {
display: none;
}
Any help will be much appreciated.
Only IE still honors overflow rules on the html element. try changing
html{
-ms-overflow-style: -ms-autohiding-scrollbar;
}
to
body{
-ms-overflow-style: -ms-autohiding-scrollbar;
}
To determine which Emulation mode IE11 is using in your development environment use the Emulation tab of the f12 dev tool.
If you are upgrading an old application to the newer framework, remove any presentation attributes (align, scroll, background etc) from the html tag.
This is an issue I've only just come across today and was wondering what could be causing such a strange issue.
I've had a look at a few example websites and they all experience the same issue. I've opened up the Chrome developer tools to check and the CSS relating to these elements appear under "#media all".
Basically when viewing a site on an iPad running iOS 8.1.2 it seems to ignore the CSS for specific elements completely. This is what it looks like on an iPad (bad):
http://i.imgur.com/wd4xnq4.png
Now this is what I see when using Chrome on Windows (CSS loads and is used, the good version...):
http://i.imgur.com/3aMNPXF.png
I've never seen this before and the CSS isn't loaded in with JavaScript with JS disabled so I'm completely stumped. Help please.
EDIT
Here is the code. I've double checked and it seems as if a class of .active is added when you click on it to show it is the current selected item.
EDIT 2
Here is all the code instead of just the buttons themselves:
.product-view .product-collateral{
width: 100%;
float: left;
margin:15px 0 0;
}
.product-view .product-collateral #product_tabs ul.r-tabs-nav{
width: 100%;
float: left;
}
.product-view .product-collateral #product_tabs ul.r-tabs-nav li{
float: left;
margin:0 5px 0 0;
}
.product-view .product-collateral #product_tabs ul.r-tabs-nav li a{
padding:10px 15px;
display: block;
background-color: #bcbec0;
color: #fff;
}
.product-view .product-collateral #product_tabs ul.r-tabs-nav li.r-tabs-state-active a{
background-color: #fff;
color: #333333;
}
.product-view .product-collateral #product_tabs .tab{
width: 100%;
float: left;
background-color: #fff;
padding:15px;
}
What browser are you using to test it on the iPad? Google chrome also? Are you using browser-specific rules for your CSS? Some elements need to be declared multiple times according to the browser in use.
I've figured out the issue. I wasn't the developer that originally worked on this so it was a head scratcher to begin with.
It turns out the resolution of iPads fell directly in between the mobile view port size and the desktop view port size so so I just need to place the mobile CSS inside a new media view port specifically designed for iPads. I'll post my findings but this should work (hopefully).
EDIT
Yep, so it turns out there was a media query that was set to big and fell between the two target sizes and the iPad size was right in the middle.
So essentially it was just a display: block; that was outside a media query which meant all the CSS was missed and thus only displayed the text. Solved!
Live site- http://www.orourkehospitality.com/hostedContent/williamsinn/
Hover effect doesn't work on IE9 but working perectly on Chrome, Safari, Mozila etc.
Check screenshot below.
Any idea what is the issue & how to fix? I will provide code if needed(that is too long for that reason i skip now).
Add specific width and height for those images:
img.hover-images-flourish {
width: 110px;
height: 25px;
}
this worked for me
<img class="hover-images-flourish" src="http://www.orourkehospitality.com/hostedContent/williamsinn/wp-content/themes/williamsinn/images/hover-flourish-top.png" style="margin-top: 63px;width:100px:height:100px">
I have added
width:100px:height:100px in your style
or you could
change it in css too
.hover-images-flourish {
width: 100px;
height: 100px;
}
IMPORTANT:
if the above fix doesn't work
add
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
It seems that if you remove these properties from hover_pack.css
there is a style applied for IE only which seems to cause the issue:
.ie a.b-animate-go img{
width:100% !important;
height:100% !important;
}
I have created a little slider using jQuery UI, and it's works fantastically in Firefox, exactly as it should. However, in IE, it seems to put padding in between objects. Take a look and you'll see:
http://www.grant[deletethis]unwin.co.uk/slider/slider1.html
I understand that different broswers have different page margins and paddings set automatically, so I tried to use:
* {
padding: 0px;
margin: 0px;
}
But the problem persists.
The Question:
how can I eliminate the gaps between the pictures on my slider (In IE)?
Your page is rendering in Quirks Mode, because you aren't using a doctype (..that will trigger Standards Mode).
Your first line is currently this:
<html>
Add a doctype as the very first line, such as the HTML5 doctype:
<!DOCTYPE html>
It will be magically fixed.
Please add a valid Doctype because your website is being viewed in Quirks mode in IE.
<!DOCTYPE html>
<html> .... </html>
Additionaly
Remove float for the img element itself and set display: block;
.scroller_item {
float: left;
height: 238px;
width: 192px;
}
.scroller_item .image {
display: block;
height: 238px;
width: 192px;
}
I suggest using a reset to put all the styles back to zero in all browsers. Using that should fix your problem.
Eric Meyer's Reset
Try adding:
*
{
padding: 0px;
margin: 0px;
border: none;
}
#sliding_section
{
overflow: auto;
}
You'll have to tweak the * properties, as this will be bad for a production site, but it might work.
Try removing the "float:left" in your ".scroller_item .image" definition in your CSS class.