I am using floats when specifying dimensions of an element. Please see this jsfiddle jsfiddle.net/yMTGJ But both Chrome and Opera fail setting up the right widths and as a result there one pixel gap between the two divs, as you can see from see image i.stack.imgur.com/O9ZxW.png Can't Chrome and Opera handle the float properly? Why is there that one pixel gap?
this happens because you're specifying the width as 466.5px, wich is roundet up to 467px by other browsers (firefox for example). chrome tries to render this correctly, so there's a one pixel line that shows in red/yellow combined (wich confuses the browser and looks like but isn't a gap).
to avoid this, don't use half pixels to specify dimensions (what did you think the example should look like? chrome does exactly what i would expect, but i don't know your intention to use half pixels).
take a look at http://jsfiddle.net/Lupna/ where i have adjusted the width of the outer div to 932px and the inner ones to 466px - works perfectly on chrome.
EDIT:
another solution that would make all browsers display the same if you need a width of 933px would be to built in a gap on your own that should be there: http://jsfiddle.net/eS7Qd/
There's your problem: width: 466.5px; Decimal point is not universally supported. Some info and possible solution: http://www.latentmotion.com/browsers-trim-pixel-decimals/
As said above the problem is with the half pixel. Monitors work and pixels which is a block of light which cannot be halfed. Some browsers may try and be clever to fix this problem but you cannot obtain a consistent result across all browsers when doing this.
I would recommend you work to a 960px width and use something like http://www.960.gs
There is no way you can get this to work as it is not valid CSS.
Related
I used vw values for height/width of elements, Chrome displays them right, but it looks completely different in Opera. Black background elements.
I guess you don't need any css lines, because you can pretty much see it by yourself:
http://meanwhile.today
What can possible be wrong? Do I need to use additional css for Opera?
This is hard to explain ... If you use css scale (and zoom) to zoom down (less than 1), in explorer 9 and 10, the surrounding elements still treat their content area as if it had its original size. for example
transform:scale(0.5);
width:200%;
will be treated as 200% wide, even though its displayed 100% wide.
Let me demonstrate this in a fiddle:
http://jsfiddle.net/pike/CAbcH/
I see both horizontal and vertical scrollbars in IE10. Using 'zoom' instead has the same effect.
How can I explain explorer it doesnt need scrollbars beyond the content ? A jquery solution is acceptable, too.
Here's one solution - http://jsfiddle.net/pike/YmfGC/
Not all that neat, using browser sniffing, it basicly writes a wrapping <div> around the zoomed div, for IE only, using the width() and height() the browser found after rendering the page ...
I changed the overflow:hidden on #scroll and overflow:auto: on #zoomed (ie reversing their overflow basically), making the scrolls function as they should be - is this what you were looking for? Though I have a question on why you would need the to have the scales as you can make it look just as you wanted with css.
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.
Ok sensible answers and not "IE is crap"...
I've produced this site at www.letsrentuk.com and in IE it looks like this:
Now what I've done in the CSS is change the width on the left column, however nothing changed in IE.
Please help, thanks.
IE is crap, and that's what you get for using tables for layout!
..just kidding. Mostly.
The problem seems to be, in ie.css:
.main-right-only {
width: 740px;
}
Remove that, and it works.
All other browsers have width: 680px applied instead, and IE needs the same thing.
It looks like you are floating that left column and there's just not enough room for it so it gets pushed down. If it's the left column that is floated left, try putting the entire column code AFTER the right column code. If the right column is what is floated, try putting the right column code BEFORE the left column code. (I know, it's technically the same either way.)
There are articles about describing IE's method of rounding percentages compared to other browsers which is why IE may have this issue when others don't. And IE is crap, too.
Looks like a width issue. In IE I can see that the left main content is wider than in other browsers. Chrome computes it at 668px, with IE at 728px. This will push the main content down because it can't fit anymore. Either fix your widths or get a better CSS Reset to standardize your element properties.
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