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
Related
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;
my friend was helping me make a new design for my website but has since gotten a full time job. Web Design is not my strong suit and I can't get it to work across all browsers!
So right now, my website looks good in Chrome and Safari. But is broken in FireFox
http://dl.dropbox.com/u/22866203/sb%202/speedbump.html
http://dl.dropbox.com/u/22866203/sb%202/speedbump.css
I was researching/trying different CSS Resets to fix this problem (Meyers Reset) but this only seemed to break the page in Chrome and Safari as well.
Any suggestions would be much appreciated!
If you started without a reset then a reset is not going to help. You particular problem is that you're not clearing your floats. To solve it do this:
#social-media, hr { clear: both; }
Btw, you have a 404 error on an image and many other warnings. Check firebug or devtools.
As I was messing a bit with your site with firebug, I noticed that if you add to some divs the property float: left it arranges the site to look like it does in chrome.
Download FireBug for firefox (great tool) and arrange the floating divs exactly how you want them to be.
Hope it helps.
Give the #wrapper overflow:hidden and remove margin top from previous and after divs.
The problem is that you have floated elements in the body text (left) and the green box (right) but the parent isn't floated, meaning that the floated elements will not affects it's overall height. Also, don't use hr, instead, use borders.
http://dl.dropbox.com/u/33811812/stackoverflow/speedbump/Speedbump.html
The paths are now relative to my folder and you'll need to change them back.
IDs need to be unique(#wrapper) I see four ( 4 ) instances of it from the image above.
Use a class instead as it can be re-used.
.wrapper:after{
visibility: hidden;
height:0;
display: block;
clear:both;
*zoom:1;
content: '.';
}
I am working on the site http://childrensdentalland.com/ and it is a wordpress site. When viewed from all the browser except IE ,the site is showing ok but when We views through IE it shows a pink strip under the
"Welcome To Phoenix Pediatric Dental Specialists".
Can anyone help me to correct this problem.
Thanks
Somdeb
hmm could have something to do with float. your navDiv has no float which can break things in browsers.
Check your margins and heights as well. make them set and that may as well fix the problem
Try adding this to your class. I did this in Firefox just to see what happened. But anyways. I think it is because it needs to have float:left; . I don't have IE with dev tools so I am sort of taking a shot in the dark.
.footshadow {
float:left;
margin-top:13px; /*this will have to be tweaked*/
}
You have some weird absolute positioning going on there.
What you should be doing instead is floating .menu-header left, #searchpedi right, and then clearing both on .navshadow. Remove all position: absolute and use float instead.
Hi it very simple you just define one properties in you css file .navshadow{top:221px;}
as like this
.navshadow {top:221px;}
IE 9 on Hover over a link, pushes some of the HTML down the page.
When i remove the color from
td.subarea > h2 > a:hover { color: #aa051a; text-decoration: none;}
the problem does not occur.
I can't paste all the code here, and fairly sure its a unique problem to this page.
But maybe someone out there has seen something similar.
Its not moving the Link(a tag) down the page, its the whole containing table that moves.
This problem seems to occur in IE9 when the container element is set to overflow: auto and there is some hover action taking place in the child element.
There is a very simple solution of adding min-height: 0px to the container element, which works.
The detailed explanation of the bug and this solution can be found in this link:
http://blog.brianrichards.net/post/6721471926/ie9-hover-bug-workaround
Make sure your line-height and font-size properties are the same for normal and hover.
Sort of found the problem, well makes the table stop moving. margin-top:-20px.
Although it olny shifted down about 10px.
Probably some IE9 rendering issue. IE7/8 actually move the table on intial loading.
The font sizes, line-heights, all that css, is all good for the link.
Marc B is probably close to the issue of IE rendering something wrong and cauing floats and such to mess up.
Now have to real style a table layout wihtin a table layout page(ugh, hate table layout).
For me I had to specify
height:100%;
Then I had to go ahead and specify
width:100%;
The 'min-height: 0px' by mohitp above got me on the right track.
I have a site that has a simple HTML button in a form. All browsers show this button correctly. However, in Firefox 2 and Seamonkey it appears just as a solid grey square that cannot be clicked on and that has no text.
<input id="getaudiobutton" type="button" value="Get Audio" onclick="convert()" />
For those of you that have Firefox version 2 or Seamonkey, please see my site
Thanks all
SOLVED
No idea why but what I did was increase the size of the div holding the button so that the button can be shown fully. There wasn't enough space for the button to be clicked. Firefox 2 and Seamonkey managed to find this a bit troublesome.
Thank you all for your help. :)
From what I can see just by viewing it in Seamonkey and looking at the contents of the page and your CSS, you may want to check the style for the div that the button is contained in. I can see the button in Seamoney, but it is cut off at the very top, only allowing about 1-3 pixels to show. I can click it as well.
My guess would be that since you are setting a static height of 34px for the style that is applied to the parent div of the button, it is cutting off most of the button.
I observe the same behavior as s13james (+1 for that) but have some more things I want to point out.
You may want to rethink your use of line-height and height there, as the wrapping of that input element to the next line with the combination of those values has a lot to do with your trouble.
I see you're applying the same style via id and class, however that style is declared only for use as a class:
div.w_span_auto{
background:url(../images/wr.png) top right no-repeat;
padding-right:18px;
height:34px;
line-height:34px;
text-align:left;
border:none;
}
(For an id, you'd need to have declared it as div#w_span_auto.)
I'm not sure why you're declaring it twice either. There's an identical declaration later in the same css file.
Cheers.
Are you sure JS is enabled on your copy of Firefox?
Do you really have to worry about FireFox 2? It also only has a 3% market share:
http://marketshare.hitslink.com/report.aspx?qprid=0
DO you need a type="submit", instead of type="Button"?