Items not in place

[dennywii]

Hello,

I'm using the allcss template and when I click on any link within my page, the whole content area is moving to the left a little bit.
I validated my CSS, and everything is correct. I used Dreamweaver to get hints but everything seemed right. I looked at my code for 1 and a half hours and I couldn't find a mistake (and I tried to change things but even that didnt work out).

When I used IE7, everything worked fine, but neither in Firefox, Opera or Safari it did work. Now I just installed the beta version of IE8, but the web site does not look correct in IE8 either. Just the start page looks right, but after I click on one link, the problem occurs. Here's a picture so that you can see what I am talking about. http://rapidshare.com/files/113598321/web_site_problem.JPG.html

It might be a bit brutal, but now I'll add the content of the screen.css and I hope somebody can help me, otherwise I really don't know what to do...

Code: [Select]

/*
        Styles by gavjof
        www.gavjof.com
       
    \\ SCREEN.CSS (for Front End Styles) //
*/

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    color: #000;
    background-color: #555;
    margin: 0;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Customise the standard HTML
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
a:link, a:visited, a:active {
    color: #900;
    text-decoration: none;
}
a:hover {
    color: #f00;
    text-decoration: underline;
}
hr {
    margin: 5px 0px 5px 0px;
    color: #603;
    border: 0;
    border-top: 1px solid #603;
    height: 1px;
}
/* Page Headings */
h1, h2, h3, h4, h5, h6 {color: #333;font-weight:normal;font-family:"Times New Roman", Times, serif;}
h1      {font-size:2.2em;}
h2      {font-size:1.8em;}
h3      {font-size:1.3em;}

form {margin: 0;}

blockquote     {
    font-family:"Times New Roman", Times, serif;
    font-style:italic;
    color: #666;
    border-left: 2px solid #666;
    padding-left: 10px;
    font-size: 1.2em;
}

abbr                {}
acroynm            {}
cite                {}
address            {}
strong            {}
em                    {}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Layout Blocks
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#main { /* Holds the page items in place */
    width: 750px;
    margin: 20px auto 0 auto;
    padding: 0;
    background: #fff;
    background-image:url(test3.jpg);
    background-repeat:repeat-x;
}
#extras {  /* objects outside main page */
    width:750px ;
    margin: 0 auto;
    padding-bottom:10px;
    font-family:Tahoma, "Lucida Sans", sans-serif;
    font-size: 80%;
    color: #666;
}
#banner {
    padding: 10px 20px 20px 20px;
    text-align: left;
    background: #666;
    font-weight: bold;
    border: 1px solid #000;
           
    /*    put a nice background in here*/
    background: transparent url('pics/background2.jpg') top left no-repeat;
    height:85px;
   
}
#banner a, #banner h1, #banner h2    {color: #fff; margin:0;padding:0;}
* html #banner {clear:both;height:70px;} /* ie6 misbehaves again */

#banner h1    {font-size: 3em;padding-top:10px;} /* WEBSITE_TITLE */
#banner h2    { /* PAGE_HEADER */
    font-size: 0.8em;
    text-transform:uppercase;
    letter-spacing:8px;
    margin-top:-20px;
    padding-left:8px;
    font-family:Arial, Helvetica, sans-serif;
}

#sideColumn { /* Currently holds the login box */
    float: left;
    width: 140px;
    margin: 10px;
    margin-top: 3px;
}
 #content { /* main content from the WYSIWYG goes in here */
    margin-left: 200px;
    margin-top:5px;
    padding: 4px 10px 14px 10px;
    text-align: justify;
    clear: right;
}
* html #contentContainer #content {text-align:left;} /* ie6 misbehaves */
* html #contentContainer #content table {width: 90%;} /* ie6 fix to stop tables being pushed below floats */

#footer {
    width: 740px;
    font-family:"Times New Roman", Times, serif;
    font-size: 90%;
    color: #666;
    height: 12px;
    text-align: right;
    border-top: 2px solid #555;
    padding: 10px 5px 10px 5px;
    clear: both;
    background: #cecece;
    margin: 0 auto;
}
#baker_footer    {font-style:oblique;} /* Pulls information from PAGE_FOOTER */

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* Rounded Box on Side Column */

