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.
Related
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
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;}
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 8 years ago.
Improve this question
2 lines are displayed in the UI lyk . It's there in a single span element
I am testing this, and it looks good
however I am skeptic about it.
I want to align both the lines such that it looks like.
I am testing this, and it looks good
however I am skeptic about it.
both the lines start together unlike in the previous case.
How this can be achieved using CSS.
It's hard to say something without codes but I guess, you are looking for text-indent. I'm assuming your lines are in the same container and not separate lines, just a part of the same paragraph.
CSS text-indent property
Make sure that css codes affecting your text doesn't have text-indent property or set text-indent to 0px.
If it doesn`t work with "text-indent: 0;", than the solution is with JS/jQuery
Eg - remove extra white spaces using jQuery:
$('.pln').html($('.pln').html().replace(' ', '');
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 8 years ago.
Improve this question
Here is a codepen link:
http://codepen.io/anon/pen/lfoxv/
As you can see, the layout loads fine, but upon any kind of resizing of the browser window, the layout breaks until the page is refreshed.
This seems to be the only combination of parameters that allows me keep the aspect ratio of an image when using percentage based divs. Fixed height layouts are tough...
I fixed your code. Please see this link: http://codepen.io/anon/pen/bBjDm/
Your code:
#middle {
background-color:rgb(200,200,200);
display:inline-block;
height:100%;
<!--width:auto;-->
}
Updated code:
#middle {
background-color:rgb(200,200,200);
display:inline;
height:100%;
<!--width:auto;-->
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
For some reason, when I use inspect element on my file input, it shows where it's supposed to be. But it doesn't behave that way. Go to oceankarma.co and click post at the top. Then try clicking the youtube icon. Please help
All the icons are of different dimensions. Youtube, Vimeo icons are placed in tags while other black icons are used as background. This is causing the different styles.
Use same dimensions.
Same styles(except for background image so that everything is either called as background or everything via <img> tag)
If you do the above, it should give the result you expect.
I believe the issue you're referring to is that the the hidden file inputs are overflowing into the youtube link, try adding this to your CSS to fix it:
#servicetable tr td {
position: relative;
}
#upload_video input, #upload_photo input {
position: absolute;
left: 0;
}
Also note that you cannot set the cursor property for file inputs. you can read this question for more info
Sorry, but none of the existing answers helped me. Kind of like what koala_dev said, the inputs are overflowing. So I added a simple overflow:hidden style to the container and that fixed it.