I have a header logo where I'm adding one more image on the left of this logo.
I have used margin-left property and works perfectly across all major browsers except IE6.
As a bit of a research I used position:relativeproperty to fix this negative value.
But no luck. Here's the code I used.
in the <body> section I'm using this
<div id="logo">
<span style="position:relative;margin-left:-400px"><img src="image path"/>
</span>
</div>
now the DIV id="logo"
has following css styles
#logo {
background: url("../images/logo.jpg") repeat scroll 0 0 transparent;
border: 0 solid black;
float: right;
height: 70px;
margin-top: 10px;
padding: 0;
width: 387px;
}
The following code works well on my IETester - IE6 mode.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type='text/css'>
#logo {
background: url("logo.png") repeat scroll 0 0 #EEE;
border: 0 solid black;
float: right;
height: 70px;
margin-top: 10px;
padding: 0;
width: 387px;
}
#logo span {
position:relative;
left:-400px;
background:blue;
}
</style>
</head>
<body>
<div id="logo">
<span><img src="logo.png" alt="" />
</span>
</div>
</body>
</html>
P.S. maybe you should use something like this:
<div id="logo-wrapper">
<div id="logo" style="float:right;"></div>
<div style="float:right;"><img src="logo.png" /></div>
</div>
If an element has floating, in this case IE6 doubles the margin value. So if you want to move 400px to left, you should separately for IE6 write margin-left: -200px
#logo{position:relative}
span {position:absolute:left:-400px}
Yes IE6 does not support negative margin-padding values so you can play with positioning with the use left right position negative or positive for getting your desired results......
like this:-
HTML
<div id="logo">
<span>span</span>
</div>
CSS
#logo {
background: red;
border: 0 solid black;
float: right;
height: 70px;
margin-top: 10px;
padding: 0;
width: 387px;
}
#logo span {
position:relative;
left:-200px;
background:yellow;
width:50px;
height:50px;
}
You can try using position:relative with the left or the right attributes to position it in the right place. Or write specific styles for IE browser.
.header{
position:relative;
left: -200px;
}
Related
I cannot get the :before pseudo class to insert an icon font before a div containing H1 tags. All the examples I see online use a p or i to insert, however I want to use H1 tags because each tag will have a separate ID and class that correspond to some animate.css fade and delay effect.
For simplicity sake I have replaced the font icon with a hash symbol in the example below. The idea is the icon-font will appear before the div, not each h1 tag (this I can do) - in other words; four lines of text and one icon font. My feeling is this something to do with the display property or nested/ child, but at a complete loss how to fix. Any help much appreciated.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#wrapper {
max-width: 800px;
margin:0 auto;
background-color: rgb(201, 238, 219);
}
.theLines {
width: 300px;
border: solid 1px black;
padding: 20px;
}
.theLines:before{
font-family: ;
content: "#";
color:red;
font-size:3em;
border: solid 1px red;
}
</style>
</head>
<body id="wrapper" class="">
<div id="container">
<div class="theLines">
<h1>Line 1</h1>
<h1>Line 2</h1>
<h1>Line 3</h1>
<h1>Line 4</h1>
</div>
</div>
</body>
</html>
One solution is to use positioning relative to #container to achieve this:
Demo Fiddle
<div id="container">
<div class="theLines">
<h1>Line 1</h1>
<h1>Line 2</h1>
<h1>Line 3</h1>
<h1>Line 4</h1>
</div>
</div>
CSS
#wrapper {
max-width: 800px;
margin:0 auto;
background-color: rgb(201, 238, 219);
}
#container {
position:relative; /* <-- set 'base' positioning */
}
.theLines {
width: 300px;
border: solid 1px black;
padding: 20px;
margin-left:40px; /* <-- move away from left side of #container */
}
.theLines:before {
content:"#";
color:red;
font-size:3em;
border: solid 1px red;
position:absolute; /* allow for adjacent positioning relative to other children of #container */
left:0; /* position on left hand side of #container */
display:inline-block;
}
I have been reading a few different answers to this type of question, as well as researching a bit on how to fix it, but I feel that my code is probably pretty messed up by now. I can't get my divs to sit next to each other so that I can create another larger div beneath them. I am very new at this and have been following tutorials and class reading to get this far, so I am sure something fairly simple or dumb is wrong. I just can't figure it out :-/. Here is the jsfiddle link http://jsfiddle.net/betyB/1/
CSS:
body {
background-image: url(superhighway.jpg);
background-repeat: repeat-x;
background-attachment:scroll;
background-color:#000000;
background-attachment: fixed;
}
#main1 {
position:relative;
z-index:1;
width: 600px;
height: 400px;
background-color:#000;
margin: 5px;
border: solid 4px #323232;
padding: 10px;
overflow:hidden;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
}
#content1 {
position:relative;
z-index:2;
top:-425px;
width: 960px;
height: 800px;
text-align:left;
color:#FFF;
font-weight: bold;
margin: 35px;
}
#main2 {
position:top;
z-index:1;
width: 600px;
height: 400px;
background-color:#000;
border: solid 4px #323232;
padding: 10px;
margin-left:auto;
margin-right:auto;
margin-top:300px;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
}
#content2 {
position:relative;
z-index:2;
top:-425px;
width: 960px;
height: 800px;
text-align:left;
color:#FFF;
font-weight: bold;
margin: 35px;
}
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Title Here</title>
<link href="MyStyle.css" type="text/css" rel="stylesheet">
<!--
<script language="Javascript" type="text/javascript">
<!--
alert("");
</script>
-->
</head>
<body>
<h1>My Ideal Job</h1>
<div id="main1"></div>
<div id="content1">
This is to test the content of the div.
<li>one</li>
<li>two</li>
<p></p>
<li>a</li>
<li>b</li>
</div>
<div id="main2" style="float:right;margin:0;"></div>
<div id="content2">
Testing number two div.
<li>one</li>
<li>two</li>
<p></p>
<li>a</li>
<li>b</li>
</div>
</body>
</html>
The first thing that you need to do is add the display: inline-block; property to your divs' CSS. Second, you may need to ensure that there is a whitespace (either via just adding a space or adding if that is not sufficient, in your divs.
Extra Info
Positioning divs can be very simple, or it can be very challenging depending on your implementation and what you are trying to achieve. Most of the time, when speaking generally about positioning divs side-by-side the simple answer is to use the display:inline-block property. However, if you are trying to space everything out evenly and provide the maximum amount of cross-browser support, the solution gets more complicated.
Check out this post. It provides a terrific description of the challenges and various solutions to positioning divs side-by-side with maximum cross-browser support. The post is primarily concerned with evenly spacing the divs, which you can decide to do or not to do, but it provides a lot of great background and extra info that you should know. I have used the described solution for over a dozen implementations.
Here is the code for that solution:
HTML:
<div id="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<span class="stretch"></span>
</div>
CSS:
#container {
border: 2px dashed #444;
height: 125px;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
/* just for demo */
min-width: 612px;
}
.box1, .box2, .box3, .box4 {
width: 150px;
height: 125px;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
.box1, .box3 {
background: #ccc
}
.box2, .box4 {
background: #0ff
}
And here is a link to the fiddle that he provided: http://jsfiddle.net/EDp8R/3903/
ok so I made this pen for you: http://codepen.io/anon/pen/zpxJt it does what I think you want, but your html has several errors, missing you shouldn't be doing inline styles, I understand you're new to this so I get it. The layout you want to achieve can be difficult if your html structure is not correct.
I have the following simple example of an img and a p floated next to each other in a div. If you uncomment the last bit of CSS, the text drops below the image and stays there - but only in IE8 Standards mode. How do I get the image to resize in IE8 without this unfortunate side effect?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.slide {
border-style: solid;
border-color: #DDDDDD;
border-width: 7px;
display: inline-block;
zoom: 1;
*display: inline;
}
.slide img {
border-right-style: solid;
border-color: #DDDDDD;
border-width: 7px;
float: left;
}
.slide .caption {
width: 230px;
float: left;
padding: 10px 10px 10px 20px;
}
/* Here's the issue. */
/*.slide img, .slide, .slide_wrapper {
max-width: 100%;
height: auto;
}*/
</style>
</head>
<body>
<div class="slide_wrapper">
<div class="slide">
<img src="http://placehold.it/362x250" />
<p class="caption">
test2
</p>
</div>
</div>
</body>
</html>
Setting an explicit width makes the text behave as expected:
.slide {
width: 629px;
}
Put this in your <head></head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
It probably fix the problem.
I have searched and searched and tried many of options to fix this "bug", and I cannot get it to work. I have a div that has a background image that is half-way hidden behind the wrapper. On hover, it animates towards the top. The link is inside an absolute positioned div, and has no text. On IE there is no "pointer", therefore making the link un-clickable. This works in Chrome/FF.
I've tried:
border-right 1px transparent (this i actually can get a "pointer"
on the far right, but it's so small
background:
url(/images/transparent.gif) 0 0 repeat; (yes i made a 1x1px trans
image)
put another div inside the anchor that has the background
image
z-index: 0 or 1 or 2
I would like the CSS/HTML fix for this, not javascript. Thanks so much!
CSS
#wrapper
{
width: 950px;
margin: 60px auto 40px;
background-color: #fff;
position:relative;
}
.login-btn
{
background: url(/images/btn-sprite.png) no-repeat 0 -48px;
height: 34px;
width: 98px;
}
#login-btn
{
position:absolute;
top:-15px;
right:20px;
z-index:-1;
}
#login-btn a
{
display:block;
width: inherit;
height: inherit;
background-image: url(/images/transparent.gif) 0 0 repeat;
}
HTML
<div id="wrapper" class="round">
<div id="login-btn" class="login-btn">
<a href="#">
</a>
</div>
.....
.....
Here is your code, i am attaching the image also please copy to youe image folder and test. i checked in ie8 and ie7 it is working fine.
<!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>
#wrapper {
width: 950px;
height:450px;
margin: 0 auto;
background-color: #fff;
border:#F33 solid thin;
position:relative;
}
#login-btn {
height: 33px;
width: 145px;
display:block;
position:absolute;
right:0;
top:5px;
}
#login-btn a:link, #login-btn a:visited {
background:url(images/btn-sprite.png) top left no-repeat;
height: 33px;
width: 145px;
display:block;
}
#login-btn a:hover {
background:url(images/btn-sprite.png) bottom left no-repeat;
height: 33px;
width: 145px;
display:block;
cursor:pointer;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="login-btn">
</div>
</body>
</html>
i figured it out. in IE, you cannot have an anchor w/ a negative z-index, b/c it hides it behind the body or whatever, and the event doesn't get passed through. basically what I ended up doing is placing the anchor around the div (login-btn), and giving the div a z-index of -1, therefore relieving the z-index on the anchor
HTML
<div id="wrapper" class="round">
<a href="#" id="login-btn">
<div class="login-btn">
</div>
</a>
....
....
CSS
#wrapper
{
width: 950px;
margin: 60px auto 40px;
background-color: #fff;
position:relative;
}
.login-btn
{
background: url(/images/btn-sprite.png) no-repeat 0 -48px;
height: 34px;
width: 98px;
}
a#login-btn
{
display:block;
height: 34px;
width: 98px;
position:absolute;
top:-15px;
right:20px;
}
a#login-btn div
{
z-index: -1;
position:relative;
}
I have a header bar that spans horizontally across my web page, which is comprised of one div tag and three nested div tags.
HTML:
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="rightTop">
RIGHT
</div>
<div id="centerTop">
CENTER
</div>
</div>
CSS:
#top-bar
{
margin: 0;
padding: 1px 4px;
font-size: x-small;
background-color: #005555;
font-family: Arial;
}
#top-bar .separator
{
padding: 0 7px;
border-right: 0px solid #fff;
border-left: 0px solid #fff;
}
#leftTop
{
display: inline;
float: left;
}
#rightTop
{
display: inline;
float: right;
}
#centerTop
{
color: #ffffff;
text-align: center;
}
And it works just great, except for the fact that the div tags are out of order in the HTML code, which I don't like. If I order the div tags by placing them Left, Center, and Right, in the HTML, then the Right div just disappears from the webpage! I'm guessing that it has something to do with the float and text-align attributes having a conflict.
Anyone have any ideas on what is going on here, or is there an easier way to do this in CSS?
Try float: left; on #centerTop or display: inline on all three without any floats.
This works fine, but it depends on what you need. If you dont know the height of the content and you want it to expand dynamicly, then this is not enough:
#leftTop
{
float: left;
}
#rightTop
{
float: right;
}
#centerTop
{
float:left;
text-align: center;
}
I just tested the code from the original post in Firefox 3.0.10, Opera 9.64, IE8 and Google Chrome 2.0.181.1
All browsers showed all 3 divs, not a single div fell off the screen... Are you perhaps using IE6?
I am running your HTML and CSS of FF 3.0.10.
When you re-arrange the CENTERTOP div to be between the LEFTOP and RIGHTTOP divs, the RIGHTTOP div doesn't fall 'off the page' but the "RIGHT" text just falls off onto the next line.
My solution is proposed below (you'll notice I have some additions and some best-practice techniques).
HTML CODE:
<html>
<head>
<link rel="stylesheet" href="global.css">
</head>
<body>
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="centerTop">
CENTER
</div>
<div id="rightTop">
RIGHT
</div>
</div>
<div class="clearer">
</div>
<div id="randomContent">
RANDOM CONTENT
</div>
</body>
CSS CODE:
#top-bar {
margin: 0;
font-family: Arial;
}
#leftTop {
float: left;
width: 20%;
border: 1px solid red;
}
#centerTop {
float: left;
width: 20%;
border: 1px solid blue;
}
#rightTop {
border: 1px solid green;
}
.clearer {
clear: both;
}
#randomContent {
background-color: yellow;
}
So you'll notice in the HTML that the divs are arranged in order from LEFT to CENTRE to RIGHT. In this CSS, this has been reflected by floating the LEFTTOP and CENTRETOP divs left. You will also notice that I have specified a width property on the LEFTTOP and the CENTERTOP divs, to enable you to space out your divs as wide as you want. (You'll be able to visually see your width modifications as I've added in a border on the divs). No width percentage property has been applied on the RIGHTTOP div as it will consume the remaining 60% of the width (after the LEFTTOP and CENTRETOP have consumed the 40%).
I have also added a CLEARER div. Think of the CLEARER div is a horizontal line break. Essentially it acts as a line of demarcations to separate the floated divs from the content below.
You can then add whatever content you want in the RANDOMCONTENT div.
Hope this helps :)
I don't know that it disappears, but it would drop down a line. Lot's of websites put it out of order for that reason (I know I do).
Another alternative:
#top-bar
{
margin: 0;
padding: 1px 4px;
font-size: x-small;
background-color: #005555;
font-family: Arial;
}
#top-bar .separator
{
padding: 0 7px;
border-right: 0px solid #fff;
border-left: 0px solid #fff;
}
#top-bar>div
{
float: left;
width: 33%;
}
#rightTop
{
text-align: right;
}
#centerTop
{
color: #ffffff;
text-align: center;
width: 34%;
}
And then put <br style="clear:both"/> right before you close your top-bar div.
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="centerTop">
CENTER
</div>
<div id="rightTop">
RIGHT
</div>
<br style="clear:both"/>
</div>
Not sure if you want the width's defined like this, however.
Another solution:
Set the leftTop, centerTop, and rightTop to display:table-cell,
Set the top-bar to display:table-row,
Set a container to display:table
Set the width of the container and row (#table-bar) to 100%;
Set the width of the columns to the desired ratios (e.g., 25% for left and right, 50% for center)
caveat: table, table-row, and table-cell css display values do not work in IE 5.5 or 6 (and maybe Opera 8); but they do work nicely in all contemporary browsers. IE conditionals can be used to split code for IE > 5 and IE < 7.
TEST:
<html>
<head>
<title>3 Column Header Test</title>
<style type="text/css">
body#abod {
background-color:#F5ECBD;
color:#000;
}
#hdrrow {
margin:0;
padding:0;
width:100%;
border:1px solid #0C5E8D;
display:table;
}
#top-bar {
margin:0;
padding:1px 4px;
width:100%;
font-size:100%;
background-color:orange;/*#005555;*/
font-family: Arial;
border:1px solid #000;
display:table-row;
}
#leftTop {
margin:0;
padding:0 16px;
width:24%;
text-align:left;
color:#000;
background-color:#F0DD80;
border:1px dashed #f00;
display:table-cell;
}
#centerTop {
margin:0;
padding:0 16px;
width:40%;
margin:0 auto;
text-align:center;
color:#000;
background-color:#F5ECBD;
border:1px dashed #f00;
display:table-cell;
}
#rightTop {
margin:0;
padding:0 16px;
width:24%;
text-align:right;
color:#000;
background-color:/*#F0DD80;*/transparent;
/*shows the orange row color*/
border:1px dashed #f00;
display:table-cell;
}
#footer {
padding:25px;
color:#000;
background-color:#F5ECBD;
}
</style>
</head>
<body id="abod">
<div id="hdrrow">
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="centerTop">
CENTER
</div>
<div id="rightTop">
RIGHT
</div>
</div>
</div>
<h4 id="footer">Footer Lorem ipsum dolor sit amet</h4>
</body>
</html>
Use relative positioning to swap the positions of the divs after they have been floated:
The HTML
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="centerTop">
CENTER
</div>
<div id="rightTop">
RIGHT
</div>
</div>
The CSS
#leftTop {
width:33%;
float:left;
}
#centerTop {
width:33%;
float:right;
position:relative;
right:33%;
}
#rightTop {
width:33%;
float:right;
position:relative;
left:33%;
}
I use the same process in my Perfect Liquid Layouts to change the column source ordering.