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?
Related
I have an SVG image with clickable SVG polygons on it and some hover image effects on top of that. works perfectly fine in every browser, except - of course - in IE. actually edge (12 + 13) and IE 11 are fine. Even IE10 (Metro) - but not IE10 Latest (as tested in Browserstack).
Since this has to be seen with the images I put up a working example here (well working apart from IE10):
SVG clickable images
so following that link you can see what it should look like (again, except IE10) and this is a screenshot from Browserstack of what it looks like in IE10 Latest:
So in this specific case, the black & white-image (background) - instead of having a 7.5% margin-left and 85% width like the rest of the svg stuff - is resized by the height, which seems to be 100%, thus resulting in incorrect layering of the SVGs.
i really don't know what's causing this - any help is much appreciated!
It looks like you are only supplying a width for the <svg> element (ie. no height). So it is probably IEs SVG scaling bug that is your problem. See the following question for a workaround.
SVGs not scaling properly in IE - has extra space
I am using a custom scrollbar for webkit browsers. The thing is that when the browser supports webkit. I want it to remove the border I have around the entire body.
I got it to work by using -webkit-box-sizing on the right div and a negative margin value as you can see in the fiddle: http://jsfiddle.net/Yfw49/1/
And it works really great except for browsers that supports box-sizing but not webkit scrollbars. For example mobile browsers that don't have scrollbars at all.
Is there a way to make it work? I tried a jQuery method that asked if the browser supported webkit, and if so, remove the div. But that made the div appear for a short while and then removed it. It looked bad.
Please have a look at the jsfiddle http://jsfiddle.net/Yfw49/1/
(I know I could make the markup cleaner without all the elements. But let's focus on the other problem)
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.
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
Here is the test site:
http://www.bodwell.edu/summer/new_busp_11/
It looks totally fine in any browser, except of course IE.
The menu bar and title png graphics are getting cut off right at where the underlying layer is. I have no idea how to resolve this and still keep this looking as it is in the rest of the browsers, i.e. Firefox, Chrome, Safari, etc.
Help!
If you remove the opacity attribute it will work. (the one below) from the main_panel class
filter: alpha(opacity=90);
In the meantime you can do that (perhaps have an IE specific CSS that will remove that filter).
They look similar enough in my monitor.
You could use that yellow background image with a PNG transparency and not have that tag.
I'm unsure why IE is doing that though.