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.
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`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]-->
Frankly I have seen and read so many posts on this topic to the point that I almost shied away from asking the question but none has covered the scope of or solved my problem so far.
I get white screen on this website only when I put the browser on full screen (press F11). The space is even worse on large screens such as 49 inch televisions if their browsers are also put to full screen mode. I am using blankslate theme and used elementor plugin to build the site so I dont have an "official" footer per say. How best can I get rid of this because it looks really ugly on huge screens. Solutions such as this one and the like but they dont work including setting the
height: 100vh; //100% /* in custom.css */
Okay a few things:
Your body has margin of 8px on it:
body {
margin: 0;
}
You want to put height: 100vh; on the inner container of the content. It also has margin-top: -1%; for some reason:
.elementor-element-9q9c7yv {
height: 100vh;
margin-top: 0;
}
This fixes everything except there is an empty div on the bottom that is adding 1px of white space to the footer, get rid of it:
elementor-container elementor-column-gap-no {
display: none;
}
There ya go :)
Try:
html, body {
height: 100%;
}
If that doesn't work, you could put this plus the above:
footer {
position: absolute;
bottom: 0px;
left: 0px;
}
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'm using the javascript ticker code found here.
In Chrome and Safari, the ticker displays where it should:
In Firefox, it displays below the 2012 Entrants section:
Complete code here. Can anyone help me out?
Try
#ticker-parent{
width:800px;
float:right;
}
Just apply the following CSS, that should fix in all the browsers:
#ticker-parent {
display: inline;
position: absolute;
width: 960px;
}
Basically just put the marquee inline...