Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am designing a website based on a theme that uses translate3d, which messes with the select dropdown window.
<select>
<option value="Biały">Biały</option>
<option value="Czarny">Czarny</option>
<option value="Czerwony">Czerwony</option>
<option value="Żółty">Żółty</option>
</select>
Basically when I open up the list in Firefox, the whole list is shifted to the left like this:
EDIT------------------
added a JSBin click the About tab
I'm not sure this is what you are looking for, but the root issue is not the rotate itself. It's that the container has a transform. This transform may be entirely unnecessary. Instead of using a transform you can substitute absolute positioning. You have to do so with the following:
#spaces-main{
transform: none!important;
position: absolute;
left: 240px;
right: 0;
width: auto;
}
A horizontal scrollbar seems to appear on the original demo and my version, so I added this as well
body{
overflow-x:hidden;
}
The tradeoff is that responsive may need adjusted and one or more transitions might not work as they did originally. In any case, here is a demo with the dropdown now working correctly.
http://jsbin.com/karinajalu/1/edit?html,output
Instead of this solution, you might consider adding a styleable dropdown plugin. It probably wouldn't experience the same issue and it would both nicer and more consistent across various browsers. I have no recommendations on what plugin to use.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
So I was working on a web development project using HTML and Tailwind css, Everything is looking fine on desktop mode but as soon as go to mobile mode the index page shows some extra space on the right side of the page. Tried using overflow-x :hidden but it doesn't fix anything. I have attached the Image and Live demo of the project below.
Heroku Live demo
Hi,
this problem faced me and i have solution.
This problem because you make the menu to go right and this cause scrolling horizontally and overflow doesn't work
Mobile Ignore overflow on body tag
Try to make div and hold your page content and give him
overflow-x: hidden.
It will work
The problem is related to the markers added by some lib, maybe the one taking care of the animations.
If you remove them before changing to mobile view, the space on the right side disappears.
I had same problem and for me was hepful overflow-x: hidden
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have some rollover effects in a sticky footer and a responsive menu / nav that sticks to the top. When the nav is opened and is long enough to go over the footer it covers everything except the rollovers.
nav closed http://www.musictheorytutorials.com/navclosed.png
nav open http://www.musictheorytutorials.com/navopen.png
I have tried lots of changes, searched on here and then tried to rebuild a simple version in jsfiddle as an example of it not working and it worked! However making these changes to my actual page do not...
Here is the jsfiddle that does work: /m_d_a/y7Lj3rms/26/
Here is rge jsfiddle that doesn't: /m_d_a/4bLyt681/5/
I can't get the code tags to work properly when cutting and pasting in either, sorry.
I know there is a lot of javascript, most of which is cut and pasted from linked js plug-in files which I don't understand, so I think it's gonna be something in there. If anyone can trudge through this I would really appreciate it. I will also change the title of this question to reflect a working answer to help people in the future.
Thank you.
just modify this selector in your css
from
.menu {
position: relative;
z-indez: 100;
}
to
.menu {
z-index: 100 !important;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm just starting in on a new site and am getting extra space at the top of the div's I'm building for the home page. Using Safari's Web Inspector, I've eliminated any obvious padding or margins being responsible; but it's also seemingly telling me that the height of the div's is, for some reason, set to a greater amount than the image which should be its maximum height.
Sigh.... 10 minutes in and I'm already banging my head against my desk. Well, about to anyway.
This is the very-much-in-progress site:
http://compassionglobally.org/wordpress/
You can see a black strip above the first area and a grey one above the second area. I can't figure out where that space is coming from. And it's really bothering me.
I am using a WordPress theme which I realize may be interfering in my formatting, but I suspect that this isn't really the issue.
I removed all spaces and carriage returns since I know that this can cause space to be inserted, but it hasn't helped. I hope another set of eyes can!
Thanks!
Adam
Maybe you just remove the blank <p></p> that you really don't need it.
remove that <p></p> after the <img/>.
And your layout will be good.
Take a look(which <p></p> you should remove it.)
It comes from the paragraph margin. Probably the easiest way to fix it (without removing the margins) is to wrap those paragraphs inside a container or to do something like this to the .homeStripContent:
.homeStripContent {
float: left;
width: 100%;
}
Or just to negate the top margin: .homeStripContent {margin-top: -28px;}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I usually build my wordpress sites by using a theme and creating a child theme. Generally I have done this with Wordpress 2013, but this time decided to take a crack at it with 2014. I have run into a few issues but finally landed on one I have not been able to resolve.
http://demo.diocesan.com/robert/
On this page, it tells me the page has a height of 2000+ px. When I try to find where this height is computed, I find nothing. I have set the height on many different elements to 1000px (even the HTML tag itself) and I still have this mysterious height value.
I suspect this has something to do with the 2014 masonry script (Admittedly I am not great with javascript) and any direction on this would be helpful. So my question - Does anyone upon glancing at this know where the height is coming from and what steps I can take to remove it?
The problem is the CSS on #secondary - it has min-height: 100vh applied, which will make that one element at least one full viewport tall.
It's then hidden because the following element (#primary) which contains the content is given a float: left which makes it move up, so that it appears that the gap is beneath #primary, even though it's not.
Removing the min-height on #secondary, or setting it to a sensible value, will fix your problem.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm having a weird issue that I appear to only see in Firefox. Chrome and surprisingly IE work just fine. The site that link below works fine in both of these browsers but in firefox the whole page gets pushed to the right while the #spotlightbar get pushed to the left. Im at a loss of what the problem may be. Any suggestions?
http://www.bristolymca.net/index.php
EDIT: So this has been solved. Thanks for the quick help to all.
SOLUTION: Obviously when you you float one div on a page inside of a content block either the rest needs to be floated as well or you need to clear the float before and after what you have floated. This was my mistake in misnaming CSS classes. So for future reference make sure those are the same name!
You have no styles on
<div id="contentHome">
Add some css like this;
#contentHome {
float: left;
width: 100%;
}
Well, my first suggestion would be to prevent using tables for layout elements and inline styling.
I removed the inline styling and added the following css properties to it:
width: 100%;
float: left;
That solved the problem to me.
PS: Pretty webpage, congrats!