I am trying to get this registration form to look consistent across all of the major browsers, or at least Firefox and Chrome.
http://www.lukaspleva.com/MoneyThink/new_mentor_application.html
It looks GREAT in Chrome, especially as far as the spacing between all of the input fields is concerned (it's equal). In Firefox, though, the spacing/padding is kind of all over the place.
Any idea how to fix this issue?
You already have each input/label in td-s, so either give td-s widths (if the input is 100px wide, make its td 120px wide), either increase the table's cellspacing property. However, using tables for layout is not recommended. Use CSS floats and padding/margins instead.
Related
I'm working on a table that has cells requiring a background with lowered opacity, and text on top not effected by the background. The content in the cells is dynamic.
http://jsfiddle.net/6zszm/3/
In IE9 (have not tested in other IE versions) the background is clipped at the span content. In firefox, the background runs wild and overflows to bottom right. In chrome this works like a charm.
Some similar questions that didn't quite cover it:
How to make <div> fill <td> height
Someone suggests a 1px height to the td - this did not work for me, nothing changed. I would also rather not use JS to fix this problem.
Another somewhat related issue: CSS absolute positioning bug with IE9
The strange thing is in IE9, this worked in compatibility mode, but not without.
This is indeed seemingly impossible - unless you specifically define each cell's width and height, which kind of defeats the object of using a table.
Possbile solutions...
RGBA
Assuming you are going to use background colours you can always use background-color: rgba(200,200,200,0.5) with a fallback to solid colours if it fails. Support for RGBA is in all of the top browsers, it doesn't work for IE8 and below however...
Transparent PNGs
The obvious easy one is to fallback to using transparent PNGs, but then this relies on the colours you are using being predefined and rather rigid.
Use -moz-element
Another mad solution to get FireFox to work (if you are using background images rather than colours) would be to use the background: moz-element() ability. Here you create hidden elements on your page of each different opacity that you might require and reference them as a background via id. For example:
<div id="image1" style="background: url(image1.jpg); opacity: 0.5;"></div>
Then reference that on the element you want the background to appear on:
<td style="background: -moz-element(#image1);"></td>
I'm not vouching for this method however, it's rather inelegant and browser specific. Tbh I'm quite suprised to find that this problem is indeed not fixable (esp. in FF) using plain old absolute and relative tricks.
Don't us Tables
The more browser supported solution by far would be to drop using tables and recreate a table structure using good old divs and floats. The only problem with this solution is again you'd have to define most widths and heights and you wouldn't be able to achieve vertical cell alignments unless you fallback to something even more experimental like FlexBox.
You could try working with a CSS framework, like LESS or Blueprint. Most frameworks have background code that makes your styling look the same in all browsers, even if tweaking would normally be required.
So I've got a nice floated form layout that works beautifully in FF and Chrome, but not IE (shock, horror!):
So, off to testing I go and the first shot across the bow is to add in a 1px pink border to the FIELDSET on IE to see where it's borders lay, and this is what I get:
...neat IE, neat. So I remember something about "display" triggering something or other in IE's layout engine to make stuff behave like they should, so I'm off to see the Google. But it seems the hasLayout stuff is an IE7-ism.
Specifics are thus-ly: The element not positioning correctly is a FIELDSET. It only has a single CSS attribute against it; "white-space: nowrap;" (tags underneath it are styled with floats). Adding the "new" clearfix doesn't work.
So.. anyone have any ideas on what the heck is going on in IE? Also, as an aside, the conditional statements don't seem to be working for me (...) which is also just weird.
Agh... the warmth and glow of remembering why I hate IE so very, very much...
Isn't it always the way? You take the time to do a write-up for StackOverflow, and as you post it something comes into focus that you didn't see before?
So... it seems that the cause of this is related to IE9 not setting a width during the render. When the border was put on the FIELDSET it forced a width of at least 2px which was enough to force the wrap. Setting a width of 0px still caused the issue, but with a width of 1px (or more) it wrapped as expected. In the end I simply added in a "clear: left" to the CSS class (which is arguably proper anyway as that is what I expect) and all was again right in the world.
So... in some cases, it seems that IE9 will not set a width on a rendering (rendered?) element (a FIELDSET in this case). This probably has something to do with the hasLayout stuff, but I'm not 100% certain. This may have been caused by the fact that all elements within the FIELDSET are being FLOAT'd left.
I'm using css gradients and padding to simulate buttons around an anchor tag. The problem I am running into is that firefox seems to make the button 3 pixels larger. 1 pixel on top and 2 on bottom. This seems to happen with not only the example i posted but everywhere on the page where i use the padding. I put up and example at http://wemw.net/example.php. In firefox the button top and bottom line up perfectly with the search box, but in chrome as i said its off by 1 pixel on top and 2 on bottom. I am using the w3 transitional(tried strict as well) doctype and a css reset. In the reset all anchor tags are set to padding: 0, so I'm confused as to why this extra padding is being added. Is there a workaround to this or is it just something you have to deal with when working with gecko and webkit browsers?
EDIT: So I logged over to windows and it is appearing the same in both browsers now. I'm assuming it is OS specific problems? Since no where near as many people use linux I'm going to change the padding to make it work, but in the interest of consistency can anyone offer a solution for cross-os cross-browser solutions? I do not own a mac and cannot easily test it there, but if windows/linux can have problems with the same versions of the same browsers is it safe to assume mac could also have issues i am unaware of?
It's not the padding on the anchor tag, it's the size of the text box that is inconsistent. <input> elements always caused such problems for me too, and I always found it extremely tedious to align them together nicely (you haven't yet seen it in IE8, have you?). I think that the easiest cross-browser solution here would be to remove the border from the text box and use a background image instead (or better yet, a background image on the element containing the text box) properly aligned with the button.
Here's a screenshot of the website I'm coding in 4 browsers: http://img801.imageshack.us/img801/2510/browsersj.jpg
There are CSS3 columns (in IE, there's a jQuery plugin simulating the CSS3 columns behaviour). As you can see, Opera and Firefox render the first column slightly lowered in relation to the other columns. This is the first paragraph's margin. Chrome ignores the first paragraph's margin and aligns everything correctly.
I have found that this CSS rule helps to eliminate the issue:
.column-3 > *:first-child { margin-top: 0; }
Still, I find this a bit hacky (what if I WANT the first element to retain the margin in some specific scenario?). Do you happen to know of any other solutions to this problem (preferably something clean and reliable, sort of like the box-sizing property taking care of different default box models in different browsers)?
[EDIT]
Alright, I have found that in Firefox, the issue was an overflow:hidden; set on the container div. Removing it solved the issue.
Still, Opera won't cooperate.
As per #Kyle's request, here's the code to reproduce the issue in Opera: http://jsfiddle.net/LVqtD/1/
not sure if it's still actual, but i did some reading and doctype might be the reason.
http://www.opera.com/docs/specs/presto28/doctypes/
just sayin'
Like my title says, my webpage which has a couple position:relatives that look perfect in google chrome and firefox are offset in safari.
Is there a way in my css to counter-act this offset? I'm not even sure why it's happening.
have you tried using a css reset?
by using a reset you can set the margins and padding of all elements to 0. 0 is the one number that all browsers agree on...from there you will have to add margins and padding to the elements but you should achieve a consistent look in different browsers