I need to place the text over the black panel at the position I need. So here is my layout
<div class="wrap">
<img src="img/portfolio/geometria/thumb.jpg" alt="Geometria.ru" title="Geometria.ru" width="360" height="240">
<div class="description">Приложение для <b>Geometria.ru</b></div>
</div>
.description {
font-size: 20px;
font-family: "Calibri Light", "Calibri", sans-serif;
padding-top: 11px;
padding-bottom: 7px;
}
.description b {
font-size: 24px;
font-family: "Calibri Bold", "Calibri", sans-serif;
font-weight: normal;
}
The text in Firefox, Safari 7 (yes, I know it's on WebKit) and Chrome is almost the same (+/- 2px isn't a problem), but Opera render it completely weird. Can I handle this?
Update
Chrome 32 on Windows render as bad as Opera do. On Mac OS all is ok.
Related
When you create a contentEditable div, include the Buefy/Bulma stylesheet, open the web page in Safari, place your cursor in the editable div, and try to enter text, Safari freezes.
HTML that triggers the error:
<div contentEditable="true"></div>
I'm using Safari v13.0.3 and Buefy v0.8.8.
Turns out this is a bug in WebKit: https://bugs.webkit.org/show_bug.cgi?id=202262
Using a contenteditable div, when text-rendering is set to optimizeLegibility and font-family includes -apple-system, the bug is triggered. This text-rendering and font-family combination is used by Buefy / Bulma. From the stylesheet:
html {
background-color: white;
font-size: 16px;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
min-width: 300px;
overflow-x: hidden;
overflow-y: scroll;
text-rendering: optimizeLegibility;
text-size-adjust: 100%;
}
...
body,
button,
input,
select,
textarea {
font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
The fix is to override font-family for the editable div. I include the fonts from Bulma's stylesheet, except -apple-system, and Safari doesn't crash:
<div contentEditable="true"
style="font-family: BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;"></div>
I'm hoping someone would be able to help me with my query. I've done quite a bit of research online and haven't found any particular solution to it yet.
While running my test case, I sometimes encounter an HTML popup that I'm unable to handle in my script. It is very random (well based on customer behaviour while they are traversing the site) and can popup at any time during the customer journey. Sometimes it doesn't popup at all. When it appears only then an entry is visible inside the DOM.
Basically, it is a livechat window (LivePerson to be precise) suggesting customers that an agent is available to help them complete their order if they wish to do so.
Here is a screenshot:
popup screenshot
The below is available in Firebug when I inspect the element:
<div id="LPMcontainer-1483053256847-0" class="LPMcontainer LPMoverlay" style="margin: -143px 0px 0px -285px; padding: 0px; border-style: solid; border-width: 0px; outline-color: rgb(106, 159, 177); outline-width: 2px; font-style: normal; font-weight: normal; font-variant: normal; list-style: outside none none; letter-spacing: normal; line-height: normal; text-decoration: none; vertical-align: baseline; white-space: normal; word-spacing: normal; background-repeat: repeat-x; background-position: left bottom; background-color: transparent; border-color: transparent; width: 571px; height: 287px; cursor: pointer; display: block; z-index: 107158; position: fixed; top: 50%; bottom: auto; left: 50%; right: auto;">
<div role="button" tabindex="0"><img src="https://www./content/dam/tcom/apps/live-person/live-person-chat-bundles-top.jpg" id="LPMimage-1483053256849-2" alt="" class="LPMimage" style="margin: 0px; padding: 0px; border-style: none; border-width: 0px; outline-color: rgb(106, 159, 177); outline-width: 2px; font-style: normal; font-weight: normal; font-variant: normal; list-style: outside none none; letter-spacing: normal; line-height: normal; text-decoration: none; vertical-align: baseline; white-space: normal; word-spacing: normal; position: absolute; z-index: 600; left: 0px; top: 0px;">
</div>
<img src="https://www./content/dam/tcom/apps/live-person/live-person-chat-bottom.jpg" id="LPMcloseButton-1483053256847-1" alt="" class="LPMcloseButton" style="margin: 0px; padding: 0px; border-style: none; border-width: 0px; outline-color: rgb(106, 159, 177); outline-width: 2px; font-style: normal; font-weight: normal; font-variant: normal; list-style: outside none none; letter-spacing: normal; line-height: normal; text-decoration: none; vertical-align: baseline; white-space: normal; word-spacing: normal; position: absolute; cursor: pointer; z-index: 9999; left: 0px; top: 194px;" data-lp-event="close" role="button" tabindex="0">
</div>
It appears in all browsers.
I'd like to handle it in either of the following ways:
Stop it from loading at all (again due to random nature ).
OR
While the script is being executed, as soon as the window appears, it presses 'No thanks' button (id="LPMcloseButton-1483053256847-1" in the above code) and then continue executing the rest of the steps. Please note that id is dynamic in nature, i.e it's unique every time.
Your help would be highly appreciated.
It may not be random. Some sites that I write automation for have something like this also. After some investigation I found that the dialog always popped up after 30 seconds... it just seemed random because I could be on any page when the 30s was up. After more investigation I found that the site looked for a cookie and if it wasn't found, the dialog would be triggered. I found the cookie that was created after the dialog was closed and created it at the start of the script so that it would no longer open.
I would suggest that you look for an existing cookie that was created for that site and see what's in it. Then browse to the site, wait for the dialog to pop up, and close it. See what changes... if the cookie changes or a new cookie is added, etc. then just mimic that behavior before browsing the site.
NOTE: In my case, I had to intentionally browse to a missing page on the domain, e.g. somesite.com/someerrorpage, to create the cookie without the timer starting. Then I just navigated to the site and continued the script.
I'd say the easiest way to get around this is to create a webdriver wrapper that for every call you would send to webdriver, first check if the dialog is present. If it's present, close it, otherwise send the action over to webdriver.
Typically, to insert a Glyphicon inside a Bootstrap 3 app, it's as simple as:
<span class="glyphicon glyphicon-envelope"></span>
etc. In many apps, however, it is typical for Glyphicons to be "customized" so that they appear with numeric superscripts like so:
Above, this red/white "5" bubble might indicate that the user has 5 notifications. I'm wondering how this "numeric superscript" effect can be achieved in Bootstrap 3.
You mean something like this?
This is just some CSS basic styling, there is afaik no "standard" and certainly no special HTML tags nor "secret" bootstrap features that supports it. Below my suggestion - modify so it fit your expectations :
.rw-number-notification {
position: absolute;
top: -7px;
right: -6px;
padding: 3px 3px 2px 3px;
background-color: red;
color: white;
font-family: arial;
font-weight: bold;
font-size: 10px;
border-radius: 4px;
box-shadow: 1px 1px 1px silver;
}
markup :
<span class="glyphicon glyphicon-envelope">
<span class="rw-number-notification">7</span>
</span>
demo with some examples -> http://jsfiddle.net/rqfthhkx/
NB: Not completely related, but I do believe, though, that it is common practice to use the <i> tag when you are using glyphicons, fontawesome etc
<i class="glyphicon glyphicon-envelope"></i>
at least it renders as exactly the same -> http://jsfiddle.net/rqfthhkx/1/
Font Awesome
Example:
<i class="fa fa-envelope text-primary">
<span class="number-notification">7</span>
</i>
The .number-notification CSS is the same, except it seems impossible to adjust the position of the number container to fa-xx sizes and different font-sizes. The solution is to wrap the <i> element into <h> elements and specify the relative position in rem units :
.number-notification {
position: relative;
padding: 3px 3px 2px 3px;
background-color:red;
color:white;
font-family: arial;
font-weight:bold;
font-size: 10px;
border-radius: 4px;
box-shadow:1px 1px 1px silver;
}
.fa .number-notification {
top: -1rem;
right: 1rem;
}
h3 .fa .number-notification {
top: -1.2rem;
right: 1.2rem;
}
h2 .fa .number-notification {
top: -1.5rem;
right: 1.5rem;
}
h1 .fa .number-notification {
top: -2.2rem;
right: 1.8rem;
}
This should look more or less the same with different font sizes.
New fiddle -> http://jsfiddle.net/b86oj9gd/
I'm using IE10 to design something at the moment [Because it needs to be completely compatible with it], and I'm having trouble.
I have two boxes on either side of the page, with an image at the top. The inner top corner is curved using border-top-*-radius, and this is also implemented on the image inside.
CSS:
#rightsidebar {
position:fixed;
width: 300px;
height: 400px;
padding: 10px;
margin: 0px 0 0 500px;
border-top-left-radius: 110px;
-webkit-border-top-left-radius: 110px;
background-color: #ffffff;
border: 2px dashed #000000;
}
#leftsidebar {
position:fixed;
width: 300px;
height: 400px;
padding: 10px;
margin: 0px 0 0 0px;
border-top-right-radius: 110px;
-webkit-border-top-right-radius: 110px;
background-color: #ffffff;
border: 2px dashed #000000;
}
HTML:
<div id="rightsidebar">
<img style="background-color: #000000; width:300px; height:196px; border-top-left-radius:105px; -webkit-border-top-left-radius:110px;" src="{image:right image}">
</div>
<div id="leftsidebar">
<img style="background-color: #000000; width: 300px; height: 196px; border-top-right-radius: 105px; -webkit-border-top-right-radius: 105px;"src="{image:left image}">
</div>
My JSFiddle is here: http://jsfiddle.net/V73G5/
Using IE, you can see that the right container's image isn't doing the same as the left's, even though I just copy and pasted the code and edited it slightly. It does however work on Chrome, which makes me think this may be a bug. Any insight or suggestions on how to resolve this?
EDIT: I've found a way to work around it using:
border-radius: 105px 1px 0 0;
It's not a proper solution, and I've still no clue as to why this happened in the first place, but the 1px is barely noticeable and seems to make it work.
The behaviour of border radius is affected by compatibility mode in IE10.
If you press F12 you can view the developer console and change the compatability settings.
If the Document mode is set to IE7 or IE8 Standards then the border-radius-left: 10px; doesn't work, however if the standards mode is set to IE9 Standards or Standards then it behaves as expected.
download PIE.htc file and attached your css
#rightsidebar {
border-radius: 8px;
behavior: url(/pie/PIE.htc);
}
for more details check below image one.
may it will help you.
Using the code below, both Chrome and Opera (latest versions supporting border-radius) on Mac show a small blue area outside the rounded corners (which seems to a part of the defined background-image). Why?
<!doctype html>
<head>
<title>Testcase for rounded corners on submit button with bg-image</title>
<style type="text/css">
input[type="submit"] { background: url(http://skriblerier.net/div/rounded-corners-input/bg-bottom.png); color: #fff; height: 40px; width: 150px; border-radius: 10px; border: 1px solid #fff; font-size: 14px }
</style>
</head>
<body>
<form>
<div><input type="submit" /></div>
</form>
</body>
I worked around this with background-clip: http://www.css3.info/preview/background-origin-and-background-clip/
background-clip: padding-box;
-moz-background-clip: padding;
-webkit-background-clip: padding;
FF3.6 does it as well, but not as noticeably (with -moz-border-radius, of course). Looks like they're trying to automatically smooth out the corners, and just can't hide all of the background when there's also a border applied. Removing the border declaration (not the border radius) will fix it. So:
border-radius: 10px; border: 1px solid #fff; making it: border-radius: 10px;
I suspect, but don't know, that this has to do with the difficulties of faking half-pixels and nesting round shapes in more of a bitmap than vector 'space'.