I'm having an issue with two of my divs. One of them is fixed (.post), the other is relative(.imageStyle):
.post{
position:fixed;right:0px;top:0px;bottom:0px;width:48%;background:#fff;
color:black;box-shadow: -2px 2px 10px #1f1f1f;text-shadow:none;
overflow:auto;height:100%;z-index:99999
}
.imageStyle{width:45%;position:relative;background:#1f1f1f;
margin:0px;padding:0px;height:100%;z-index:5}
Inside of .post is an implementation of Google Maps V3. In IE & Firefox, the Map displays as expected; when i scroll down in .imageStyle div, .post stays fixed where its supposed to be. However, in Chrome, when I scroll in down inside of .imageStyle, the map stays where its supposed to be, but the rest of the content of .post scrolls with .imageStyle (or behaves as if it was relative).
This is especially weird because on every other page I have with these divs, the content inside of .post behaves properly on ALL browsers. Furthermore, this problem only persists in Chrome.
The Google Maps is an implementation of Google Maps V3 API being served from my IDX vendor. The CSS for their implementation looks like this:
/*** Map Search (Template #1) ***/
#IDX-propTypeTextLinks {display:none;}
#IDX-searchNavWrapper {margin:5px auto; text-align:left;position:relative;}
#IDX-mapPropertyTypes {float:left; width:192px;}
#IDX-mapPropertyTypes select {border:1px #AAA solid; float:left; width:182px;}
/* This link allows a user to save a map search directly */
#IDX-saveMapSearch {float:left;}
#IDX-googleMap {width:100%; height:600px; clear:both; position:relative; overflow:hidden; border:1px #000 solid; margin:10px 0;}
/* This holds the informational text regarding the number of properties found in a given search */
#IDX-mapInfo {width:400px; height:14px; margin:5px 0 5px 0; float:left; left:5px; font-size:11px; text-align:left;}
/* The controls float near the google map and add additional features to the core Google Controls */
#IDX-mapControls {padding:0px; margin:0px;/*width:97px;*/ height:100%; position:relative; top:0; left:0;/* background:url(/images/layout/mapSearch/20- controlBg.jpg) top left repeat-y; border-right:1px #AAA solid;*/visibility:hidden;display:none;height:0px;width:0px;}
#IDX-mapContainer {color:#000; background:#E5E3DF url(http://www.idxco.com/images/layout/gload.gif) top center no- repeat;width:100%;height:602px;}
#IDX-mapContainer a:link, #IDX-mapContainer a:hover, #IDX-mapContainer a:active, #IDX-mapContainer a:visited {color:#000;}
/* The mapWithContainer should normally be #IDX-googleMap width minus #IDX-mapControls width minus border width. In this case, 560 - 96 - 3 = 472px */
.IDX-mapWithContainer {width:464px; height:360px; position:relative; top:0; left:0px;}
.IDX-mapWithoutContainer {width:100%; height:100%;}
#IDX-mapOverlay {width:150px; height:50px; position:absolute; top:10px; right:10px; z-index:500; display:none; background:url(/images/layout/mapSearch/overlay.gif);}
/* Mode switching allows the map to be drawn with different tilesets */
.mapTypeButton {cursor:pointer; margin:0; padding:0; border:0;}
#IDX-modeRow {width:96px; height:131px; position:relative; clear:both; background:url(/images/layout/mapSearch/20-modeBg.jpg);}
#IDX-mapTypeMap {width:76px; height:20px; position:absolute; top:34px; left:10px; background:url(/images/layout/mapSearch/20-modeMap.jpg);}
#IDX-mapTypeSat {width:76px; height:20px; position:absolute; top:56px; left:10px; background:url(/images/layout/mapSearch/20-modeSat.jpg);}
#IDX-mapTypeHyb {width:76px; height:20px; position:absolute; top:78px; left:10px; background:url(/images/layout/mapSearch/20-modeHyb.jpg);}
#IDX-mapTypeTer {width:76px; height:20px; position:absolute; top:100px; left:10px; background:url(/images/layout/mapSearch/20-modeTer.jpg);}
/* The following CSS controls the general search controls */
#IDX-searchForm {margin:0; padding:0;}
#IDX-searchBoxWrapper {width:555px; height:60px; clear:both; margin:0; padding-bottom:20px;}
#IDX-searchBox {width:500px; height:55px; margin:0 auto; float:left; position:relative; left:97px;}
/* This container should be as large as the #IDX-googleMap declaration (minus borders, of course) */
#IDX-mapBasicBox {width:100%;height:600px}
#IDX-mapBasicBox input, #IDX-mapBasicBox select {border:1px #AAA solid;}
#lowPrice, #highPrice, #sqFt, #daysOnMarket, #acres {width:100px;}
/* These elements will be display and need CSS */
#IDX-mapMinPrice {float:left; width:110px; height:40px; margin-top:4px;}
#IDX-mapMaxPrice {float:left; width:110px; height:40px; margin-top:4px;}
#IDX-mapSearchAcres {display:none; float:left; width:110px; height:40px; margin-top:4px;}
#IDX-mapSearchBedRooms {float:left; width:110px; height:40px; margin-top:4px;}
#IDX-mapSearchBathRooms {float:left; width:110px; height:40px; margin-top:4px;}
#IDX-mapSearchBedRooms select {width:100px;}
#IDX-mapSearchBathRooms select {width:100px;}
#IDX-mapSearchHelpText {clear:both; text-align:center; font-size:8pt; filter:alpha(opacity=50); -moz-opacity:.50; opacity:.50;visibility:hidden;}
I've tried tweaking with the position of both the aforementioned divs and the Map CSS and cant seem to get it to work in Chrome.At the moment I am assuming that the problem is somehow related to either the Google Maps API itself, or the CSS for it. Any and all help with this issue would be greatly appreciated.
Edit: Also, I want to mention that the issue does not appear untill the google map has finished loading. In other words, if you are on a slow connection, or if you block the map function, you can see that all the elements behave correctly UNTILL the map is loaded.
So after continued searching, I found a partial solution that dates back almost three years. Apparently the issue is with webkit:
*{-webkit-font-smoothing: subpixel-antialiased !important;
-webkit-transform: none !important;}
This fixes the issue I had with the fixed div, but now I cant "move" through the map (For example: If I'm looking at Miami, FL and I try to click and drag the map, it moves but does not ever load the new map area).
Funny thing is this is an issue that Google was aware of three years ago but still hasn't fixed (The solution above came directly from Google's forums: Issue 1411 Gmaps-api-issues).
Related
I have this (simplified) css for the select element to get rid of the browser-specific appearance
.select{
display:inline-block;
position:relative;
}
.select:after{
position:absolute;
bottom:0;right:0;
content:'\2193';
}
select{
appearance:none; (-moz and -webkit too)
width:100%;
height:100%;
}
(Best seen in http://jsfiddle.net/kwpke3xh/)
body{
background:#eef;
font-family:sans-serif;
}
.select{
display:inline-block;
background-color:#fff;
border-radius:.5em;
border:.1rem solid #000;
color:#013;
width:8em;
height:1.5em;
vertical-align:middle;
position:relative;
}
.select:after{
position:absolute;
bottom:.15em;top:.15em;right:.5rem;
content:'\2193';
}
select{
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
font:inherit;
border:none;
background-color:transparent;
color:inherit;
width:100%;
height:100%;
padding:0 .5em;
}
<span class="select">
<select>
<option>A</option>
<option>B</option>
</select>
</span>
It looks good, aside from Firefox still showing the arrow (as described Firefox 30.0 - -moz-appearance: none not working)
The only technical problem is that when I click on the select element, it shows the option elements, but if I click directly on the arrow, it does not.
Is there a way to avoid this?
The simplest CSS solution would be to add pointer-events: none to the pseudo element. In doing so, you can click through the element because mouse events are removed.
Updated Example
.select:after {
position:absolute;
bottom:.15em;
top:.15em;
right:.5rem;
content:'\2193';
pointer-events: none;
}
(Just take browser support for the property into consideration.)
This is my footer menu home button icon, but the home button is displayed without any space in left side.
css
#footer-menu{
margin:0px;
padding:0px;
width:auto;
}
#footer-menu .homeButton a{
background:url('http://w3schools.com/css/img_navsprites.gif');
background-position:left top;
height:20px;
padding:5px 18px 20px 28px;
border:none;
width:38px;
}
#footer-menu .homeButton a:hover{
background:url('http://w3schools.com/css/img_navsprites_hover.gif');
background-position:0 -45px;
}
I have given padding values, but it will not move to right side. The home button I had got from w3schools. please give good home button.
#footer-menu .homeButton {
margin-left:20px;
}
it is my guess only as you didnot give us any live example like jsfiidle or any snapshots.so it is very hard to guess what you are actually having now and what you want
I am creating image which has a link on top with. Image has been set as relative, and the link as absolute on the bottom of the image. Basically it is a link on top of the image with absolute position and fixed widh and height. On hover, background of the link changes it's color. The problem occurs whenever I click on the link: it goes top of the image (on Opera and IE it stays there). Images as examples:In the picture below is a normal state of image with link (on hover background's transparency changes).
In this picture below is a state of a:active of the link.
It stays as absolute element, but changes it position. I have tried applying for a:active these options: copy everything from normal and hover states, position:static;, even tried to place a margin-top with a size that would be required to stay in bottom - no luck.
Here is the css code of it:
.image-with-link {width:300px; height:135px; position:relative; float:left; overflow:hidden;}
.image-with-link a {width:280px; height:18px; position:absolute; bottom:20px; left:0; padding:5px 10px; color:#fff; text-align:left; background: rgba(0,0,0,0.3); overflow:hidden;}
.image-with-link a:hover {background: rgba(0,0,0,0.5);}
(link is no longer needed).
You have conflicting CSS on lines 79 and 194 of custom.css that is overriding the absolute positioning:
You are declaring:
a:active, a:focus {
position:relative;
top:1px;
}
and on line 194:
.kategorijos .vienas a:active {
position:static;
}
Both of these are causing the problem. You want the item to keep position:absolute on :active.
This is your problem:
a:active,
a:focus{
/* Give clicked links a depressed effect. */
position:relative;
top:1px;
}
You overwrite position, but not top in following selector: .kategorijos .vienas a. You should add top: initial for fix.
I assume that position: static is by design here:
.kategorijos .vienas a:active {position:static;background: url('../images/arrow.png') 270px 4px no-repeat rgba(0,0,0,0.5);}
This moves link below image.
Try this, I guess this will work :)
a:active, a:focus {
position: relative;
top: 1px;
}
.kategorijos .vienas a:active {
position: static;
}
I know this has been asked before--but it's such a simple issue--that all the answers are too advanced...lol....
Anyway, I always get stuck on the simplest things. Here is the deal: I have two images on top of each other on the right side, and below that two images side-by-side.
The vertical images located on the right hand side work. However, the #tent and #twins imgs are also vertical and I need them to be horizontal. I have tried the float property but they simply stack vertically with one on the left and one on the right.
Again...this is a simple issue, I know. But I do greatly appreciate the assistance.
This is the code I have thus far:
#aboutUs h2{
font-size:36px;
font-family:Arial, Helvetica, sans-serif;
padding:0 0 0 0;}
#aboutusPara{
position:absolute;
float:left;
width:30%;
line-height:40px;
font-family:Arial, Helvetica, sans-serif;}
#karennorm{
width:50%;
border-radius:100px;
margin-left:50%;
position:relative;}
#wagon{
width:50%;
margin-top:5%;
margin-left:50%;
border-radius:100px;}
figcaption.aboutTop{
margin-top:.5em;
margin-left:50%;
text-align:center;
font-size:12px;
font-style:italic;
width:50%;}
#tent{
width:40%;
border-radius:100px;}
#twins{
width:40%;
border-radius:100px;}
section#aboutBottom{
padding:2em 0 0 0;}
figcaption.aboutBottom1{
text-align:center;
font-size:12px;
font-style:italic;
width:30%;
padding:0 0 2em 0;
margin-left:5%;}
figcaption.aboutBottom2{
margin-left:5%;
text-align:center;
font-size:12px;
font-style:italic;
width:30%;}
Normally the images should stack horizontally by default but maybe within your code you changed something so try this for the 2 images you want to be next to eachother horizontally.
display:inline;
or
display:inline-block;
if you want to keep the box model properties for the images.
I have a list of thumbnails with links and images, so when the user hover an li element, it's height becomes 100%, but the problem it works wrong in Chrome for some odd reason. I don't understand why in Chrome the hovered li width doesn't adjust to its "new" size.
(Note: this is a simplified version of my problem)
Also, this problem occurs only on :hover. but not, lets say, with :nth-child
Playground link
Update: problem continues... See my solution in the answers, BUT the problem continues..I've zoom in with the mouse and you will see it happening..note that number of images can be huge.
Update 2:
Force a redraw every mousehweel event fires...
thumbs.hide().show(0);
My solution: Solution playground
The idea is to trick Chrome to re-calculate the width, by giving the image a new height that is almost the same on the li:hover state. BUT this isn't enough for Chrome. transitions must also be applied on the img. This is all voodoo coding, but this is the least-ugly solution I could come up with:
ul{ list-style:none; display:inline-block; height:80px; white-space:pre; width:100%; }
li{ display:inline-block; vertical-align:middle; height:60%; -webkit-transition:.2s; transition:.2s; }
li:hover{ height:100%; }
li a{ height:100%; padding:0 2px; display:block; }
li a img{ height:96%; -webkit-transition:.2s; transition:.2s; }
li:hover a img{ min-height:96%; }
I am new here and I am not sure if this is a good practice but I will post my observation and not a precise solution:
The same problem appears on Opera.
This seemed strange to me - when li:hover a img{ border:1px solid black; } or any similar css code that is not supposed to make any change to the current situation is added it all starts to behave very strange. ex - http://jsbin.com/operib/43/edit
And here it is the solution I do not find elegant, just a quick fix:
http://jsbin.com/operib/39/edit
EDIT: After testing #Carol McKay's result I realized that the transition is making the whole mess. The next link (node 58) is node 43 linked above (which is basically node 1 just added border to the image on hover) with removed transition and it works just fine http://jsbin.com/operib/58/edit.
It seems that any css rule should be added on hover so the <img/> dimensions are recalculated.
Apply transition to the image instead.
css
ul{ list-style:none; display:inline-block; height:80px; white-space:pre; width:100%;
}
li{ display:inline-block; vertical-align:middle; height:60%; }
li a{ height:100%; padding:0 2px; display:block; }
li a img{ display:inline-block; vertical-align:middle; height:96%; transition:0.15s; - webkit-transition:0.15s; }
li:hover{ height:100%; }
li:hover a img{ height:100%; opacity:1; }
http://jsbin.com/operib/83/edit