The situation:
Parent div: 300px
Child 1: 50px width, 5 px border
Child 2: 232px width, 8px margin left
Works fine in chrome and IE, but Safari and firefox drop the second one to the new line. Any reason for this? If I remove 1 px to the overall, like having a 7px left margin, they fit into place. Also, measurements match perfectly in firebug, so I don't see why thew two are not fitting in the same line.
Try removing all other padding or margin from Parent div and children. These are caused from default browser styles. (or use CSS Reset to do this for all your elements)
Also, as a note, Safari and Opera are a little bit lying about measurements if you have a decimal number. They round up or down, they are not so exact like Firefox or Chrome.
Related
I'm having a problem on a website with Safari 7 (on OSX).
The website address is:
<Edit: Address not valid anymore. Sorry.>
If you click on vertical newsletter button, on the right edge of the content box, an overlay will pop-up.
This overlay looks good on most browser, but there is a problem with safari.
The overlay content is an absolutely positioned box of fixed width. It contains a div with the class "bg", which is a div with CSS position set to fixed and CSS top, right, bottom left set to 0.
The desired (and normally obtained) effect, is that this bg box sizes up to the width and height of the viewport. In safari, it just behaves as if it had it's position set to "absolute" - it just sizes up to the width and height of the container div.
Is this a known issue with Safari? Is there a bug filed? An update?
I could probably fix that by rewriting small parts of the HTML, CSS and JavaScript (if someone has an easier solution, you're welcome to share it!) but I'd like to understand what's happening at first.
I'm not sure what's going on with that positioning thing, but here was my approach to get the same result across the browsers:
#overlays .overlay { /* line 1081 */
...
width: 100%;
height:100%;
...
}
#overlays .overlay .content.text { /* line 1185 */
...
margin:0 auto;
...
}
You could use Z-index but Z-index is not reliable with position:fixed, as shown in this fiddle: http://jsfiddle.net/mZMkE/2/ use translateZ transformation instead.
transform:translateZ(1px);
on your page elements.
EDIT: In your code, Add this css:
.bla, .projects, .contact {
-webkit-transform:translateZ(1px);
-moz-transform:translateZ(1px);
-o-transform:translateZ(1px);
transform:translateZ(1px);
}
and then remove z-index refs from those elements and .intro.
Also You can try in other browsers as well
I'll be short.
http://www.tuttoinunafesta.info
Click on the second button of the top menu ("Feste per bambini") and look at the links that appear on the orange stripe.
In IE10 and Chrome they are vertically in the center of the stripe as they should be, because the images are 42px (the same div of the container div).
In Firefox they are some px below where they should be.
Why?
The container div of the menu-top buttons is overlapped by the container div of the colored stripe (in this case the orange one).
The bottom div has the following properties:
{position:relative; top:-2px;}.
It seems that Firefox can't overlap the images of the links over the images of the buttons even if the two divs are overlapped.
Have you used a css reset? Browsers add padding and margins by default, but the problem is, they're all different. A simple css reset can be done with this code:
* { margin: 0; padding: 0; }
There are more in-depth ones available on the web - this is one of the most commonly used ones - http://meyerweb.com/eric/tools/css/reset/.
I have a case where the CSS 3 transition behaves differently in Firefox than in Chrome or Safari. The example can be found at http://jsfiddle.net/inuwan/StKVQ/1/
I have 3 implementations that are slightly different, only the 2nd one (move2) will work in Firefox properly. I have a div that I am transitioning left off-screen and then changing its contents and then transitioning the same div to the middle of the screen from right off-screen.
In case 1 (move1) - works in Chrome/Safari only. The div transitions correctly left off-screen. However in Firefox when transitioning the div back to the middle of the screen, it does not slide in but simply just appears.
In case 2 (move2) - code that removed a css class so that an element will transition to the left from right off-screen was inline in case 1. In case 2 that code has now been wrapped in an additional setTimeout with a 2 second delay. Now works in Firefox, Chrome, and Safari.
In case 3 (move3) - Same as case 2 but added a document.body.style.overflowX = 'hidden' so that the horizontal scrollbar is not visible and changing as we transition the div. This causes the transition of the div left off-screen to not slide in Firefox, the div simply dissappears.
Is there a reasoning behind the difference or its just one of those quirky things you have to be aware of?
Back story: I have an SVG canvas with some polylines on it. I also have some HTML <span> and <textarea> elements that need to be positioned precisely in relation to those polylines.
I started by putting the HTML elements in the SVG in <foreignElement> tags, but I had a problem there because IE doesn't see them at all and Firefox doesn't see the <textarea>s. So I took them out of the SVG and now every browser sees them.
So far so good. Now the only way I know to make sure they position correctly with the polylines is to give both the HTML elements and the SVG canvas absolute positions with CSS.
Here's my problem. Above all these elements is a header div. I want the whole SVG business to sit at a reasonable distance below the header. Say 15px. But since the SVG is absolutely positioned, I need to know the height of that header div to get the SVG and related HTML elements into the right place.
I've tried jQuery's .height() method and some related methods. The problem with all of them is that Firefox and Chrome give two different results. I know this doesn't reflect a real pixel height difference between the two, because I can see visually that the header is slightly taller in FF, yet FF gives a smaller height reading.
How can I get a browser-consistent height reading for my header div? Or at least one that I can use to absolutely position other elements at the same distance below it in every browser.
You could try with this function
function getHeight() {
return Math.min(
Math.min(document.body.scrollHeight, document.documentElement.scrollHeight),
Math.min(document.body.offsetHeight, document.documentElement.offsetHeight),
Math.min(document.body.clientHeight, document.documentElement.clientHeight)
);
}
or simply with document.documentElement.clientHeight, which usually does the trick for me in all the browsers I use for testing (Chrome, Firefox, Safari and Opera)
[edit] The function above returns the width and height of the body, in order to use it for any div, use this one
function getHeight(div) {
return Math.min(div.scrollHeight, div.offsetHeight, div.clientHeight);
}
You can use it like this
var myDiv = document.getElementById('myDivId');
console.log('the height is ' + getHeight(myDiv));
[edit2]Keep in mind that the divs might actually have a different size depending on the browser.
Let's say this is google chrome and the green bar at top is the navigation bar, with a height of 75px. You have it at 100%, filling up your screen, who has 1000px height, and you place an 100 pixels div to the top and also stick an 100px div to the bottom of the screen (with blue). The purple div between them will have an 725px height.
And this below is firefox. It's placed on the same 1000px screen, also at 100%, but its navigation bar has 100px height. With the same 100px blue divs to the top and the bottom, the purple div will have a height of 700px here, different from chrome.
Of course, this is a very, very simple example and I doubt this is your case. But you might have a similar problem with div placements and it's something you should try to check.
I have a long image that is currently serving as a navigation system for a site in development. You can see it here. This navigation system will eventually be split into smaller sections, but I imagine I may well see the same issues that I am seeing now.
The image is 1920px wide and the idea is that, however wide the user's browser window (up to 1920px), the navigation image (branch) will always extend off the screen. The leaves at the center of the navigation system should always be centred on the page to match the logo above.
The navigation DIV currently has the following CSS:
#nav {
position: absolute;
top: 210px;
left: 50%;
margin-left: -960px;
}
The body has a min-width of 900px.
There are two issues I am having with this setup:
As you will see when you visit the page, the width of the browser page is being set by the right edge of the long image for the navigation system, when I would like it to be set to 100% when the width of the browser window is greater than 900px, and to 900px (with horizontal scrollbars) when the width of the browser window is less than 900px.
The navigation system isn't respecting the min-width of the body, i.e. it continues to move to the left even when the width of the browser window is less than 900px, whereas the rest of the page content doesn't.
Could someone help with these issues?
Thanks,
Nick
What I would do is
Cut out the middle part of the image (the one with the actual content).
Take out a slice from the line background that can be repeated infinitely. Like so:
Put the middle part of the image into a div that is 100% wide and has
background-image: url(/path/to/slice.png);
background-repeat: repeat-x;
that will give you an infinitely resizable navigation area, without needlessly expanding the page.