Hi all,
I'm having a serious CSS problem in IE7. It's not on all pages, just on the user pages of others. An example: when i log in to the website my current page is http://ikverdieneenjob.be/MYUSERNAME. When i go to another user page, http://ikverdieneenjob.be/OTHERUSERNAME the CSS is messed up.
Here are 2 screenshots:
CSS wrong: http://ikverdieneenjob.be/website-css-problem.jpg
CSS okay: http://ikverdieneenjob.be/website-no-problem.jpg
I have some special blocks (user relationship) displayed on the other user pages, but i allready disabled these to check.
In Firefox 3.6.8. i have no problem, only in IE7.
I use "margin: 0 auto;" to center my content and have a width of 950px.
Here's the most important part of my CSS file, i worked with the alex_2_0 template.
/* $Id: style.css,v 1.1.4.2 2008/01/13 23:47:31 Gurpartap Exp $ */
/* Main container styles */
* {
margin: 0;
padding: 0;
}
body {
font: normal 0.8em "helvetica", sans-serif;
line-height: 1.6em;
color: #666666;
background: url(img/top_bg.gif);
background-repeat: repeat-x;
}
/* TinyMCE specific rules */
body.mceContentBody {
background: #FFF;
}
/* header span*/
#header {
width:100%;
height:175px;
}
#headerInner {
position: relative;
width: 950px;
height:175px;
margin: 0 auto;
}
/* logo, text logo, and slogan */
#siteName {
font-family:"trebuchet ms", helvetica, sans-serif ;
color: #fff;
font-size: 44px;
text-transform: lowercase;
display: inline;
line-height: 110px;
}
#siteSlogan {
font-family:"trebuchet ms", helvetica, sans-serif ;
float:left;
margin:33px 0 0 10px;
color: #eee;
font-size: 24px;
white-space:nowrap;
text-transform: lowercase;
}
#siteName a {
color:#fff;
text-decoration:none;
}
#siteName a:hover {
color:#ddd;
text-decoration:none;
}
#logo {
float: left;
margin:20px 0 0 0;
}
#logo img {
float: left;
border: 0;
}
#logowrapper {position: absolute;}
#logowrapper p{color:#fff;float:left;font-size:0.9em;height:40px;line-height:1.3;padding-left:5px;padding-top:32px;width:210px;}
#logowrapper p a{color:#fff;text-decoration:underline;}
/* navigation links */
#navigation{position:absolute;right:0;top:0px;}
#navigation li a{background:#fff url(img/menu.gif) no-repeat 0 100%;color:#2d373f;display:block;font-weight:700;margin:0 3px;padding:5px 0;text-align:center;width:90px;}
#navigation li.active a,#navigation li a:hover{color:#2b76af;padding-top:12px;text-decoration:none;}
#navigation li{float:left; list-style:none;}
/* main body layout */
#main {
background: #fff;
}
#mainInner {
position: relative;
width: 950px;
margin: 0 auto;
padding-top: 1em;
height:50%;
}
/* 3 columns and primary content layout */
#primaryContent {
position: relative;
margin-right: 17em;
margin-left: 0.2em;
}
#primaryContent h3 {
margin:5px 0 5px 0;
border-color:#66CC66;
}
#secondaryContent{
position:relative;
width: 200px;
margin: 0em 0em 0em 0em;
color: #B9B9B9;
padding-bottom:150px;
float:right;
padding-left:20px;
}
#columns {
position: relative;
float: left;
width: 100%;
margin-right: -34em;
margin-bottom:15px;
padding-right: 2em;
overflow:hidden;
display:block;
}
#columns h2 {
font-size:18px;
margin:10px 0 5px 0;
}
/* begin sidebarLeft */
#sidebarLeft {
background: #66CC66;
}
#sidebarLeft .title {
margin:0;
padding: 0;
}
.sidebarLeft-content {
padding: 0 15px 0 15px;
text-align: justify;
}
#sidebarLeft span#topspan {
display: block;
height: 52px;
width: 200px;
margin: 0;
padding: 0;
background: #fff url(img/topik.png) no-repeat top left;
}
#sidebarLeft span#topspan img{
margin-top:10px;
text-align:left;
margin-left:0;
padding-left:2px;
}
#sidebarLeft span#bottomspan {
display: block;
width: 200px;
margin: 0;
background: #fff url(img/bottomik.png) no-repeat top left;
position:relative;
background:#009933;
text-align:center;
padding:5px 0 15px 0;
}
#sidebarLeft #bottomspan a {
color:#fff;
font-weight:bold;
}
#sidebarRight {
width: 200px;
background: #66CC66;
float: left;
margin: 4.7em 1em 0.5em 1em;
color: #B9B9B9;
}
#sidebarRight .title {
margin:0;
padding: 0;
}
#sidebarRight h3 {
border:none;
}
.sidebarRight-content {
padding: 0 15px 0 15px;
text-align: justify;
}
Thanks for the help,
Greets,
Gunther
Comments
CSS problem with IE7
Better to try Unlimited CSS module for this one, surely you get the solution.
Tried the Unlimited CSS module
Hi Roger,
Thanks for your reply.
I tried the Unlimited CSS module, but that didn't fixed it.
Though, thanks for the suggestion.
Greets,
Gunther