Please visit this website.
There is a blank space at the bottom. I checked it and there is no minimum height mentioned in my css.
I suspect it's in the body's css details as below:
body {
line-height: 1.5;
font-size: 87.5%;
word-wrap: break-word;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0;
border: 0;
outline: 0;
background: none repeat scroll 0 0 #EFEFEF;
}
html, body, #page {
height: 100%;
}
This removed the bleed for me in Safari 6.0.3;
#footer-wrapper {
margin-top: 40px;
background: url("../images/footer.png") repeat-x scroll 0 0;
overflow: hidden;
}
You might want to handle that overflow differently tho, based on the content inside it. But this should fix the white space.
I figured it out by just deleting nodes from the DOM bottom-up. It had to be in the #footer-wrapper. As margin-bottom didn't work and you were using relative positioning I figured it was some shadow styling bleeding out of that element.
Update (better fix)
Just found the real issue to the problem;
.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Change content: "."; to content: ""; and it's fixed. Or just remove that style at all, as it doesn't seem to have use in that case.
"overflow: hidden"
makes things harder but try,
"overflow: auto"
in order to be able to flow when you need.
I'm late to the show here but it may help somebody in my case I had an empty space at the top I added the margin-top=-20px now the empty space at the bottom, tried almost all suggestions I found on these and many threads and nothing. Decided to run it thru some HTML validator there are a few none of them pick up but after a couple one found an extra character(`) at the end of a tag, and that was it, so it was user clumsiness, took that thing out now my page was shifted, took the negative margin and all good. So try a validator and look for something like this.
margin-bottom: 0px;
This would do it
Btw ..nice site dude :)
Sometimes, it's some iframes/objects that are created by third party services that create this blank space. In my case, Google Adwords and Google Analytics was creating this. So, I removed by adding this CSS:
object[type="application/gas-events-cef"],
iframe[name="google_conversion_frame"] {
display: none !important;
height: 0 !important;
width: 0 !important;
line-height: 0 !important;
font-size: 0 !important;
margin-top: -13px;
float: left;
}
Maybe you will need to add some extra rules for your case. Hope that helps.
Related
I'm having issues with my nav bar, I'm wondering how I can make the set closer to the left most edge.
CSS:
#nav
{
overflow: auto;
user-select: none;
background: grey;
width: 100%;
}
#nav li
{
display: inline-block;
list-style-type: none; /* removes bullets */
padding: 10px;
margin: 0px; /* removes margins */
background: grey;
}
#nav li:hover
{
background: green;
user-select: green;
}
Fiddle: https://jsfiddle.net/yumyum0/cgx61w0q/2/
Also, I'm not sure if the background and user select in the #nav li:hover is redundant. I'm modeling it off of the tutorial on https://html.com/css/#example-nav, and I started to add things to try and style it the way I wanted. I'm still a long ways away from knowing what all of the declarations do. It used to be flush so I think I probably added something that has a conflict, or I removed it without knowing.
I also had a question that wasn't really related to this, is this formatting okay? I wasn't sure if there was a agreed upon way with brackets and everything else.
Placing this ruleset at the start of your code will remove the margins at the top of your navbar.
* {
position: relative;
margin: 0 0;
}
Your formatting is slightly off; place the opening bracket on the same line as the CSS selector, and make sure there is a gap between rulesets, for greater readability.
A good thing to do is set the styles for the HTML and Body tags. This is what I would do:
html, body {
margin: 0; // Removes space on the sides
box-sizing: border-box;
width: 100%;
height: 100%;
}
#nav
{
overflow: auto;
user-select: none;
background: grey;
width: 100%;
box-sizing: border-box; // Add this to take 100% width without overflowing
margin: 0; // Remove space above nav bar
}
...rest of your CSS
You can position absolute and declare it must be at the left most point of the page.
#nav
{
overflow: auto;
user-select: none;
background: grey;
width: 100%;
position: absolute;
left: 0;
}
Styling your code is up to you! I like keeping the name in the same line as the curly bracket like #nav {
Navigation spacing: One thing to research is a solution called "CSS Reset". Browsers like Chrome and Firefox have different "base values" for HTML selectors. A reset stylesheet ensures that all of your elements will have the same "base" styles. There are 1000 different reset sheets out there that different people have attempted. They all roughly do the same thing in my opinion.The <body> tag has margin assigned to it by default. A reset sheet would normally assign these to 0 amongst other things.
Kind of the same thing as above, the <ul> tag also has margin on it by default. You should add in the following CSS:
html, body {
margin: 0;
}
#nav
{
background: grey;
width: 100%;
margin: 0;
}
Let's discuss the user-select property. This property is what you would use in order to target a "highlight" or "text select" for a copy/paste situation on a webpage. I do not think this is what you should be using for a "hover" effect. You should be just fine with using the background property.
I wish to style an upload button. I do my job fine with ::-webkit-upload-button but IE unlike chrome displays the button on the right and the label on the left(?).
I cannot alter the html by adding buttons/labels/divs because it comes from a form generated from somewhere I cannot tamper with.
I used ::-ms-value in css but it does not seem to work. The below css gets completely ignored. I tried some things I found but nothing helped much. Any suggestions?
#uniqueID input[type=file]::-ms-value {
position: absolute !important;
left: -9999px !important;
text-align: right !important;
}
At last I did it with css only using margins and text-indent:
#uniqueID input[type=file]::-ms-value {
margin-right: -699px;
}
#uniqueID input[type=file]::-ms-browse{
margin-right: 1020px;
margin-top: 25px;
}
#uniqueID input[type=file] {
text-indent: 99px;
}
Site: http://stagingsite16.info/
Screenshot below:
Problem:
As you see on the screenshot, there is a gap at the bottom of the page. (I applied red background so that it can be seen immediately.)
I tried applying this code:
html {
margin: 0;
padding: 0;
overflow: hidden;
}
but still it doesn't solve my issue. Any help is really appreciated! :)
You have to place the div of the footer outside all the other divs , and then add:
div#builder-module-537dadf9ae69e-background-wrapper
{
background: #2c2c2c;
color: #fff !important;
padding-top: 0px;
margin-bottom: 0px;
}
you had this before:
div#builder-module-537dadf9ae69e-background-wrapper
{
background: #2c2c2c;
color: #fff !important;
padding-top: 20px;
}
But you have to move the div outside the other divs!!
I've used this in a user style sheet locally and it seems to fix the problem:
.builder-container-outer-wrapper {
margin-bottom: 0px;
}
div#builder-module-537dadf9ae69e-background-wrapper.builder-module-background-wrapper.builder-module-footer-background-wrapper.builder-module-6-background-wrapper.builder-module-footer-1-background-wrapper.builder-module-bottom-background-wrapper.builder-module-last-background-wrapper.builder-module-footer-last-background-wrapper.builder-module-after-widget-bar-background-wrapper.default-module-style-background-wrapper {
margin-bottom: 0px;
padding-bottom: 1.5em;
}
Another thing to consider: CSS applies the style which is most specific to the element. The html { ... } element is the one for the whole page (including the tag), so it will be the least specific rule for the element you want to apply your style to. It is likely that a more specific style (such as div.builder-container-outer-wrapper) is applying the margin somewhere else in your CSS, and you'll have to fix it there. (See http://css-tricks.com/specifics-on-css-specificity/ for an explanation of how the specificity rules are applied.)
Anyway, hope that helps.
.builder-container-outer-wrapper {
margin-bottom: 0;
width: 100%;
}
This is the container which has the margin-bottom.
In HTML, I'm laying out an unordered list something like this:
Fruit: Apple, Banana, Cherry, Durian...
I am treating the word "Fruit: " as generated content. I want for the list to be able to wrap so that the second line is flush left with the first "Apple."
My current attempt at this is here. I've included a background color just to highlight the weird close-but-no-cigar spacing.
This probably isn't the exact correct method, but simply changing the -4em to -2.2em seems to get the trick done. Not sure how it tests across browsers or with font size changes, but it works as a start:
li:first-child:before {
content: 'fruits: ';
margin-left: -2.2em;
}
http://jsfiddle.net/2t8cq/4/
Update: This method does break down as font size increases or decreases.
What you need is typically done using a DEFINITION LIST. You will need to style it accordingly.
<dl>
<dt>Fruit:</dt>
<dd>Apple</dd>
<dd>Banana</dd>
</dl>
OK, here's what I came up with. It uses positioning instead of margins, which seems a little ugly, but it does work. I'm still open to other solutions.
The relevant part:
ul {
margin: 0 0 0 4em;
padding: 0;
position: relative;
}
li {
margin: 0;
padding: 0;
display: inline;
background-color: #ccc;
list-style: none;
}
li:first-child:before {
content: 'Fruit: ';
position: absolute;
left: -3em;
}
Please bear with me as I'm fairly new to hand coding my web pages. I applied my CSS and HTML from the website I created to skin a Blogger page to match look and feel. Everything appears fine when testing in FireFox release 17.0.1, but the background for my div #body_wrap fails to repeat more than a few times in IE 8.
I'm probably missing something simple, but I would appreciate any help in determining the cause. I would like to know if it's IE related or just poor code that FireFox is picking up the slack on.
Here is the link to the blog:
http://www.zenmotostore.blogspot.com/
Here is the CSS for the div containers involved:
#body_wrap {
width: 1074px;
margin: 0px auto;
padding: 0px;
position: relative;
background: url(http://www.zenmotostore.com/images/repeat_bgd_shadow_blog.png) top repeat-y;
clear: both;
}
#body_content_wrap {
width: 984px;
margin: 0px 45px 0px 45px;
padding: 0px;
padding-bottom: 7px;
background: #000000;
position: relative;
clear: both;
}
#scrollofzen_header {
width: 983px;
height: 191px;
margin: 0px 0px 0px 0px;
padding: 0px;
background: #000000 url(http://www.zenmotostore.com/images/scroll_of_zen_header.jpg) top center no-repeat;
position: relative;
clear: both;
}
The div #scrollofzen_header sits above the Blogger content code in the HTML. Both are contained in the #body_content_wrap div.
Let me know if I need to include more code here on the post. Thanks in advace for any help you might have!
Your problem seems to be with this CSS declaration:
.body-fauxcolumn-outer
{
background: url(http://www.zenmotostore.com/images/page_bgd_zen.jpg) #b8924f fixed no-repeat 50% top;
}
If I use the IE dev tools to disable this rule then the page seems to work fine (as I expect it to anyway).
Looks like it might be a clear issue. Depends on version of IE. You could look into css height: 100%;, or another way would be to add <div class="clear></div> as the last child element in #body_wrap.
.clear {
clear: both;
}
//then the markup
<div id="body_wrap">
//Your content and stuff
<div class="clear"></div>
<div> //close body_wrap
Internet explorer has a big problem with using images in css. Whenever I try to use them it doesn't work. Not since the very latest edition of IE have they allowed background-images.
You need to define a height for the div that you want to have a background-image
Background Images aren't supported IE8 or below
http://www.w3schools.com/cssref/pr_background-image.asp