Forum Moderators: not2easy
I m desperate and cannot find my fault.
I made a css and html that work fine on Mozilla, opera, safari. but ie7 it doesnt work.
I put the files online for download and I really hope someone can help me.
<snip>
thanks
Bart
[edited by: swa66 at 1:26 am (utc) on July 27, 2009]
[edit reason] No link, please see ToS and Forum charter [/edit]
You need to pull the url. It's not allowed. You can post code for everyone to look at. Pull and identifying info from your code.
so here is my css code.
* {margin:0;padding:0}
/* mac hide \*/
html,body{height:100%;width:100%;}
/* end hide */body {
background: url(images/background.jpg) #000;
font-size: 11px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color: #CCC;
padding:0px;
background-attachment:fixed;
background-position:center;
text-align:center;
min-height:530px;/* for good browsers*/
min-width:525px;/* for good browsers*/
}
h1 {
font-size: 11px;
text-transform:uppercase;
border-top:1px solid #564b47;
border-bottom:1px solid #564b47;
padding:5px 15px;
margin:0px }
h2 {
font-size:20px;
font-weight: normal;
padding: 5px 10px;
margin:0px;}
img.download {vertical-align:middle;}
/* ----------container to center the layout-------- */
#innercontainer {
width: 950px;
padding:0px;
display: table;
margin-left: auto;
margin-right: auto;
height:520px;
}
/* ----------outer and inner----------------- */
#outsider{
border-left: solid 200px #000 ; /* color of the left column */
border-right: solid 200px #000; /* color of the right column */
}
#outsider-contact{
border-left: solid 200px #000 ; /* color of the left column */
border-right: solid 500px #000; /* color of the right column */
}
#insider{margin:0; width:100%;
height:520px;} /* The ie/pc pecularity */
/* --------------left and right navi------------- */
#left {
width:200px;
float:left;
position:relative;
margin-left:-200px;
margin-right:1px;
}
#right {
width:200px;
float:right;
position:relative;
margin-right:-200px;
margin-left:1px;
}
#left-contact {
width:200px;
float:left;
position:relative;
margin-left:-200px;
margin-right:1px;
}
#right-contact {
width:500px;
float:right;
position:relative;
margin-right:-500px;
margin-left:1px;
}
/* -----------------content--------------------- */
#content{
position: relative;
margin: 0px;
height:520px;
}
#content-contact{
position: relative;
background:url(images/contact.jpg);
margin: 0px;
height:520px;
}
p {
padding: 5px 10px;
margin:0px; }
pre{
font-size: 12px;
padding: 5px 10px;
margin:0px;}
/* ----------------footer---------------------- */
#footer{
margin-top: 20px;
}
#footer-contact{
margin-top: 20px;
margin-left:200px;
}
#footer_bottom {
position: absolute;
bottom: 0;
background-color: #111;
color: #000;
width: 80%; /* See note below */
text-align: center;
padding: 10px 10%;
}
<!-- SBMH simple box model hack
#footer_bottom {
\width: 100%;
w\idth: 80%;
}
.footer_bottom_small {font-size: 10px;
color:#999;}
-->
/* ----------------top---------------------- */
#footer_top {
position: absolute;
top: 0;
background-color: #111;
color: #000;
width: 80%; /* See note below */
text-align: center;
padding: 10px 10%;
}
<!-- SBMH simple box model hack
#footer_top {
\width: 100%;
w\idth: 80%;
}
.footer_top_small {font-size: 10px;
color:#999;}
-->
and here is my html
<!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" xml:lang="en" lang="en" >
<head>
<title>No.3 :: CSS Template :: XTML 1.0 Transitional</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="menu.css" type="text/css" />
<link rel="stylesheet" href="3.css" type="text/css" /> <!--[if lt IE 8]>
<!--[if IE ]>
<link href="iecss.css" rel="stylesheet" type="text/css" />
<![endif]--><style type="text/css">
#xouter{
height:100%;
width:100%;
display:table;
vertical-align:middle;
}
#xcontainer {
text-align: center;
position:relative;
vertical-align:middle;
display:table-cell;
min-height: 100%;
}
#xinner {
height: 530px;
text-align: center;
margin-left:auto;
margin-right:auto;
border:none;
}
</style>
<!--[if lte IE 8]>
<style type="text/css">
#xouter{display:block}
#xcontainer{top:50%;display:block}
#xinner{top:-50%;position:relative}
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css">
#xouter{
position:relative;
overflow:hidden;
}
</style>
<![endif]-->
</head>
<body>
<div id="footer_top">
</div>
<div id="xouter">
<div id="xcontainer">
<div id="xinner">
<!-- #*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$! -->
<div id="innercontainer" >
<div id="outsider" >
<div id="insider">
<div id="left" >
<h2></h2>
<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">Photography </a></li>
<li><a href="#">Paintings </a></li>
<li><a href="#">Design</a></li>
<li><a href="#">3D-design</a></li>
<li><a href="#">Web-design</a></li>
</ul>
</div>
<div id="right" >
<h2></h2>
<ul id="navigation">
<li>Client:<br />
<span class="info">Goldenlink</span>
</li>
<li>Sector:<br />
<span class="info">Cinema Promotion material</span>
</li>
<li class="jobs">Jobs:<br />
<span class="info">logo</span><br />
<span class="info">website</span><br />
<span class="info">Newsletters </span><br />
</li>
<li>Previews:
<br />
<div class="preview"><a href="#"></a></div>
<div class="preview"><a href="#"></a></div>
</li>
</ul>
</div>
<div id="content">
<h2> </h2>
<p> </p>
</div><!-- end content -->
<div id="footer">
</div>
</div><!-- end insider -->
</div><!-- end outsider -->
</div><!-- end innercontainer -->
<!-- #*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$! -->
</div><!-- end xouter -->
</div><!-- end xcontainer -->
</div><!-- end xouter -->
<div id="footer_bottom"><div id="vdividermenu-bottom">
<ul>
<li><a href="#" title="Home">HOME</a></li><span class="abre">¦</span>
<li><a href="#" title="ABOUT US">PORTFOLIO</a></li><span class="abre">¦</span>
<li><a href="#" title="PRODUCTS">CONTACT</a></li><span class="abre">¦</span>
<li><a href="#" title="NEWS">INFO</a></li>
</ul>
</div></div>
</body>
</html>
what it should do is keep all in the middle of the screen
Also the background picture. the top and bottom banner they should stay absolute on top and bottom in the horizontal middle.
<>
Would appreciate help.
thanks
Bart
hope you understand what i mean.
[edited by: SuzyUK at 9:58 am (utc) on July 27, 2009]
[edit reason] no site links please per TOS & Charter [/edit]
no links means no links ;) not even to websites.. your code is a good place to start, even though it's it a lot.
there's many things wrong with that code, so I would just like to clarify for others who may want to chime in with advice.
the CSS posted at the top is the contents of the 3.css file
the iecss.css file is emtpy, the CSS in the head is in the head.
My advice first off is to validate all your css.
Then secondly I would remove all IE related CSS and get it working how you want in FF/Safari. Use different background colors instead of images to aid the description of what you would like to see where then post the code again and describe what IE is not doing.
There's bit too much hacks to t/shoot on sight, and I think what you're aiming for is something like 3 column full stretch, min height = 100%, fixed header and footer, though footer moves if content longer..
is that right?
The top and bottom ruler has to stick to top and bottom.
And yes I know its a bit not clear what I posted.
But I wanted to show it how it was cause I constantly tested it in Firefox/mozilla/safari and tested it also in IE but that was in an earlier stage.
I will go back in my steps and if i cannot find the solution I start from the beginning and show my steps.
Thanks anyways
Bart
some more info for others.. the background image on the body places a black rectangle approx 960 x 540 in the center of the viewport.
So you want the whole content area to fit in there and scroll if required?
The top and bottom ruler has to stick to top and bottom.
try narrowing your window to see what this doing now to your page if the window is less than 530px high both the header and footer are overlapping the content area, and the actual content.. yet the content area shows below the footer if it needs to inside the 530px height
sorry for seeming obtuse, but even with the link to your site it was the differing pictures in different browsers that made it not clear even with the links, and we can't sort IE for you until the picture across the other browsers is consistent ;)
e.g. I checked your page in FF and the footer does not stick to bottom because the whole page scrolls when viewport is made smaller than 530px high. (because the scrollbar is still on the HTML element).. which is where the confusion as to what you wanted comes in, it still wasn't obvious with the page links ;)
So would you want the scroll bar on the viewport or extend the height of the centered div to incorporate header and footer so the content area can then get the scrollbar and only run the content over the background image
centering background images on the HTML/Body elements is perhaps not a safe way to then try to center content on (vertically at least).
I was trying out some of the latest vert/horizontal solutions and discovered that the browser theme or indeed browser itself counts the tabs/or address bar in the HTML/BODY space. Because themes and tabs are different sizes this can cause the background image to not be centered by as much as 30px in some themes
I have 3 different FF profiles (with different themes) and all of them, safari and opera & IE use different things in the HTML space (viewport).. the upshot being it is impossible to accurately vertically center a background image on the html or body element, with any kind of consistent co-ordinates that a vertically centered content div would then also match,
have you come across this already and if so what is your solution?
I know that the viewports are different in each browser... but I searched alot on the net and found different solutions which I used together...
All stays together.. background and centered content.
just dono what i did with internet explorer... so now I will work backwards and hope i can find this out.
And SuzyUK thanks for the point of that the banners go over the content... have to make the container min-height bigger. but still didnt find the solution... will try to figure out tonight.
[edited by: swa66 at 12:04 pm (utc) on July 28, 2009]
