In Google Chrome (And I think firefox?) a page renders correctly
But in IE, the page appears to be "transparent", see This image.
<div style="margin-left:-10px;float:left;width:130px;height:30px; background-image:url('/gc_mycoinamount_display.png');">
<div id="mygoldamount" style="margin-top:7px;">5 Coins</div>
I believe this div causes the issue, when I remove it, the page looks correct. Is the CSS on it incorrect?
I needed to close a div, silly me.
<div style="margin-left:-10px;float:left;width:130px;height:30px; background-image:url('/gc_mycoinamount_display.png');">
<div id="mygoldamount" style="margin-top:7px;">5 Coins</div></div>
Related
I'm experiencing trouble trying to implement drop-cap using pseudo-element ::first-letter. The thing is, since we're building a CMS, I can't know in advance the structure of the DOM. So we could have to display a layout like this:
<div>
First letter should be bigger
</div>
or this
<div>
<div>
First letter should be bigger
</div>
</div>
We support mainly Chrome, Safari, and Firefox. The problem is showing with the latter, if you try to run this HTML snippet with it :
<html>
<style>
.first::first-letter {
font-size: 100px;
}
</style>
<body>
<div class="first">
<div>
Hello
<div>
</div>
</body>
</html>
You get this display for Chrome and Safari
And this one for Firefox
So my questions are, is this a known issue with Firefox ? Have you also experienced this and if so did you manage to find a workaround ?
Thanks in advance
Tried to implement a drop cap using ::first-letter pseudo-element on nested div, I expected to have the same behavior on Chrome Safari and Firefox, but Firefox seems to behave differently.
I am trying to create a rather "complex" button (at least to my tastes), and I managed to make it work, until I tested it on firefox.
Here is my code.
<div class="got_a_background">
<li class="blue_link_wrap">
<div class="contact_link button_anim"></div>
<a href="contact.html">
<div class="pos">
<div class="border_white"></div>
<p class="blue_link_en">contact</p>
<p class="blue_link_jp">お問い合せ</p>
</div>
</a>
</li>
</div>
https://jsfiddle.net/xvkszyvm/1/
Joined a working fiddle, the result is a bit off mainly due to other files involved but the idea is there.
I need that button with a background and that additional border inside.
On hover, the background image should scale a bit to give a feedback on what you are doing. No scaling should apply to the text and the white border
The whole thing works perfectly on chrome and safari but not on Firefox.
EDIT: Apparently, the problem only occurs if there is a background on a parent div. Updated the fiddle.
Any ideas and Tips on why it is not working and how to bypass that?
Thanks
Ok, found out I made a typo and got a minus sign on a z-index.
Talk about a stupid mistake.
I am currently working on a one-page-layout, in which I've put an iframe of another one-page-layout.
Chrome and IE are doing well, but Firefox seems to mess with me.
http://neu.createk-medien.de
Just click on an item (currently every item opens the same iframe) and see for yourself.
Be aware the page is work in progress.
main-page:
<div id="tablet" class="box">
<div id="close_tablet" onclick="tablet_weg()">x</div>
<iframe src="http://tablet.createk-medien.de"></iframe>
</div>
the actual iframe is a lot of code and a really got no idea what causes the issues.
EDIT:
Solved it.
Firefox actually hates "display: none" on iframes.
Bypassed it with "visibility: hidden".
I'm relatively new to HTML and CSS so with a bit of luck there is an easy fix to my problem.
I have a few images for my site, 1 as a background image and 2 which are just sitting in the body. In safari everything displays flawlessly however in Chrome, Firefox and Opera only 1 of the images in the body displays.
I've tried searching for answers, the only suggestion that I can find is to disable ad-block which resulted in no-change.
I've also tried disabling the stylesheet but the problem still persists.
<div class="photocontainer" id="homepage"><h4 id="phototext">A Guide to Quality Web Development</h4></div>
<div class="Body">
<h2>We're here to <Span>help.</Span></h2>
<img id="plan" src="./images/plan.jpg" alt="plan">
<img id="flowchart" src="./images/flowchart.jpg" alt="flowchart"/>
The above code contains the 3 images. The second of which is the only one that works.
I should mention that the photocontainer div has a background-image specified by the stylesheet.
Option 1:
I suggest changing you src codes.
From src="./images/plan.jpg"
To src="plan.jpg"
Option 2:
Add width and height codes to your <img> tags.
Option 3:
Try removing the id from one of the <img> tags.
I hope one of these work. Try to mix them around. Like removing the id and adding the width and height too.
Found the problem!
The images themselves had trouble opening. Opened them in photoshop and then saved for web. Not it works.
I've been trying to achieve cross-browser functionality for a drag/drop input file, i've come pretty close but this last thing i can't quite figure out. As the title says, it's working just fine in Chrome / IE but in firefox it's not behaving the same. I've left out the drag/drop functionality in my fiddle for simplicity as it's not relevant to the problem.
<div class='browseWrapper'>
Drag & Drop Images Here</br><em>Or click to browse.</em>
<input class='browseImage' type='file' />
</div>
Here's what i've got so far: http://jsfiddle.net/sPJ9u/
Thanks in advance.
EDIT: Sorry i should have been clearer in explaining the problem. If you inspect the input element in firefox you'll see that the overflow:hidden isn't hiding the overflow as it does in Chrome / IE, causing the offset to be out.
Firefox Version: 26
Check out this related question: Why does overflow:hidden not work in a <td>?
It's because you have display set to table-cell, which makes it behave as if the div is actually a td.
You can use this structure in your css:
-moz-overflow:hidden;