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
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'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;
IMPORTANT NOTE! I have only recreated this bug on a 1st generation iPhone running Safari 4.0 (528.16), but as I'm trying to make my site as widely compatible as possible this is still a potential issue...
The problem: floated elements in lists are not appearing on screen. I have narrowed the issue down to the following combination of rules:
<html>
<head>
<style>
p {
float: left;
overflow: hidden;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<ul>
<li><p>hello</p></li>
</ul>
</body>
If I place a non-floated element inside the <li> tag following the <p>, then the text in the <p> becomes visible.
So far I have tested this on the latest versions of Chrome/IE/Firefox on Windows 7, Safari on an iPhone 4, and Chrome/Firefox/Opera on Android (4.2.1 ) and the problem described has not occurred
I repeat: I have ONLY seen it occur on Safari 4.0, but as I can't test every platform/browser version combination out there, I am concerned this issue may be more widespread.
Thanks
I am also encountering this issue, however I am seeing it in Safari 5.1.7 in Windows 7.
My current hot-fix is unfortunately JavaScript-based:
$('.listContainer').hide();
$('.somethingElse').hide();
$('.listContainer').show();
I don't exactly understand why this works, but as long as .somethingElse is a valid selector, the hide/show operation shouldn't get optimized away and will actually force Safari to render the list. Someone who actually understands the nuts and bolts of this could probably lend a more graceful solution, but that's the hack I'm using right now.
EDIT
The weird thing is that if I place the dynamically-generated HTML statically into the .html file I'm working in, there is no rendering problem in Safari. There's something lower-level going on here with how the DOM is constructed in Safari that's breaking this. It's also quite possible that I'm not following some standards for how new elements should be added to the DOM in real time.
Any help? Maybe I should add a question of my own.
FINAL EDIT
Alright, I got it working through CSS, now.
The solution is to give the list-items overflow:hidden.
I don't know why, but that solved my problem. Hope it solves yours. Give it a shot.
I think the problem here is that you've got overflow:hidden which is why your element move out of range. Actually, if you have any element with some width specified and overflow: hidden then you are trying to hide some internal tags
for eg:
<div style='width:200px'>
<div style='float:left;'>asdfkl</div>
<div style='float:left;'>asdfkl</div>
<div style='float:left;'>asdfkl</div>
<div style='float:left;'>asdfkl</div>
<div style='float:left;'>asdfkl</div>
<div style='float:left;'>asdfkl</div>
</div>
Then you are actually trying to hide anything that goes out of given 200px width Provided you have the inner divs float so that all of them are in same line/ section or div
When there's a bunch of float elements, the parent element will not be able to calculate its height properly.
After all your float elements include an empty element as follows
<div class="break"></div>
. break{
height: 1px;
width: 100%;
clear: both;
float: none;
}
First of all, I've been searching for an answer in Google and forums, but didn't find, sorry if it has been asked before and if you can link me to an answer it would be great.
Here's my problem: I have a web calculator made of a table with buttons inside. Here's a link. If you open it with IE it will be all messed up, so don't. I'll work on it later. On FF the rowspaned buttons do not stretch up and down to cover the hole cell, on Chrome it looks as intended. How do I make it look good on FF too? thx in advance to responders.
Using a <table> for layout is a bad idea for numerous reasons that don't need to be re-hashed here. What matters for you is that FireFox displays tables differently than other browsers and you are going to have a hard time laying out your buttons as you want them with that approach.
Instead, just ditch the table and absolutely position the buttons, or float them.
Edit: A floated layout works nicely:
http://jsfiddle.net/gilly3/7rL97/5/
JSFiddle's frame messes up the display if you view it in chrome, but if you view it in chrome outside of the frame, you can see it works fine in chrome as well: http://fiddle.jshell.net/gilly3/7rL97/5/show/
#yekhezkel gilly3 is probably right. but i found solution to your problem. It works in firefox and chrome. I have not tested in IE.
step1: add a class of fix to all the td's containing rowspan=2. It should look something like this.
<td rowspan="2" class="fix">
<button onclick="modifyInout('+')">+</button>
</td>
Step2: add the following css for fix class
.fix {
height: 70px; /* double the value of td height you specified earlier */
}
Let me know if it helps.
Here is the jsFiddle: (open in firefox or other browser to test it.)
Regards :)
Read this and try to add padding
padding: 18px 6px;
Padding will stretch your button