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.
Related
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'm having a problem with some text that is meant to be black. Only in IE7 and IE8 is the text white (in IE6 it is black).
The text is in a paragraph within a slideshow and I've tried all I can think of; pointing at it very specifically with CSS and doing color:#000;. I also tried pointing at it with jQuery to no avail. When I load the page, it begins as black then instantly turns white.
Many Thanks
I finally cracked it! It was to do with a CSS opacity filter. It's strange though because the opacity filter was set to the element's sibling.
ex:
<h3 (opacity set on bg of this, given height, absolute position etc) >
Bla bla bla</h3>
<div (absolutely positioned above h3 sibling) >
<div>
<p>Problem text here</p>
</div>
</div>
I tried setting the z-index of the div to be on top of the h3 but it doesn't work in IE8 and 7. Anyway, applying filter:none; in my IE8 stylesheet HAS worked! :)
try giving the p tag direct styling
<p style="color: #000 !important;">hjskhjakfhjkshfjdhkja</p>
Okay maybe another try:
You said it switches to white suddenly... Do you have some code in your jQuery file, that triggers after the page is loaded completely?
And another way to find out where the problem is located: disable js or css in the development settings and see what happens.
this problem has had me stumped all day. I'm using Firefox 8 and I have a UL element that's located inside a div tag, the div tag is animated with the jQuery UI Accordion widget as the following markup shows:
<div id="accordion">
<a class="ui-accordion-header">Section 1</a>
<ul style="width: 250px !important;">
<li>
<dl id="MyDefinitionList"></dl>
</li>
</ul>
</div>
My problem is that in Firefox the inline width style for the tag gets overwritten and reset to 0px. So the above ends up getting rendered in Firefox as follows:
<div id="accordion">
<a class="ui-accordion-header">Section 1</a>
<ul style="width: 0px;">
<li>
<dl id="MyDefinitionList"></dl>
</li>
</ul>
</div>
This does not happen in Chrome or IE and I have no idea what is causing this in FF. Ideally I would like to set the width dynamically from jQuery, I tried .width(250) and .css("width", "250px") but neither has any effect, I had just set it inline in the example above to test and sure enough it gets overwritten and reset back to 0px. Is there some browser setting or feature in the Firefox rendering engine that causes this behavior. I also tried checking the styles in the jQuery UI CSS, but didn't see anything that defined the width as 0px. Any help is appreciated as we are currently trying to get this web app pushed out and it must be cross-browser compatible. Thanks.
UPDATE:
One thing I forgot to mention this snippet is part of a dynamic Javascript menu system. I don't think I can replicate it on jsFiddle in it's entirety. I'm wondering if the menu generation has anything to do with it? Although there's nothing in the menu code or CSS that specifies a width of 0px. Nor does it explain why this happens in Firefox and not IE or Chrome.
UPDATE 2
Here are some snapshots from Chrome compared to Firefox
Note in Chrome the width I calculate dynamically using jquery is applied to the element.style property as expected.
But in Firefox, the element.style is reset to 0px upon page render.
Css also follow the inheritence.. some css properties are inherited from parent controls css.
as like from body tag and other parents..
use FireBug to check all of this for cross browser issues and better UI design. I am attaching an image that showing such inhertence.
hope you will get the idea about this..
if you want to give preference to some css property must not effected by parent inherited properties then use !important with them.
e.g.
a{ display: block !important; }
may be you will get little idea from this..
if you are adding stuff at run time then observer the changes in firbug and correct the GUI according your requirements and then use .addCss() on the place of .css().
api.jquery.com/addClass/
In webkit browsers this page renders fine:
http://www.ryanhaywood.com/s/film.html
But in the updated firefox it is spaced horribly. I have messed around in firebug for days, I have no idea how to even fix this in firefox.
I apologize for the archaic solution (tables) deployed in aforementioned page
Can anyone spot the problem?
Thanks in advance
Ryan
You had indicated creating layouts with tables is dated, I'd definitely agree. Here's a solution using <div>'s that should work in all browsers
example here: http://jsfiddle.net/pxfunc/hjgQm/
I've classed the films in a left-orientation and right-orientation alternating pattern of div's like so:
<div class="left-orientation">
<img src="http://placehold.it/250x175/ff0" alt="Director's Reel" />
<p class="title">Director's Reel</p>
</div>
<div class="right-orientation">
<img src="http://placehold.it/250x175/f00" alt="Nobody's Off The Hook" />
<p class="title">Nobody's Off The Hook</p>
</div>
and I used margins to control where the films show up within the parent div
#films div {width:46%;margin-top:-100px;}
#films .left-orientation {text-align:right;}
#films .right-orientation {margin-left:54%}
you can adjust the #films div {margin-top:-100px;} up or down to fit your desired height for offsetting the films
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>