i had been trying to get horizontally expanding menu's coding to work.. the menu has an image background and it should expand sideways as the content increases.
in code, i use background-position:left for one div and background-position:right for the next inner div.
it works fine in all the browsers except IE6... as IE6 doesnt support background-position:left
i need the same to work in IE6 as well.. for instance the top menu here.
do i need to code differently??
This might be overdoing it... but according to netrenderer it works till ie 5.5
http://photoshopmesta.net/1/test.html
CSS:
.left {
width: 25px;
height: 46px;
background-image: url(http://scentjunkies.com/wp-content/themes/Scent%20Junkies/images/menur_hover_left.png);
background-position: top left;
background-repeat: no-repeat;
float: left;
}
.middle {
height: 46px;
background-image: url(http://scentjunkies.com/wp-content/themes/Scent%20Junkies/images/menur_hover_right.png);
background-position: top left;
background-repeat: repeat-x;
float: left;
}
.middle span {
font-family: Arial;
font-size: 12px;
color: #ffffff;
padding: 19px 20px 10px 20px;
float: left;
}
.right {
width: 40px;
height: 46px;
background-image: url(http://scentjunkies.com/wp-content/themes/Scent%20Junkies/images/menur_hover_right.png);
background-position: top right;
background-repeat: no-repeat;
float: left;
}
HTML:
<span class="left"></span>
<span class="middle">
<span>Lorem ipsum</span>
</span>
<span class="right"></span>
Try using the extended form:
#something{
background-position: left center;
}
Ad#m
Many people have issues trying to get code to work correctly in IE6. If you don't really need it I would recommend not trying as it is very difficult.
If you are going to go ahead with it I recommend creating a different version of the website that is compatible with IE6, using a different css file for IE6 only. See the link below.
http://www.quirksmode.org/css/condcom.html
Also this is very handy for dealing with IE6 quirks
http://www.virtuosimedia.com/dev/css/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs
Related
I have a PHPBB theme I am starting to construct. In the CSS file, I have three items--a body and two divs--with background images. The background images for the divs have ceased working in all browsers.
The site with the theme presented is here: https://www.tarazedi.com/index.php?style=7
The problem images are here: https://www.tarazedi.com/styles/wTcFresh/theme/images/site_banner.png
The CSS is located in wTcFresh/theme/.
The images are all in the same locations but there seems to be a pathing issue but is working very strangely. I have tried using both relative and absolute URLs. I have tried url(x);, url('x');, and url("x"); and also changing the other background elements. In no case have the banner and logo images started working, but the body image works fine despite being in the same place and using the same syntax. When I inspect the computed styles of the divs in Chrome the image will show as the full absolute URL correctly but the relative link links instead to tarazedi.com/images/site_banner.png which returns a 500 error because that URL is, obviously, useless. In Edge and Firefox the inspector shows the correct link to the image but still does not render.
I have cleared browser and site-side caches with each attempt I make to fix it.
I am baffled. What am I missing?
body {
color: #CCCCCC;
background-color: #000000;
background-image: url("images/bg.jpg");
background-attachment: fixed;
}
.headerbanner {
border: #009900 solid 4px;
border-radius: 40px;
background-image: url("images/site_banner.png");
background-attachment: fixed;
background-position: right;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
}
.headerlogo {
border: #003300 solid 4px;
border-radius: 36px;
overflow: hidden;
background-repeat: no-repeat;
background-image: url("images/site_logo.png");
background-attachment: fixed;
background-position: left center;
vertical-align: middle;
}
To achieve expected result,adjust background-position and it is not issue with the background-image
1.Remove background:position to see the difference
Editing it thusly fixed the problem and it now renders correctly. Thank you very much!
.headerbanner {
border: #009900 solid 4px;
border-radius: 40px;
background-image: url("images/site_banner.png");
background-position: right;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
align-items: center;
}
.headerlogo {
border: #003300 solid 4px;
border-radius: 36px;
background-image: url("images/site_logo.png");
overflow: hidden;
background-repeat: no-repeat;
background-position: left;
align-items: center;
}
my code in css is:
.logo{
content:url(http://www.dylionsrugby.com.au/wp-content/uploads/2012/04/lion.png/600x600);
background-color: White;
float: right;
}
and in html I have:
<div class="logo"></div>
Am I missing something, nothing appears?`
Your question is somewhat general. You could also simulate the right positioning using positioning property on the image and not on the div.
.logo{
width: 250px;
height: 75px;
background-image: url("http://www.slate.com/content/dam/slate/articles/health_and_science/science/2015/07/150730_SCI_Cecil_lion.jpg.CROP.promo-xlarge2.jpg");
background-color: white;
background-repeat: no-repeat;
background-size: 100% 100%;
float: right;
}
<div class="logo"></div>
First of all, the "content" property is used for :before and :after pseudo-elements. Second, the link to the image is incorrect. I assume that you want the picture inside the div .logo with a white background so here is a jsfiddle: https://jsfiddle.net/Iulius90/njne5sy5/
code:
.logo {
background: white url(http://www.dylionsrugby.com.au/wp-content/uploads/2012/04/lion.png) no-repeat center;
background-size: cover;
float: right;
width: 200px;
height: 200px;
}
I tried expressing my problem earlier in another thread, but the only way that could fix it, caused the website to not be compliant with different size devices. The method I have now tried to use is the vertical center method stated in this topic.
vertical-align with Bootstrap 3
What I'm wanting to happen is to have a full page background along with a horizontally / vertically aligned div tag that contains my name and occupation. But instead what's happened is that it aligns the text to the middle of the page, but then it just doesn't align it vertically.
<div class="container-fluid text-center">
<header role="banner" id="banner" class="vcenter">
<h1>name</h1>
<h2>occupation</h2>
<h3>location</h3>
</header>
</div>
CSS
header {
/*position:absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%); */
font-family: Roboto-thin ;
padding: 0px;
border-style: none;
color:#ffffff ;
}
header h1 {
font-family:;
font-size: 8rem; /* =28px */
letter-spacing: 0.05em;
padding: 0px ;
margin-top: 0px;
margin-bottom: 13px;
}
header h2 {
font-family: ;
font-size: 5rem;
padding: 0px;
margin: 0px;
}
header h3 {
font-family: ;
font-size: 3rem;
}
.container-fluid {
background-image: url(../../images/intro.jpg);
background-repeat:no-repeat;
background-attachment: scroll;
background-position: center center;
background-repeat: none;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
margin:0px;
padding:0px;
height:100%;
}
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
The old method I used can be found in the header tag commented out. This method works fine for some browsers, but it seems that most browsers don't support the transform function.
Thanks in advance.
Bootstrap typically uses percentages for cross-platform/cross-browser capabilities. Maybe you could try adding something like this to your css file (alongside your .vcenter class):
.vcenter::before {
content:'';
display:inline-block;
height: 100%;
vertical-align:middle;
width:0px;
}
This will retrieve the height of the screen based on percentages and format the text vertically before it is displayed, which in theory, should work on all devices and browsers(for the most part). In IE8 you've got to use :before instead of ::before and have a !DOCTYPE declared. Hope this helps!
Sorry if the layout of the question seems weird, I've wrote this question now for about 10 times over and over again in this editor, resulting always in getting an error message "unformatted code found etc." - so I removed all the code and placed picture examples. (2 hours for a simple question)
Hello folks!
I do have a .png image, containing several icons that works as CSS Sprite.
The creation of each CSS class for that is no problem as I use a generator for that. (works like a charm)
The problem is, that I want to use, for example: The created .iconInfo_32 class, as background property for another css class.
What I want to achive?
Simple said, a custom css - messagebox, with an icon on the left side.
The icon itself is in original a sprite containing multiple icons.
That's where the problem starts.
What I have
The Icons
(thats one PNG)
The Icon I want to use
How the result should look like
How it actually looks
Use another div, in a div
Yes, that would work - but I'd like to have "one" css class, without the need to put always a div, into another div, say where the position should be and so on - also I had problems with the position of the div.
I've provided a source example, hopefully this will help being able to understand my question and my goal.
Excuse me if the layout of my question is unusual and unpleasent, I would have done it in another way, but the editor just won't let me
Source
HTML
<div class="warning_without_sprite">
This is a DIV container<br />
showing an error message with the use of 'close_32.png' as Icon. (No Sprite)
</div><br /><br /><br /><br />
<div class="warning_with_sprite">
This is a DIV container<br />
showing an error message with the use of 'icons.png' as Icon. (Sprite)
</div>
CSS
<style type="text/css">
.iconInfo_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -0px -0px; }
.iconOk_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -32px -0px; }
.iconAdd_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -64px -0px; }
.iconClose_2_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -96px -0px; }
.iconClose_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -128px -0px; }
.iconDelete_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -160px -0px; }
.iconDownload_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -192px -0px; }
.iconHelp_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -224px -0px; }
.warning_without_sprite {
border: 1px solid;
padding: 10px 10px 10px 50px;
background-repeat: no-repeat;
background-position: 10px center;
float:left;
color: #D8000C;
background-color: #FFBABA;
background-image: url('images/close_32.png');
}
.warning_with_sprite {
border: 1px solid;
padding: 10px 10px 10px 50px;
background-repeat: no-repeat;
background-position: 10px center;
float:left;
color: #D8000C;
background: #FFBABA url('images/icons.png') no-repeat -128px -0px;
}
</style>
>> Download as RAR. <<
It's because you've set it as a background-image across the whole <div> element and because the sprite contains multiple images it will show them all. You can't specify how much of that sprite to show.
You'll have to insert a <span> element into your <div>. This will allow you to specify the size of the span and position it relative to your div container.
<div class="warning">
<span class="warning_with_sprite"></span>
This is a DIV container<br />
showing an error message with the use of 'icons.png' as Icon. (Sprite)
</div>
CSS:
.warning_with_sprite {
position:absolute; left:16px; top:16px;
background-repeat: no-repeat;
background-position: 10px center;
width:20px; height:20px;
background: url('http://i5.minus.com/id1CYq.png') no-repeat -133px -2px;
}
.warning {
float:left;
color: #D8000C;
border: 1px solid;
position:relative;
padding: 10px 10px 10px 50px;
background: #FFBABA;
}
See a demo here
Note: you'll have to change the image back to your sprite and the top, left, height and width properties will have to change inline with your requirements
I've managed to get my header to work as a link in ff, safari and opera with the css image replacement
#header h1 {
background-image: url(../images/logo.png);
background-repeat: no-repeat;
text-indent: -9999px;
margin-left: 15px;
}
#header h1 a {
display: block;
height: 120px;
width: 400px;
margin-top: -135px;
}
I'm trying to optimize the site its for in IE, my last step before I launch it on monday but the logo doesn't appear at all in IE 8 or 9, But it very surprisingly does in IE 7. I managed to get the logo to appear in IE9 by making the display inline-block
.ie9 #header h1 {
background-image: url(../images/logo.png);
background-repeat: no-repeat;
text-indent: -9999px;
margin-left: 15px;
}
.ie9 #header h1 a {
display: inline-block;
height: 120px;
width: 400px;
margin-top: -135px;
}
bit the image is no longer a link when I do this, does anyone have any idea how to fix this? I would put the image in the HTML instead of using the image replacement but Its been hammered into my head that from an SEO standpoint using the image replacement is better.
I think it is the margin-top: -135px causing the problem. The height is only 120px so it will end up being -15px (height - margin) so disappearing underneath the bottom of the H1 tag.