Jump to content

Positioning Issues in IE


OAFC_Rob

Recommended Posts

Hey,I'm having some positioning issues in IE, but not in firefox please see the attached images. The firefox is what I want it to look like, any idea how to fix it, see the CSS below;                                                         

@charset "utf-8";
/* 
CSS DOCUMENT FOR INNOVATIONATION UK BY ROBERT ROSEBURY

** NOTE . = CLASS AND # = ID  ** 
        ** NOTE PADDING / MARGIN: TOP RIGHT BOTTOM LEFT;

*/

/* BACKGROUND / GENERAL CSS STYLINGS */

body
{
    background: url('../images/container/03.png') repeat-x top #DADADA;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: auto;
    color: #0d294f;
}

    /* PAGE / VIEW CONTAINER */	

    #viewContainer
    {
        width: 960px;
        height: auto;
        margin: auto;
        padding: 0px;
        
    }

        /* HEADER CONTAINER */		

#headerContent
        {
            color: #0d294f;
            width: 960px;
            margin: 25px auto auto auto;
        }
            
            /* LOGO CONTENT */	
            
            .logoContent
            {
                color: #66ffff;   
            }
            
        /* MAIN CONTENT */

.mainContent
        {
            margin: 25px auto 25px auto;
        }
            /* COLMUNS / PARAGRAPH SECTIONS */
            .paraBlockLeft
            {
                float: left;
                width: 640px;
            }
                .leftTop
                {
                    background: url('../images/container/04.png') no-repeat top;
                    height: 25px;
                }
                .leftMiddle
                {
                    background: #FFFFFF;
                    border-left: 1px solid #010101;
                    border-right: 1px solid #010101;
                    height: 105px;
                }
                .leftBottom
                {
                    background: url('../images/container/05.png') no-repeat bottom;
                    height: 25px;
                }
            .paraBlockRightTop
            {
                float: right;
                width: 310px;
            }
            .paraBlockRightBottom
            {
                float: right;
                width: 310px;
            }
                .rightTop
                {
                    background: url('../images/container/06.png') no-repeat top;
                    height: 25px;
                }
                .rightTopSecond
                {
                    background: url('../images/container/06.png') no-repeat top;
                    height: 25px;
                    margin-top: 25px;
                }
                .rightMiddle
                {
                    background: #FFFFFF;
                    border-left: 1px solid #010101;
                    border-right: 1px solid #010101;
                }
                .rightBottom
                {
                    background: url('../images/container/07.png') no-repeat bottom;
                    height: 25px;
                }
                
.clearArea
        {
            clear: both;
        }
        .fullWidthContent
        {
            width: 960px;
        }
            .fullWidthTop
            {
                background: url('../images/container/08.png') no-repeat top;
                height: 25px; 
                margin-top: 25px;
            }
            .fullWidthMiddle
            {
               background: #FFFFFF;
               border-left: 1px solid #010101;
               border-right: 1px solid #010101; 
            }
            .fullWidthBottom
            {
               background: url('../images/container/09.png') no-repeat bottom;
               height: 25px;  
            }
             
        /* LEFT FOOTER CONTENT - COPYRIGHT */
        .leftFooter
        {
            float: left;
            background: #FFFFFF;
            margin-left: 30px;
            margin-top: -5px;
            color: #666666;
            cursor: default;
            font-size: 10px; 
            width: 330px;
        }

        /* RIGHT FOOTER CONTENT  - ADMIN LINKS */
        .rightFooter
        {
            float:right;
            background: #FFFFFF;
            margin-right: 40px;
            margin-top: -5px;
            font-size: 10px;
            width: 385px;
            display: inline;
        }


 

[attachment deleted by admin]

Link to comment
Share on other sites

I don't have to look at the code to guess that your missing something which is at the number 1 spot in the sticky of this thread.

Your missing a (valid) Doctype.

 

So as stated in the sticky please read that.

Link to comment
Share on other sites

<!-- DATABASE CONNECTION TO GO HERE -->
<!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>

