Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I often see this code on some sites:
body:before {
content: "";
width: 0;
height: 100%;
float: left;
margin-top: -31700px;
}
What is the result of using this CSS?
According to this Website, it's an opera fix http://www.cssstickyfooter.com/using-sticky-footer-code.html , on this site, it's used for a sticky footer.
Sticky footer means it always sticks to the bottom of any window, also when there is not enough content to fill the screen.
The CSS Code
Below is the CSS code that makes your sticky footers actually stick to the bottom.
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
See a fiddle here: http://jsfiddle.net/f3Uvs/2/
Used to add cosmetic content to an element, by using the content property. This element is inline by default. The ::before notation was introduced in CSS 3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation :before introduced in CSS 2.
Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/::before
Opera Browser grab the bottom of the window and move it up and then down to see that it's not working as expected. This has always been operas main problem.
So in that case body:before { } used.
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 years ago.
Improve this question
The footer is at the bottom as intended on my Home page and Form page. But something is causing the footer to appear at the top of my Gallery page. I'm assuming it's an issue with specificity or one of my selectors. But I'm new to this and so far everything I've tried hasn't resolved the issue.
My footer code is basic so something else must be forcing it to the top. I checked the Gallery ID's and none of them appear to be effecting my footer element.
footer {
background:#333333;
color:#FFFFFF;
padding:10px;
}
/* || gallery-items */
.gallery-item {
text-align:center;
width:300px;
height:300px;
margin:10px;
background-color:#ADD8E6;
border:10px solid #333333;
border-radius:4px;
float:left;
object-fit:contain;
}
/* || gallery item hover */
.gallery-item:hover {
border-color:#03A9FC;
}
Here is a link to my Replit. I apologize for not being able to asses what the root of the issue. This is my first week doing CSS styling.
Your .gallery-item has float: left; this means that those elements don't get "considered" as taking any space when rendering the other elements on your page. You can put a div with a style clear: both (in your case only clear:left will work) between your gallery and your footer elements to fix this
Add overflow: hidden; on #gallery-content
#gallery-content{
overflow: hidden;
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Can anyone explain me, why <input> and <a> have different heights (while having same font, padding, margin and border settings) in Internet Explorer 9-11? Firefox and Chrome render them with the same height.
Here is example:
HTML
<input class="text" value="input"/>
<a class="text">button</a>
CSS
.text {
font-family: 'Arial';
padding: 7px;
font-size: 12px;
line-height: 1.4em;
border: 1px solid black;
display: block;
float: left;
width: 100px;
margin: 0;
}
And fiddle
Is there any way to prevent such behavior in IE? Thank you in advance.
There is a Question similar to this one which already got many answers and 18000 views.
I think you will find a solution to yours there too
CSS - Exact same height and alignment of button and input text box
Also you could just try to give both of them a height: XYpx so you can make sure they will always have the same heights. I guess giving them a height will also be better for your styling later on
I also found this Question on how to control the heights in different browsers
How can I control the height of text inputs and submit input buttons in different browsers?
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 }
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
My page here on the left hand nav is showing the categories (div.cat) spaced out at 48px height and I can't work out why.
There's no padding or margins or height specified. If someone could have a look on an inspector to see what could be causing it that'd be great.
The clearfix is causing issues within the child. The whole structure is a tangle of block and inline elements that should be cleaned up in one way or another. Any block elements within each category seem unnecessary. You probably also want to use a ul for greater semantic meaning.
There is class .cat declared in the css file.
.cat, .cat a {
padding: 0 5px;
color: #444066;
}
remove the padding from there or reduce the padding from 5px to 0px
and another thing is found is in the body class
body {
line-height: 1.6;
font-size: 15px;
}
which increses line-height of all divs and elements