I am using content editable divs and I have overflow set to hidden. In Firefox the div's are correctly displayed and if a word is longer that the div the rest is hidden and no line break occurs. Chrome is inserting line breaks in the middle of words that are longer than the div. Is their a way to fix this?
It sounds like Chrome has 'word-wrap: break-word' style on by default.
in your div, try resetting worp-wrap back to normal and see if that fixes it:
<div style="word-wrap: normal;">..</div>
Related
I have three divs that are supposed to sit next to each other. This works correctly in Firefox, but in IE and Chrome the middle div is not filling to the top of its container div. It fills correctly when there is nothing inside of it, but as soon as I add the buttons the div goes down the page some. I have set up and example here:
http://jsbin.com/ONuqUSom/1/edit
The middle div is the one with the id of 'transferButtons' if you comment out the buttons inside it you can see the placement that I would expect.
You could just add vertical-align: top to your transferButtons div.
I have a website that requires a border round the edge. This has been implemented with divs of block colour that are placed around the edges of the screen. This works for most of the site, but one one section, the content overlaps the borders (see here, and scroll down: http://dev.birddartmouth.co.uk/#range).
I've tried putting the z-index of the range items (a.item) to -1, and this then sits below the border but it makes the links not clickable. Does anyone have an idea of how to fix this?
Moving the border divs from <header> tag to just before the closing </body> tag, and then adding z-index:11; to .border-divs (line 1094) fixes the issue for me
using the latest version of Chrome. (30.0.1599.69 m)
Try giving z-index:11; to #bottom-pink and #top-pink.
Your images have a z-index of 10, there for your borders need to have a higher z-index to to be on the top of them. This is why the rest of the text is not showing through and only the images are.
The position attribute of the borders also needs to be absolute or relative not fixed in order for chrome to respect the z-index attribute.
I'm having issues in Chrome where paragraph text is overlapping floating elements. The floating elements are pushed down to force an image in the lower left-hand corner of a container. I've setup http://jsfiddle.net/VMJGX/ which recreates the issue. The text overlaps the .indenter elements in Chrome but not in Firefox or IE. Is this a Chrome bug or is there a better way to accomplish this?
Chrome Version 21.0.1180.82
Firefox Version 15.0
The problem looks to be that the top of your indenters are getting caught in the middle of lines because of the varying heights compared to the linehieght in the paragraph. I'm guessing FF and Chrome render the heights slightly differently. If you want continue to use the same method you are using, I would recommend getting rid of the height class styles and instead just use nbsp; to fill the indenter divs so you get height that is consistent with the line height of the paragraph.
Here's a fiddle with an example.
UPDATE:
I updated the fiddle to use spans as the indenters inside the paragraph (instead of divs) and put the width properties back in. Because of the margin-bottom on the paragraphs and the clear on the indenters, you need a matching margin-bottom on the intenders so they will stay aligned.
I have a div tag with fixed width. Now i want that if there is a condition of overflow then text should go to next line automatically. I used overflow:auto but its giving a horizontal scroll bar. There should not be any scroll bar, text should go to next line.
Any idea how to do it with css???
If you want a scrollbar to appear for when text fills more than the height of a div, you can try:
overflow-y:auto
You might also need word-wrap or white-space css attributes?
to add to the link David's pasted, if you want the vertical scrollbar to show up, then the height property of the div should be fixed.
I have no idea what I'm doing wrong, but for some reason, I'm experiencing a bug with my markup that is causing my body element and my html element to not take up the entire viewport in the browser.
I can't get to the bottom of this. It first reared its head when I tried to add a 10px purple border to the top and bottom of my body.
If you inspect the page in Firebug, you you can see that there's a huge chunk of the page that is not highlighted when you hover on the html element or the body element. And the border that I applied at the bottom is hanging up very far on the page.
Does anyone know why this is? Could it have to do with my using HTML5?
Here's the page in question:
http://electricorangecreative.com/test/index.html
And here are my style sheets:
http://electricorangecreative.com/test/reset.css
http://electricorangecreative.com/test/style.css
Use a sticky footer technique.
I've had a look at the current test page and it looks like the only outstanding issue is the vertical scrollbar still appearing without need to. Easiest fix for this is to simply remove any margin or padding you have on elements you've set to height:100%. The culprit I identified is div#wrapper. Take off the padding there and the issue is resolved (in FF at least - not tested on other browsers). Since the padding is added to the height you end up with an element that stretches over 100% vertically. Use margins on children instead of padding - should be fine!