I know this question was asked at least once before and I have read the other answers. They helped me bypass this problem (there are at least two tricks for this), but what I am asking here is why do I have this problem in my particular setup.
My website is here: webpage
Scroll towards the bottom and you'll see a div (class "two_third") with tabbed content (it has gray background, you won't miss it). The titles of the three tabs are links (<a> elements), but they're no longer clickable. The problem disappears when I remove "float:left" from the div that's immediately to the right (the one with the title "Package content", class "one_third").
What I suspect so far is that "one_third" overlaps with and adds some form of layer over "two-third", thus making links inside "two_third" become unclickable. But this is totally speculation and I have no idea why there would be any overlap, since there's enough space for the two divs to live side by side without any conflicts.
Kindly appreciate your suggestions
You have a DIV <div class="horizotal_break clearfix"></div>. That is on top of the two_third DIV. You can't select text from two_third either. If you remove position:relative; from #content .horizotal_break it should be working fine.
Related
in the footer widget on a wordpress page, the join now button is going out of alignment when looking with responsive viewing on mobile. the code is: join now
how do i fix this so it lines up correctly? it's at https://time2track.com/ in the footer
I have looked at the code but do not know how to make this line up correctly
I just did a quick look at your website, it seems like you are using "float: left" on the div that contains 2 links before your "Join Now" button. Just use "clear: both" on the div after the floated div. In your case on div with id "custom_html-2".
Also, it would be beneficial to read this article: All about floats
Please provide code sample next time, as that would be the easiest way to seek answers.
I'm making a rich text editor which is like a clone of Google Docs. For reasons I won't get into here, each line in the text editor is wrapped into its own div container. For example, if there's 3 lines of text, there will be 3 child "line nodes" (rendered as an unstyled div) in the text editor. And within each line node there are inline span elements to control styling such as Bold, Italic, etc.
The issue I'm having is I can't understand why there is an unsightly vertical gap of whitespace between each line when selecting text over multiple lines. I am using Draft.js for this, but from what I can see it shouldn't make a difference; there's no styling or margins applied. I've even tried making every line div and its span elements exactly the same height but the problem persists.
My guess is this is caused by some native browser behaviour. All I really care about though is: can I "fix" it? I mean, I know it's possible because Google Docs doesn't have this spacing issue when selecting text... But then again it uses a completely custom rendering engine with custom cursors too. Thanks for any suggestions
edit: so a temporary workaround I've found (see image below) is to reduce the height of each div and span to a fixed value (in this case, height: 16.4px). But for obvious reasons, this isn't an ideal solution. I'm still looking for a "proper" way to implement whatever styling I want and not have these gaps appear between adjacent divs when selecting text
I believe your talking about line-height in which you can control the space between two elements / texts.
Try it out below:
div {
line-height:100px;
}
<div>Hello World!</div>
<div>How are ya?</div>
Thank you for all the suggestions. Turns out this is quite a challenging issue and there's very little (if anything) that can be done with pure CSS. Only the height attribute of div or span elements appear to have any visible impact on text selection. Inspecting the Google Docs elements reveals they use their own custom selection engine:
Closing this because I at least know how a solution might be implemented now, even if it would be very complex and time-consuming. Thanks again for the suggestions.
So I've been tinkering with this site, and I've got my work cut out, but right now I cannot for the life of me workout why content is displaying beyond the width of the window.
-redacted-
I believe it's something to do with bootstraps row/col guttering but have been unable to fix it, even with dreaded '!important' use.
Furthermore i note that a carousel button is extending beyond the width of the screen.
This basically just makes the site flimsy and seem broken.
Any css whizz out there able to give me some tips of this shit?
If the problem is with one specific tag (e.g. a <div>), add a class/id to that div with the following CSS: .classname { overflow-x: hidden; If it's the whole page, you might want to do that for the body and HTML tag. Note: When you do this last thing, people aren't able at all to scroll horizontally. This is a but user unfriendly, so you want to use that only if it's the only way out in my opinion.
...and by 'no reason' I mean; for a reason I'm clearly (and likely blatently) overlooking. This is such a NOOB question - but I for the life of me can't figure out what's going wrong with my floating divs.
As seen here: http://codysilfies.com/kenji/beta.html
I've got a Container div (#Wrapper), which houses a few divs - among them a content area (#content) which has a menu (#menu) that floats left; and a div to house text (which doesn't have an ID just yet).
I THOUGHT that aligning them both left would have the two divs sit right against each other; but it's not working that way. The box with text overlaps the menu messing with the layout. I also have to place the text PRIOR to the menu in the code; or else it'll show up below the main menu (which shouldn't be normal behavior - it should sit against the other div!
I know I can set a width and float the text RIGHT - but it's been requested that the page resize with the browser page.
I know it's something stupid and simple that I'm overlooking...but I can't see it. Any help would be hot! Thanks in advance.
HI now give to the margin-left:190px; in your float right div
as like this
<div style="float:right;margin-left:190px;">
result is
this
also, remember the box model. It's generally a good idea to give a width to a floated element when it's more structure related, as this is, versus just an image. That will also help side-step issues in IE 7 and 8.
Solution was just me being dumb. I forgot to add a float to the menu. D'oh!
Got a nearly finished coded comp here:
http://clients.pixelbleed.net/biodesign/
I realize it's not completely valid, what with my nesting of li's and ul's within A tags. Unfortunately that's the way it has to be.
My issue is with the very bottom of the footer. It has a space showing the body's background color beneath it. Tried a number of things and this space after the black link bar on the very bottom is a resistant little bugger.
Ideally the black box on the bottom should rest against the very base of the view-port, at least when the content is sufficiently long--which it is in this case.
If someone would like to take a quick peak at my source and give me some ideas I'd be very grateful. The CSS can be found here: http://clients.pixelbleed.net/biodesign/css/core.css
And, yes, I've tried removing the height:100%. Makes no difference it seems. I do believe the issue to be with the footer, as when I remove these Div's the content rests as it should. Just don't see anything in my CSS to cause the margin/spacing issue though.
Thanks so much.
if you just remove the class "group" from asufooter-wrapper, the margin disappears.
Not the best solution, but one way to fix it is apply:
#asufooter-wrapper {
overflow:hidden;
}
The problem seems to be caused by some wrapping. However, I tried editing your white-space and widths to no avail.