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 using Flexbox to lay out a site and IE11 is not playing nicely. The footer element is supposed to be at the bottom of the page or the bottom of the content, whichever is longer. This works fine in all other browsers including IE10. But in IE11 it does not stick to the bottom of the page. According to https://msdn.microsoft.com/en-us/library/jj127304(v=vs.85).aspx the justify-content property does not need any vendor prefixes. What gives? Why does this break in IE11 and not IE10?
Here's the live page I'm working with: https://www.tntech.edu/dev/ttu15.interior
Have a read at http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/ for a full explanation.
The actual solution apply the following changes
#rap{height:100vh;}/*change min-height to height*/
#rap > header,
#rap > footer{flex-shrink:0}
#rap > main{flex: 1 0 auto;}
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 2 months ago.
Improve this question
I'm trying to adjust the paragraph spacing and move it closer to the title, but Top or Bottom seems to be disabled when using flex-direction: column... What can I do to push up .par2?
Properties bottom and top work with position: absolute; elements. They don't work with other positions.
You have to use padding-top or margin-top with negative meaning (for example -10px).
And you can check properties margin and padding by headers ('CATORING', 'EVENT HOSTING', 'DELIVERY') using GoogleChrome Devtools. Most likely it is they who prevent the text from being located higher.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 6 years ago.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
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.
Improve this question
I have an element that has a fixed position to the bottom left corner of the browser window. I noticed that the text in footer layers above the fixed position element.
I traced this back to the Bootstrap style for columns that sets them to a relative position. If I remove or override that style, the layering appears as I desire. I don't, however, know why that style is there. I am concerned over unintended side-effects.
Why does Bootstrap use position: relative in their column class?
I'm also open to other ways of accomplishing my desired layering without changing core Bootstrap styles.
EDIT
When creating a minimal example, I found that the issue was not present. I then looked to my own CSS for the problem. I found that it was z-index: 0 on the element containing the fixed position element that was the culprit. Changing it to z-index: 1 fixed the problem.
Add a class to the element that you want to change then overwrite the Bootstrap styles with the new class.
It is difficult to guess without a code example, but something like:
<footer><p class="override-bootstrap">Some text</p></footer>
CSS
.override-bootstrap {
// here reset the styles
}
Make sure that the stylesheet for your new class is included after the bootstrap css.
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
On my client's website opcstm.org every browser I've tried (Chrome, Firefox, Internet Explorer) renders a margin of about 16px at the top of each page except the homepage.
For example, compare the homepage to the Contact Us page. On the Contact Us page you will see that the logo, the entire header element, and the entire page is separated from the top of the browser window by about 16x of margin.
I've used browser developer tools to inspect the first three elements in the HTML code (body, div.site-container, header.site-header) and none of them have top margin or top padding specified.
I'm stumped! Can you help?
The id of title (p in the header) is your issue. Remove it or give it a margin: 0;
#title {
margin: 0;
}
For a quick fix you could just add style="padding-top:16px" to your <div class="wrap">
for example: <div style="padding-top:16px" class="wrap">
I would not recommend doing this every time. This should be used as a temporary fix until you find the 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
When my site loads the view is correct but if you scroll right there is a gap. All div's have 100% width set and no padding on right... I went through each element to putting display:none trying to single the problamatic element but this didn't help either. A test version of the site is available at www.emma-cooper.co.uk
Take width:100%; out of the #logo CSS definition, and the right and left padding off the
div#hmenu definition (make it padding:0.8em 0;)
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
I have a problem regarding the layout of my css. When i use Firefox the layout is ok. Just like i want to. But in Chrome there is a big difference. I have used css reset but it just messed up with my css. I don't know what to do, every tip will be helpful.
http: //83.212.122.240/
My site is in Greek.
There are differences in the navigation buttons and in my login form between the two browsers.
Here is my code:
https://www.dropbox.com/s/u68pv6t91p3lk24/index.html
And my css:
https://www.dropbox.com/s/fa7alsvsfhw62qy/templatemo_style.css
I check browser behavior for text-boxes only. You have to fix height and line-height of all text boxes as below :
.text-box {
height : 18px;
line-height : 18px;
padding : 2px;
}
Line height will take care of the text filled in text-box.
All browser is very sensitive to CSS. So you have to define all rules in CSS so that it should be same in all browsers.
So you have to take care of CSS for every DIV.