31 users online (0 members and 31 guests)  


  Results 1 to 6 of 6

Related

  1. Replies: 0
  2. I'm have some JS problems please help.    Forum: Javascript Forum
    Replies: 5
  1. #1
    infusion's Avatar
    New User

    Status
    Offline
    Join Date
    May 2005
    Posts
    3

    Problems with CSS Design

    Hey everyone,

    I'm pretty new to CSS being a table kindda guy for quite some time now. Anyway, I've got a big problem which I'm hoping to get some help with. It's with regards to this site: http://www.infusionz.org/tempDesign . It looks fine on IE but it just gets all messed up with Firefox. Could someone please help me out here coz I've been debugging this for ages and still can't find the answer. Feel free to take a look at my styles.css file. Thanks in advance.

  2. #2
    ALL's Avatar
    Super Dooper Nerd

    Status
    Offline
    Join Date
    Feb 2005
    Location
    localhost
    Posts
    382

    Re: Problems with CSS Design

    well, for some reason i cant post the code here, so i uploaded it to my server, so here you go:
    http://www.tkforums.com/examples/infusion.txt

    hope that is what you need
    -ALL

  3. #3
    infusion's Avatar
    New User

    Status
    Offline
    Join Date
    May 2005
    Posts
    3

    Re: Problems with CSS Design

    hey thanks man. that's some really good stuff. the problem about the inner boxes going out of the container is fixed but I'm wondering why the navigation bar and the header image are now separated by a lot. here's the url to see what I mean. http://www.infusionz.org/tempDesign/index1.htm . on firefox, there's also still gaps in between the inner box layers. appreciate all the help and thanks once again.

  4. #4
    ALL's Avatar
    Super Dooper Nerd

    Status
    Offline
    Join Date
    Feb 2005
    Location
    localhost
    Posts
    382

    Re: Problems with CSS Design

    argh...
    i have been battling all the <div>'s there are alot of them, and some of them dont need to be there.

    what i was working on is having the top be in tables, and everything is peche, untill i came to getting some of the pics to display, and change. so, i am sorry, but i give up, if you get further, or find some javascript to change the picture when you hover over it i will comtinue to help you, but please use less <div>'s because it makes it harder to work with, and a little bit less compatable (because size issue for some browsers)

    here is what i was working on:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <title>Test</title>
    <link href="file:///C:/Documents%20and%20Settings/ALL/Desktop/styles.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    <table width="770" border="0" align="center" cellpadding="0" cellspacing="0" height="2083">
    <!--
      <tr>
        <td height="30" colspan="3" valign="middle" class="topTopColor">&nbsp;</td>
      </tr>
    -->  
      <tr>
      <td class="allBorders" colspan="3">
    	<table border="0" class="menubackground" width="100%">
    		<td class="menu2">&nbsp;</td><td class="menu3" background="http://www.infusionz.org/tempDesign/nav/nav_2_home.gif">&nbsp;</td><td class="menu4">&nbsp;</td><td class="menu5">&nbsp;</td><td class="menu6">&nbsp;</td><td class="menu7">&nbsp;</td><td class="menu8">&nbsp;</td><td class="menu9">&nbsp;</td><td class="menu10">&nbsp;</td><td class="menu11">&nbsp;</td><td class="menu12">&nbsp;</td><td class="menu13">&nbsp;</td><td class="menu14">&nbsp;</td><td class="menu15">&nbsp;</td><td class="menu16">&nbsp;</td><td background="http://www.infusionz.org/tempDesign/nav/nav_17_last.gif" width="120">&nbsp;</td> 
    	</table>
      <tr>
        <td colspan="3" class="header" height="21">&nbsp;</td>
      </tr>
      <tr>
        <td colspan="3" class="allBorders" height="20"><img src="http://www.infusionz.org/tempDesign/images/youth_04.gif" alt="" width="770" height="8"></td>
    
      </tr>
    
    
    <!-- MAIN ROW -->
      <tr>
    
    <!-- LEFT COLUMN -->
        <td width="124" rowspan="2" valign="top" class="leftColumn" height="1680"><div class="GeorgiaMain1"><br>
          <form action="">
          SEARCH <img src="http://www.infusionz.org/tempDesign/images/ico-advanced.gif"  alt="Search" width="15" height="15"> <br> 
          <input type="text" name="textfield"></form>
    
        </div><br />
          
    
    
    <!-- CALENDAR START -->
          <div class="GeorgiaFonts">Calendar of Events</div>
    	  <table width="85%"  border="1" align="center" cellpadding="0" cellspacing="0">
            <tr>
              <td><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr class="colorClass">
                  <td height="19" colspan="7" class="calendarHeaderFont"><div align="center">&lt;&lt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;JUNE
    2005  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt;&gt; </div>
    
                    </td>
                </tr>
                <tr class="calendarFont">
                  <td width="29">Sun</td>
                  <td width="29">Mon</td>
                  <td width="29">Tue</td>
                  <td width="29">Wed</td>
    
                  <td width="29">Thur</td>
                  <td width="29">Fri</td>
                  <td width="29">Sat</td>
                </tr>
                <tr>
                  <td colspan="7" class="dotRow">&nbsp;</td>
                </tr>
    
                <tr class="calendarFont">
                  <td width="29">&nbsp;</td>
                  <td width="29">&nbsp;</td>
                  <td width="29">&nbsp;</td>
                  <td width="29">1</td>
                  <td width="29">2</td>
                  <td width="29">3</td>
    
                  <td width="29">4</td>
                </tr>
                <tr class="calendarFont">
                  <td width="29">5</td>
                  <td width="29">6</td>
                  <td width="29">7</td>
    
                  <td width="29">8</td>
    
                  <td width="29">9</td>
                  <td width="29">10</td>
                  <td width="29">11</td>
                </tr>
                <tr class="calendarFont">
    
                  <td width="29">12</td>
                  <td width="29">13</td>
    
                  <td width="29">14</td>
                  <td width="29">15</td>
                  <td width="29">16</td>
                  <td width="29">17</td>
    
                  <td width="29">18</td>
                </tr>
    
                <tr class="calendarFont">
                  <td width="29">19</td>
                  <td width="29">20</td>
                  <td width="29">21</td>
    
                  <td width="29">22</td>
                  <td width="29">23</td>
    
                  <td width="29">24</td>
                  <td width="29">25</td>
                </tr>
                <tr valign="top" class="calendarFont">
    
                  <td width="29" height="31">26</td>
                  <td width="29">27</td>
                  <td width="29">28</td>
    
                  <td width="29">29</td>
                  <td width="29">30</td>
                  <td width="29">&nbsp;</td>
    
                  <td width="29">&nbsp;</td>
                </tr>
              </table></td>
            </tr>
          </table>   
    
    
    <!-- CALENDAR END -->   
    
    	  <p>&nbsp;</p>      
    	  <p>
    
    <!-- POLLS START -->
          <div class="GeorgiaFonts">Quick Poll</div>
    
          <table width="203"  border="1" align="center" cellpadding="0" cellspacing="0">
            <tr>
              <td><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr class="colorClass">
                  <td height="50" valign="middle" class="calendarHeaderFont">I would not volunteer my <br>
    
                    services if <br>
                    CIP were not required</td>
    
                </tr>
                <tr>
                  <td><br />
                    <form name="form2" method="post" action="">
                      <table width="90%"  border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
    
          <td width="15%" valign="top"><input name="radiobutton" type="radio" value="radiobutton"></td>
          <td width="85%"><div align="left"><span class="pollText"> I would not volunteer my services if CIP was not required</span></div></td>
    
        </tr>
        <tr valign="middle">
          <td colspan="2">&nbsp;</td>
          </tr>
        <tr>
          <td valign="top"><input name="radiobutton" type="radio" value="radiobutton"></td>
    
          <td><div align="left"><span class="pollText">I would still volunteer. I'm not in it for the CIP points.</span></div></td>
        </tr>
    
        <tr>
          <td valign="top">&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td valign="top"><input name="radiobutton" type="radio" value="radiobutton"></td>
    
          <td><div align="left"><span class="pollText">Definitely not. It's a waste of time</span></div></td>
        </tr>
    
        <tr>
          <td valign="top">&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td valign="top"><input name="radiobutton" type="radio" value="radiobutton"></td>
    
          <td><div align="left"><span class="pollText">I'm not sure </span></div></td>
        </tr>
    
      </table>
      
                    </form></td>
                </tr>
              </table>
    
    <!-- POLLS END -->
    
              </td>
    
            </tr>
          </table>      
    	  <p>&nbsp;</p>
    
        </td>
    
    <!-- DOTTED COLUMN -->
        <td class="dotColumn" height="840">&nbsp;</td>
    
    <!-- RIGHT COLUMN START -->
        <td width="522" rowspan="2" valign="top" class="rightColumn" height="1680"><div class="alignment"> <br />
    	<div class="GeorgiaMain1"></div>
    
        </div>
    	  <div class="GeorgiaMain">
    
    	    <div class="GeorgiaFonts1"><img src="http://www.infusionz.org/tempDesign/images/arrowhead.gif" alt="" width="13" height="13" />Recent Blog Entries</div>      
    	    <div class="dotText1">&nbsp;</div><br />
            <div class="GeorgiaBlogTitle">Thursday, 19th May 2005 : The Simple Things </div>
            <p>Have been battling on several fronts in terms of the running/development of TYPPr along with Yin Li, and Shixin (who&rsquo;s just joined us for the ride). So much to do&hellip; and thus the lack of updates here. </p>
    
            <p>But just got an email that made my day.</p>
    
            <p>Sandra, my colleague, has this wedding that&rsquo;s taking place this Saturday. For some reason, there are going to be <STRONG>100 extra packets of food</STRONG>. She just happened to ask me and Elaine if we had any need for all this food. Immediately, <STRONG><A href="http://www.foodheart.org">Food From the Heart</A></STRONG> came to mind. A couple of emails later, I was informed that the food would be sent to Lion&rsquo;s Home for the Elders.</P>
            <p>Did I do much? - Not at all.<br />
              Did it feel good? - Hell yea! <img 
    class=wp-smiley alt=":)" src="icon_smile.gif" width="15" height="15"> </p>
    
            <p>A BIG thank you goes out to Prof Lim Sun Sun at NUS who helped link us up</p>
            <p><a href="http://youth.sg/blog/2005/05/19/the-simple-things/" class="normalLink">:: visit the blog :: </a></p>
            <div class="dotText1"></div>
            <span class="poster">Posted  by Julian :: <a href="http://youth.sg/blog/2005/05/19/the-simple-things/#comments">2 comments</a></span>
    	    <div class="dotText1">&nbsp;
    	      <table width="511" border="0" align="center" cellpadding="0" cellspacing="0">
    
                <tr>
    
                  <td><div class="boxHeader">
                    <div class="boxHeaderText">Upcoming Events : 28.04.05 </div>
                  </div></td>
                </tr>
                <tr>
                  <td><div class="boxMiddle">
    			  <div class="boxContentText">
    
    			    <p><img src="http://www.infusionz.org/tempDesign/images/events.gif" alt="" width="100" height="100" class="floatLeft" />
    
    				<img src="http://www.infusionz.org/tempDesign/images/arrowhead.gif" alt="" width="13" height="13" /> What does the Guinness World Record, popiah and round house kicks have in common? They are right here under one roof, yes, at Nanyang Girls' High School. How's that for a "triple-barrel" fund-raising effort?</p>
    			    <p><a href="#">read more....</a></p>
    			    <p>&nbsp;</p>
    			  </div>
    			  </div></td>
                </tr>
    
                <tr>
    
                  <td><div class="boxBottom">
                    <div class="boxFooterText"><a href="#" class="normalLink">Events Archive &gt;&gt;</a></div> 
                  </div></td>
                </tr>
              </table>
    	      <p>
      	      <table width="511" border="0" align="center" cellpadding="0" cellspacing="0">
    
                <tr>
                  <td><div class="boxHeader">
    
                    <div class="boxHeaderText">People</div>
                  </div></td>
                </tr>
    
    <tr>
                  <td><div class="boxMiddle">
    			  <div class="boxContentText">
    
    			    <p><img src="http://www.infusionz.org/tempDesign/images/ya.gif" alt="" width="90" height="90" class="floatLeft"><span class="GeorgiaFonts1"><img src="images/arrowhead.gif" alt="" /></span> The World Summit Youth Awards(WSYA) is th first youth-led and youth-oriented competition on the global scale. </p>
    
    			    <p class=spip>WSYA is an international competition for youth-led projects that encourage the active participation of young people in the Information Society. It is the first global "youth for youth" initiative for selecting and promoting best practice in e-content and technological creativity, demonstrating young people's potential to create digital opportunities. </p>
    			    <p class=spip>The WSYA lies within the framework of the World Summit on the Information Society (WSIS). The winners will be celebrated at the WSIS in Tunis on november 16th 2005.</p>
    			    <p><a href="#">read more....</a></p>
    			    <p>&nbsp;</p>
    			  </div>
    
    			  </div></td>
                </tr>
    
                <tr>
                  <td><div class="boxBottom">
                    <div class="boxFooterText"><a href="#" class="normalLink">News Archive &gt;&gt;</a></div> 
                  </div></td>
                </tr>
              </table>
    
    	      <p>
       	      <table width="511" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
    
                  <td><div class="boxHeader">
                    <div class="boxHeaderText">People</div>
                  </div></td>
                </tr>
                <tr>
    
                  <td valign="top"><div class="boxMiddle">
                    <div class="boxContentText">
                      <p><img src="images/boy.gif" alt="" width="90" height="100" class="floatLeft"><SPAN class=style1><SPAN class=style6><SPAN class=style5><span class="GeorgiaFonts1"><img src="images/arrowhead.gif" alt="" /></span> For most teenagers, volunteering is a compulsory six hours spent in an old folks home to collect co-curricular points. For 19-year-old ITE student, </SPAN></SPAN><SPAN class=style12>Lional Jonathan Louis</SPAN><SPAN class=style6><SPAN class=style5>, volunteering has become nothing short of a lifestyle - one that he thoroughly enjoys. Whenever time permits, he volunteers for Children-at-Risk Empowerment Association (CARE), a social work agency with a .....</SPAN></SPAN></SPAN></p>
    
    			      <p><a href="#">read more....</a></p>
    			    <p>&nbsp;</p>
    			  </div>
    
    			  </div></td>
                </tr>
                <tr>
                  <td><div class="boxBottom">
                    <div class="boxFooterText">More People: . <a href="#" class="normalLink">Taufik</a> . <a href="#" class="normalLink">Knik Pang</a> .&nbsp;<a 
    href="#" class="normalLink">&lt;&lt; hall of fame &gt;&gt;</a></div> 
                  </div></td>
    
                </tr>
              </table>
    		  
    	      <p>&nbsp;</p>
    	    </div>
        </div></td>
    <!-- RIGHT COLUMN START -->
    
      </tr>
    
    <!-- MIDDLE ROW END -->
    
      <tr>
        <td width="124" class="dotColumn" height="840">&nbsp;</td>
      </tr>
      <tr>
        <td colspan="3" class="bottomUpper" height="16">&nbsp;</td>
      </tr>
      <tr valign="middle">
        <td colspan="3" class="bottomLowerColor" height="21"><p class="footerFonts"><a href="#" class="bottom">SITE MAP</a>&nbsp; &nbsp; &nbsp;|&nbsp; &nbsp; &nbsp;<a href="#" class="bottom">SITE POLICY</a>&nbsp; &nbsp; &nbsp;|&nbsp; &nbsp; &nbsp;<a href="#" class="bottom">CONTACT US</a><br/>
    
          </p>
        </td>
      </tr>
    </table>
    <p class="GeorgiaMain1">Designed by Mas &nbsp; | &nbsp; Validate: <a class="normalLink" href="http://validator.w3.org/check?uri=referer">XHTML </a></p>
    </body>
    </html>
    and here is the modded Css file:
    Code:
    /* CSS Document */
    body {
    background-image:url("http://www.infusionz.org/tempDesign/images/bg.gif");
    background-color:#FFFFFF;
    background-repeat:repeat-x;
    }
    
    #container {
    width: 770px;
    \width: 770px;
    w\idth: 770px;
    margin-left: auto;
    margin-right: auto;
    }
    .menubackground {
        background: #bbb url("nav_1.gif") repeat-x;
        }
    .header {
    background-image:url("http://www.infusionz.org/tempDesign/images/header.gif");
    background-repeat:no-repeat;
    margin:0;
    width:770px;
    height: 172px;
    border-left-color:#000000;
    border-left-style:solid;
    border-left-width:1px;
    border-right-color:#000000;
    border-right-style:solid;
    border-right-width:1px;
    }
    
    .topTopColor {
    background-color: #718191;
    width:770px;
    margin:0;
    border-left-color:#000000;
    border-left-style:solid;
    border-left-width:1px;
    border-right-color:#000000;
    border-right-style:solid;
    border-right-width:1px;
    border-top-color:#000000;
    border-top-style:solid;
    border-top-width:1px;
    }
    
    .navigation {
    background-color:#FFFFFF;
    width:770px;
    height:32px;
    margin:0;
    }
    
    .topLowerColor {
    background-color:#718191;
    width:770px;
    margin:0;
    }
    
    .bottomLowerColor {
    background-color:#37383E;
    width: 770px;
    height: 20px;
    margin:0;
    }
    
    .bottomUpper {
    background-color:#718191;
    width: 770px;
    height: 12px;
    margin:0;
    }
    
    .leftColumn {
    width:245px;
    background-color:#FFFFFF;
    border-left-color:#000000;
    border-left-style:solid;
    border-left-width:1px;
    }
    
    .rightColumn {
    width:522px;
    background-color:#FFFFFF;
    border-right-color:#000000;
    border-right-style:solid;
    border-right-width:1px;
    }
    
    .pollText {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:8pt;
    color:#000000;
    text-align: left;
    }
    
    .calendarFont {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:8pt;
    color: #000000;
    text-align:center;
    border-bottom: solid #000000 1px;
    }
    
    .calendarHeaderFont {
    font-family: Arial, Helvetica, sans-serif;
    font-size:8pt;
    font-weight:bold;
    color: #FFFFFF;
    text-align:center;
    }
    
    .calendarArrowHeaderFont {
    font-family: Arial, Helvetica, sans-serif;
    font-size:9pt;
    font-weight:bold;
    color: #FFFFFF;
    }
    
    tr.colorClass {
    background-color: #374757;
    height: 14px;
    }
    
    .alignment {
    text-align:right;
    margin-right:10px;
    }
    
    
    .allBorders {
    border-left-color:#000000;
    border-left-style:solid;
    border-left-width:1px;
    border-right-color:#000000;
    border-right-style:solid;
    border-right-width:1px;
    }
    
    
    
    /***************************
    no use styles for now
    *************************/
    
    .leftBorders {
    border-left-color:#000000;
    border-left-style:solid;
    border-left-width:1px;
    }
    
    .rightBorders {
    border-right-color:#000000;
    border-right-style:solid;
    border-right-width:1px;
    }
    
    /*************************/
    
    /****************************
    *****************************
    Arial font elements *********
    ******************************/
    
    
    .footerFonts {
    font-family: Arial, Helvetica, sans-serif;
    font-size:9pt;
    color:#FFFFFF;
    text-align:center;
    }
    
    .searchFonts {
    font-family: Arial, Helvetica, sans-serif;
    font-size:8pt;
    color:#000000;
    }
    
    .searchFonts1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size:8pt;
    color:#FFFFFF;
    }
    
    /*************************
    **************************
     Georgia font elements
     **************************/
    
    .GeorgiaFonts {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 13pt;
    color:#9F2323;
    text-align:center;
    }
    
    .GeorgiaFonts1 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 13pt;
    color:#9F2323;
    text-align:left;
    }
    
    .GeorgiaBlogTitle {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 9pt;
    color:#9F2323;
    font-weight:bold;
    text-align:left;
    }
    
    .GeorgiaMain {
    padding-left:10px;
    padding-right:10px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 9pt;
    color:#000000;
    text-align: left;
    }
    
    .GeorgiaMain1 {
    padding-left:10px;
    padding-right:10px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 9pt;
    color:#000000;
    text-align: center;
    }
    
    /*************************
    ***************************
    DOT elements
    ***************************/
    
    
    
    .dotText1{
            width:522px;
            height:2px;
            background-image:url("http://www.infusionz.org/tempDesign/images/dot.gif");
            background-repeat:repeat-x;
            background-color:#FFFFFF;
    }
    
    
    
    .dotColumn{
            width:3px;
            background-image:url("http://www.infusionz.org/tempDesign/images/dot.gif");
            background-repeat:repeat-y;
            background-color:#FFFFFF;
    }
    
    .dotRow{
            background-image:url("http://www.infusionz.org/tempDesign/images/dot.gif");
            background-repeat:repeat-x;
            background-color:#FFFFFF;
    }
    
    .dotRow1{
            background-image:url("http://www.infusionz.org/tempDesign/images/dot.gif");
            background-repeat:repeat-x;
            background-color:#FFFFFF;
            width: 450px;
            height:2px;
    }
    
    /**********************************
    *************************************
    */
    
    .poster {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 8pt;
    color:#000000;
    text-align: left;
    }
    
    hr {
    color:#666666;
    height:1px;
    }
    
    /********************************
    img elements
    *******************************/
    
    img.floatLeft {
    float: left;
    margin: 10px; }
    
    
    /****************************
    box elements
    ****************************/
    
    
    .boxHeader{
    display:block;
            width:511px;
            height:60px;
            background-image:url("http://www.infusionz.org/tempDesign/images/boxtop.gif");
            background-repeat:no-repeat;
            background-color:#FFFFFF;
    }
    
    
    .boxMiddle{
    display:block;
            width:511px;
            background-image:url("http://www.infusionz.org/tempDesign/images/boxContent.gif");
            background-repeat:repeat-y;
            background-color:#FFFFFF;
    }
    
    
    .boxBottom{
    display:block;
            width:511px;
            height:31px;
            background-image:url("http://www.infusionz.org/tempDesign/images/boxbottom.gif");
            background-repeat:no-repeat;
            background-color:#FFFFFF;
            text-align:right;
    }
    
    .boxHeaderText {
    padding-left:35px;
    padding-top:20px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 13pt;
    color:#9F2323;
    text-align:left;
    }
    
    .boxFooterText {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 10pt;
    color:#000066;
    text-align:right;
    padding-right: 25px;
    }
    
    .boxContentText {
    padding-left:25px;
    padding-right:20px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 10pt;
    color:#000000;
    text-align:left;
    }
    
    .boxContentTextHeader {
    font-weight:bold;
    }
    
    
    /****************************
    ****************************
     linking elements
     ****************************/
    
    a.bottom:link, a.bottom:visited, a.bottom:active, a.offsite {
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    font-size: 8pt;
    }
    
    a.normalLink:link, a.normalLink:visited, a.normalLink:active, a.offsite {
    color:#004E9B;
    font-family: Georgia, "Times New Roman", Times, serif;
    text-decoration: none;
    font-size: 9pt;
    }
    
    
    a.normalLink:hover {
    text-decoration: underline;
    }
    
    a.bottom:hover {
    text-decoration: underline;
    color: #666666;
    }
    
    a:link, a:visited, a:active, a.offsite {
    color: #666666;
    font-family: Georgia, "Times New Roman", Times, serif;
    text-decoration: none;
    font-size: 9pt;
    }
    
    a:hover, a.bottom:hover {
    text-decoration: underline;
    }
    
    
    /*************************
    *************************
     Menu items
     *************************/
            .menu1 {
                    float:left;
                    width:107px;
                    background: url("nav_1.gif") top left no-repeat;
                    }
    
    
            .menu2 a {
                    width:36px;
                    font: bold 14px/1 sans-serif;
                    color:#c60;
                    background: url("http://www.infusionz.org/tempDesign/nav/nav_2_home.gif") 0 0 no-repeat;
                    }
    
    
            .menu2 a:hover {
                    background-position: -36px 0;
                    color: #E9BE75;
                    }
    
    
            .menu3 {
                    width:21px;
                    background: url("http://www.infusionz.org/tempDesign/nav/nav_3_div.gif") top left no-repeat;
                    }
    
            .menu4 a {
                    width:54px;
                    font: bold 14px/1 sans-serif;
                    color:#c60;
                    background: url("http://www.infusionz.org/tempDesign/nav/nav_4_about.gif") 0 0 no-repeat;
                    }
    
            .menu4 a:hover {
                    background-position: -54px 0;
                    color: #E9BE75;
                    }
    
    
            .menu5 {
                    width:23px;
                    background: url("http://www.infusionz.org/tempDesign/nav/nav_5_div.gif") top left no-repeat;
                    }
    
            .menu6 a {
                    width:68px;
                    font: bold 14px/1 sans-serif;
                    color:#c60;
                    background: url("http://www.infusionz.org/tempDesign/nav/nav_6_c.gif") 0 0 no-repeat;
                    }
    
            .menu6 a:hover {
                    background-position: -68px 0;
                    color: #E9BE75;
                    }
    
    
            .menu7 {
                    width:22px;
                    background: url("http://www.infusionz.org/tempDesign/nav/nav_7_div.gif") top left no-repeat;
                    }
    
            .menu8 a {
                    width:50px;
                    font: bold 14px/1 sans-serif;
                    color:#c60;
                    background: url("http://www.infusionz.org/tempDesign/nav/nav_8_yscene.gif") 0 0 no-repeat;
                    }
    
            .menu8 a:hover {
                    background-position: -50px 0;
                    color: #E9BE75;
                    }
    
    
            .menu9 {
                    width:22px;
                    background: url("http://www.infusionz.org/tempDesign/nav/nav_9_div.gif") top left no-repeat;
                    }
    
            .menu10 a {
                    width:61px;
                    font: bold 14px/1 sans-serif;
                    color:#c60;
                    background: url("http://www.infusionz.org/tempDesign/nav/nav_10_yservices.gif") 0 0 no-repeat;
                    }
    
            .menu10 a:hover {
                    background-position: -61px 0;
                    color: #E9BE75;
                    }
    
    
            .menu11 {
                    width:22px;
                    background: url("http://www.infusionz.org/tempDesign/nav/nav_11_div.gif") top left no-repeat;
                    }
    
            .menu12 a {
                    width:38px;
                    font: bold 14px/1 sans-serif;
                    color:#c60;
                    background: url("http://www.infusionz.org/tempDesign/nav/nav_12_yhub.gif") 0 0 no-repeat;
                    }
    
            .menu12 a:hover {
                    background-position: -38px 0;
                    color: #E9BE75;
                    }
    
    
    
            .menu13 {
                    width:21px;
                    background: url("http://www.infusionz.org/tempDesign/nav/nav_13_div.gif") top left no-repeat;
                    }
    
    
            .menu14 a {
                    width:43px;
                    font: bold 14px/1 sans-serif;
                    color:#c60;
                    background: url("http://www.infusionz.org/tempDesign/nav/nav_14_forum.gif") 0 0 no-repeat;
                    }
    
            .menu14 a:hover {
                    background-position: -43px 0;
                    color: #E9BE75;
                    }
    
    
    
            .menu15 {
                    width:19px;
                    background: url("http://www.infusionz.org/tempDesign/nav/nav_15_div.gif") top left no-repeat;
                    }
    
    
            .menu16 a {
                    width:43px;
                    font: bold 14px/1 sans-serif;
                    color:#c60;
                    background: url("http://www.infusionz.org/tempDesign/nav/nav_16_links.gif") 0 0 no-repeat;
                    }
    
            .menu16 a:hover {
                    background-position: -43px 0;
                    color: #E9BE75;
                    }
    
    
    
            .menu17 {
                    width:120px;
                    background: url("http://www.infusionz.org/tempDesign/nav/nav_17_last.gif") top left no-repeat;
                    }

  5. #5
    infusion's Avatar
    New User

    Status
    Offline
    Join Date
    May 2005
    Posts
    3

    Re: Problems with CSS Design

    hey thanks a whole lot ALL. sorry for frustrating you.

    the rollovers are actually made like that for faster switching without the irritating blink for mouseovers. i actually put both the images side by side and use background positioning to do the mouseovers.

    anyway, I was surfing around other forums and this dude solved most of the problems by basically removing 1 line and adding 1 more line. He didn't change any part of my html code. you can take a look at it here http://www.infusionz.org/youth once again, thanks for all the help! =)

  6. #6
    ALL's Avatar
    Super Dooper Nerd

    Status
    Offline
    Join Date
    Feb 2005
    Location
    localhost
    Posts
    382

    Re: Problems with CSS Design

    oh, crap, when i was woking on it i completely got side tracked with the whole <td> vs. <div> battle; i solved that problem ages ago, i am sorry man! i could have got that fixed.



Tags for this Thread