CSS Errors

D

djcustom

New Member
Messages
17
Reaction score
0
Points
0
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.
 
diabolo

diabolo

Community Advocate
Community Support
Messages
1,682
Reaction score
32
Points
48
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
 
D

driveflexfuel

New Member
Messages
159
Reaction score
0
Points
0
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
 
You must log in or register to reply here.
Top