Initially, when my site loads some images are sliced off, which reappear after a few seconds. But once it scrolled the issue will reappear. It occurs in the latest version of Firefox only. It's fine in Firefox version 44, but I am getting the issue in 49 and 52.
The HTML structure is as follows.
<div style="transform: translate(0px, 0px); position: absolute; left: 0px; top: 0px;">
<div class="whitecontent" style=" position: relative;">
<p class="blockelemimage" style="position: absolute; top: -64px;">
<img alt="Client Logo" src="">
</p>
</div>
</div>
there is issues about the transform-box and transform property in Firefox.
they are an experimental features . check here . and they are disabled in the beta versions.
also there are a reported bug here about that.
hope those links would help you.
Related
As stated above, I am unable to figure out why some images on the website aren't being rendered.
I have ensured that the url and filename are in lowercase and I have used the correct url syntax i.e ('/static/img/banner/common-banner.png').
I am receiving a 404 NOT FOUND error when I inspect my code but the images are in the directory.
Please note that most of the invisible images have been referenced in a css file and not directly to the html file.
Here's a sample code:
.banner_area .banner_inner {
position: relative;
background: url('/static/img/banner/common-banner.png') no-repeat center center;
background-size: cover;
background-attachment: fixed;
width: 100%;
min-height: 300px;
z-index: 1;
}
<!--================Home Banner Area =================-->
<section class="banner_area ">
<div class="banner_inner overlay d-flex align-items-center">
<div class="container">
<div class="banner_content text-center">
<div class="page_link">
<a>Home</a>
<a>About Us</a>
</div>
<h2>About Us</h2>
</div>
</div>
</div>
</section>
<!--================End Home Banner Area =================-->
I have gone through most if not all resources and I just can't figure out what the problem is.
Any assistance will be appreciated.
I have a website that displays fine in chrome but not in Firefox.
This is chrome:
This is Firefox:
Three of the four main images are missing - oddly the 4th one displays fine, despite having identical code. the inspector shows the images are downloading successfully:
I have also cleared the caches, updated Firefox, etc., to no avail.
In response to the queries:
All images are served from digital ocean, not locally.
This is the css and html for the learn image and the smile image, of which the smile image appears in FF while the learn button doesn't:
CSS
.four_box {
position: absolute;
}
.four_btn {
cursor: pointer;
transition: all .7s;
}
.four_label_anchor {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
.smile_size {
height: 262px;
width: 326px;
}
.learn_size {
height: 263px;
width: 183px;
}
HTML
<div id="learn" class="learn_size four_box" style="top: 437px; left: 771px;">
<img id="learn_btn" class="learn_size four_btn" style="
background: url(/static/img/swirl_home/chalk-btn.png);"
onclick="animHome(this.id);">
<div class="learn_size four_label_anchor">
<div id="learn_label" class="four_label">Learn</div>
<button id="learn_return" class="btn_href return_btn">
return
</button>
</div>
</div>
</div>
<div id="smile" class="smile_size four_box" style="top: 438px; left: 954px;">
<img id="smile_btn" class="smile_size center four_btn" style="
background: url(/static/img/swirl_home/bird-btn.png);"
onclick="animHome(this.id); homeSnapshots();">
<div class="smile_size four_label_anchor">
<div id="smile_label" class="four_label">Smile</div>
<button id="smile_return" class="btn_href return_btn">
return
</button>
</div>
</div>
I will reread the Firefox link
If you are displaying local images, can be the problem.
Use / instead of \ in the images URL will solve the problem
Otherwise, Mozilla has a general help page for such problem : https://support.mozilla.org/en-US/kb/fix-problems-images-not-show
I use ruby, cucumber and capybara.
My html looks like this:
<tr>
<th>
Promotion codes
</th><td><div class="t-zone" id="promocodesZone">
<span style="display: inline-block;">
<span class="field"><label class="field-label">File name:
<span style="text-transform: none;" class="status-ok"></span></label></span>
<span class="field"><label class="field-label">Codes available:
<span style="text-transform: none;" class="status-ok">0</span></label></span>
<span class="field"><label class="field-label">Codes used:
<span style="text-transform: none;" class="status-ok"></span></label></span>
<span class="field"><label class="field-label">Codes uploaded on:
<span style="text-transform: none;" class="status-ok"></span></label></span>
</span>
<div style="margin-bottom: 15px;"><div class="t-upload">
<div id="promocodesUpload">
<div class="qq-uploader">
<div class="qq-upload-drop-area" style="display: none;"><span>Drop </span></div>
<a class="qq-upload-button btn" style="position: relative; overflow: hidden; direction: ltr;">Upload
<input type="file" name="file" style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;"></a>
<ul class="qq-upload-list"></ul></div></div>
</div>
</div>
</div>
</td>
</tr>
Basically what I need to do is to upload a file by clicking on link "Upload":
<a class="qq-upload-button btn" style="position: relative; overflow: hidden; direction: ltr;">Upload<input type="file" name="file" style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;"></a>
But I keep failing because capybara is unable to find the necessary element...
I have tried many things already:
attach_file('//*[#id="promocodesUpload"]/div/a/input', File.absolute_path($campaign_promotional_code_path))
Result: Unable to find file field "//*[#id=\"promocodesUpload\"]/div/a/input" (Capybara::ElementNotFound)
and
within(:xpath, '//*[#id="promocodesUpload"]/div/a') do
attach_file("input", File.absolute_path($campaign_promotional_code_path))
end
Result: Unable to find file field "input" (Capybara::ElementNotFound)
and
attach_file("Upload", File.absolute_path($campaign_promotional_code_path)
Result: Unable to find file field "Upload" (Capybara::ElementNotFound)
and
click_link("Upload")
Result: Unable to find link "Upload" (Capybara::ElementNotFound)
and
Any help please? :)
Try this:
page.driver.browser.all(:xpath, '//input[#name="file"]')[0].send_keys('/home/userA/Desktop/chivalry-medieval-warfare.jpg')
or:
page.driver.browser.all(:xpath, '//input[#type="file"]').last.send_keys('/home/userA/Desktop/chivalry-medieval-warfare.jpg')
Capybara can't find the file input because it's opacity is 0, so it's hidden on the page. - Your best bet is to use execute_script to modify the file inputs style attribute so it becomes visible before calling attach_file
If you have jQuery on your web page:
page.execute_script("$('input[name=file]').css('opacity','1')")
If you don't have jQuery on your web page:
page.execute_script("document.getElementsByName('file')[0].style.opacity = 1")
As per documentation you can set make_visible option to true if the element is hidden somehow.
# will attach file to a descendant file input element that has a name, id, or label_text matching 'My File'
page.attach_file('My File', '/path/to/file.png', make_visible: true)
attach_file("user[logo]", Rails.root + "app/assets/images/image.jpeg", make_visible: true)
It is better: "In the case of the file field being hidden for styling reasons the make_visible option can be used to temporarily change the CSS of the file field, attach the file, and then revert the CSS back to original."
make_visible: true
As recommended here: https://www.rubydoc.info/gems/capybara/Capybara%2FNode%2FActions:attach_file
I'm trying to add some text over an image. I've set the position of the image to relative and the position of the text is absolute. It's working completely fine in Firefox but not in Chrome.
All I see in Chrome is an image.
Can anybody help me out in this ?
My code:
<p class="call text-right hidden-xs tel">
Call: 1-800-378-7566
</p>
<img src="img/slider/slider01.jpg" alt="" title="" style="margin-top:-28px; position:relative;" />
this could help you.
added
<p class="call text-right hidden-xs tel">
<a href="tel:+18003787566" style="position: absolute;
top: 50px;
left: 10px;
padding: 6px;
background-color: #292D30;
font-size: 26px;
padding-left: 100px;
padding-right: 127px;
z-index: 999;">Call: 1-800-378-7566</a>
</p>
Added top and left position as well as added z-index.
See the example
http://jsfiddle.net/nanduh/wo2eyhp6/
This HTML-Code...
...works with this CCS-Code...
a.testclass
{
background: transparent url(sprite.png) no-repeat -125px -671px;
display: block;
width: 378px;
height: 150px;
}
...in Firefox 12 but not in Internet Explorer 8.
The code is inspired by this question regarding anchors, sprites and CSS. I've found a similar questions, but since this code is placed within a rather complex Drupal installation, I still hope that there's an easier way to fix this issue than going through the code to find some "absolutely positioned outer div and some menu styles", which had been responsible for the issue in 2.
Thanks for your help.
Edit-1:
This is the Firebug HTML-Log:
<div id="banner-area">
<div id="banner-left">
<div class="region region-banner-left">
<div>
<a href="LINK">
<img width="378" height="150" alt="ALTTEXT" src="IMAGE.GIF">
</a>
</div>
</div>
</div>
<div id="banner-right">
<div class="region region-banner-right">
<p>
<a class="testclass" href="LINK"></a>
</p>
</div>
</div>
</div>
The referenced CSS-Code is:
#banner-area {
width:756px;
margin:0;
padding:0;
overflow:hidden;
}
#banner-left {
width:378px;
float:left;
margin:0;
padding:0;
}
#banner-right {
width:378px;
float:right;
margin:0;
padding:0;
}
The first picture (IMAGE.GIF) is shown in FF and IE8. The second hoever, the one i'd like to replace with a sprite, is only shown in FF but not in IE8.
I've turned transparency on and off as Florian suggested, but to no effect. I've reduced the image size by 10px in width and height, but that didn't help either.
After two days of wasted time I've found out that IE8 doesn't import more than 31 css-files: http://drupal.org/node/228818?page=1
After enabling the "optimize css-files"-feature again in the Drupal administration panel of my installation, which I had turned off so it doesn't interfere with my development, everything worked fine.
This question is related:
IE CSS Bug: background-color: transparent behaves differently to background-color: (any other colour)
so change your code to:
a.testclass
{
background: url(sprite.png) no-repeat -125px -671px;
display: block;
width: 378px;
height: 150px;
}
if you really need to erase that background-color (and therefore setting it to transparent) try other settings like
a.testclass
{
background-color: transparent;
}
However, IE8 does not like that so be aware to have some fix included for IE8.