is this is a css bug of firefox - css

here is my test code:
<!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>Untitled Document</title>
</head>
<style>
*{
margin:0;
paddin:0;
}
.warp{
background:#0F6;
position:relative;
width:100px;
height:100px;
left:50%;
}
.line{
position:fixed;
width:10px;
height:120px;
background:#F00;
}
</style>
<body>
<div class="warp">
<div class="line"></div>
</div>
</body>
</html>
in chrome and ie10 the "line" div is on left side,but in firefox,it stay with div "warp", the "line"
is a "fixed position" div, it should rendered like chrome and ie ,i think.
http://jsfiddle.net/AWdqY/


You can simply define the left property on the element (left: 0).
http://jsfiddle.net/AWdqY/1/

Related

Every 2n element in nested element

I would like to change the background color in 2n element. I've tested it but the bg-color is still blue:
<!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>nothing here</title>
</head>
<body>
<style type="text/css">
.btn{
height:50px;
width:100%;
background:blue;
margin-bottom:20px;
}
.btn:nth-child(2n){
background:yellow;
}
</style>
<div>
<div class="btn"></div>
</div>
<div>
<div class="btn"></div>
</div>
</body>
</html>

it should be more like :
.btn{
height:50px;
width:100%;
background:blue;
margin-bottom:20px;
}
div:nth-child(2n) .btn{
background:yellow;
}
Because, in each div , there's only one .btn
nth-child works with adjacent element, not nested unfortunately :)

.btn is inside a div.
.btn:nth-child(2n) will work if your HTML structure is as follows:
<div>
<div class="btn"></div>
<div class="btn"></div>
</div>
For your HTML structure, it should be
div:nth-child(2n) .btn {
background:yellow;
}
DEMO here.

body background image position issue in css

<!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>Untitled Document</title>
<style type="text/css">
body {
margin: 0px; padding:0;
background:url(http://custdemos.com/synverse_portfolio/images/safercab_mobi.png) no-repeat left bottom;
height:100%
}
</style>
</head>
<body>
<div class="do">
X Content
</div>
</body>
</html>
I need to put that background image on body bottom, plz if anybody knows this issue tel me.

You need to give a min height to body. Here is the corrected jsFiddle link. Following is also modified css
body {
margin: 0px;
padding:0;
background:url(http://custdemos.com/synverse_portfolio/images/safercab_mobi.png) no-repeat left bottom;
min-height:500px;
}

IE9 overflow issues

I have a little issue w/ an element displaying in IE9
the structure:
<div id="container">
<a id="logo" href="#">stuff here</a>
</div>
the problem is that the container has a height of 47px and the anchor has a height of 65px. In chrome, ff, opera etc the overflow of the anchor is visible but cut off in IE9.
this is the css for the container and anchor
#container{
width:100%;
height:47px;
overflow visible;
}
#logo{
background:url('path/to/myimage');
display:block;
float:left;
height:65px;
}
and this displays great in everything except IE... any ideas? thanks in advance.

You must to declare Doctype For IE all versions:
<!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>Untitled Document</title>
<style type="text/css">
#container{
width:100%;
height:47px;
border:1px solid red;
}
#logo{
background:url('path/to/myimage');
display:block;
float:left;
height:65px;
border:1px solid blue;
}
</style>
</head>
<body>
<div id="container">
<a id="logo" href="#">stuff here</a>
</div>
</body>
</html>

Positioning a div at the bottom of content div

My code is pasted down. I want that the div "target" to be po positioned at the bottom of div "conten area". Also header should stick to top of the browser and the footer should stick at the bottom of the browser.
Hope it makes sense.
Thanks in advance!!!
<!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</title>
</head>
<style>
#page-wrapper{}
#header{ background:#000; height:100px}
#content{ min-height:100%;}
#target{ background:#ebebeb; }
#footer{background:#000; height:40px}
</style>
<body>
<div id="page-wrapper">
<div id="header">header goes here</div>
<div id="content">
<div id="target">You need to fix me</div>
</div>
<div id="footer">Content for New Div Tag Goes Here</div>
</div>
</body>
</html>

Are you after something like this?
http://jsbin.com/azebu5
How does it work? http://css-tricks.com/absolute-positioning-inside-relative-positioning/
<!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</title>
</head>
<style>
html,body{margin:0;padding:0}
#page-wrapper{position:absolute;top:0;bottom:0;left:0;right:0}
#header{ background:cyan; height:100px; position:absolute; top:0; left:0; width:100%}
#content{ position:absolute; background:#eee; top:100px; bottom:40px; left:0; right:0}
#target{ background:yellow; position:absolute; bottom:0; left:0; width: 100% }
#footer{background:red; height:40px; position:absolute; bottom:0; left:0; width:100%}
</style>
<body>
<div id="page-wrapper">
<div id="header">header goes here</div>
<div id="content">
<div id="target">You need to fix me</div>
</div>
<div id="footer">Content for New Div Tag Goes Here</div>
</div>
</body>
</html>

IE7 float and clear on the same element

Here is my code,
<!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>[your title]</title>
<style type="text/css">
.a, .b, .c
{
float: left;
}
.b
{
clear: left;
}
</style>
</head>
<body>
<div class="a">1</div>
<div class="b">2</div>
<div class="c">3</div>
</body>
</html>
In IE8, firefox, chrome, safari, opera, the output will be:
1
23
However in IE7:
13
2
I have search for solutions two days already... anyone can help?
Cheers,
bGiraffe

<!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>[your title]</title>
<style type="text/css">
.a, .b, .c
{
float: left;
}
.b
{
clear: left;
}
</style>
</head>
<body>
<div class="a">1</div>
<div style="clear: left;"></div>
<div class="b">2</div>
<div class="c">3</div>
</body>

this should fix it
.a, .b, .c { float: left; }
.b { clear: both; }

Or you could use the clearfix technique.
http://www.positioniseverything.net/easyclearing.html

Resources