I want to have a HR like background image. a 2 pixel wide gif file.
I looked into styling the HR tag, but too much browser issues..
Used a 2px high div with the image as bg, but in IE6, there is a padding I can not seem to get rid of.
Any suggestions welcome!
CSS:
.hr {
margin: 0; padding: 0;
height: 2px;
background-image: url('images/help-hr.gif');
background-repeat: repeat-x;
background-color: green; /* just to see the padding in IE6 */
}
HTML:
<p>sky</p>
<div class="hr"></div>
<p>grass</p>
Add overflow:hidden;
.hr {
margin: 0; padding: 0;
height: 2px;
background-image: url('images/help-hr.gif');
background-repeat: repeat-x;
background-color: green; /* just to see the padding in IE6 */
overflow:hidden;
}
I do not know the answer to the IE6 issue you're dealing with, but I had the same issue with using hr and found a solution that worked for me:
hr {
background-color: #ccc;
border-width: 0;
color: #ccc;
height: 2px;
line-height: 0;
margin: -.5em 10px 1.8571em 10px;
page-break-after: always;
text-align: center;
width: 80%;
}
hr:after {
content: "\a7\a7";
font-size: 1.25em;
}
Related
I am trying to achieve something as close to the image below as possible.
I currently get the following with the code below and can't seem to quite get it to do what I need.
Current Styling:
My CSS:
hr:after {
background: url('../img/green_leaf.png') no-repeat top center;
content: "";
display: block;
height: 18px; /* height of the ornament */
position: relative;
top: -9px; /* half the height of the ornament */
border: 0;
color: #d7d7d7;
}
I Would like to thicken the line, and if possible, add space around the image (without making the green_leaf.png have a white bg).
How about setting the image in the hr element, and using :before and :after to create the lines? That way you won't have to set a background on the image to cover up a single line.
Working Example:
hr {
background: url('http://i.stack.imgur.com/37Aip.png') no-repeat top center;
background-size: contain;
display: block;
height: 18px;
border: 0;
position: relative;
}
hr:before,
hr:after {
content: '';
display: block;
position: absolute;
background: #d7d7d7;
height: 2px;
top: 8px;
}
hr:before {
left: 0;
right: 50%;
margin-right: 10px;
}
hr:after {
right: 0;
left: 50%;
margin-left: 10px;
}
<hr />
You can find the answer in this post Custom <hr> with image/character in the center
I modified it and I got this:
hr {
no-repeat top center;
text-align: center; /* horizontal centering */
line-height: 1px; /* vertical centering */
height: 1px; /* gap between the lines */
border-width: 1px 0; /* top and bottom borders */
border-style: solid;
border-color: #676767;
}
hr:after {
content: ""; /* section sign */
background: url('smiley.gif') no-repeat top center;
display: inline; /* for vertical centering and background knockout */
background-color: white; /* same as background color */
padding: 0 2em; /* size of background color knockout */
}
Pay attention to padding: 0 2em; and background-color: white;.
If you set it up like this, and specify background color on the image to match whatever you have in the background of the page (probably white) it will look good:
HTML
<div class='hr'>
<hr>
<img src='../img/green_leaf.png' alt=''>
</div>
CSS
hr {
border:none;
border: 1px solid #d7d7d7;
}
.hr {
text-align: center;
}
.hr img {
position: relative;
top: -18px;
background:white;
padding:0 5px;
}
Result:
Fiddle
This page I am developing has a different layout on Safari than Chrome/Firefox
Here is how it looks in Safari
Here is how it looks in Firefox
As you can see, the top banner isn't showing on Safari and i think it's because of the parallax CSS I have added for the banner if I'm not completely wrong here.
Here is the CSS:
.slide {
position: relative;
padding: 15vh 1%;
min-height: 100vh;
width: 100vw;
box-sizing: border-box;
box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
transform-style: inherit;
}
.slide:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left:0;
right:0;
}
.title {
width: 50%;
padding: 5%;
border-radius: 5px;
background: rgba(240,230,220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
.slide:nth-child(2n) .title {
margin-left: 0;
margin-right: auto;
}
.slide:nth-child(2n+1) .title {
margin-left: auto;
margin-right: 0;
}
.slide, .slide:before {
background: 50% 50% / cover;
}
#title {
background-image: url("http://bildeopplaster.no/8Kk");
background-attachment: fixed;
}
.carsonshold { position: relative; width: 100%; display: block; border-bottom: 1px solid #ccc; }
.carsonshold img { padding: 20px; display: block; border: none; }
#thesedays { padding: 10px 20px; margin: 40px 0; background: #fff; border: 1px solid #ccc; }
#results { padding: 10px 20px; background: #fff; border: 1px solid #ccc; font-family: monospace; }
.text-link {
border: none;
background: none;
padding: 0;
margin: 0;
font-size: 0.85em;
cursor: pointer;
}
Can anyone see why the banner isn't showing up on Safari or what am I missing here?
The first issue is you are using vh units for that element. Unfortunately, Safari didn't support vh and vw units until Version 6 (unprefixed in Version 6.1).
The second issue is that you are using the background: 50% 50% / cover; property-value pair. That is also not a supported value in Safari 5.1.7. You need to remove the / cover bit for it to work in Safari 5.1.7. Safari 5.1.7 should support background-size: cover;, but it seems like it doesn't support the shorthand version you're trying to use here.
Using these values will fix it, more or less:
.slide, .slide::before {
background: 50% 50%;
}
.slide {
padding: 15%;
min-height: 100%;
width: 100%;
}
With that being said, this shouldn't be an issue, because people who use Safari as their main browser will probably be on OS X, which means they'll be on a newer version of Safari. It's unlikely anyone will be using Safari on Windows for their main browser. Then again, it's possible, considering there are still Opera 12 users out there...
I put together a button using :before and :after elements and IE10/9 are ignoring them completely, as far as I can tell they should be working perfectly in at least those 2 versions.
.buttonSML {
background-position:-35px -432px;
background-color: transparent;
border: none;
text-transform: uppercase;
font-size: 2.9rem;
font-weight: #font-bold;
height: 55px;
padding: 0 5px;
position: relative;
.text-shadow(0,0,4px);
cursor: pointer;
}
.buttonSML:before, .buttonSML:after {
content: " ";
position: absolute;
top: 0;
height: 55px;
width: 20px;
display: inline-block;
visibility: visible
}
.buttonSML:before {
background-image: url('../images/sprite.png');
background-position: 0px -432px;
background-repeat: no-repeat;
background-color: transparent;
left: -20px;
}
.buttonSML:after {
background: url('../images/sprite.png');
background-position: -394px -432px;
background-repeat: no-repeat;
background-color: transparent;
right: -20px;
}
Added a jsfiddle so you can see the end result http://jsfiddle.net/7D4kG/1/
Not really sure what up so would appreciate any advice you guys can provide.
After some work I found 2 solutions.
FIrst is with the help of jquery, you can replace with and add
$('#button-id').click(function ()
{
$('#form-id').submit();
});
Works well, but you loose HTML5 form validations.
To keep the validations you can skip the jquery and just add "overflow: visible" to your buttons style. Have only tested it in IE10 so far, will test the rest later when I republish.
http://jsfiddle.net/3MHHs/1/
I have made some changes and it works for me in Chrome and IE10. I completely removed the positioning, because that is very ...advanced thing in pseudos. Browsers fail on simpler cases too. I have removed the 5px padding too.
.sprite {
background-image: url('https://dl.dropboxusercontent.com/u/6374897/sprite.png')
}
.buttonSML {
background-position: -35px -432px;
background-color: transparent;
border: none;
text-transform: uppercase;
font-size: 2rem;
height: 55px;
padding: 0;
cursor: pointer;
}
.buttonSML:before, .buttonSML:after {
content: "";
width: 20px;
height: 55px;
font-size: 2rem;
display: inline-block;
vertical-align: middle;
background-repeat: no-repeat;
background-color: white; /* sorry */
background-image: url('https://dl.dropboxusercontent.com/u/6374897/sprite.png');
}
.buttonSML:before {
background-position: 0px -432px;
}
.buttonSML:after {
background-position: -394px -432px;
}
I am following this tutorial link but do not know how to put the footer on the bottom of the page so when the user open the page the footer is on the very bottom of page regardless of size of the monitor.
So that when they change the size of window or use a bigger monitor footer should be at the end of page.
The important part is that I do not have much text in my content section so the scroll bar is expected to be invisible in any size of monitor.(those that are not very tiny)
*Please also note that I have looked at the previous question but could not find a correct answer.
* If you know of any other tutorial I would appreciate your suggestion. (I need float layout)
Layout
container
{
header
content
{
leftnav | rightnav
}
footer
}
Css
#container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}
#top h1
{
padding: 0;
margin: 0;
}
#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
}
#content
{
margin-left: 200px;
border-left: 1px solid gray;
padding: 1em;
max-width: 36em;
}
#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}
#leftnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }
In the tutorial the footer is in a container div.
If you remove from the container width:90% the example will be rendered across the whole width of the screen.
Use the sticky wrapper jQuery plugin, or use position: fixed with bottom: 5% and left: 0 and margin-left values in -ve.
<footer style="background-color: crimson; color:springgreen; font-family: serif; text-align: center; font-size: 15px; position:absolute; width: 99.82%;margin-left: -6px; margin-right: -6px;"><h1>THIS IS MY FOOTER</h1></footer>
Browser: Google Chrome
System Screem: 15.6"
I have experienced that the appearance of our divs, headers, footers & navs varies from screen to screen and may be browser to browser.
try this :
#footer{
position: absolute;
bottom: 0px;
height: 50px;
width: 100%;
}
I'm trying to remove the top spacing of my layout I am working on, which you can view here: 50.116.81.173/~speedcit/wordpress/. However, I don't seem to be having much luck with it. I essentially would like to remove the white spacing at the top of the page.
Below is the CSS code I am currently using:
body, html {
font-family: Arial;
font-size: 11.5pt;
height: 100%;
margin: 0;
padding: 0;
border: 0;
}
table, tr, td, div {
font-family: Arial;
font-size: 11.5pt;
}
#outer {
text-align: center;
margin: 0px;
}
#wrapper {
border-left: 1px #000000 dotted;
border-right: 1px #000000 dotted;
padding-top: 2px;
padding-left: 2px;
text-align: left;
width: 1024px;
display: block;
margin-left: auto;
margin-right: auto;
min-height: 100%;
}
#header {
background-image: url(http://50.116.81.173/~speedcit/images/header.jpg);
width: 1024px;
height: 280px;
}
#menu {
width: 1024px;
height: 61px;
}
#content {
background-image: url(http://50.116.81.173/~speedcit/images/content-bg.jpg);
background-repeat: no-repeat;
width: 804px;
height: 357px;
padding-top: 80px;
padding-bottom: 10px;
padding-left: 110px;
padding-right: 110px;
line-height: 24pt;
}
#footer {
margin: 0px;
padding: 0px;
}
.txt {
color: #BF2736;
font-weight: bold;
}
Add padding 0 to your wrapper. CSS reset should fix your problem but might create new ones.
http://meyerweb.com/eric/tools/css/reset/
#wrapper {padding:0;}
The root cause to the problem is that you did not reset the way in which the browser renders CSS back to zero.
Change the Padding of the #wrapper to Zero
#wrapper {
border-left: 1px #000000 dotted;
border-right: 1px #000000 dotted;
padding-top: 0px; -- Change This to zero!!!
padding-left: 2px;
text-align: left;
width: 1024px;
display: block;
margin-left: auto;
margin-right: auto;
min-height: 100%;
}
You might want to read about css reset tool
http://meyerweb.com/eric/tools/css/reset/
The goal of a reset stylesheet is to reduce browser inconsistencies in
things like default line heights, margins and font sizes of headings,
and so on
Replace padding-top:2px with padding:0 in the #wrapper rule. If you add padding:0 before the padding-top property, you will still have the problem.
problem of your bottom padding is image it-self. There is a white space in image. Edit it and remove it:
50.116.81.173/~speedcit/images/footer.jpg
And problem of your top white space is what others said before.