IE6: when I place a partially transparent image in a div, the radio buttons in that div that overlap the non-transparent pixels of the image become unclickable. Example:
<!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" xml:lang="en" lang="en">
<head>
<style media="screen" type="text/css">
div
{
position: relative;
width: 500px;
height: 300px;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Olympic_flag_transparent.svg/200px-Olympic_flag_transparent.svg.png, sizingMethod='crop');
}
input
{
position: absolute;
top: 40px;
left: 60px;
}
</style>
</head>
<body>
<div>
<input type="radio" value="1" name="1"/>
</div>
</body>
</html>
If you test the code, you can also try moving the button from (60, 40) to (40, 40) where the image is transparent, and voilà - the clicking is back in business again.
This bug might, or might not, be related to the IE6 links transparency bug, but I'm not knowledgable enough to grasp any resemblence.
Have I done something wrong? Or how can I circumvent? Is there some other option apart from removing the _filter:progid?
Haven't found any real solution to the problem, so use one of the following workarounds:
make image 100 % transparent where the radio button is (keep good margin, it's shape is probably not "round" but square or rectangular),
remove the image entirely,
combination of the above. :)
Have you tried setting the z-index of the radio button to higher than that of the transparent div?
div
{
position: relative;
width: 500px;
height: 300px;
z-index: 1;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Olympic_flag_transparent.svg/200px-Olympic_flag_transparent.svg.png, sizingMethod='crop');
}
input
{
position: absolute;
top: 40px;
left: 60px;
z-index: 999;
}
Related
How do I use margin or padding for pseudo element :before to give enough space between image and number
Look here in this link for screenshot
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<ul>
<li>city</li>
<li>email</li>
<li>adress</li>
<li>0202020202</li>
</ul>
</div>
</body>
</html>
the code is here
Thanks a lot in advance for your help
Another solution is to show the pic as a background. Then you can positioning easily your icon.
ul li:nth-child(4)::before {
content: '';
background: transparent url(image.png) no-repeat right top;
background-size: contain;
position: absolute;
width: 25px;
height: 30px;
left: -30px;
top: 0;
}
Here in your code
Based on your desired prnscrn
You need to play around with the margin-left of the :before pseudo selector and put bottom on 0. With the below CSS it should result correctly:
Here's a working fiddle.
CSS
li:nth-child(4)::before {
content: url('https://image.prntscr.com/image/RsidxDk_QzytthM_zz4H8Q.png');
position: absolute;
margin-left: -2.7em;
bottom: 0;
zoom: 0.8;
}
Use zoom in this instance to reduce the size and use for margin-left the unit em so it will take the font-size of the element. (Be also aware that there are a lot of errors in your provided CSS).
I'm working on a layout with a container (div), inside the container there are two elements, a div for the header and another div for the content.
The header div has a fixed height, the div for the content must fill the available space.
The container div has own style and cannot be overlapped.
My goal is to create simple div based elements to dispose simple widgets on a web page.
I checked the other similar questions like:
How to make a div expand to fit available vertical space?
Force to fill all available vertical space
Add a DIV that takes up all available vertical space
But none of this solutions applies to me.
I managed to get this html/css:
<?xml version="1.0"?>
<html>
<head>
<style type="text/css">
.workbench {
width: 100%;
height: 100%;
background: white;
}
.widget {
width: 100px;
height: 500px;
position: absolute;
top: 50px;
left: 50px;
border: solid 1px black;
margin: 2px;
}
.widget-header {
height: 50px;
border: solid 1px red;
margin: 2px;
}
.widget-body {
position: absolute;
top: 50px;
bottom: 0px;
left: 0px;
right: 0px;
border: solid 1px blue;
overflow: hidden;
margin: 2px;
}
</style>
</head>
<body>
<div id="workbench" class="workbench">
<div id="widget" class="widget">
<div id="widget-header" class="widget-header">
Header
</div>
<div id="widget-body" class="widget-body">
Body
</div>
</div>
</div>
</body>
</html>
This is working like a charm on FireFox and Chrome, but doesn't work on Internet Explorer 8:
Can you help me?
realizing you're not aiming at the IE5.5 / IE6 market, and by your descriptions (renders fine on jsFiddle, while not from a file), the issue seem to originate from the absence of a doctype declaration.
in order for the document to render correctly you must specify a doctype, to deny the browser from falling to quirksmode. your document seem to conform to a valid XHTML convention, therefore you can use the XHTML transitional doctype to instruct IE8 to render in standards mode, or use the HTML5 doctype (along with an HTML5 shim/shiv, if you'll be using HTML5's semantics as well).
just for convenience, the XHTML transitional doctype declaration:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
note: Modernizr contains an HTML5 shiv of its own, and is recommended regardless to ease up the development.
here's the jsFiddle for you to mess around with
As you have a height on the widget of 500px and the widget header is 50px; why not just make the widget-body 450px; (also subtracting any additional margin and padding) and make the whidget-header and widget-body relative positioning.
jquery can help with this.
$('.workbench').each(function(){
var total=$(this).height();
var headerHeight=$(this).find('.widget-header').height();
$(this).find('.widget-body').height(total-headerHeight);
});
So I am experimenting with pure css layouts, and immediately I have become stuck. I have the following html and css:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Layout</title>
<link type="text/css" href="site.css" rel="stylesheet" >
</head>
<body>
<div id="header">
My Site
<div id="search-area">
<form>
<input type="text" id="search-box" />
<input type="submit" value="Search" />
</form>
</div>
</div>
<div id="sidebar">
Account Name <br>
Edit My Account
</div>
</body>
</html>
#header {
background-color: #151B54;
height: 30px;
width: 100%;
}
#logo {
position: relative;
left: 10px;
color: white;
font-size: x-large;
font-weight: bold;
text-decoration: none;
float: left;
margin-top: 3px;
}
#search-area {
position: absolute;
left: 200px;
margin-top: 3px;
}
#sidebar {
float: left;
width: 100px;
border-right: double;
}
When I view this in Chrome I get the rendering that I was expecting:
However, in IE I get the following:
Notice how there is a massive blank area to the left of the sidebar. Why is that showing in IE?
I get the same problem in Safari and for the same reason: you're not clearing your floats in #header and #header isn't quite tall enough to contain all of its floated children.
If you increase the height of the header to 31px, you should (but maybe not) get the desired layout. A better approach is you add overflow: hidden as a clear fix, that will make all of the children of #header fully contained with #header and that will stop them from interfering with the layout of the next piece:
#header {
background-color: #151B54;
height: 30px;
width: 100%;
overflow: hidden;
}
Live example: http://jsfiddle.net/ambiguous/EUmyN/
A rule of thumb with floated elements is to always make sure they're cleared either with overflow: hidden on their container or, if necessary, with an explicit <div style="clear: both;"></div> at the bottom of the container.
Also, while we're here, you rarely need width: 100% on a block element such as a <div>. If you're positioning it or floating then maybe you'll need something like that but not for a plain <div>; block elements are full width by default.
Try clearing your online cache. Oftentimes the css file is cached and using an older version causing this type of behavior.
May not be the problem, but the first action you should take when trying to troubleshoot unexpected results on style.
I have the following code:
<div id="sub-title-div">
Hello world
</div>
#sub-title-div {
background: #FFE640;
position: relative;
top: 0px;
left: 30px;
width: 901px;
height: 137px;
line-height: 13px;
}
I found that if I remove the 'Hello World', the #sub-title-div will shrink and become invisible. Is there an easy method that I can do this more elegantly?
Thank you
If you don't need to support IE6, you can use the min-height property.
#sub-title-div {
min-height: 137px;
}
put when you want to remove text, then div will maintain its height
Use
min-width:901px;
min-height:137px;
if you want to have the DIV have the same dimensions even without content.
It could be your doctype? It doesn't dissapear for me. See the sample page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
<style type="text/css">
#sub-title-div {
background: #FFE640;
position: relative;
top: 0px;
left: 30px;
width: 901px;
height: 137px;
line-height: 13px;
}
</style>
</head>
<body>
<div id="sub-title-div">
</div>
</body>
</html>
Use a pseudo-element. This is similar to #iTake's answer, adding an , but it keeps the extra space out of your layout and text selections.
<h1 class="no-shrink"></h1>
.no-shrink::after {
content: '\200B'; /* zero width space */
}
I have a container div. Width: 80%, margin-left: 10% and margin-right 10%. The problem is, the container is displaying to the left in all the browsers I check. If I change the value of margin-left to 20%, it looks ok.
I will supply code if necessary but is there anything obviously wrong here? Isn't 80 with a margin of 10 on each side correct to center a div?
GF
I tried your setup, and it works just fine.
You should check the spelling and syntax of your CSS, there is probably some error that keeps it from working. In Firefox you can open up the error console and reload your page, and it will tell you about any CSS errors.
You can also use margin-left: auto; margin-right: auto; to center the element.
Here is the code of the page that I used to test the CSS:
<!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" lang="sv" xml:lang="sv">
<head>
<title>Test</title>
<style type="text/css">
div { width: 80%; margin-left: 10%; margin-right: 10%; background: #ccc; }
</style>
</head>
<body>
<div>asdf</div>
</body>
</html>
has the parent element of the div a specified witdh?
Try
width: 100%;
for the parent Element
try set theese:
<html>
<head>
<style>
.container {
position: relative;
margin-left: auto;
margin-right: auto;
width: 80%;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
Testing page
</div>
</body>
</html>