Came into work this morning and found this new window popping up in my google maps api v3 data layer on openlayers. Does anyone know what it is or where it comes from? Seen it before? The code points to a bunch of images and classes labeled i-phone so i suspect one of these APIs thinks i'm on an iphone.
This is the box that is popping up:
Here is the code that is generating the box:
<div style="position: absolute; font-family: Arial,sans-serif; z-index: 1100; overflow: visible; -moz-user-select: none; cursor: default; width: 300px; height: 180px;" class="olLayerGoogleCopyright olLayerGoogleV3"><img style="width: 300px; height: 180px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; position: relative; opacity: 0.9;" src="http://maps.gstatic.com/intl/en_us/mapfiles/iphone-dialog-bg.png"><div style="font-weight: bold; color: white; text-align: center; padding: 5px; position: absolute; left: 0px; top: 0px; font-size: 16px; width: 290px;">Map Data</div><div style="position: absolute; font-family: inherit; bottom: 15px; cursor: pointer; background-color: transparent; border: 0pt none; padding: 0pt; margin: 0pt; font-size: 14px; left: 90px; width: 120px; height: 40px;"><img style="position: absolute; left: 0px; top: 0px; width: 120px; height: 40px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="http://maps.gstatic.com/intl/en_us/mapfiles/iphone-dialog-button.png"><span style="color: white; text-align: center; width: 100%; height: 100%; background-color: transparent; position: absolute; left: 0px; top: 0px; padding-top: 10px;">Close</span></div><div style="color: white; text-align: center; font-size: 14px; position: absolute; left: 25px; top: 45px; width: 250px;"></div></div>
I had the same problem. This seems to have fixed it for me. I changed this:
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
to this:
<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
Related
Intro: I have a <div> as block (main) that contains 3 other divs (pieces). I'm giving my divs absolute positions. It worked well first. But then for I don't know what reason the child divs started to display background and text on 2 different positions on the screen:
Screenshot: The red, yellow, blue rects are the "pieces", the main is behind them. The text below "hello world", "random text" etc. should be displayed ontop of the colored backgrounds, since it's just innerHTML of each div-piece. Not only that the background AND the area with the text are both receiving mouse events. On the right is the console with some styles of each piece.
Question: I need to understand how that would be possible? And what CSS properties cause that? I'm setting all CSS-properties in JavaScript. So there are no style sheets (yet).
<div class="main" style="background-color: rgb(240, 240, 240); color: black; display: block; height: 96px; position: absolute; text-align: left; user-select: none; vertical-align: top; width: 128px; z-index: 1000; left: 127px; top: 302px;">
<div class="piece" style="background-color: rgb(255, 64, 64); color: black; display: inline-block; height: 32px; position: absolute; text-align: left; user-select: none; vertical-align: top; width: 128px; left: 0px; top: 0px; right: 128px; bottom: 32px; line-height: 32;">hello world</div>
<div class="piece" style="background-color: rgb(255, 255, 64); color: black; display: inline-block; height: 32px; position: absolute; text-align: left; user-select: none; vertical-align: top; width: 128px; left: 0px; top: 32px; right: 128px; bottom: 64px; line-height: 32;">random text</div>
<div class="piece" style="background-color: rgb(64, 64, 255); color: black; display: inline-block; height: 32px; position: absolute; text-align: left; user-select: none; vertical-align: top; width: 128px; left: 0px; top: 64px; right: 128px; bottom: 96px; line-height: 32;">goodbye world</div>
</div>
I've got the idea that it has something to do with piece.style.height = 32; or piece.style.height = "32px"; That never happened on the horizontal though.
You have to specify the measurement of the line-height to be the same as your divs. line-height: 32px If you do not specify the unit, the browser uses this number (32) multiplied by the element's font size (16px) = 512px. That's why the text is all down on the page like that.
<div class="main" style="background-color: rgb(240, 240, 240); color: black; display: block; height: 96px; position: absolute; text-align: left; user-select: none; vertical-align: top; width: 128px; z-index: 1000; left: 127px; top: 302px;">
<div class="piece" style="background-color: rgb(255, 64, 64); color: black; display: inline-block; height: 32px; position: absolute; text-align: left; user-select: none; vertical-align: top; width: 128px; left: 0px; top: 0px; right: 128px; bottom: 32px; line-height: 32px;">hello world</div>
<div class="piece" style="background-color: rgb(255, 255, 64); color: black; display: inline-block; height: 32px; position: absolute; text-align: left; user-select: none; vertical-align: top; width: 128px; left: 0px; top: 32px; right: 128px; bottom: 64px; line-height: 32px;">random text</div>
<div class="piece" style="background-color: rgb(64, 64, 255); color: black; display: inline-block; height: 32px; position: absolute; text-align: left; user-select: none; vertical-align: top; width: 128px; left: 0px; top: 64px; right: 128px; bottom: 96px; line-height: 32px;">goodbye world</div>
</div>
It's the inline CSS line-height: 32; causing it. Looks as though the line height is applied to each div but applies to the text within it.
I think line-height is typically applied to e.g. h1, h2, p etc
My Searchbox (Now)
I want to styling my checkbox like this
Thanks
It's my answer.
but maybe it's not good code.
HTML CODE
<div class="search-form">
<input type="text" id="search" />
<span id="search-icon"></span>
</div>
CSS CODE
.search-form{
position: relative;
width: 250px;
}
#search{
border: none;
width: 250px;
height: 40px;
box-shadow: 3px 5px 5px lightgray;
border-radius: 40px;
outline: none;
box-sizing: border-box;
padding-left: 10px;
padding-right: 40px;
}
#search-icon{
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
border-radius: 100%;
border: 2px solid blue;
width: 12px;
height: 12px;
}
#search-icon::after{
content: '';
position: absolute;
display: inline-block;
transform: rotate(45deg);
width: 10px;
height: 2px;
background-color: blue;
left: 10px;
top: 15px;
}
https://codepen.io/anon/pen/XaRmrpenter code here
I'm having issues properly centering this. I believe the whole table is offset to the left a little, but what I really notice are the icons. They should be to the right just a hair. I could add margin to slide it over a bit more, but I'm looking for something precise. It bothers me not knowing exactly how many pixels I'm off by. Would someone be able to tell me what my issues are here? And for the record I'm ridiculously new to coding and wasn't quite sure what my direction was going to be when I started this. I'm sure there are redundancies/inefficiencies in the css code. Here's a fiddle.
https://jsfiddle.net/smatchymo/rdxh9hd4/8/
And here's the code.
<body>
<div id='filter'></div>
<div id='watchface'></div>
<div id='text'>
<table>
<tr>
<td class='times'>4:00</td>
<td id='icon' class='icons'></td>
<td class='hourTemp'>69</td>
</tr>
<tr>
<td class='times'>5:00</td>
<td id='icon1' class='icons'></td>
<td class='hourTemp'>67</td>
</tr>
</table>
</div>
<div id='timecapsule'>
<div id='permatime'></div>
<div id='time'>12:00</div>
</div>
</body>
Here's the CSS:
body {
height: 100%;
width: 100%;
}
#watchface {
position: absolute;
top: 0px;
left: 0px;
height: 360px;
width: 360px;
position: absolute;
border-radius: 100%;
//background-color: black;
z-index: 0;
}
#timecapsule {
height: 360px;
width: 360px;
position: absolute;
top: 0px;
left: 0px;
border-radius: 100%;
z-index: 30;
overflow: hidden;
}
#permatime {
position: absolute;
top: -45px;
left: 105px;
height: 100px;
width: 150px;
border-radius: 5px;
//border: 1px solid white;
background-color: black;
opacity: .7;
color: white;
text-align: center;
z-index: 40;
}
#time {
font-size: 30px;
color: white;
position: absolute;
top: 10px;
left: 105px;
width: 150px;
text-align: center;
z-index: 41;
}
#filter {
position: absolute;
height: 360px;
width: 360px;
top: 0px;
left: 0px;
background-color: black;
border-radius: 100%;
opacity: .7;
z-index: 2;
}
#text {
list-style-type: none;
position: absolute;
top: 0px;
left: 0px;
width: 360px;
height: 360px;
font-size: 16px;
color: white;
z-index: 3;
//overflow: auto;
}
.icons {
height: 37px;
width: 112px;
// border: 1px solid yellow;
}
#icon {
background: url("https://icons.wxug.com/i/c/v4/chancetstorms.svg") no-repeat center;
}
#icon1 {
background: url("https://icons.wxug.com/i/c/v4/flurries.svg") no-repeat center;
}
.hourTemp {
font-size: 24px;
text-align: right;
width: 74px;
margin-right: 40px;
}
.times {
font-size: 24px;
margin-left: 40px;
text-align: left;
//border: 1px solid lime;
width: 74px;
}
table {
padding: 75px 0px 0px 0px;
margin; 0px;
width: 360px;
text-align: left;
list-style-type: none;
font-size: 32px;
}
td {
margin: 0px;
padding-top: 5px;
padding-bottom: 5px;
}
Thanks in advance!
Bahhh, I swear I double checked my math... I was just about to make an edit to my post adding up the pixel sizes of the table data and padding to make things easier and clearer for anyone trying to help, but I realized everything doesn't add to 360 pixels as it should. My icon class width is 10px too small...
I am trying to let the width of a div to be expanded according to its content horizontally
the content is a floating divs , I want them to appear as one row
I used white-space: nowrap; but it is not working on IE and FF ( It works very fine on google chrome )
here is my HTML code :
<div class="floating_menu_container">
<div class="floating_menu">
<div class="floating_menu_item account">
<div class="sub_floating_menu">
<div class="sub_floating_menu_item"></div>
<div class="sub_floating_menu_item"></div>
</div>
</div>
</div>
</div>
and this is the CSS code :
.floating_menu_container{
position: absolute;
top: 25px;
left: 5px;
height: 50px;
z-index: 5;
}
.floating_menu_container .floating_menu{
height: 0px;
width: 40px;
background: #4D75A6;
z-index: -1;
position: absolute;
top: 35px;
left: 7px;
}
.floating_menu_container .floating_menu .floating_menu_item{
width: 30px;
height: 30px;
background: #94acc9;
border: 1px solid #6991c2;
margin: 7px 0px 4px 4px;
cursor: pointer;
position: relative;
}
.floating_menu_container .floating_menu .floating_menu_item .sub_floating_menu{
height: 30px;
position: absolute;
top: 0px;
background: #4D75A6;
left: 42px;
border: 1px solid #003980;
z-index: 10;
cursor: default;
white-space: nowrap;
}
.floating_menu_container .floating_menu .floating_menu_item .sub_floating_menu .sub_floating_menu_item{
width: 20px;
height: 20px;
background: #94acc9;
margin: 5px;
float: left;
cursor: pointer;
}
and here is the example on jsfiddle
I want to expand the div with class='sub_floating_menu' according to its content
Removing width: 20px; from your .sub_floating_menu_item, height: 30px; from .sub_floating_menu, and replacing float: left; with display: inline-block; should fix the issue, little demo: little link.
Bellow is my css i'm using. The div with the largebutton class on it works with the exception of the hover. I would like it to change it's background color, but am not sure why its not working. Any ideas?
edit - I'm working in FF at the moment. I'm not looking for support in IE6, possibly not IE7 either.
.top .bottombar .largebutton
{
position: relative;
float: left;
height: 100%;
width: 195px;
font-size: 13px;
letter-spacing: 1px;
text-transform:uppercase;
line-height: 33px;
text-align: right;
background-color: #99CCFF;
margin-left: 5px;
padding-right: 5px;
overflow: hidden;
cursor: pointer;
}
.top .bottombar .largebutton:hover
{
background-color: #9999FF;
}
edit - Full files
HTML
<html>
<head>
<link rel="StyleSheet" href="css/LCARS.css" type="text/css" media="screen">
</head>
<body>
<div class="top">
<div class="content">
</div>
<div class="leftbuttonbox">
<div class="button">
Label
</div>
<div class="largebutton">
Label
</div>
<div class="button">
Label
</div>
</div>
<div class="bottombar">
<div class="button">
Label
</div>
<div class="largebutton">
Label
</div>
<div class="button">
Label
</div>
<div class="label">
This is a label, it grows as large as it needs to
</div>
</div>
<div class="cap">
<div class="capinner">
</div>
</div>
</div>
</body>
</html>
CSS
#font-face {
font-family: "LCARS";
src: url('../FONT/lcars.ttf');
}
body
{
font-family: "LCARS";
position: relative;
background-color: black;
padding: 0px;
margin: 0px;
}
.top
{
position: relative;
height: 220px;
min-width: 100px;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
background-color: #6666FF;
-moz-border-radius-bottomleft: 50px;
}
.top .content
{
position: absolute;
top: 0px;
right: 0px;
left: 100px;
bottom: 25px;
background-color: black;
-moz-border-radius-bottomleft: 25px;
}
.top .leftbuttonbox
{
position: absolute;
top: 0px;
left: 0px;
width: 100px;
bottom: 60px;
background-color: black;
overflow: hidden;
}
/*
* the button is 1/2 the size of the large button
* the button box can hold 4 buttons or 2 large
* buttons or any combination of equal size
*/
.top .leftbuttonbox .button
{
position: relative;
height: 35px;
width: 95px;
font-size: 13px;
letter-spacing: 1px;
text-transform:uppercase;
line-height: 53px;
text-align: right;
background-color: #99CCFF;
margin-bottom: 5px;
padding-right: 5px;
overflow: hidden;
cursor: pointer;
}
.top .leftbuttonbox .button:hover
{
background-color: #9999FF;
}
.top .leftbuttonbox .largebutton
{
position: relative;
height: 75px;
width: 95px;
font-size: 13px;
letter-spacing: 1px;
text-transform:uppercase;
line-height: 133px;
text-align: right;
background-color: #99CCFF;
margin-bottom: 5px;
padding-right: 5px;
overflow: hidden;
cursor: pointer;
}
.top .leftbuttonbox .largebutton:hover
{
background-color: #9999FF;
}
.top .bottombar
{
position: absolute;
bottom: 0px;
height: 25px;
left: 200px;
padding-right: 5px;
background-color: black;
overflow: hidden;
}
.top .bottombar .button
{
position: relative;
float: left;
height: 100%;
width: 95px;
font-size: 13px;
letter-spacing: 1px;
text-transform:uppercase;
line-height: 33px;
text-align: right;
background-color: #99CCFF;
margin-left: 5px;
padding-right: 5px;
overflow: hidden;
cursor: pointer;
}
.top .bottombar .button:hover
{
background-color: #9999FF;
}
.top .bottombar .largebutton
{
position: relative;
float: left;
height: 100%;
width: 195px;
font-size: 13px;
letter-spacing: 1px;
text-transform:uppercase;
line-height: 33px;
text-align: right;
background-color: #99CCFF;
margin-left: 5px;
padding-right: 5px;
overflow: hidden;
cursor: pointer;
}
.top:hover .bottombar:hover .largebutton:hover
{
background-color: #9999FF;
}
.top .bottombar .label
{
position: relative;
float: left;
height: 100%;
min-width: 50px;
font-size: 22px;
letter-spacing: 1px;
font-variant: small-caps;
padding-left: 5px;
padding-right: 5px;
background-color: #CC99CC;
margin-left: 5px;
cursor: default;
}
.top .cap
{
position: absolute;
height: 25px;
width: 20px;
right: 0px;
bottom: 0px;
padding-left: 5px;
padding-right: 5px;
background-color: black;
cursor: default;
}
.top .cap .capinner
{
position: relative;
height: 100%;
width: 100%;
background-color: #6666FF;
cursor: default;
-moz-border-radius-topright: 50%;
-moz-border-radius-bottomright: 50%;
}
div.top div.bottombar div.largebutton:hover
{
background-color: #9999FF;
}
I think it's a bug in Firefox. Sometimes, when you add CSS for nested classes without specifying what elements these are applied to, the browser goes crazy. Your code works OK in other browsers, so technically it's not your fault, but FF's ;)
I suggest this solution:
.top .largebutton:hover
{
background-color: #9999FF; /* make this whatever color it was before */
}
This worked for me when I tried it with your full code.
Hope it works for you :)
Amit
The key concept of styling a link stands toward following steps:
You have to declare styles of 4 different condition which are a:link , a:visited , a:hover , a:active .
You have to be careful about the order. Because it matters. link > visited > hover > active. (especially to have :hover and :visited work...)
Eventhough you don't need styling one or more of conditions, nevertheless, style them all.
If you pay attention to these, you may have perfectly styled links.
I hope it helps.