I have IE6.
[EDIT: you can see the template live here: http://themeforest.net/item/aqua-terra-lava-html-blog-portfolio-/full_screen_preview/53209 ]
I have a template, with 3 <a></a> that change the position of their background to create a button effect.
This is how it looks in any browser
This is it with IE6:
This the CSS code:
#featured-nav {
width: 944px;
height: 131px;
background: url(/images/site/shadow.gif) bottom center no-repeat;
}
#featured-nav a {
height: 35px;
float: left;
cursor: pointer;
display: block;
padding: 47px 20px 20px 120px;
font-size: 12px;
line-height: 16px;
text-decoration: none;
font-weight: normal;
color: #777;
}
#featured-nav a span {
margin-top: 10px;
height: 30px;
width: 150px;
font-size: 12px;
text-transform: uppercase;
color: #5aa0b1;
font-weight: bold;
position: absolute;
top: 12px;
left: 120px;
}
#featured-nav a img {
position: absolute;
left: 40px;
top: 23px;
}
#featured-nav a.left {
background: url(/images/site/leftbutton.png) top left no-repeat;
width: 178px;
overflow: hidden;
position: relative;
}
#featured-nav a.left:hover, #featured-nav a.left.activeSlide { background: url(/images/site/leftbutton.png) bottom left no-repeat; }
#featured-nav a.middle {
background: url(/images/site/middlebutton.png) top left no-repeat;
width: 174px;
overflow: hidden;
position: relative;
}
#featured-nav a.middle:hover, #featured-nav a.middle.activeSlide { background: url(/images/site/middlebutton.png) bottom left no-repeat; }
#featured-nav a.right {
background: url(/images/site/rightbutton.png) top left no-repeat;
width: 172px;
overflow: hidden;
position: relative;
}
#featured-nav a.right:hover, #featured-nav a.right.activeSlide { background: url(/images/site/rightbutton.png) bottom left no-repeat; }
.content-wrapper {
width: 678px;
overflow: hidden;
margin-top: 10px;
margin-left: 8px;
}
Any idea?
Thank you.
IE 6 cannot understand multiple classes on an element correctly so i would suggest you put the
#featured-nav {
width: 944px;
height: 131px;
background: url(/images/site/shadow.gif) bottom center no-repeat;
}
as the last rule in the CSS so IE 6 picks it up last ..
you are bound to face similar problems elsewhere though ..
To be sure either create full background buttons (the whole button in one image) / create multiple elements to define each side of the button / or scrap IE 6 ...
[EDIT] it does not apply to your case .. scrap my suggestion ..
as an alternative, you can rename you selected classes and instead of using two like left.activeSlide have one named left_activeSlide...
[EDIT 2] here is some code for the specific template you mentioned in your comment
They use the cycle plugin, and in the cycle.js file (at the end) they have the initialization code which is
function onBefore(){
var slide = $(this).attr('id');
$('#featured-nav ul li.activeSlide').removeClass('activeSlide');
$('#featured-nav ul li#' + slide).addClass('activeSlide');
}
now if you change it to
function onBefore(){
var slide = $(this).attr('id');
$('#featured-nav ul li.'+slide+'activeSlide').removeClass('leftactiveSlide rightactiveSlide middleactiveSlide');
$('#featured-nav ul li#' + slide).addClass(slide+'activeSlide');
}
it would work with classes named leftactiveSlide, middleactiveSlide rightactiveSlide
You might want to add display:inline to the floated elements. This doesn't affect other browsers, but prevents IE from doubling margins on the element.
I believe the IE6 has issues with background-positioning certain PNGs. Just as a test, you ought to try replacing the image with a JPG or non-transparent PNG.
Related
I am trying to clone some website to improve my skills, but I have encounter a problem, the page seems to be stuck in an specific height and when I try to add more html it just disappear (it does not disappear, it's added at the top of the page behind the background image). I really want to know what is causing this and how to fix it without messing with the background image.
.center{
text-align: center;
}
*{
margin 0;
padding: 0;
}
a:link {
color: inherit;
}
a:visited {
color:inherit;
}
a:hover {
color: #ea7640;
}
a:active {
color:inherit;
}
a {
text-decoration: none;
}
#wrapper {
background-image: url("https://66.media.tumblr.com/f79df0dd538fc53292fe1aac7cd54daf/tumblr_oga789rskz1vxey6qo1_1280.png");
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 70%;
background-repeat: no-repeat;
background-size: cover;
margin-top: 3em;
}
nav {
background-color: #312822;
padding: 3px;
margin-top: -8px;
margin-left: -8px;
margin-right:-8px;
font-size: 13px;
}
li {
list-style-type: none;
display: inline-block;
margin-right: 25px;
color: #bdb9b7;
}
#proyecto {
color: #ea7640;
}
.texto {
color: #ea7640;
font-weight: bold;
}
#logo {
margin-top: 4em;
}
#text{
margin-top: 4em;
font-weight: bold;
}
#marca {
margin-top: 10em;
font-style: italic;
}
#wrapper2{
position: fixed;
min-width: 100%;
min-height: 1000px;
background-color: #fff;
margin-top: 700px;
left: 0;
}
#wrapper2 ul {
margin-top: 20px;
}
Demo: http://codepen.io/njwda/pen/PbwaOV
Just erase position: fixed from your wrapper elements - that way the elements will simply appear below each other, as they are supposed to.
Your image has position: fixed, so the other content by default has property position: static and located under the image. If you want to see your new content, your should use one of the following properties for it:
position: absolute;
position: fixed;
position: relative;
For example try to add new <h1 style = 'position: relative;'>Test</h1> to your HTML.
Here is the working example: https://jsfiddle.net/o589ynts/
Good luck
I have a dynamic element which will be capable of scaling in size, its position could be placed anywhere on the screen. I'm basically trying to create an "elbow" section.
What this "elbow" needs is an extension arm at the top right... Funny thing is, while I have the position and size correct, for some reason, the pseudo element is not showing up in the grey I'm calling... (see attached image showing Element Inspector highlighting the element in the correct size and position, but not in the same grey)...
I have a JSFiddle here of the code: https://jsfiddle.net/eliseo_d/6p9z8xr3/
HTML:
<div class="elbow-1-toprt-wide0-grey1">elbow 1</div>
CSS:
html {
background-color: rgb(0,0,0);
}
body {
margin: 5px;
}
div[class$='-grey1'] {
background-color: rgb(102,102,102);
}
div[class^='elbow-'] {
/* default settings */
color: rgb(0,0,0);
font-size: 14pt;
height: 14px;
margin-bottom: 4px;
margin-right: 4px;
overflow: hidden;
padding-bottom: 7px;
padding-left: 10px;
padding-right: 10px;
text-align: right;
text-transform: uppercase;
width: 84px;
position: relative;
}
div[class^='elbow-1-'] {
padding-top: 46px;
}
/* Initial curve */
div[class^='elbow-'][class*='-toprt-'] {
border-top-left-radius: 42px;
}
/* elbow bar */
div[class^='elbow-'][class*='-toprt-']:after {
content: '';
height: 30px;
left: 104px;
top: 0;
position: absolute;
}
div[class^='elbow-'][class*='-wide0-']:after {
width: 21px;
}
div[class^='elbow-'][class*='-wide0-'][class$='-grey0']:after {
background-color: rgb(51,51,51);
}
div[class^='elbow-'][class*='-wide0-'][class$='-grey1']:after {
background-color: rgb(102,102,102);
}
I can't seem to figure out what I'm missing?
Anyone know what I'm missing? Thanks in advance.
The ::after element is being shown with the background, your problem is that div[class^='elbow-'] is set to overflow:hidden;, which is hiding the pseudo element.
Simply remove overflow:hidden;
JSFiddle Demo
<div class="ndnmpricetag-container"><div class="ndnmpricetag price">15.00$</div></div>
<div class="ndnmpricetag-container"><div class="ndnmpricetag">500000.00$</div></div>
ndnmpricetag-container use a static background image. When using large numbers (like the second example), the image is too small for the numbers.
How can i adjust ndnmpricetag-container's background width depending on the width of ndnmpricetag ?
Full css and examples here.
You need to make following changes:
Change the display property of .ndnmpricetag-container to inline-block so that it doesn't take all of the width of block. To make div place in next line, use < br/> tag in HTML.
Give the .ndnmpricetag-container a min-width equal to the image width say 100px. This will ensure that the image will not get cropped for very small widths.
Give background-size:100% 100%;.
Give padding-right: 35px;to .tondnmpricetag so that the arrows at the end of your image are able to contain the numbers and text have enough space to adjust within image.
See the updated link
See the screenshot below:
Hi now try to this Css
.ndnmpricetag-container {
text-align: left;
display: inline-block;
vertical-align: top;
height: 53px;
background: url('http://www.ni-dieu-ni-maitre.com/images/pricetag.png');
background-size: 100% 54px;
padding: 0 50px 0 7px;
font-size: 16px;
}
Demo
.ndnmpricetag-container {
text-align: left;
display: inline-block;
vertical-align: top;
height: 53px;
background: url('http://www.ni-dieu-ni-maitre.com/images/pricetag.png');
background-size: 100% 54px;
padding: 0 50px 0 7px;
font-size: 16px;
}
.ndnmpricetag {
position: relative;
top: 7px;
margin-left: 7px;
margin-right: 7px;
font-face: Helvetica;
font-size:1.2em;
white-space: nowrap;
letter-spacing: -1px;
font-weight:bold;
}
<div class="ndnmpricetag-container"><div class="ndnmpricetag price">15.00$</div></div>
<div class="ndnmpricetag-container"><div class="ndnmpricetag price">500000.00$</div></div>
Use a long image and use the 'Sliding door technique'.
https://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/
You can have :before pseudo element to contain start of element, :after to contain end of element. And self element contains repeated middle background.
.a {
background: url('http://www.ni-dieu-ni-maitre.com/images/pricetag.png') repeat-x left center;
display: inline-block;
position: relative;
margin-left: 10px;
margin-right: 35px;
}
.a:before {
content: '';
width: 10px;
height: 100%;
position: absolute;
left: -10px;
top: 0;
display: block;
background: url('http://www.ni-dieu-ni-maitre.com/images/pricetag.png') no-repeat left center;
}
.a:after {
content: '';
width: 35px;
height: 100%;
position: absolute;
right: -35px;
top: 0;
display: block;
background: url('http://www.ni-dieu-ni-maitre.com/images/pricetag.png') no-repeat right center;
}
<div class="a">15464%</a>
#border {
position: static;
z-index: 1;
width: 120px;
height: 120px;
margin-left: 92% ;
padding: 15px;
border-radius: 11px;
background: white;
opacity: 0.2;
}
#text {
margin-left: 93%;
z-index: 2;
color: white;
font-weight: bold;
}
<div id="border"></div>
<div id="text">Users online</div>
I can't post the image here, cuz I have less than 10 reputation, so try to imagine it please. I want to place it's "Users online" inside the border, how should I do this? Thanks.
I'm assuming you are trying to have an element with a semitransparent background.
Since you are using the opacity property on the element with an id of border.
The problem here is that z-index will not have any effect, if the position is set to static, which is the default value for div elements.
The other thing is, that you should be using a relative positioned parent to make your life easier and have more control over the elements since positioned elements will leave the normal document flow and result in new stacking order.
Here you can find good information on the the z-index property, stacking and the document flow.
This is one solution to your problem.
body {
background:black;
}
.holder {
position:relative;
}
#border {
position: absolute;
z-index:1;
right:0;
width: 120px;
height: 120px;
padding: 15px;
border-radius: 11px;
background: white;
opacity: 0.2;
}
#text {
position: absolute;
z-index:2;
right:0;
width: 120px;
height: 120px;
padding: 15px;
text-align: center;
color: white;
font-weight: bold;
}
<div class="holder">
<div id="border"></div>
<div id="text">Users online</div>
</div>
But i would actually try to solve this with a different approach, because i find the above solution a bit to complex and it involves to much positioning, so if all you need is a semitransparent background just make use of the background property with an rgba value. Here is an example.
.user-panel {
float:right;
height: 120px;
width: 120px;
padding: 15px;
border-radius: 11px;
/* fallback for browser that do not support rgba */
background: #ccc;
/* semitransparent background */
background: rgba(0, 0, 0, .2);
text-align: center;
color: white;
}
/* clear the float using the pseudo after element */
user-panel:after {
clear: both;
display: block;
visibility: hidden;
height: 0px;
}
<header>
<div class="user-panel">Users online</div>
</header>
Hope that helps.
Change
position: static;
to
position: absolute;
for #border. That way, border will be "removed from the flow" (i.e. other elements will ignore it). You may need to adjust the margin-left property for #text so it properly aligns.
Fiddle: https://jsfiddle.net/xzdmLt33/1/
How do I align an icon right next to "Click here"?
I was able to use the below CSS to accomplish it but on a PC when using firefox, chrome, and safari the icons are not aligned.
<div class="link_container">
Click here
<a class="sprite_image action_image"></a>
</div>
.link_container {
margin-top: -10px;
padding-bottom: 10px;
}
.click_action {
color: #999;
font-size: 12px;
text-decoration:none;
}
.sprite_image {
background: url('sprite.png');
}
.action_image {
background-repeat: no-repeat;
background-position: -116px -12px;
width: 10px;
height: 10px;
position: absolute;
margin-left: 3px;
margin-top: 4px;
}
You could add this to the .click_action and .sprite_image css:
float: left;
Allot of browsers hate - positioning, now everything looks good, but my thought is, make it part of click here, not a separate piece. Just add this CSS and your entire ahref and icon are clickable. See Fiddle
.click_action {
background: url("http://www.icondeposit.com/local--files/imageid:105/Preview-blue-set-icons.jpg") no-repeat scroll -6% 29% transparent;
color: #999999;
display: block;
font-size: 12px;
height: 42px;
padding: 15px 0 0;
text-decoration: none;
width: 87px;
}