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.
Related
I'm tearing my hair out for a couple of days on a "simple" css case with two nested div.
Basically, I have two div; a container and a content. To reproduce the case, I've attached a jsfiddle link below. The width and the height in pixels of the content are deduced from the container size and you need to input these values by hand by using chrome developer tool for instance. At the end, if you take a look to the size of the content via a developer tool, the container and the content have the same size in pixel. Under Chrome and IE, scrollbars appears whereas the two div have the same size but with FF they don't.
Of course, I could get rid of the overflow: auto but I'd rather like to understand what's wrong and what could be solved my issue.
See an example below.
Link to the example: Scrollbars issue with Chrome&IE
Thanks for your help.
You should use overflow:hidden to hide the scrollbars.
if you want to hide both scroll you should use overflow:hidden .
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'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.
Please see this fiddle:
http://jsfiddle.net/VaBCd/
...view in Chrome (I've got v14) and then any other browser.
Notice how in Chrome the text is failing to break at the right place with respect to the 2nd div, which has {float:right;clear:both}.
What's the best (preferably non-hack) way to deal with this so as to provide a consistent layout across browsers with the greatest flexibility?
I'm currently developing my site with a new layout and stuff, and after hours of fiddling around in Chromiums inspector, can't seem to pinpoint why the the content tabs won't fully stretch like in Firefox or IE9. There seems to be a small gap on the right side.
I'm still in the process of tidying the whole css so there are less conflicts, but whatever I do the tabs won't fully stretch in webkit.
Here's a testing page I've set up with the jquery tabs
http://bad-good.org/index.php/Troll_2
Any ideas or workarounds? Looking forward to learning something. Cheers
You've set the ul to width:100% which renders to 975px.
The li are set to width:25% which in theory should be 243,75px... Chrome makes a floor approximation for the decimals (truncates them, so 243,75 is 243), like mentioned here.
I'd recommend changing the site's width (for example 960px) or working with fixed widths in opposition to percentages.