<title>
    		Innovationation UK | Website Development | Bespoke Websites | Robert Rosebury 
    	</title>
    
            <!-- META DATA -->
            <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
            <meta name="keywords" content=""/>
            <meta name="description" content ="" />

            <!-- SHORTCUT IMAGE -->
            <link rel="shortcut icon" href="<?php $_SERVER["DOCUMENT_ROOT"] ?>/innovationation1/commonResources/images/container/favicon.ico" />

            <!-- MAIN CSS FILE -->
            <link rel="stylesheet" type="text/css" href="<?php $_SERVER["DOCUMENT_ROOT"] ?>/innovationation1/commonResources/css/style.css" />


            <!-- PUT COMMON JAVASCRIPT FILES IN AN INCLUDE 05/05/2011 -->
    
</head>
<body>
        <div id="viewContainer"><!--OPEN DIV FOR VIEW CONTAINER -->
        
            <div id="headerContent"><!--OPEN DIV FOR HEADER CONTENT -->
            
                <div class="logoContent"><!--OPEN DIV FOR LOGO CONTAINER -->
                
                    <a href="index.html"><img src="<?php  $_SERVER["DOCUMENT_ROOT"] ?>/innovationation1/commonResources/images/container/logo.png" alt="Innovationation Logo" longdesc="Innovationation home link" /></a>
                    
                </div><!--CLOSE DIV FOR LOGO CONTAINER -->
                
                <div class="fullWidthContent">
                    <div class="fullWidthTop">
                    </div>
                    <div class="fullWidthMiddle">
                        NAVIGATION AREA
                    </div>
                    <div class="fullWidthBottom">
                    </div>
                </div>
                
            </div><!--CLOSE DIV FOR HEADER CONTENT -->
            <div class="mainContent">
                <div class="paraBlockLeft">
                    <div class="leftTop">
                    </div>
                    <div class="leftMiddle">
                        MAIN PAGE CONTENT
                    </div>
                    <div class="leftBottom">
                    </div>
                    
                </div>
                <div class="paraBlockRightTop">
                    <div class="rightTop">
                    </div>
                    <div class="rightMiddle">
                        NEWS / BLOG AREA
                    </div>
                    <div class="rightBottom">
                    </div>
                </div>
                <div class="paraBlockRightBottom">
                    <div class="rightTopSecond">
                    </div>
                    <div class="rightMiddle">
                        ADVERTS / IMAGES / OTHER
                    </div>
                    <div class="rightBottom">
                    </div>
                </div>
            </div>
            
            <div class="clearArea"></div>
            
            <div class="fullWidthContent">
                    <div class="fullWidthTop">
                    </div>
                    <div class="fullWidthMiddle">
                         
                        <div class="leftFooter"><!--OPEN DIV FOR LEFT FOOTER-->

                            ©  <?php echo date(Y); ?> All Rights Reserved  |  Design by <a href="http://www.innovationation.co.uk/">Innovationation UK</a>

                        </div><!--CLOSE DIV FOR LEFT FOOTER-->

                        <div class="rightFooter"><!--OPEN DIV FOR RIGHT FOOTER-->

                            <a href="">Copyright | </a>
                            <a href="">Disclaimer | </a>
                            <a href="">Privacy Policy  </a>
                            <a href="">Terms of Use | </a>
                            <a href="">Site Map | </a>
                            <a href="loginArea/login.php">Admin</a>

                        </div><!--CLOSE DIV FOR RIGHT FOOTER-->
                        
                    </div>
                    <div class="fullWidthBottom">
                    </div>
            </div>
            
        </div><!--CLOSE DIV FOR VIEW CONTAINER -->
        
        </body>
</html>

Link to comment
Share on other sites

try to remove <!-- DATABASE CONNECTION TO GO HERE -->

Doctype should be the very first thing

 

And if it's not... it's still polite to response not as a computer by just pasting code. But this is the very first thing that happens someone doesn't have a working doctype. IE will go in to quirksmode.

 

If you by the way have an online example it probably would make more sense in the specific situation

Link to comment
Share on other sites

Cheers I forgot about that, should have been in this format instead                       

<?php #DATABASE CONNECTION TO GO HERE ?>

 

Do you have an online example?? or did you meant with the above that it was fixed?

 

 

-edit: i guess it is, good luck with the innovation!..

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.