/* Show only to IE PC \*/
/* * html .boxhead h2 {height: 1%;} /* For IE 5 PC */
.boxbody p {font-size:76%}
.boxbody a {color:gray}
.boxbody a:hover {color:blue}
#sidebox {
   
    width: 185px;
    background: url(pics/sbbody-r.gif) no-repeat bottom right;
    font-size: 100%;
    margin-top:50px;
}
#boxhead {
    background: url(pics/sbhead-r.gif) no-repeat top right;
    margin: 0;
    padding: 0;
    text-align: center;
}
#boxhead h2 {
    background: url(pics/sbhead-l.gif) no-repeat top left;
    margin: 0;
    padding: 22px 30px 5px;
    color: white;
    font-weight: bold;
    font-size: 1.2em;
    line-height: 1em;
}
#boxbody {
    background: url(pics/sbbody-l.gif) no-repeat bottom left;
    margin: 0;
    padding: 5px 30px 31px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* Search Box in banner */
#search_box {
    color: #fff;
    text-align: center;
}
#search_box {
    float: right;
    clear: right;
    width: 200px;
}
#search_box fieldset {border:0;}
#search_box legend, #search_box label {display:none;}

#search_string {
    width: 100px;
    height: 16px;
    font-size: 90%;
    vertical-align: middle;
    border: 1px inset #ccc;
}
#search_submit {
    width: 50px;
    height: 20px;
    font-size: 90%;
    vertical-align: middle;
    padding: 0 0 4px 0;
}

.highlight {      /* Search result highlighting color */
    background-color: #A0A0A0;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    ####    Header Menu #####
    #######################

    Horizontal Drop-Down Menu based off :
    http://www.tanfa.co.uk/css/examples/menu/tutorial-h.asp
   
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */
#navContainer {width: auto;display:block;clear:both;border-right:1px solid #000;}


/* Remove List Formattings
~~~~~~~~~~~~~~~~~~~~  */
 ul.menu, li.menu {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

/* Header menu */    
#header_menu {position: absolute; margin-left: 20px;background:#555;}
#header_menu li {line-height: normal;}
ul#header_menu  {z-index: 10; clear: both;}

#nav {
    height: 1.68em;
    background: #666;
    border-top: 0;
    border-bottom: 1px solid #000;
    padding:0;
}
#nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: 81%;
    text-transform: uppercase;
    width: auto;
    /*
    (Disappearing List-Background)
    http://www.positioniseverything.net/explorer/ie-listbug.html
    */
    position: relative; /* Fix the Stupid IE6 Bug */
}
#nav ul li {float: left; color: #fff; text-align: center; font-weight: normal;}
#nav ul li a {display: block; background: #666; padding: 5px 10px; padding-bottom: 4px; border-left: 1px solid #000; border-right: 1px solid #000; color: #fff; text-decoration: none;}

/* Root Level Link Formatting */
#nav ul li a:hover, #nav li a:focus {background: #d1d2d4; border-color: #fff; color: #4b4c4d;}
#nav li a:active, #nav ul li a.active {background: #d1d2d4; border-color: #fff; color: #4b4c4d;}

/* Current page Customisations*/
#nav li.menu-current a        {background: #000; color: #fff; border-bottom: 1px solid #000;}
#nav li.menu-current a        {font-weight: bold;}

/* 2nd Child menu */
#nav .menu li ul {position: absolute; width: 12em; margin: 0; display: none; text-transform: none; border: 1px solid #000; border-top: 0; font-size: 100%;}
#nav .menu li ul li {width: 12em; text-align: left; font-weight: normal; margin: 0; padding: 0; line-height: 1.2em;}
#nav .menu li ul a {width: 11.5em; padding: .6em .1em .6em .4em; background: #4b4c4d; color: #fff; border: 0;}

/* 2nd Child link hover */
#nav .menu li ul a:hover {color: #4b4c4d; background: #666; border: 0; color:#fff;}

