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.
Related
I have set up some divs for my layout, a main div and a menu div.
They look perfect in Firefox, but for some reason, Chrome and Safari get messed up.
For some reason the width of the div gets smaller when overflow:hidden; is added to the CSS. I need overflow:hidden; though, because I have other floats inside the main div. You can see the example here:
http://jsfiddle.net/kR7rs/2/
It shows up fine in Firefox, but in Safari and Chrome, there's a margin on the right side of the div as well.
Removing the margin from main seems to fix it:
http://jsfiddle.net/kR7rs/3/
What I think it happening is that when overflow:hidden is set, the entire element wraps around the floats instead of the text within the div. So this gives the result in the fiddle. Then if you set a margin on it also, the width is decreased further by the left padding.
Kind of seems like a bug.
(Don't have FF right now to test it and see if it breaks it for FF.)
Move overflow:hidden to #wrapper. That fixes it, but doesn't explain why.
I have built a slider which expands to fit the window, and have #prev and #next pager buttons (which are highlighted in green). As the slider changes size I need to have these buttons positioned with a top margin as a percentage value. This is fine in Firefox but in Chrome and IE it doesn't read this margin. If I put it as a px value it works fine but obviously doesn't adjust to fit the slider size. Please advise...
http://subzerostudio.com/Clients/perkinreveller/index.html
Chris, instead of regularly changing the margin-top value, you could instead modify the top value regularly.
Since you've positioned the two buttons as absolute, it's better to work with left and top values instead of margins - frankly because margins don't make much sense once you're at liberty to use left,top,right,bottm values in CSS.
Hope this helps you. I tried removing margins in both Chrome and FF and they both looked the same after that. Once you get to this position, you can then modify the top values.
You could try absolutely positioning the buttons with a "top" value of 50% then a negative margin top of the height in pixels of the button.
If you make the buttons a relatively small fixed size that doesn't change then this will be do-able.
That seems to be how Flexi-SLider works and that is one of the leading responsive sliders out there.
http://flexslider.woothemes.com/
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>
I am learning XHTML and CSS and I got into trouble. On my learning page I am using CSS float layout. I have floted:left side menu, and to properly render text into content section I have set its margin to be exact same size as left menu. My problem is, that text in paragraph is wrongly shifted from the place where side munu ends. This happens only in IE 8, Its OK in Chrome. Please help. This is the site....
Either increase the padding-left of your content, or increase the margin-left. Either of will make it work better in IE.
The reason this happens is IE6 and IE7 do a poor job in defining widths of block level elements. Sometimes they're 20px off.
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!