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
I put up a test site for a client to look at for a proof of concept, and when cross checking browsers I noticed a white line that was not supposed to be there.
http://artistelisabeth.com/ (loads correctly in all other browsers except FF)
There is a ~10px line right above the footer when viewing in FF. Initially it looks like a simple fix, but its actually the bg of the body showing through.
I tried adding some simple solutions first padding-bottom on the parent element or some margins on child elements. Nothing worked, only solution is a hack, adding a margin-top:-10px to the footer, or opposite style on the featured div.
Also. The only style in my css associated with the .featured div, is background: #ded1ae, this shows up correctly in all other browsers, but in FF it gets changed to background: none repeat scroll 0% 0% rgb(222, 209, 174);
I also noticed all my other bg colors were changed as well, and all hex colors changed to RGB.
This may be a simple solution, which I hope it is, and I am just having a brain lapse. But I am totally perplexed, and have never run across an issue like this.
Please help!
(I guess it should be noted that I am using the Skeleton boilerplate, but I have used this many times before with no issue, and I cant see how that would affect this.)
<div class="featured">
<div class="container">
</div>
</div>
.featured { background: #ded1ae; height: 100px; }
.container { position: relative; width: 1200px; margin: 0 auto; padding: 0; }
Above is the css in all browsers except FF, in FF it shows up as
.featured { background: none repeat scroll 0 0 #DED1AE; height: 100px; }
Your <hr class="remove-bottom"> in the <footer> causes the whitespace by having a margin-top: 10px and clear: both.
Setting .remove-bottom { margin: 0; } "fixes" it.
Not sure if it is a bug/spec violation in Firefox or the other browsers.
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 7 years ago.
Improve this question
I finished coding this website using bootstrap and now I have this issue regarding that horizontal scroll which was not supposed to happen. This is my first website using boostrap.
I tried using 'divide et impera' by removing snippets of code in order to find the issue. The horizontal scroll disappeared when I removed pretty much the entire content / website so I suppose it is related to the main container ?
I can't seem to figure out the problem, been banging by head against the wall for the past few hours.
Not to take anything away from #Tulio Castro, as putting overflow-x: hidden; on the body should fix this. This is a hacky fix, however, in that it doesn't fix the problem itself, rather, it fixes a currently visible consequence of the problem. I figured you might want to know the actual problem--why this is happening and what you can do better.
First let me say that bootstrap is a delicate system: Every time you apply your own styles, you'll need to be checking to make sure your styles don't clash with bootstrap's.
So here are the fixes:
You can run this jQuery when the horizontal scrollbar is visible, and it will tell you which elements are causing the overflow:
$('*').filter(function() { return $(this).width() > $('body').width(); });
In your case, it will return three culprits, all of them .row elements:
1) The first .row needs to be nested in a .col-xs-12 element. You can't have a .row as an immediate child of a .row element in bootstrap.
2) The second .row has a parent with class .partneri. You applied custom CSS to this parent element, which broke bootstrap. In this case, bootstrap wanted 10px of padding on the right and left, but your CSS took this away:
.parteneri
{
....
padding: 10px 0 10px 0;
}
Change this to
.parteneri
{
....
padding: 10px;
}
And you should be fine.
3) The third .row has the same thing. The parent with class .sub-footer breaks bootstrap's padding. Change
.sub-footer
{
border-top: 2px solid #f8f8f8;
padding: 10px 0 4px 0;
}
to
.sub-footer
{
border-top: 2px solid #f8f8f8;
padding: 10px 10px 4px 10px;
}
And you're set. Best of luck.
I saw this horizontal scroll in apple iphone 4, just solve this, just define thiss css:
html,body{
overflow-x:hidden;
}
Hope it helps
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
Can anyone help to check on this site?
http://chanbaneng.com/demo/
When in Firefox, all the content gets pushed to the right. In all the other browsers I tried (Chrome, Safari, and IE), it works just fine.
Is there anything wrong with the code?
Used to this way
ul.bjqs{
overflow: hidden; // remove this line in your css
}
==========================
your second problem solution is this
now define this css in your style sheet
#container{clear:both;}
Just change this class and set it again because its slider
ul.bjqs {
position: absolute;
list-style: none outside none;
margin: 0px;
overflow: hidden;
display: none;
}
I am sure there will be some calculations will be done on bases of resolutions so it will better to put in absolute position and then do other stuffs this will result in to same for all browsers
Please modify this
<ul class="bjqs" style="height: 380px; width: 100%; display: block;">
to
<ul class="bjqs" style="height: 380px; width: 100%; display: block; overflow: -moz-hidden-unscrollable;">
The simplest way I found to solve this without rewriting your code is:
Go to your li a selector (line 73) and remove height: 28px;
You a tags already get their correct height and setting it manually messes up with the flow of the display.
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 know that bootstrap 3 is not compatible with IE7. However, I need to make it workable for the form I am building. This is not responsive.. just need to work nicely with IE7 including the error messages...
As you can see by comparing it on IE7 and any other nice browsers like Chrome, the state and age fields are not aligned side by side as it should be. The 2nd tick box is not aligned to the right of the 1st tick box... and there is a black line over the enter details button. Any help please?
Even though IE7 has extra low share, it is something that the client wants. I love using Bootstrap and he doesnt want any responsiveness... and doesnt even want %/em etc.. wants fixed width. Hence the code has fixed width.
To answer another query from below, I was hoping bootstrap3 has some kind of css patch that makes it workable for IE7 or atleast direct me on how to fix the issues listed here. HOwever I did end up fixing them. So thanks guys.
Link is here
http://staging.serviceportal.com.au/service05/discovery_2014.do
I solved the issue as below
body .container {
width: 900px
}
body input {
height:20px !important;
}
/*.form-control{
behavior: url(http://localhost/On%20Going/Discovery/January2014/discovery/web/pie/PIE.htc);
}*/
body select {
height: 34px !important;
width: 120px !important;
}
.firstName, .lastName, .age{
margin-bottom:15px
}
.col-sm-6 {
width: 50%;
}
.tick1{
padding-left:0px;
width:160px !important
}
.discoveryButton, .discovertMandatoryText{
float:left !important
}
.discoveryButton{
width:154px !important
}
.discoveryButton #submit{
text-indent:-9999px;
display:block
}
.discovertMandatoryText{
width:139px !important
}
.col-sm-7.tick2.has-pretty-child{
padding-left:0px;
width:270px;
margin-left:150px;
margin-top:-70px;
}
.age-state .age{
width:118px;
}
.email{
margin-top:10px;
}
.stars{
margin-left:10px;
}
select.state{
margin-left:60px
}
.state .stars{
margin-left:35px !important
}
So what I basically did is to look in firebug in a nicer browser like Firefox and get the margin, padding and width needed. I just copied those into the IE7.css file. And it worked. Yeep it is not responsive in ie7. However, by doing what I did, I was able to make it look nicer in IE7. I guess if someone is using bootstrap3, then do look at the padding/margin/width where it is breaking in IE7. Then take those values and add in IE7 only css file. Hope it works and helps someone
If you absolutely have to have IE7 compatibility, use a conditional statement to target IE7 and add styles as needed to fix issues you have:
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="your_css_dir/ie7.css" />
- OR -
include your IE7 specific css here...
<![endif]-->
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 9 years ago.
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.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
See http://www.levomedia.com/contact-us/
If your screen is of a good size there might not be a scroll so you will have to zoom in... but when there is a scroll and you move down the page, my theme forces my header to travel with you, which I would like to remove if possible.
What would be the best way of stopping this from happening, so that it stays in the same position and does not travel with you?
The Best thing would be to remove the relevant Js code , which is causing this.
I have found this
<script src="http://www.levomedia.com/wp-content/themes/sensitive/js/jquery.stickymenu.js?ver=3.6" type="text/javascript">
js code file inclusion in your page, just remove it, everthing should works fine, as you intend to.
this will also improve your page rendering time and efficiency :)
Happy Coding :)
you need to remove the css attribute :
position: fixed
Which you had used on the header.
Stop using the jquery.stickymenu.js script and things gonna be ok. It applies position:fixed to your header, when you scroll the page down and you don't need it.
Like this
please add position:fixed, top:0; width:100%; in .navbar-wrapper selector
and
please add position:relative; top:66px; in this selector .type-post, .type-post .post, .type-page, .type-page .post
CSS
.navbar-wrapper {
background: url("images/wild_oliva.png") repeat scroll 0 0 #EEEEEE;
margin-bottom: 20px;
padding-bottom: 0;
padding-top: 20px;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.type-post, .type-post .post, .type-page, .type-page .post {
margin: 0 !important;
padding: 0 !important;
position: relative;
top: 66px;
}
In your case, Js is adding the position:fixed attribute in topmenu once you scroll down.So you can do this by css.
convert this :
<div id="topmenu" class="container" >
to this:
<div id="topmenu" class="container" style="position:relative !important" >
If you dont want inline Css Make a class like this:
.container{
position:relative !important
}
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
I am using HR tag in my HTML page. But the horizontal line is not covering the whole page along X axis. There is a gap at left and right both. How can I fill this gap?
For example, below is a sample code -
<html>
<hr>
</html>
You can do the following -> demo
You have two options that I know of anyways - Using a horizontal line or a div with a top or bottom border.
The reason why you have a space or gap is because browsers comes with different pre-set settings - so you need to set margin and padding to zero. Take a look at the demo.
CSS
* {
margin:0;
padding:0;
}
hr {
margin-top: 30px;
/*so you can see it in demo */
width: 100%
}
.demo {
position: relative; /*so I could use 'top: 30px' */
top: 30px;
/*so you can see it in demo*/
width: 100%;
border-top:1px solid black;
}
HTML
<hr/>
<div class="demo"></div>
Edit: As Ojdo commented, you CAN reset before working on a project using something like this Meyer's Reset OR you can make it 'cross-browser' compatible and use normalize.css from Necolas - this basically tries to make your default css look consistent among several browsers. The choice is ultimately up to you. Start from the ground up or start with something somewhat consistent.
that's because of the margins of the body. try this:
<html>
<body style="margin:0;">
<hr>
</body>
</html>
put this css on the hr:
hr {
margin-left: -8px;
margin-right: -8px;
}
This happens as there is always automatic margin
Here is a fiddle example:
http://jsfiddle.net/ha97t/
The gaps are caused by the default margin of 8px for the body element (which is a common browser default and described both in CSS 2.1 and in HTML5 CR).
You can override the horizontal margins of body rather simply:
body { margin-left: 0; margin-right: 0 }
It is possible to use more extensive overrides, like “CSS resets”, but they could affect your page layout in many ways and do not contribute to solving this problem any better than simply overriding the specific properties for body.
However, removing those margins means that text will run from the left edge of to right edge, often making letters touch the edges. So if you wish to make the horizontal rule extend across the page without affecting anything, set negative margins on it. Then it is best to set the body margins explicitly (to guard against browsers not implementing them according to common practice):
body { margin: 8px }
hr { margin-left: -8px; margin-right: 8px }