/* Show and hide */
#nav .menu li:hover ul, #nav .menu li a:focus ul, #nav .menu li.subMenu ul {display: block;}
#nav .menu li ul ul { display: none;}
#nav .menu li:hover ul ul, #nav .menu li.subMenu ul ul {display: none;}
#nav .menu li:hover ul, #nav .menu li li:hover ul, #nav .menu li.subMenu ul, #nav .menu li li.subMenu ul {display: block;}


/* 3rd Child Menu Appreances */
#nav .menu li ul li ul li a     { width: 11.5em; padding: .6em .1em .6em .4em; background: #c6c6c6; color: #fff; }

/* Positioning the Pop-out Drops */
#nav li {position: relative;}

#nav ul ul ul {
    position: absolute;
    top: 1px;
    left: 100%;
    z-index:3;
}


/* end menu */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


/* Customise the Login Box */
#login-box { background: #eee; text-align: center;    line-height: 140%; margin: 1em 0 0.3em 0; border: 1px solid #ddd;}
#login-box fieldset {border:0;text-align:center;}
#login-box legend        {
    font-size: 90%;
    text-transform: uppercase;
    font-family:"Times New Roman", Times, serif;
    color: #333;
    font-weight: normal;
    letter-spacing: 0.15em;
}
.username {color: #009;} /* Color of name when logged in*/
.topboxbody {font-size:0.8em;padding:2px;}

#login-box input {
    text-transform: uppercase;
    font-size: 10px;
    margin: 5px 0px 1px 0px;
    width: 100px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Custom Classes (Re-useables)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
   
/*  Float containers fix: */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/*  \*/
* html #clearfix {
    height: 1%;
}
/*  */

.stealth {visibility:hidden; display:none;} /* hides from normal css enabled browsers */



/* Inline font Styles */
/* Pretty styles for changing text in the WYSIWYG editor */

.important    {font-weight:bold;color:#f00;}
.code                {font-family: "Courier New", Courier, mono; color:#093;letter-spacing: 1px;}

.info-box        {border: 1px solid #cc3; background-color:#F9F8E2;padding:4px;}
THANK YOU FOR ANY HINT I CAN GET.

DENNY

Edit by ruebenwurzel: Please use for code the code style of SMF. Changed this.
 

[dennywii]

Ok I solved the problem myself and nothing was wrong with the CSS. Everything was right. The error was somewhere else. Now everything seems to be correct, except that INTERNET EXPLORER 7 MISBEHAVES. Now there definetely has to be a line in CSS which IE cannot interpret. Maybe somebody can help me with this. (the problem is, that the text in IE begins after my login box on the left hand side...

dennywii

[ruebenwurzel]

Hello,

The error was somewhere else

Would be nice to know where. could maybe be helpfull for other users too. 

the problem is, that the text in IE begins after my login box on the left hand side

A sample link would make helping you easier  . From your few informations we only can guess what you mean. One of the most issues are is the use of a wrong table width in a div box.

Matthias

[dennywii]

Hi Matthias,

sorry, you're right. Sometimes I tend to forget half of the things I'm supposed to write...

So the reason why the page moved to the right a little bit (as I showed in the picture link from rapidshare) was simply that I wrote one </div> tag too much in the index.php file and that meant that a div tag responsible for the whole content close somewhere in the middle... So always check your beginning and closing tags!

Well then the next problem was that the Internet Explorer interpreted something wrong. I was looking for the problem in google and Internet Explorer 7 has a problem using the float element in CSS.

I simply had to add clear: both to one of my lines where I used the float element and then it worked (in the screen.css file) Really funny (btw, I already downloaded Internet Explorer 8 Beta and there the problem did not occur)

Here's a sample topic about this problem in IE: http://www.positioniseverything.net/explorer/floatIndent.html

So I have a side column with a second navigation menu on my site and I simply added to the code:

Code: [Select]

#sideColumn { /* Currently holds the login box */
    float:left;
    clear:both; /* thats what I had to add */
        width: 140px;
    margin: 10px;
    margin-top: 3px;
}