I came across a small problem, for some reason I see a huge white gap in the left of the <html> tag
I tried to add the HTML and body tag this rules:
overflow-x: hidden;
max-width: 100vw;
It works on desktop view (even if I resize the browser window)
but it didn't help in mobile (it didn't help in mobile view in chrome dev tools).
What can be the problem?
I think it has something to do with it that the site css is mainly using flexbox.
as well I suspect it has something to do with the div marked in red in the picture (which is position fixed but for some reason appears after scrolling down).
This is that div css rule
.contact-mobile{
position: fixed !important;
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
padding: 15px;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
max-width: 100vw;
background-color: $black;
opacity: 0.9;
a{
min-width: 25%;
text-align: center;
padding: 5px;
i{
color: #fff;
}
&:hover{
opacity: 1;
i{
color: $black;
}
background-color: $green;
}
}
}
this is the dev site http://davdev.co.il/broker
this is a zoom out of what I see
https://www.screencast.com/t/P7zQwdWySBv
The problem come from your iframe position,
Put top: -5000px instead of left: -5000px, and it will fix the gap on mobile
Related
My goal is to make a circular icon button wherein a single icon is enveloped by a circle, and the circle shrinks on hover, but the icon stays centered.
I got this effect working in Firefox and Chrome, but in Safari 9 (I assume it's similar in Safari 10), when I hover over the buttons, their vertical position occasionally moves up and down unexpectedly. It seems to mostly occur when rapidly changing which button is being hovered.
This is the HTML structure of the button:
<a class='icon-button'>
<button>
<span class='bg'></span>
<span class='icon'>A</span>
</button>
</a>
This is the SCSS code I am applying:
.icon-button {
$width: 2em;
display: inline-block;
width: $width;
height: $width;
overflow: hidden;
cursor: pointer;
button {
position: relative;
display: flex;
align-items: center;
text-align: center;
width: $width;
height: $width;
padding: 0;
margin: 0;
background: none;
border: none;
cursor: pointer;
}
.bg {
background-color: #FF9999;
width: $width;
height: $width;
border-radius: $width / 2;
margin: 0 auto;
transition: width 128ms linear, height 128ms linear;
}
&:hover .bg {
width: 0.8 * $width;
height: 0.8 * $width;
}
.icon {
color: #FFF;
position: absolute;
top: 0;
left: 0;
line-height: $width;
width: 100%;
}
}
Here is a JSFiddle page where I replicated the issue with the relevant code: https://jsfiddle.net/Auroratide/6u463jL5/3/
Does anyone know what is causing this to happen in Safari but not the other browsers? I'm probably going to need to change my strategy so the CSS is not as jank, but I'm curious nonetheless.
UPDATE:
Here a link to a video of what I am seeing, contrasting Firefox with Safari:
http://tarm.wdfiles.com/local--files/files/safari_jankiness.mov
Try adding
-webkit-transition: width 128ms linear, height 128ms linear;
The -webkit- refers to browsers such as Chrome and Safari, so will hopefully fix the problem you're experiencing.
It seems that the below CSS fixes this:
.icon-button {
position: relative;
}
.icon-button button {
position: absolute;
top: 0; left: 0;
}
I'm still not really sure what was going on in Safari, but it seems to have been a positioning issue relative to the size of adjacent elements (I had noticed the issue does not arise on a button in isolation). Absolute positioning guarantees the elements are positioned based solely on the parent, so I'm guessing that's why this fixes the issue.
I got this weird problem with a parallax footer I created. Take a look at this jsfiddle. I used the parallax footer in a design for a client. The jsfiddle is a simpler version of the code I'm using in the project.
The footer works fine in all browsers, even IE, but for some reason it refuses to work in Safari. So I found the problem:
body,html {
margin:0;
width: 100%;
height: 100%;
}
Setting the height of html to 100% results in Safari not scrolling further after the last section, and thus not showing the footer. It looks like the margin I set on the section before the footer is completely ignored.
Does anyone know how to solve this problem?
Update: edited jsfiddle
You dont need to set the footer to position: fixed set the background attachment on the image to fixed instead. It creates the same effect:
footer {
padding-top: 50px;
background: url(..imagepath..) fixed; //can change to just 'background' and add `fixed`
color: white;
width: 100%;
height: 200px;
bottom: 0;
text-align: center;
overflow: hidden;
/*position: fixed;*/ //remove
/*bottom: 0;*/ //remove
/*z-index: -1;*/ //remove
}
FIDDLE
UPDATE
I think the best solution is to add an empty div with no background color as a spacer. Since you have a fixed amount for the bottom margin you can use that as a height instead:
HTML
<section>
<h1>Scroll down</h1>
</section>
<div class="spacer"></div> <!--add-->
<footer>
....
CSS
footer {
padding-top: 50px;
background-color: #181818;
color: white;
width: 100%;
height: 200px;
position: fixed;
bottom: 0;
z-index: -1;
text-align: center;
overflow: hidden;
/*margin-bottom: 250px;*/ //remove
}
.spacer{
height: 250px;
}
NEW FIDDLE
So I added in an image slider into my webdesign as it is now. It worked fine in IE + Chrome, but in firefox I had a very strange issue.. The image slider images were being pushed towards the right hand side of the page.
When it should look like this:
I really don't know why this is happening.
here is the css for the slider:
<style type="text/css">
#slider {
position: relative;
width: 918px;
}
#slider .viewer {
position: relative;
width: 918px;
height: 200px;
overflow: hidden !important;
}
#slider .viewer .reel {
display: none;
height: 200px;
}
#slider .viewer .reel .slide {
width: 918px;
height: 200px;
}
</style>
And the css for the container around the slider:
#photobox {
border-left: 1px solid #ababab;
border-right: 1px solid #ababab;
position: relative;
width: 918px;
height: 200px;
z-index: -1;
top: -6px;
}
This is really stumping me. You can also see a live version of the site - http://simplesolutions.netne.net/
It is a floating issue:
#slider { float:left }
should fix it.
Adding clear:both to #slider .viewer seems to take care of it.
Margin-top : 6px on the #photobox fixes it in Firefox.
I had the same issue, (Firefox only) with the same type of layout. I found the problem to be margin-bottoms on the nav menu items, pushing the content div below them, to the right.
The tricky part was that the nav menu itself didn't have any margin on the bottom, so it looked like it shouldn't have been interfering with the content below (and it wasn't in other browsers, just in Firefox) - but, at some point I realized that the list items (menu items) themselves did have margin bottoms that extended below the menu bar, and removing them fixed it.
Here is the link to the domain http://linenwoods.com I am working on. I am going to fit the navigation list items on the header, but when the drop down menu is implemented I'm pretty sure it'll go under the #main div like you see currently. Is there any easy way fix to this? I couldn't find anything related to this from a google search .. was hoping someone could help me out. Below is the relevant CSS .. I tried playing around with z-index with no luck as I was told IE8 renders it strangely. If you have the time please follow the link with IE and leave a response .. I am trying to be as cross-browser compatible as possible and already am at a pretty pathetic start. Any help would be appreciated :)
body {
background-image:url('Background1.jpg');
background-position: center;
height: 100%;
margin: 0;
padding: 0;
opacity: 0.8;
filter: alpha(opacity=80);
}
#main {
width : 1010px;
height: 1315px;
background-color: white;
margin-top: 15px;
filter: alpha(opacity=80);
}
header {
width: 1010px;
height: 230px;
background-color: white;
margin: 0 auto;
margin-top: 15px;
filter: alpha(opacity=80);
}
footer {
width: 1010px;
height: 230px;
background-color: white;
margin: 15px 0 15px 0;
filter: alpha(opacity=80);
}
Apply this CSS (works only in IE8 and 9):
ul.nav {
position: relative;
z-index: 2; /* 2 or higher */
}
IE7 does... weird things with the z-index. If you want to target IE7 as well, you can do this (CSS hack taken from this page):
ul.nav {
position: relative;
position: absolute !ie7; /* For IE7 only */
z-index: 2; /* 2 or higher */
}
Using z-index only works on positioned elements. When you tested zindex stuff, were your elements either absolute or relative?
i have a div element that is appearing fine in Chrome but Firefox for some reason has decided to put a border around it. let me share the CSS here:
#cpanel {
width: 320px;
height: 75px;
position: absolute;
//left: 28%;
//top: 32%;
z-index: 9996;
//visibility: hidden;
display:none;
}
.box {
z-index:9997;
//border: 1px solid #000;
width: 75px;
height: 75px;
float:left;
margin-left: 2px;;
/*display: block;*/
background-color: #000;
-moz-opacity: 0.7;
opacity:.70;
filter: alpha(opacity=70);
}
.box .text{
width: 75px;
text-align: center;
color: white;
position: absolute;
//top: 40%;
z-index: 9998;
}
#cpanel.on {
visibility: visible;
}
the cpanel is the outermost div. the .box divs are small boxes inside the cpanel div. and these boxes somehow have 1px white borders that arent present in chrome. i want to remove those borders. thanks.
Use FireBug plugin to view the CSS and see where the border is coming from.
Probably you have bloated CSS file and you have lost in it :) Simplest solution is just to add border:none to .box class. Finding your bad border source of course could help, but it could be needed somewhere else and could not be removed.
I suggest also to do simple ctrl+f in css file for 'solid white'.