PDA

View Full Version : CSS Help Please


raja
10-07-2006, 01:48 PM
Hey Friends am working on a site with css and am constantly having this problem both with IE and FF. plzz some one help me plzz. Am enclosing both Live demo page and the zipped files of the site also. Plz some one help me plzz.

Heres My CSS :
body {
background-image: url(../images/background.gif);
background-repeat: repeat;
margin: 0px;
padding: 0px;
}
#topnav{
background-image: url(../images/topnav.jpg);
background-repeat: repeat-x;
width: 760px;
height: 25px;
}
#headder{
background-image: url(../images/Header.jpg);
background-repeat: no-repeat;
height: 267px;
width: 760px;
}
#middlenav{
background-image: url(../images/middlenav.jpg);
background-repeat: repeat-x;
height: 54px;
width: 760px;
}
#maincontentholder{
background-color: #99FF00;
width: 760px;
background-image: url(../images/maincontent.jpg);
background-repeat: repeat-y;
}
#wrapper {
width: 760px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #000000;
}
#leftcontent {
text-align: justify;
padding: 0px;
height: auto;
float: left;
width: 175px;
}
#rightcontent{
width: 585px;
float: left;
height: auto;
}
.sideheading {
width: 173px;
font: normal bold 12px/12px Verdana, Arial, Helvetica, sans-serif;
color: #DBB25A;
background-color: #4C4129;
text-align: center;
border: 1px solid #BAA77F;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
}
.navbar {
height: 273px;
width: 175px;
background-color: #4C4129;
}
.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}
.calendar1 {
width: 173px;
margin-top: 10px auto 10px auto;
border: 1px solid #66546C;
}
.main {
width: 173px;
border: 0;
}
.month {
background-color: #4C4129;
font: normal bold 12px verdana;
color: #DBB25A;
padding: 5px 0px 5px 0px;
border: 1px solid #BAA77F;
}

.daysofweek {
background-color: #000000;
font: bold 10px verdana;
color: #C5BDC8;
}

.days {
font-size: 9px;
font-family: verdana;
color: #FFFFFF;
background-color: #999966;
padding: 2px;
}

.days #today{
font-weight: bold;
color: #ff0000;
}
#sidecontent {
z-index: 2;
width: 173px;
height: 200px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
border: 1px solid #DBB25A;
}
.shoutcontainer {
z-index: 2;
width: 173px;
height: 100px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
border: 1px solid #DBB25A;
}
.centernav {
width: 740px;
font-weight: normal;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 5px;
background-color: #53452B;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
.maintext{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #DBB25A;
}


Here is the Live Demo of the page :
Live Demo (http://www.raja.supersoftz.com/rajaprob/rajaprobe.htm)

Here the zip file:

Zipped Up Files (http://www.raja.supersoftz.com/rajaprob.zip)

domedia
10-07-2006, 02:28 PM
Hi Raja, can you tell us exactly where the problem is on your page?

chriskq
10-13-2006, 01:06 PM
ok i looked at it in Internet Explorer....

Where You Have THIS:

</script>
</div>
<div class="sideheading">Counter</div>

<div class="maintext" id="rightcontent">images/star.gif This site is Temporarily off for Maintenance images/star.gif

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
</p></div>
</div>
<div class="clearit"> </div>
</div>
</div>
</body>
</html>

HAVE THIS instead:

</script>
</div>
<div class="sideheading">Counter</div>
</div>

<div id="rightcontent">
<div class="maintext"
images/star.gif This site is Temporarily off for Maintenance images/star.gif

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
</p>
</div>
</div>
<div class="clearit"></div>
</div>
</div>
</body>
</html>


and in the css. float the left and rightside divs.
then clear left only

chriskq
10-17-2006, 04:32 AM
did u give that a go raja.. it worked for me...

raja
10-23-2006, 06:10 PM
ok let me try it .sorry for the late reply as i busy with my exams