Basically this is my issue, I have a container with 4 divs inside, in firefox it works just fine and also in IE8 but ..it shows the compatibility view all the time, if I click on it, it moves the 4 divs out of the container, making the site looks terrible.
btw, the 4 divs are just behind the menu but on another "content" div. (I need it that way...)
This is my code.
<style type="text/css">
body{
margin-top:2px;
}
#main_frame{
width:1024px;
height:550px;
position:relative;
margin:0 auto;
padding:0px;
float:center;
text-align:center;
background:black;
}
#logo{
width:275px;
height:75px;
background-image:url(images/logo.png);
background-repeat:no-repeat;
position:relative;
margin:0 auto;
padding:0px;
float:left;
}
#top_center{
width:474px;
height:75px;
position: relative;
top:0px;
margin:0 auto;
padding:0px;
background-color:green;
float:left;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
#top_right{
width:275px;
height:75px;
position: relative;
top:0px;
margin:0 auto;
padding:0px;
background-color:red;
float:left;
}
#main_menu{
width:1024px;
height:25px;
float:none;
position:relative;
float:left;
margin:0 auto;
padding:0px;
background-color: #FF0;
}
#content_frame{
height:400px;
width:1024px;
position:relative;
float:left;
margin:0 auto;
padding:0px;
}
/* HERE THEY ARE */
#tag1{
height:375px;
width:256px;
position: absolute;
float:left;
margin:0 auto;
padding:0px;
background-color:#900;
}
#tag2{
height:375px;
width:256px;
position:absolute;
float:left;
margin-left:256px;
padding:0px;
background-color: #930;
}
#tag3{
height:375px;
width:256px;
position:absolute;
float:left;
margin-left:512px;
padding:0px;
background-color: #960;
}
#tag4{
height:375px;
width:256px;
display: inherit;
position:absolute;
float:left;
margin-left:768px;
padding:0px;
background-color:#990;
}
</style>
... some code removed...
<body>
<div id="main_frame">
<div id="tag1"></div>
<div id="tag2"></div>
<div id="tag3"></div>
<div id="tag4"></div>
<div id="logo"></div>
<div id="top_center"></div>
<div id="top_right"></div>
<div id="main_menu"></div>
<div id="content_frame">
Any help on this is greatly appreciated.
Thanks guys,
Marco,
A link to a live page is almost required to tell you how to definitively fix this.
At the moment, it's too much work to try and recreate the problem (too many unknown variables).
Does your page have a doctype?
When I see this:
but ..it shows the compatibility view
all the time
It suggests that your page is being coerced into IE7 mode.
The usual cause is having this line in your page:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
The probable correct thing to do is remove this line, and fix your site to work in IE8.
Another thing you didn't specify is how well this works in other browsers such as Firefox, Chrome - and whether you care about this.
If this answer doesn't help you enough, post a link to your live page.
To fix your problem, follow these steps:
Move <div id="tag1"></div>, <div id="tag2"></div>, <div id="tag3"></div>, <div id="tag4"></div> to inside <div id="content_frame"></div>, like this:
<div id="main_frame">
<div id="logo"></div>
<div id="top_center"></div>
<div id="top_right"></div>
<div id="main_menu"></div>
<div id="content_frame">
<div id="tag1"></div>
<div id="tag2"></div>
<div id="tag3"></div>
<div id="tag4"></div>
</div>
</div>
Then, from those four tag divs, remove the margin and position: absolute rules.
I've tested that this fixes it to work in IE7, IE8, Firefox.
As an aside, after my fix I don't think any of your elements requires the position: relative rule any longer.
Related
I am trying to get a Sticky Footer to work, and have currently tried the following css:
#footer {
width:920px;
height:208px;
font-size:10px;
margin-left:auto;
margin-right:auto;
background-image:url(images/grad.png);
background-repeat:repeat-y;
padding:0 20px;
clear:both;
position:relative;
margin-top:-208px;
}
body {
margin:0;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#333333;
background-repeat:repeat-x;
padding: 0;
height: 100%;
}
#wrap {
width:960px;
margin:0 auto;
min-height:100%;
height: 100%;
}
#content {
width:892px;
float:left;
border-left:4px solid white;
border-right:4px solid white;
padding:15px 0px 15px 20px;
background-image:url(images/sidebar_bg.png);
position:relative;
padding-bottom:143px;
}
I have had to reduce the #content padding-bottom, so it would fit. But I am still having issues. Firstly, There is too much space at the bottom of longer pages (see - http://bellbird.redgraphic.co.uk/headteacher/ ) Secondly, on a shorter page the footer doesnt scroll up when the browser window is resized (see - http://bellbird.redgraphic.co.uk/school-council/ )
Sticky footers always seem to be an issue, so I must be missing a trick.
Any help would be greatly appreciated.
Lewis
usefull link here. This one helped me with the same issue.
CSS mark-up:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
HTML mark-up:
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
use this css instead of your
#footer {
position:fixed;
bottom:0;
left:0;
right:0;
height:40px; /* Height of the footer */
background:#6cf;
}
html:
<div class="wrap">
<div class="inner-wrap">
...
</div>
</div>
<footer>
...
</footer>
css:
html, body {height:100%;}
.wrap {min-height:100%; height:auto !important; margin-bottom:-100px;}
.inner-wrap {padding-bottom:100px;}
footer {height:100px;}
I have two divs one inside another, i would like to overlap one div with other and also use css idnex, but ie doesn't let me do this, is there some kind of workaround?
Please view this code in IE since it works in other browsers.
Here is jsfiddle: http://jsfiddle.net/xkDCX/1/
And the code:
<div class="container">
<div class="button"></div>
<div>
body{
margin:50px;
}
.container{
position:relative;
width:410px;
height: 300px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#daf5fd', endColorstr='#0dbcf5');
z-index:22;
}
.button{
width:20px;
height:20px;
border:2px solid black;
position:absolute;
right:-10px;
top:-10px;
background:black;
z-index:11;
}
The thing here is that the filter you added doesnt work at all only in IE so when you see the style in other browsers they dont recognize it at all.
UPDATE:
Would this worked out for you?
<div class="container">
<div class="button">
<div class="but"></div>
</div>
<div class="background"></div>
<div>
<style>
body{
margin:50px;
}
.container{
position:fixed;
width:410px;
height:300px;
margin:0;
padding:0;
}
.container .background{
position:fixed;
bottom:0px;
left:0px;
width:100%;
height:100%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#daf5fd', endColorstr='#0dbcf5');
z-index: 50;
}
.container .button{
position:absolute;
width:410px;
margin-left:auto;
margin-right: auto;
z-index: 100;
}
.container .but{
position:absolute;
width:20px;
height:20px;
background:black;
right:-10px;
top:-10px;
border:2px solid black;
}
</style>
I am not a web designer.. I'm just a asp.net programmer and I'm having a hard time with IE7.
Well I managed to work what i want in IE8, IE9, and Chrome.
Now I have to make it work it in IE7.
First this is my source
I am using DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
and html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko"
<style type="text/css">
html {
height: 100%
}
body {
background-color: #5c87b2;
font-size: .85em;
font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
color: #696969;
border: 0;
overflow: visible;
height: 100%;
max-height: 100%;
}
</style>
<div id="header" style="
display:block;
position:fixed;
height:50px; width:100%;
background-color:red;">
d
</div>
<div id="menu" style="
display:block;
position:fixed;
width:200px;
top:50px; left:0; right:auto; bottom:0;
background-color:blue;">
d
</div>
<div id="button" style="
display:block;
position:fixed;
width:auto; height:100px;
top:50px; left:200px; right:0; bottom:auto;
background-color:Yellow;">
d
</div>
<div id="content" style="
display:block;
position:fixed;
width:auto; height:auto;
top:150px; left:200px; right:0; bottom:0;
background-color:green;">
<div style="
position:relative;
height:50%;
min-height:50%;
border:3px solid pink;
">12412
</div>
<div style="
position:relative;
height:50%;
border:3px solid white;
">
2214124
</div>
</div>
so I have a header(red), menu on the left side(blue), sub-header(yellow), container(green)
and i need two divs in the container(pink, white border).
they need to fill up the container 100% vertically.
All the outside divs' positions are fixed.
And I gave the inner two divs' position relative and gave 50% height to both.
It works fine in IE8,9, Chrome.
I will not use script. Only trying to use css styles.
So can u guys please give me some help??
Thank U!!!!!
Setting a height on the outer #content div allows the inner divs to display as in the other browsers. As you are looking for a full-screen panel set-up, I'm not sure how you could achieve this with pixel values. Changing from px to % and specifying positioning and width / heights as fluid seems to achieve the desired effect in IE7.
http://jsfiddle.net/VCztH/3/
<style>
.wrapper{
width:900px;
height:auto;
padding:0px;
margin:auto;
background:#000000;
position:relative;
}
.header{
width:900px;
height:200px;
float:left;
padding:0px;
margin:0px;
background:#00FFFF;
}
.body_content{
width:900px;
height:500px;
float:left;
padding:0px;
margin:0px;
background:#6666FF;
}
.fotter{
width:900px;
height:150px;
float:left;
padding:0px;
margin:0px 0px 25px 0px;
background:#336600;
}
</style>
<div class="wrapper">
<div class="header"></div>
<div class="body_content"></div>
<div class="fotter">sss</div>
</div>
Since you float everything in the wrapper, the browser won't pickup the size of your wrapper div, ie, it consider it has 'zero' height.
Solution:
use the magical overflow keyword in wrapper:
.wrapper{
overflow:auto;
//...
}
This is what I see:
What are you expecting?
#sridhar ,
For div the background color should be given like this right
background-color:#003366 and background image sould be given like this
background-image: url(../images/test-background.gif);
I have a problem with a website I'm putting together. I have a simple div layout. Which is as follows:
<body>
<div id="Container">
<div id="Logo"></div>
<div id="Banner">
<div id="Nav"></div>
</div>
<div id="Content">
</div>
<div id="footer">Footer</div>
</div>
</body>
And my CSS is as follows:
#charset "utf-8";
/* CSS Document */
html, body {
height:100%;
padding:0;
margin:0;
background-image:url(../layout.img/background_gradient.gif);
background-repeat:repeat-x;
}
#Container {
height:100%;
width:950px;
margin:auto;
background-color:#FFFFFF;
border-left:1px solid #333333;
border-right:1px solid #333333;
}
#Logo {
width:160px;
height:160px;
float:right;
}
#Banner {
width:100%;
height:160px;
}
#Nav {
width:550px;
height:33px;
position:relative;
top:100px;
left:50px;
}
#Content {
clear:both;
}
And finally the result can be seen here:
http://jsfiddle.net/mczMS/
As you can see the 'container' div doesn't stretch out with the content as you scroll down the page. I know this is probably something stupidly simple but I'm running short of brain power today. Haha.
Try adding:
#container { min-height: 100%; }
after height 100%. You may also want to try:
#container { overflow: auto; }
If you remove the height:100% from the container it will stretch to fit its contents.