My website http://www.rattletree.com/ works fine in other browsers, and used to work correctly in Safari, but I just noticed that the navigation elements are shifted up now. Can anyone recommend what needs to change in the css? Thanks!
I usually use firefox with firebug, but I'm not able to figure out how to use the dev tools in Safari to test css changes, so I'm chasing my tail here...
It seems that safari experiences problems whenever there is a negative margin greater than the size of the element in the relevant dimension ( height or width ).
The contents of .abovenavcontainer are all floated, with no clearfix, or float clear applied, so it has a height of zero, so the negative margin size ( 69 ) is greater than 0. Try adding a clearfix, or laying out the child elements without float, like, say, display: inline-block;
Related
Here's a question for you CSS experts out there. The circle dragon and leaves in the upper corners of http://www.thedragonheart.com/ load in all modern browsers except Safari (I'm running 7.0.5) on the latest OS X or iOS. What's the dealio?
If I set div.overbg's z-index to 0 (instead of -1), the leaves and dragon appear, but then the dragon overlays the title in the header, and it prevents body text from being selected. I've tried upping the z-index on #wrapper, header, header a, and header a img, all to no avail. How can I make div.overbg appear over the background image while under the header and body text?
Thanks!
You could solve this in Safari 7 by setting the z-index to what it normally is, then giving the style block the additional rule of pointer-events:none which would still allow the underlying text/elements to be selected as normal.
Provided there are no click elements on that circle or dragon, everything would behave exactly like you're expecting it to.
Of course, this would blow away support for browsers that don't have a full implementation of CSS 3, but it's the world we live in these days. You could always fall back to the negative z-index implementation for that scenario.
Edit: Without going into too much detail on your CSS, the likely culprit of your second failed scenario (the z-index on the header not appearing above those elements with a z-index) is likely due to the header not being given a positioning value other than static. You could probably fix this by giving it some stacking context by setting the CSS rule position:relative; on the element and then giving it a z-index greater than the stylistic elements.
e.g. .dragon{z-index:1;position:absolute;} .circle{z-index:1;position:absolute;} .header{z-index:2;position:relative;}
I have a ul with lis inside that I'm using as a tab list. The lis have an image and some text inside of them. For some reason, in chrome, the text doesn't appear on the same line as the image, but wraps to the next line.
I can't understand why this would happen, shouldn't the li expand to give enough space to fit both the image and the text? This problem doesn't happen on Firefox or IE. Testing with Chrome 22, Firefox 16 and IE 9 on Windows 7.
See this fiddle to see the markup (extracted from a longer page - also not the real icons).
It sounds similar to this problem, but the nowrap trick didn't work for me.
Update: I just realized I had a different zoom level set, 144%. At some zoom levels the issue happens, and others it does not. I guess it might have something to do with the ems for some sizes, and px for others? I still don't get why this would happen though, shouldn't it still get the proper amount of room?
Set a minimum width on the header. You also have the issue if you reduce the browser size. Figure out how small it can go before it starts to stack and set the min-width on the header to that size, that fixes it if the browser is zoomed too.
I have recently encountered an issue in Opera, where it attempts to display scrollbar on a position:absolute+overflow:auto parent, when the child element has more content but with max-height set.
To illustrate the scenario, view this demo: http://jsfiddle.net/kMZKm/12/
Changing the positioned element to have a fixed height, or changing the inner element to use height:100% instead of max-height:100%, will not trigger the scrollbar in Opera.
Other browser such as Chrome, Firefox or IE, does not display scrollbar in neither scenarios.
I am wondering if this is a bug in Opera (appear in both ver.11 and 12), or just an undefined scenario in w3c spec?
(it might seem counter-intuitive to have overflow:auto parent with max-height children, but the setup is actually quite useful for things like javascript scrolling, Opera's behaviour cause unexpected height of child element to be reported, thus breaking the custom scroll)
If you zoom out, the scrollbar appears in the other browsers as well. A changelog may be the reason: Spatial navigation in an overflow:hidden box not scrolling
I have discovered a strange bug in Firefox 4.0.1 (It also happend in Opera 11.5) so I've created this example to show the problem:
http://jsfiddle.net/whYC7/
If viewed in safari everything looks fine, but when I open it in Firefox or Opera the image inside the div with a negative margin still takes up space in the div underneath.
Does anyone know of a way to fix this?
This is the correct rendering per the CSS spec. The negative margin means that the top of the red div is higher than it would be otherwise, but once you determine where its top is the position of the text just depends on the intersection of the float and the div. See http://www.w3.org/TR/CSS21/visuren.html#floats the paragraph starting "A line box is next to a float".
You may want to file a bug on WebKit here.
I have ran into this issues as well in FF and IE9...an absolute positioned div does not seem to recognize negative margins, though using top:100px instead of margin-top:-100px does seem to work in FF 12 and ie9
A fix that could work in most cases is to make your div's position absolute and then to use top/left/right/bottom to control position
I am using http://tympanus.net/jPaginate/ to implement pagination. Under Chrome 11, Demo 5 looks normal but under IE9 or Firefox 4, the last page number is shown and gets moved to a new line.
I think the div has overflow:hidden set so that the hidden page numbers are not supposed to be shown, unless ">>" or "<<" is mouseover. This used to work properly in IE8 and Firefox 3.
How can I implement a workaround for IE9 and Firefox 4?
Set a fixed height to the div, otherwise it will stretch to accomodate all the content.
[EDIT]
Ah, it does not solve your issue, plus, seeing that the paginator is generated entirely by the plugin, I believe it's the plugin that is messing something up. It might also be that jQuery's width() function refuses to cooperate with FF4 and IE9. I happen to have a problem with width() resizing list elements in a nav menu on one of my sites, and it also happens with FF4 and IE9 only. Odd... You could try increasing the width of the <ul> containing the pagination elements with jQuery after generating the paginator, but that's a provisional solution.
The page that you were referring to has the problem no longer.
I assume the element had display:inline-block property set -- that was the problem I had with my case.
To solve this case, you need to set vertial-align property.
From the spec:
The baseline of an 'inline-block' is the baseline of its last line box
in the normal flow, unless it has either no in-flow line boxes or if
its 'overflow' property has a computed value other than 'visible', in
which case the baseline is the bottom margin edge.
Giving the ul.jPag-pages li element a fixed width solved my problem under ie9 and ie10