I have a navbar on my bootstrap3.0 website that works almost perfectly. On large screens, the navbar is fixed to the top. On smaller screens, it is still fixed to the top and the menu shrinks to that little "hamburger icon" for drop down menu on a mobile screen.
However, there is a problem I cannot seem to fix. When the website is viewed on a narrow/mobile screen, bootstrap magically adds the following to my page:
<html lang="en" style="padding-top: 59px;">
I have tried putting setting the html and the body margin to 0 and padding to 0 in my css, the bootstrap css, and even as a style in the index.html page, but this element.style seems to overrides it. I've also searched all my css files, and the 59px magic number appears nowhere, which implies it is calculated on the fly from some variable. I don't know enough about bootstrap or css/less to figure out how/why - which is why i said it is "magically" added :)
Where is it calculating the 59px from, and how can I over-ride this?
I can't tell you where it's coming from but you can override it with your own style by adding !important to the end of the defintion. Embedded styles using the style tag will take precedence over other definitions otherwise.
.someClass{
padding-top : 0px !important;
}
Related
I am attempting to style the horizontal rule elements on my site (or separators, as Wordpress likes to call them). I have added the CSS to my style sheet, but for some reason, the styling is not applying to all instances of horizontal rule.
I am very new to web development and this is my first time amending style.css. I feel I may be missing something obvious.
I have added the following to the top of style.css:
hr {
background-color:#06185F !important;
height:0.5px !important;
}
I expected that styling to apply across all horizontal rule elements on my site. However, it appears to be applying inconsistently, as seen here: https://emotionallyhealthyschools.org/whole-school-approach/
The middle of the three separators I have used in the body of this page is showing with a different style to the other 2. Please advise?
The css seems to be fine - However, it's actually the middle hr that is displayed correctly with a height of 0.5px.
I would actuall refrain from dimensioning below 1px because of potential unintended renderings due to rounding errors. If you add
min-height: 1px;
the hrs are rendered with the same height.
add the CSS in bottom of the style.css
bootstrap is adding some styling, including a border-top value to your hr.
add border-top: none or border-top: unset and it should work as expected.
Also change your px-value to a full px.
with pixels you either have one or not, there aren't half-values.
I have this simple code:
<html xmlns="http://www.w3.org/1999/xhtml">
<body bgcolor="#000000">
</body>
</html>
Questions
Why I am getting html height 8px in Chrome and Firefox? HTML height should be auto (0px).
The body height is 0px, so why is the background color (black) filling the whole screen?
Before I answer your questions let me tell you that even browsers have their default CSS style which is applied to every webpage! (To give you more insight let's say these default styles are the reason why normal HTML Buttons appear differently in Chrome, Firefox and IE)
Now for your first question: As per browser's default CSS HTML has padding of 4px! That's why you are getting HTML height 8px.
Now you must be wondering how to get rid of them? So for that we can use Normalize CSS
Now for your second question: you can say BODY is the special case tag which has a exceptional way of rendering it's background! (Or say it's not like a normal DIV tag)
In the absence of a background on the html element, the body background will cover the page. If there is a background on the html element, the body background behaves just like any other element.
You can read more about it here
Hope you found your answers.
You have a line break:
<body bgcolor="#000000">
^---- here
</body>
which gets rendered as a space character, causing you to have an implicit single line of text in your page.
If you look at the page using Chrome devtools, you'll see that the 8px height is coming from the user-agent stylesheet; that is, browsers apply their own default styles.
One common technique to wipe this away and start from a 'clean slate' is to use one of the many css reset libs.
See here for some options.
You are getting margin as 8px, not the height. Each browser has some default settings that's why you are seeing that. Check out the default settings for each browser using the below links:
Firefox
Webkit
IE
I am using Bootstrap to create my user interface.
I have a navbar that is relatively tall; the default height of the navbar is 50px and my navbar is 100px. When I render a split button, the menu drop-down doesn't respect the navbar height (the link below illustrates the problem). How do I fix this so that the dropdown renders beneath the button (and not beneath the navbar)?
Also, if anyone has a suggestion on how to get rid of the gap in the middle of the button group, that'd be awesome too!
Clarification
I'm using SASS so I didn't realize that the link that I pasted didn't illustrate the problem. I compiled my CSS and put it in the JSFiddle link. Unfortunately, the CSS file there is huge.
If you're using BootStrap with LESS or SASS, I adjusted the $navbar-height variable to 100px (instead of 50px).
In any case, I'm hoping for some guidance on what the Bootstrap Way™ of adjusting things like the navbar height so this stuff works.
(Old link that doesn't illustrate the problem)
http://www.bootply.com/yOrqxaoM2t
(New link)
http://jsfiddle.net/marvery/VpL9N/1/
ok it looks like the issue is not with the navba height its with the margin you have set margin-bottom:33px on .navbar-btn- that needs to be removed.
.navbar-btn {
margin-bottom:0px;/* should be zero bootstrap default btn margin- remove yours */
}
that is moving the dropdown to be 33px lower than the default
fiddle link
I'm developing a website template and just spotted an issue with the gallery lightbox plugin. http://creativusmouse.com/Proteus/html_preview22/portfolio_2_col.html
When the gallery has more than 1 image the lightbox renders just fine but when it has only 1 image the large image wrapper gets smaller than the image.
I kind of spotted what's causing the issue - this template uses foundation 3.0 framework so on foundation.min.css file the very first selector is causing the problem:
" * {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
I tried to remove this and it fixed the problem however the whole website gets broken.
I'm not sure what code shall I paste here. If necessary I can post a link to download all the template files.
Thank you!
Don't change this code, modify the css for your wrapper instead. That snippet of code you posted is telling all elements to include any borders, and paddings in the calculation for width. So a box with 10px of padding and 5px of border space and is 200px wide is actually 200px wide. Without this code the box would actually be 230px wide.
You could do this...
Add to the class lightbox-outer - overflow: hidden.
.lightbox-outer {
overflow: hidden;
}
This works but it hides part of the image, it's like your box doesnt want to scale to the size of the image.
Do you have a setting in the lightbox stuff anywhere that is setting the a specific proportion?
EDIT2: Something else I found, if I remove "width" from the class .lightbox-skin then it starts behaving again. Problem is this width is applied to the element inline dynamically?
I'm currently using the Blueprint CSS framework setting my width to 910px along with the sticky footer markup by Steve Hatcher.
The problem I'm getting is that for some reason in only Internet Explorer 6 is that an extra padding/margin of 10px is being added on the right hand side of my #wrap class.
I have uploaded my test site here:
http://www.prashantraju.com/test
Here is a comparison of IE6 vs IE7.
comaparison http://www.prashantraju.com/test/ie6ie7.gif
As you can see there is no margin/padding on the right hand side (the red area) with IE7 but in IE6 there is an extra 10px.
Is there a way to fix this - or what the cause of the extra 10px is?
Thanks in advance.
From what I can get with FireBug, there is no explicitly width set to the navigation bar, what if you give it a fixed size(same as 910px)?
Edited:
Sorry, given the FireBug css output, I suspect that you are using a inherited element from screen.css from line 101: margin-right:10px;
I reckon that is the cause.
Now that the navigation bar has it own css entry in the stylesheet, maybe you can reassign the margin-right element valut back to zero to resolve this problem.