I'm having an issue with IE9(and 8) with positioning empty(kinda) anchor elements over an image. The anchors contains text, but it's kicked off the page using CSS's text-indent property.
I'm working on a site that has a series of promo panels, they're all contained in an UL. Inside each LI there's a promo image, and 1 or more anchor elements positioned over different areas of it. The IMG and the A elements are absolutely positioned in the LI element. So, the basic structure looks like UL > LI > IMG A A A.
This setup works fine in Firefox and Chrome, but IE doesn't like it. I've tried using z-index on this setup with no luck.
Can anyone explain the issue that IE is having, and give a better solution for my CSS? I've made a quick/simplified example of my problem using a div, img, and a single anchor. This can be copy/pasted onto your machine to see it in action.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="Description" content="" />
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<link type="text/css" rel="stylesheet" href="" />
<style type="text/css">
#div {
z-index:1;
display: block;
background:red;
position:relative;
}
#image {
z-index:2;
position:absolute;
top:0;
left:0;
display:block;
}
#anchor {
z-index:3;
display:block;
overflow:hidden;
position: absolute;
top:0;
left:0;
text-indent:-9999px;
width:640px;
height:480px;
}
</style>
</head>
<body>
<div id="div">
<img id="image" src="http://farm8.staticflickr.com/7130/7438112718_2e8340081b_z.jpg" />
clicky
</div>
</body>
</html>
I don't have much control over the UL > LI > IMG A layout. This is setup that as we get new promos we can easily update the image, and just add or remove anchors easily depending on how many 'calls to action' the image has. The positioning of the A elements are injected inline.
Thanks!
I had the same issue. Using your example, here's my solution:
<style type="text/css">
#div {
position:relative;
}
#anchor {
display:block;
width:640px;
height:480px;
overflow:hidden;
text-indent:-9999px;
position:absolute;
top:0;
left:0;
background:url(http://farm8.staticflickr.com/7130/7438112718_2e8340081b_z.jpg) no-repeat 640px 480px;
}
</style>
<div id="div">
<img id="image" src="http://farm8.staticflickr.com/7130/7438112718_2e8340081b_z.jpg" />
clicky
</div>
Since the anchor tag has a set width and height with overflow hidden, set the anchor tag's background image to the image that it's absolutely positioned over (or any image you've already included), BUT set the background-position to positive pixel values larger than the anchor's width and height and background-repeat to no-repeat. By doing this, the anchor tags work in IE, AND the browser doesn't download extra resources so you save bandwidth. Note: the img tag doesn't need any special styling, and the containing div only needs position relative.
If you don't want to worry about setting the background-position, don't have control over the size of any dynamically generated images, and/or aren't concerned about saving bandwidth, you could also create and use a small (1x1) clear/transparent image (set background-repeat if necessary).
Alternately, augmenting Billy Moat's fiddle example: http://jsfiddle.net/7NpLq/29/
I think you could use a plain old HTML image map to achieve what you're wanting here:
http://www.w3schools.com/tags/tag_map.asp
Otherwise here's a fiddle doing what I think you were trying to do originally:
http://fiddle.jshell.net/7NpLq/
This issue affects IE10 as well, but not IE11. An alternative to the background image approach is to apply background-color: rgba(0, 0, 0, 0); to the anchor. Note that this won't work in IE8, which doesn't support rgba colors.
Related
The following CSS showld put the logo right in the middle as the margins are pushed by the same value from both left and right, and top and bottom, however, this happens only on firefox for some reason that I obviously don't have a clue of.
body {
background-image:url(Background.png);
background-size:100%;
background-repeat:repeat-y;
} /*backgroung*/
.logo {
left:0;
top:0px;
right:0;
bottom:0px;
position:absolute;
min-width:444px;
margin: 230px; 400px;
text-align:center;
} /*logo positioning*/
.logo {
background-image:url(Logo.png);
background-position:center;
background-repeat:no-repeat;
} /*logo image*/
.logo:hover {
background-image:url(Logo2.png);
background-repeat:no-repeat;
background-position:center;
} /*mouseover*/
Do you have a link we can check?
Try using “padding-top: 150px”. It usually works unless there is something that is keeping you from doing it. Or, try the regular trick “ zoom: 1”,”position: relative”, “display: block”.
Hope this helps.
in your css try to add height. that should fix the issue.
.logo {
left:0;
top:0px;
right:0;
bottom:0px;
position:absolute;
min-width:444px;
min-height:some xyz px;
margin: 230px; 400px;
text-align:center;
} /*logo positioning*/
I have included another div and created Pen.
This is the HTML as follows, and I am also posting the full CSS. The social icons I put in (facebook and twitter) respond perfectly in any browser. The logo's margins seem to be cut as I indicate in the CSS only if read with firefox. I have tried to specify the height but had the issue anyway.
If you know any trick that will work in any browser just explain me because I've been around CSS and HTML only for a week, so I know the normal commands but don't know many tricks, so I'd love to understand those tricks and why they work rather than normal css attributes.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LoD</title>
<link rel="stylesheet" type="text/css" href="Style.css" />
<link rel="shortcut icon" href="Favicon.ico" />
</head>
<body>
<div id="container">
<a href="Index.html" /><img class="logo" />
<ul id="social">
<li class="facebook";><img src="Facebook4.png" style="width:80px; height:73px;" onmouseover="this.src='Facebook2.png';" onmouseout="this.src='Facebook4.png';"/></li>
<li class="twitter";><img src="Twitter.png" style="width:80px; height:73px;" onmouseover="this.src='Twitter2.png'"; onmouseout="this.src='Twitter.png';"/></li>
<li class="plot";><img src="Plot.png" style="width:140px; height:73px" onmouseover="this.src='Plot3.png'" onmouseout="this.src='Plot.png'" onclick="this.src='Plot2.png'" /></li>
</ul>
</div><!--closes container-->
<footer id="copyright">
<p>© Giorgio Vitanza</p>
</footer>
</body>
</html>
Ok I fixed it! Apparently margin: [value in pixels] [value in pixels], with no ";" in between, fixed the issue in any browser. Strange but true
The problem is now, that when I zoom down the pic doesn't hold its central position.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<!-- META -->
<title>Nina Rakovec</title>
<meta name="description" content="Profesionalna igralka" />
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" href="/favicon.ico" />
</head>
<body>
<div class="image"></div>
<div class="eng"></div>
<div class="slo"></div>
</body>
</html>
CSS:
body {
background: url("ninabg.jpg") left top no-repeat;
background-size: 100% auto;
}
div.image {
overflow: hidden;
content:url("logo2fix.png");
position:absolute;
right:1%;
bottom:3%;
height:40%;
width:35%;
}
div.slo {
content:url("slo.png");
position:absolute;
width:5%;
bottom:10%;
right:21%;
}
div.eng {
content:url("eng.png");
position:absolute;
width:5%;
right:12%;
bottom:10%
}
This is the code and it is showing properly in Chrome, but not in Internet Explorer or Firefox. What am I doing wrong? The only thing that's showing is the background, the 3 div tags are not showing up and I have no idea why.
Thanks in advance, I need this fixed and I'm clueless.
In HTML 4.01, it is not valid markup to have a <div> element inside an <a>. According to the spec, <a> tags can only contain inline elements. <div>'s are block level elements. Note that it is up to each browser on how they handle such situations. While Chrome may fix the content or render it in the method you desire, it's entirely possible Firefox and IE would view it as completely invalid and fail to render some or all of the markup (or strip the div tags out and leave the content intact).
See this question for further reference: Is putting a div inside an anchor ever correct?.
Reference: HTML 4.01 Specification
You shouldn't use the `content' property to display images like that. It's intended for use with pseudo-elements.
If those divs need bg images use the background-image property.
div.image {
overflow: hidden;
background-image::url("logo2fix.png");
position:absolute;
right:1%;
bottom:3%;
height:40%;
width:35%;
}
div.slo {
background-image::url("slo.png");
position:absolute;
width:5%;
bottom:10%;
right:21%;
}
div.eng {
background-image:url("eng.png");
position:absolute;
width:5%;
right:12%;
bottom:10%
}
I'm trying to create a website with a dynamically resizable background image (which I have achieved) but also have my logo and navigation links in a black to transparent gradient image area across the top of my page (successfully created this, as well).
The issue I'm running into is that the larger dynamic background image is overtaking the background image that is creating the area behind my logo and navigation, but not overlaying the logo or text itself. Below is the HTML and CSS that I have so far.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Michael Hunter Photography</title>
<link rel="stylesheet" type="text/css" href="portfolio-style1.css">
</head>
<body>
<div id="header">
<div id="logo"><img src="logo1-trans1.png" /></div>
<div id="navbar">
Home |
Portfolio |
Blog |
About |
Contact
</div>
</div>
</body>
</html>
My CSS
#charset "UTF-8";
/* CSS Document */
#font-face
{
font-family:"BankGothic Md BT Medium";
src: url('bankgthd.ttf')
,url('bankgthd.eot');/*IE9*/
}
body{
background-image:url(header-gradient.png);
background-repeat: repeat-x;
position:static;
z-index:1;
}
#logo {
float:left;
position:relative;
left:20px;
top:20px;
}
#navbar {
font-family:"BankGothic Md BT Medium";
font-size:23px;
color:#FFF;
float:right;
position:relative;
top:75px;
right:15px;
}
#navbar a {
color:white;
text-decoration:none;
}
html {
background: url(bg1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
The "html {" section is the code that I've gotten to work for my dynamic background image, and is the only vanilla CSS that I've gotten to work how I want it to, so I really don't want to mess with it. The gradient image for use behind my navigation and logo at the top (basically as the header) is up under the "body" in CSS. If you haven't figured it out, the goal was to use the gradient to gracefully transition to the main background image, but it isn't working as intended. I've tried positioning the main background image to z-index it, but that screws it up and doesn't work properly.
I know I'm missing a step that's probably absurdly obvious, but I can't figure it out. Thanks!
you want to put the background in body tag, and the header image in header tag. not the body tag. and it needs a height.
#header{
background:url(header.jpg);
height:200px;
}
as far as i understood, i think this is what you are trying to do
http://jsfiddle.net/x8Kff/
hope it helps.
Let me preface this question with the warning that I'm a self-taught (amateur) web developer (and not a very good one). I've been trying for a long time to find an effective way of centering web pages using AP Divs. I've tried setting "margin: 0 auto;" and I've tried setting "margin-left: auto;". Both work for that one div. But I then have to use that as a wrapper to design within, so when I put more divs inside that, they don't center.
I may be completely approaching this wrong; if so, please correct me. Code (not working) for a basic version of what I want to do is below. If you run that code, if I were to place, say, an image in apDiv1, it would scale to the page size fine; but the text in apDiv2 does not.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test Page</title>
<style type="text/css">
#apDiv1 {
margin: 0 auto;
width:600px;
}
#apDiv2 {
position:absolute;
width:50px;
height:24px;
z-index:1;
left: 47px;
top: 29px;
}
</style>
</head>
<body>
<div id="apDiv1">
<div id="apDiv2">Hello</div>
</div>
</body>
</html>
I can center a div inside another div just fine using margin-left:auto; and margin-right:auto;:
Working example: http://jsfiddle.net/xjKhT/
In my own opinion, it is not good to use appdivs(coz it depends on how you positioned it on the design). You can do it(centering stuffs) on your own, check this:
Centering(Simple Sample)
<style>
#header {
margin:auto;
width:600px;
background:#000;
padding:5px;
}
#title {
width:50px;
margin:auto;
background:#CCC;
padding:5px;
}
</style>
<div id="header">
<div id="title">Hello World</div>
</div>
Custom AppDivs adds extra styles which is not really necessary:)
Updated example
Ok after some guessing and poking I think you mean that you want to absolutely position the elements inside the center-aligned wrapper.
position: absolute will be absolute to the page UNLESS the parent has position: relative.
#apDiv1 {
margin: 0 auto;
width:600px;
position:relative;
}
This is my 'brevity' HTML
<html>
<head>
<style type="text/css">
body.custom.one_sidebar {
background:#f5f5f5 url('img/bg/bg-content.png') no-repeat 50% 36.1em;
overflow-x:hidden;
}
</style>
</head>
<body class="custom one_sidebar">
<div class="header_area"></div>
<div class="content_area"></div>
</body>
</html>
The problem is that the background image location does not work in IE7. It does in IE8 and just about every other browser. Would like some help in figuring out why.
that is because you mix up percent & em in the position.
For IE7 you have to use 2 times the same, percent/px or em:
body.custom.one_sidebar {
background:#f5f5f5 url('img/bg/bg-content.png') no-repeat 50% value%;
overflow-x:hidden;
}
or
body.custom.one_sidebar {
background:#f5f5f5 url('img/bg/bg-content.png') no-repeat value_em 36.1em;
overflow-x:hidden;
}
First, be sure you have a Doctype selected, as without one, it will trigger Quirks mode and IE will not render some shorthand background properties correctly (or at all).
Try adding display: block, and a proper width and height to the sidebar CSS. IE has known issues with rendering some properties when the element isn't strictly defined as a block element.