+ Reply to Thread
Results 1 to 3 of 3

Thread: CSS Errors

  1. #1
    djcustom is offline x10Hosting Member djcustom is an unknown quantity at this point
    Join Date
    Jul 2008
    Posts
    15

    CSS Errors

    I am going crazy trying to get a new layout to work properly but for some reason I cant get it to work. I good at visuals and content but I can never rap my hand around css. I have been having 3 issues if anyone can help I would greatly appreciate it.

    1. There is suppose to be a gap between the right side and the horizontal menu.

    2. When viewed in IE there is a 1 or 2 px line on the left side of the content box. leaving a gap through the house roof.

    3. Finally I have been trying to set the container width to a minimum of 950



    My Template is at

    http://www.djcustomdesign.com/test/Templates/Main.php


    The CSS file is located at

    http://www.djcustomdesign.com/test/css/style.css


    I thank you all for your time.

  2. #2
    diabolo's Avatar
    diabolo is offline Community Advocate diabolo is on a distinguished road
    Join Date
    Nov 2007
    Location
    Jersey Shore
    Posts
    1,683

    Re: CSS Errors

    i can not look at all of them right now, but for what i see
    problem number 2, i am viewing it in IE and i do not get a line above the house, i am using IE 7

  3. #3
    driveflexfuel is offline x10 Sophmore driveflexfuel is an unknown quantity at this point
    Join Date
    Jul 2008
    Posts
    159

    Re: CSS Errors

    Hey hows it going I made a few changes to your coding and css here is the coding

    CSS Document
    Code:
    @charset "utf-8";
    
    #container {
        margin: 0px;
        padding: 0px;
        width: 100%;
    }
    #body_id {
        margin: 0px;
        padding: 0px;
        background-color: #FFFFFF;
    }
    
    #header {
        margin: 0px;
        padding: 0px;
        height: 126px;
        width: 100%;
        background-attachment: scroll;
        background-image: url(../images/header_bg.jpg);
        background-repeat: repeat-x;
    }
    #header #header_left {
        background-attachment: scroll;
        background-image: url(../images/logo.jpg);
        background-repeat: no-repeat;
        float: left;
        height: 126px;
        width: 280px;
    }
    #header   #header_right {
        height: 126px;
        width: auto;
        padding: 0px;
        float: right;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
    }
    #header   #header_right   UL
    {
        WIDTH: auto;
        LIST-STYLE-TYPE: none;
        TEXT-ALIGN: left;
        height: 57px;
        margin: 0px;
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
    }
    #header   #header_right   UL   LI
    {
        DISPLAY: inline
    }
    #header   #header_right   UL   A
    {
        PADDING-RIGHT: 10px;
        DISPLAY: block;
        PADDING-LEFT: 10px;
        FONT-WEIGHT: bold;
        FONT-SIZE: 10px;
        FLOAT: right;
        PADDING-BOTTOM: 10px;
        TEXT-TRANSFORM: uppercase;
        WIDTH: 80px;
        COLOR: #143294;
        PADDING-TOP: 10px;
        TEXT-ALIGN: center;
        TEXT-DECORATION: none;
        background-image: url(../images/button_closed.jpg);
        background-repeat: no-repeat;
        background-position: center bottom;
        background-color: #FFFFFF;
        margin-top: 62px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
        height: 37px;
    }
    #header   #header_right   UL   A:hover
    {
        COLOR: #232323;
        background-image: url(../images/button_open.jpg);
        background-repeat: no-repeat;
        background-position: center bottom;
    }
    #header   #header_right   UL   A.active
    {
        COLOR: #232323;
        background-image: url(../images/button_open.jpg);
        background-repeat: no-repeat;
        background-position: center bottom;
    }
    #header   #header_right   UL   A.active:hover
    {
        COLOR: #232323;
        background-image: url(../images/button_open.jpg);
        background-repeat: no-repeat;
        background-position: center bottom;
    }
    #header  #header_center {
        float: right;
        height: 126px;
        width: 11px;
        background-attachment: scroll;
        background-image: url(../images/header_right.jpg);
        background-repeat: no-repeat;
    }
    
    
    #content {
        width: 100%;
        background-attachment: scroll;
        background-image: url(../images/main_bg.jpg);
        background-repeat: no-repeat;
        background-position: right;
        background-color: #8ACCFC;
    }
    #content #content_border {
        background-attachment: scroll;
        background-image: url(../images/center_right_border.jpg);
        background-repeat: no-repeat;
        background-position: right top;
        float: right;
        min-height: 482px;
        width: 11px;
        background-color: #8CCCFC;
    }
    * html #content #content_border {
        height: 482px;
    }
    #content #content_left {
        float: left;
        background-image: url(../images/left_bg.jpg);
        background-repeat: repeat-y;
        background-attachment: scroll;
        height: 482px;
        width: 264px;
        background-color: #E6E6DE;
    }
    #content  #content_left  #content_left_top   {
        background-attachment: scroll;
        background-image: url(../images/center_left.jpg);
        background-repeat: no-repeat;
        height: 357px;
        width: 264px;
    }
    #content   #content_left   #content_left_bottom   {
        background-attachment: scroll;
        background-image: url(../images/center_bottom.jpg);
        background-repeat: no-repeat;
        height: 125px;
        width: 264px;
        background-color: #FFFFFF;
        background-position: top;
    }
    
    
    #content  #content_right {
        margin-bottom: 0px;
        margin-left: 264px;
        width: auto;
        margin-top: 0px;
        margin-right: 0px;
        padding-top: 0px;
        padding-right: 11px;
        padding-bottom: 0px;
        padding-left: 0px;
        background-attachment: scroll;
        background-image: url(../images/roof.jpg);
        background-repeat: no-repeat;
        background-position: left top;
        background-color: #FFFFFF;
    }
    #content #content_right #fullcontent {
        height: auto;
        width: auto;
        background-attachment: scroll;
        background-repeat: no-repeat;
        background-position: left top;
        padding-left: 15px;
        padding-right: 15px;
        margin: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
        min-height: 482px;
    }
    * html #content #content_right #fullcontent { height: 482px; }
    
    #footer {
        width: 100%;
        clear: both;
        height: 29px;
        background-attachment: scroll;
        background-image: url(../images/footer_bg.jpg);
        background-repeat: repeat-x;
    }
    #footer   #footer_left  {
        margin: 0px;
        padding: 0px;
        float: left;
        height: 29px;
        width: 278px;
        background-attachment: scroll;
        background-image: url(../images/footer_left.jpg);
        background-repeat: repeat-x;
    }
    #footer    #footer_right     {
        background-attachment: scroll;
        background-image: url(../images/footer_right.jpg);
        background-repeat: repeat-x;
        float: right;
        height: 29px;
        margin-right: 0em;
        width: 18px;
    }
    Coding
    Code:
    <!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>Untitled Document</title>
    <link href="../css/style.css" rel="stylesheet" type="text/css" />
    </head>
    <body id="body_id">
    <div id="container">
    <div id="header">
      <div id="header_left"></div>
      <div id="header_center"></div> 
      <div id="header_right">
            <ul>
               <li><a href="#">Advertise</a></li>
               <li><a href="#">About</a></li>
               <li><a href="#">Search</a></li>
               <li><a href="#">Add</a></li>
               <li><a href="#">Links</a></li>
               <li><a href="#">Home</a></li>
            </ul>
           
        </div>
        
    </div>
    <div id="content">
        <div id="content_left">
            <div id="content_left_top"></div>
            <div id="content_left_bottom"></div>
        </div>
        <div id="content_border"></div>
        <div id="content_right">
            <div id="fullcontent">
              <!-- Start Main Content-->
              
              <!-- End Main Content -->
             </div>
      </div>
    </div>
    <div id="footer">
           <div id="footer_left"></div>
        <div id="footer_right"></div>
    </div>
    <!-- END CONTAINER -->
    </div>
    </body>
    </html>
    I owe you one after the code you gave me

+ Reply to Thread

Similar Threads

  1. Header Output Errors
    By jjpeacha in forum Programming Help
    Replies: 4
    Last Post: 09-14-2008, 06:56 PM
  2. Include errors
    By tech_patrick in forum Free Hosting
    Replies: 5
    Last Post: 04-22-2008, 09:13 PM
  3. phpbb Errors even after upgrade
    By ziddy1232 in forum Free Hosting
    Replies: 8
    Last Post: 04-22-2008, 04:28 PM
  4. HELP! Windows Filesystem Errors
    By Sup3rkirby in forum Computers & Technology
    Replies: 2
    Last Post: 12-22-2007, 03:22 PM
  5. Coppermine picture upload errors
    By mygalleries in forum Free Hosting
    Replies: 4
    Last Post: 09-17-2005, 09:37 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
x10hosting free hosting for the masses
dedicated servers