Floats / Margins in Firefox [closed] - javascript

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!

Related

Table cells lose spacing when inside div [closed]

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 months ago.
Improve this question
I'm building a web app using HTML & SVG, and I've run into a weird problem with tables. When I move my table into a particular div, all the cells lose their spacing.
This is my expected result:
This is what I actually get:
To achieve the expected result, I put my table 'habitruler' inside 'main' but above 'habits':
What I want to do though is put 'habitruler' inside 'habits' like this:
All I'm doing is moving it inside another div, but the moment I do that all the spacing disappears between cells as you see in image #2.
This is the css for the div 'habits':
And this is the table inside 'habitruler':
This even happens when I remove all the other child elements from 'habits'. I can't find anything out of the ordinary that would cause this. I also can't find any information on tables that would explain this behaviour. Does anyone have an idea why this is happening, or what I can try next to find out?
habitruler maybe inherits style from habits, try !important
(also show css from devtools for habitruler)
Try using:
table{ table-layout:fixed; width: 100%;}
If it doesn't solve the problem please show what's styling and is having. So, I can propose better solution.

How to remove the extra space from the right side? [closed]

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

Why does z-index not work with sticky elements? [closed]

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;
}

Firefox translate3d messes with select input [closed]

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.

CSS mystery: why the extra height in my div's? [closed]

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;}

Categories

Resources