SitePoint Sponsor

User Tag List

Results 1 to 21 of 21

Thread: Css Mouse Over

  1. #1
    SitePoint Wizard mark_W's Avatar
    Join Date
    Mar 2004
    Location
    West Midlands, United Kingdom
    Posts
    2,631
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Css Mouse Over

    Hi Guys

    Ive got a little mouse over working in IE but the images dont display as they should in Firefox.

    http://www.teamsik.net/teamsiknet/

  2. #2
    SitePoint Evangelist pip's Avatar
    Join Date
    Jun 2001
    Location
    Cape Town, South Africa
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Note sure if this will do the trick, but the difference between IE's DIVs and Mozilla DIVs is that IE's DIVs automaticallly spans the entire width of the parent element. This doesn't work the same in FF.

    Try adding another class to your style sheet, which is seperate from the anchor element class:

    Code:
    .menulink {
      width: 136px;
      height: 26px;
      padding-left:35px;
      padding-top:5px;
    }
    .menulink a {
     background: url('button.jpg') top no-repeat;
     font: bold 11px arial;
     color: #99999;
     width: 136px;
     height: 26px;
     padding-left:35px;
     padding-top:5px;
     
    }
    As I said, not sure if it'll work, so give it a bash.
    - Pip
    ---------------------------------------------------------------------------------
    Nothing takes the taste out of peanut butter quite like unrequited love.

  3. #3
    SitePoint Wizard mark_W's Avatar
    Join Date
    Mar 2004
    Location
    West Midlands, United Kingdom
    Posts
    2,631
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry, i dont get exactly what your saying? :S

  4. #4
    SitePoint Evangelist pip's Avatar
    Join Date
    Jun 2001
    Location
    Cape Town, South Africa
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, you've got the following on your page, which builds up your navigation:

    Code:
    <div class="menulink"><a href="#">News</a></div>
    Then, in your stylesheet, you style it like so:

    Code:
    .menulink a {
    background: url('button.jpg') top no-repeat;
    font: bold 11px arial;
    color: #99999;
    width: 136px;
    height: 26px;
    padding-left:35px;
    padding-top:6px;
     
    }
     
    .menulink a:hover {
    background: url('buttonover.jpg') top no-repeat;
    font: bold 11px arial;
    color:#2a2a2a;
    width: 136px;
    height: 26px;
    padding-left:35px;
    padding-top:6px;
     
    }
    But according to these class identifiers, you are giving the "ANCHOR" inside your DIV layer these styles. So what I'm saying is, set the actual width and height of the DIV layer as well, so that the DIV would stretch to the full size of the ANCHOR.

    So, just add another class in your stylesheet, so that you have the following:

    Code:
    .menulink {
    width: 136px;
    height: 26px;
    }
    .menulink a {
    background: url('button.jpg') top no-repeat;
    font: bold 11px arial;
    color: #99999;
    width: 136px;
    height: 26px;
    padding-left:35px;
    padding-top:6px;
     
    }
     
    .menulink a:hover {
    background: url('buttonover.jpg') top no-repeat;
    font: bold 11px arial;
    color:#2a2a2a;
    width: 136px;
    height: 26px;
    padding-left:35px;
    padding-top:6px;
     
    }
    Alternatively, you might also be able to override the issue with the "overflow" css attribute. and also set it in the menu item class:

    Code:
    overflow: visible;
    Hope it makes better sense now... ?
    - Pip
    ---------------------------------------------------------------------------------
    Nothing takes the taste out of peanut butter quite like unrequited love.

  5. #5
    SitePoint Wizard mark_W's Avatar
    Join Date
    Mar 2004
    Location
    West Midlands, United Kingdom
    Posts
    2,631
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks pip,

    I tried what you said but it didnt work!

  6. #6
    SitePoint Evangelist pip's Avatar
    Join Date
    Jun 2001
    Location
    Cape Town, South Africa
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay... I slaved it a bit.

    If you add:
    Code:
    display: block;
    to .menulink A {

    It does some correction, however... your padding messes it up. If you remove all the padding, then it displays right. But your text isn't padded...

    not sure how you're gonna correct it otherwise
    - Pip
    ---------------------------------------------------------------------------------
    Nothing takes the taste out of peanut butter quite like unrequited love.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Just set your anchor to display block as widths and height don't apply to inline elements. use text indent to move your text into position. Also no need to duplicate the styles on a:hover that have been set on .menulink a. Just style the changes as the rest will be inherited anyway.

    Code:
    .menulink a {
     background: url(http://www.teamsik.net/teamsiknet/button.jpg) top no-repeat;
     font: bold 11px arial;
     color: #99999;
     width: 136px;
     height: 26px;
     display:block;
     text-indent:35px;
     padding-top:6px;
     overflow: visible;
     
    }
    .menulink a:hover {
     background: url(http://www.teamsik.net/teamsiknet/buttonover.jpg) top no-repeat;
     color:#2a2a2a;
    }
    Hope that helps.

    Paul

  8. #8
    SitePoint Wizard mark_W's Avatar
    Join Date
    Mar 2004
    Location
    West Midlands, United Kingdom
    Posts
    2,631
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey paul .

    That helps and works great apart from the fact the padding-top dont work as it should now! It give spaces in between the images.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Do You have an updated link that exhibits the problem and I'll take another look.

    Paul

  10. #10
    SitePoint Wizard mark_W's Avatar
    Join Date
    Mar 2004
    Location
    West Midlands, United Kingdom
    Posts
    2,631
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank Paul, Really appreciate your help.

    The link is still:

    http://www.teamsik.net/teamsiknet

    and the problem is shown in Firefox.

    Thanks

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm assuming this is what you wanted to do
    Code:
    .menuheader{
     background: url('http://www.teamsik.net/teamsiknet/menu.jpg') top no-repeat;
     font: bold 11px arial;
     color: #111111;
     padding-left:5px;
     width: 136px;
     height: 25px;
     display:block;
    line-height:25px
    }
    .menulink {
    width: 136px;
    height: 25px;
    }
    .menulink a {
     background: url('http://www.teamsik.net/teamsiknet/buttonover.jpg') top no-repeat;
     font: bold 11px arial;
     color: #F9f9f9;
     width: 136px;
     height: 25px;
     display:block;
     text-indent:35px;
     line-height:25px;
    }
    .menulink a:hover {
     background: url('http://www.teamsik.net/teamsiknet/button.jpg') top no-repeat;
     color:#000000;
    }
    If not let me know

    Paul

  12. #12
    SitePoint Wizard mark_W's Avatar
    Join Date
    Mar 2004
    Location
    West Midlands, United Kingdom
    Posts
    2,631
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That lines everything in the menu up ok. But knocks all the other Divs about.

    heres a new link http://www.teamsik.net/teamsik

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    [quote]
    That lines everything in the menu up ok. But knocks all the other Divs about.
    [/code]

    Can you be a bit more specific as I'm not sure what other divs you mean and where to look. I have no idea where they are supposed to be or what they should look like anyway

    Besides the code I gave you should have no effect on anything else other than the content in that column as far as I can see

    Paul

  14. #14
    SitePoint Wizard mark_W's Avatar
    Join Date
    Mar 2004
    Location
    West Midlands, United Kingdom
    Posts
    2,631
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Once again thanks for all your help, when I posted that yesterday everything out of position but today I checked in Firefox and it all lines up nice!

    The only problem I have now, in IE and Firefox is the two blocks to the right should be right at the top in line with the other blocks.

    http://www.teamsik.net/teamsik

    Once again, thanks you!
    Last edited by mark_W; Nov 5, 2004 at 10:00.

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    When you float elements in columns you should float the whole column and then place the individual elements inside the floats. Otherwise you have to consistently float elements one at a time and if they aren't the same size then they won't always rise up to fill the space.

    In your example you need to wrap the center content in another wrapper to hold all of the centre content.

    e.g.
    Code:
    	  <div id="newswrapper">
       <div class="news">
    		<table width="485" border="0" valign="top" cellpadding="0" cellspacing="0">
    		  <tr> 
    			<td class="newsbar">Test Post</td>
    		  </tr>
    		  <tr> 
    			<td height="4px" bgcolor="#cccccc"></td>
    		  </tr>
    		  <tr> </tr>
    		  <tr> 
    			<td class="authorbar">Mark</td>
    		  </tr>
    		  <tr> 
    			<td height="4px" bgcolor="#cccccc"></td>
    		  </tr>
    		  <tr> 
    			<td class="topicbar"></td>
    		  </tr>
    		  <tr> 
    			<td class="newsarticle">Test PostTest Post!!! <br /> <br />
    			  Test PostTest Post!!! <br /> <br />
    			  Test PostTest Post!!!</td>
    		  </tr>
    		</table>
    	  </div>
    	  <div class="news">
    		<table width="485" border="0" valign="top" cellpadding="0" cellspacing="0">
    		  <tr> 
    			<td class="newsbar">Test Post</td>
    		  </tr>
    		  <tr> 
    			<td height="4px" bgcolor="#cccccc"></td>
    		  </tr>
    		  <tr> </tr>
    		  <tr> 
    			<td class="authorbar">Mark</td>
    		  </tr>
    		  <tr> 
    			<td height="4px" bgcolor="#cccccc"></td>
    		  </tr>
    		  <tr> 
    			<td class="topicbar"></td>
    		  </tr>
    		  <tr> 
    			<td class="newsarticle">Test PostTest Post!!! <br /> <br />
    			  Test PostTest Post!!! <br /> <br />
    			  Test PostTest Post!!!</td>
    		  </tr>
    		</table>
    	  </div>
    	  </div>
    CSS
    Code:
    #newswrapper{
     float: left;
     width:489px
    }
    .news {
     background-color: #cccccc;
     margin-right: 4px;
     text-align:center;
     margin-bottom: 4px;
    }
    .newsarticle {
     background-color:#cccccc;
     text-align: center;
     font: bold 11px arial;
     color:#999999;
    }
    The whole centre column is floated as one big float which allows the right side to be free for content etc.

    Paul

  16. #16
    SitePoint Wizard mark_W's Avatar
    Join Date
    Mar 2004
    Location
    West Midlands, United Kingdom
    Posts
    2,631
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, thanks again!

    That appeared to free up the right areas but now they are display directly under the centre blocks. I guess there is something I need to add to those to make them display properly.

    Really appreciate your help

    Mark

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI Mark,

    They were floating ok in this copy I did locally.
    Code:
    <html>
    <head>
    <title>Team Syst3mat!k /// Next Generation Gamers</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" href="templates/style/style.css" />
    <style>
    body {
    margin-bottom: 10px;
    }
    .tdbody {
    		background-color: #2a2a2a;
    }
    .tablewidth {
     width:978px
    }
    * html .tablewidth{width:980px}/* ie broken box model*/
    .tableMain {
     border: 1px solid #000000;
    }
    .tdTop {
     vertical-align: top;
     border-bottom: 1px solid #000;
     display: block;
    }
    .tdnav {
    	   border-bottom: none;
    }
    .tdcopyright {
     height: 20px;
     background: url('http://www.teamsik.net/teamsik/templates/images/footer.jpg');
     text-align: center;
     font: bold 11px arial;
    }
    .tdfooter {
     height: 35px;
     background-color: #111111;
     font: bold 11px arial;
     color: #999999;
    }
    .tdfooterpic {
     background: url('http://www.teamsik.net/teamsik/templates/images/small.jpg') top no-repeat;
     height: 35px;
     background-color: #111111;
     font: bold 11px arial;
     color: #999999;
    }
    .tdnavtext {
    		text-align: right;
    		padding-right: 25px;
    		padding-top: 12px;
     font: bold 11px arial;
     color: #999999;
    }
    .tdnavtext p{width:100%; position:relative;}
    .navtext {
    		text-align: left;
    		position:absolute;
    		top: 0;
    		left: 25px;
     font: bold 11px arial;
     color: #999999;
    }
    a.alt {
     text-decoration: none;
    }
    .over {
     cursor: hand;
     background-color: #4B637C;
    }
    a {
     color: #999999;
     text-decoration: none;
    }
    .menu {
     background-color: #d6d6d6;
     width:136px;
     float: left;
     height:100%;
     margin-right: 4px;
     overflow: visible;
    }
    .menuheader{
     background: url('http://www.teamsik.net/teamsik/templates/images/menu.jpg') top no-repeat;
     font: bold 11px arial;
     color: #111111;
     padding-left:5px;
     width: 136px;
     height: 25px;
     display:block;
    line-height:25px
    }
    .menulink {
    width: 136px;
    height: 25px;
    }
    .menulink a {
     background: url('http://www.teamsik.net/teamsik/templates/images/buttonover.jpg') top no-repeat;
     font: bold 11px arial;
     color: #F9f9f9;
     width: 136px;
     height: 25px;
     display:block;
     text-indent:35px;
     line-height:25px;
    }
    .menulink a:hover {
     background: url('http://www.teamsik.net/teamsik/templates/images/button.jpg') top no-repeat;
     color:#000000;
    }
    #newswrapper{
     float: left;
     width:489px
    }
    .news {
     background-color: #cccccc;
     margin-right: 4px;
     text-align:center;
     margin-bottom: 4px;
    }
    .newsarticle {
     background-color:#cccccc;
     text-align: center;
     font: bold 11px arial;
     color:#999999;
    }
    .newsbar {
     background: url('http://www.teamsik.net/teamsik/templates/images/bar.gif') top no-repeat;
     text-indent:25px;
     width: 485px;
     height: 30px;
     text-align: left;
    	margin-right: 4px;
     font: bold 11px arial;
     color:#999999;
     
    }
    .menubar {
     background: url('http://www.teamsik.net/teamsik/templates/images/menu2.gif') top no-repeat;
     text-indent:25px;
     width: 173px;
     height: 30px;
     text-align: left;
    	margin-right: 4px;
     font: bold 11px arial;
     color:#999999;
      
    }
    .menubar2 {
     background: url('http://www.teamsik.net/teamsik/templates/images/menu2.gif') top no-repeat;
     text-indent:25px;
     width: 173px;
     height: 34px;
     text-align: left;
    	margin-right: 4px;
     font: bold 11px arial;
     color:#999999;
     border-top: 4px solid #2a2a2a;
     
      
    }
    .topicbar {
     background: url('http://www.teamsik.net/teamsik/templates/images/topic.jpg') top no-repeat;
     width: 475px;
     height: 57px;
     text-align: center;
    	margin-right: 4px;
     font: bold 11px arial;
     color:#999999;
    }
    .authorbar {
     background: url('http://www.teamsik.net/teamsik/templates/images/author.jpg') top no-repeat;
     width: 475px;
     height: 24px;
     text-align: center;
    	margin-right: 4px;
     font: bold 11px arial;
     color:#222222;
     margin-bottom: 4px;
    }
    .menu1 {
     background-color: #cccccc;
     width:173px;
     float:left;
     margin-right: 4px;
    }
    .menu2{
     background-color: #cccccc;
     width:174px;
     float: left;
     margin-bottom: 4px;
    }
    .matches {
     width: 172px;
     padding-left:3px;
     }
    .matches a {
     width: 166px;
     text-indent:5px;
     font: 11px arial;
     color:#222222;
     border-top: 1px solid #222222;
     border-bottom: 1px solid #222222;
     padding: 2px;
     margin-bottom: 2px;
     display:block;
    }
    .matches a:hover {
     background-color:#7A7A7A;
    }
    .tableBox {
     margin: 2px;
     margin-left: 4px;
     border-collapse: collapse;
     width: 485px;
    }
    .tdBoxLeft {
     width: 100%;
     height: 30px;
     background: url('http://www.teamsik.net/teamsik/templates/images/bar.jpg');
     vertical-align: top;
    }
    .tdBoxMiddle {
     background: url('http://www.teamsik.net/teamsik/templates/images/boxback.jpg');
    }
    .divBox {
     margin: 5px;
    }
    table.news {
     width: 485px;
     margin-left: auto; 
     margin-right: auto;
     border-collapse: collapse;
    }
    table.news div.headline {
     text-align: center; 
     background: url('http://www.teamsik.net/teamsik/templates/images/headline.jpg');
     padding-top: 5px; 
     padding-bottom: 5px;
    }
    .divContent .table {
     width: 100%;
     border-collapse: collapse;
    }
    </style>
    <body bgcolor=#d9d9d9 leftmargin=0 topmargin=0 marginwidth=0 marginheight=0><table class="tablemain tablewidth" cellpadding="0" cellspacing="0" align="center"><tr><td>
    <table class="tablewidth" border="0" cellpadding="0" cellspacing="0"align="center"><tr><td>
      <table width="980" border="0" cellpadding="0" cellspacing="0"align="center">
    	<tr> 
    	  <td class="tdtop tablewidth" valign="top" background="templates/images/banner.jpg" width="980" height="120"></td>
    	</tr>
    	<tr> 
    	  <td valign="top" class="tdnavtext" background="templates/images/nav.jpg" width="980" height="50"><p>Friday, 
    		  November 05, 2004<span class="navtext">Welcome To TeamSiK.net</span></p></td></td></tr>
    	<td class="tdbody" width="100%" height="500"> <div class="menu"> 
    		<div class="menuheader">Community</div>
    		<div class="menulink"><a href="#">News</a></div>
    		<div class="menulink"><a href="#">Archive</a></div>
    		<div class="menulink"><a href="#">Forums</a></div>
    		<div class="menulink"><a href="#">Users</a></div>
    		<div class="menulink"><a href="#">Events</a></div>
    		<div class="menuheader">Clan</div>
    		<div class="menulink"><a href="#">Members</a></div>
    		<div class="menulink"><a href="#">Matches</a></div>
    		<div class="menulink"><a href="#">Servers</a></div>
    		<div class="menulink"><a href="#">History</a></div>
    		<div class="menulink"><a href="#">Contact</a></div>
    		<div class="menuheader">Other</div>
    		<div class="menulink"><a href="#">Downloads</a></div>
    		<div class="menulink"><a href="#">Pictures</a></div>
    		<div class="menulink"><a href="#">Sponsors</a></div>
    		<div><img src="<A href="http://www.teamsik.net/teamsik/templates/images/low.jpg"></div">http://www.teamsik.net/teamsik/templates/images/low.jpg"></div>
    	  </div>
    	  <div id="newswrapper">
       <div class="news">
    		<table width="485" border="0" valign="top" cellpadding="0" cellspacing="0">
    		  <tr> 
    			<td class="newsbar">Test Post</td>
    		  </tr>
    		  <tr> 
    			<td height="4px" bgcolor="#cccccc"></td>
    		  </tr>
    		  <tr> </tr>
    		  <tr> 
    			<td class="authorbar">Mark</td>
    		  </tr>
    		  <tr> 
    			<td height="4px" bgcolor="#cccccc"></td>
    		  </tr>
    		  <tr> 
    			<td class="topicbar"></td>
    		  </tr>
    		  <tr> 
    			<td class="newsarticle">Test PostTest Post!!! <br /> <br />
    			  Test PostTest Post!!! <br /> <br />
    			  Test PostTest Post!!!</td>
    		  </tr>
    		</table>
    	  </div>
    	  <div class="news">
    		<table width="485" border="0" valign="top" cellpadding="0" cellspacing="0">
    		  <tr> 
    			<td class="newsbar">Test Post</td>
    		  </tr>
    		  <tr> 
    			<td height="4px" bgcolor="#cccccc"></td>
    		  </tr>
    		  <tr> </tr>
    		  <tr> 
    			<td class="authorbar">Mark</td>
    		  </tr>
    		  <tr> 
    			<td height="4px" bgcolor="#cccccc"></td>
    		  </tr>
    		  <tr> 
    			<td class="topicbar"></td>
    		  </tr>
    		  <tr> 
    			<td class="newsarticle">Test PostTest Post!!! <br /> <br />
    			  Test PostTest Post!!! <br /> <br />
    			  Test PostTest Post!!!</td>
    		  </tr>
    		</table>
    	  </div>
    	  </div>
       
       
       <div class="menu1"> 
    		<table width="173" border="0" align="center" valign="top" cellpadding="0" cellspacing="0">
    		  <tr> 
    			<td class="menubar">Upcoming Matches</td>
    		  </tr>
    		  <tr> 
    			<td height="2px" bgcolor="#cccccc"></td>
    		  </tr>
    		  <tr> 
    			<td class="matches"><a href="#"><img src="http://www.teamsik.net/teamsik/templ...ges/bullet.gif" border="0">&nbsp;SystemElite</a></td>
    		  </tr>
    		  <tr> 
    			<td class="matches"><a href="#"><img src="http://www.teamsik.net/teamsik/templ...ges/bullet.gif" border="0">&nbsp;Gamers 
    			  Legion</a></td>
    		  </tr>
    		  <tr> 
    			<td class="matches"><a href="#"><img src="http://www.teamsik.net/teamsik/templ...ges/bullet.gif" border="0">&nbsp;Gamers 
    			  Legion</a></td>
    		  </tr>
    		  <tr> 
    			<td class="matches"><a href="#"><img src="http://www.teamsik.net/teamsik/templ...ges/bullet.gif" border="0">&nbsp;Gamers 
    			  Legion</a></td>
    		  </tr>
    		  <tr> 
    			<td class="matches"><a href="#"><img src="http://www.teamsik.net/teamsik/templ...ges/bullet.gif" border="0">&nbsp;Gamers 
    			  Legion</a></td>
    		  </tr>
    		  <tr> 
    			<td class="menubar2" height="30">Latest Threads</td>
    		  </tr>
    		  <tr> 
    			<td height="2px" bgcolor="#cccccc"></td>
    		  </tr>
    		  <tr> 
    			<td width="174" class="matches"><a href="#"><img src="http://www.teamsik.net/teamsik/templ...ges/bullet.gif" border="0">&nbsp;Thread 
    			  1</a></td>
    		  </tr>
    		  <tr> 
    			<td width="174" class="matches"><a href="#"><img src="http://www.teamsik.net/teamsik/templ...ges/bullet.gif" border="0">&nbsp;Thread 
    			  2</a></td>
    		  </tr>
    		  <tr> 
    			<td width="174" class="matches"><a href="#"><img src="http://www.teamsik.net/teamsik/templ...ges/bullet.gif" border="0">&nbsp;Thread 
    			  3</a></td>
    		  </tr>
    		  <tr> 
    			<td width="174" class="matches"><a href="#"><img src="http://www.teamsik.net/teamsik/templ...ges/bullet.gif" border="0">&nbsp;Thread 
    			  4</a></td>
    		  </tr>
    		  <tr> 
    			<td width="174" class="matches"><a href="#"><img src="http://www.teamsik.net/teamsik/templ...ges/bullet.gif" border="0">&nbsp;Thread 
    			  5</a></td>
    		  </tr>
    		</table>
    	  </div>
    	  <div class="menu2"> 
    		<table width="174" border="0" align="center" valign="top" cellpadding="0" cellspacing="0">
    		  <tr> 
    			<td class="menubar">User Menu</td>
    		  </tr>
    		  <tr> 
    			<td width="174" class="matches">Login Here</td>
    		  </tr>
    		</table>
    	  </div>
    	  <div class="menu2"> 
    		<table width="174" border="0" align="center" valign="top" cellpadding="0" cellspacing="0">
    		  <tr> 
    			<td class="menubar">Sponsors</td>
    		  </tr>
    		  <tr> 
    			<td width="174" class="matches">Sponsors</td>
    		  </tr>
    		</table>
    	  </div></td>
    	<tr> 
    	  <td class="tdcopyright" background="templates/images/footer.jpg" width="980" height="20" align="center"> 
    		2004 Team Syst3mat!k All Rights Reserved</td>
    	</tr>
    	<tr> 
    	  <td class="tdfooter" width="980" height="35" align="center"> <table width="100%" cellspacing="0" cellpadding="0" class="tablemain">
    		  <tr> 
    			<td width="475" valign="middle" align="right" class="tdfooter"><a href="#">Home</a> <font color="#ffffff">
    			  &nbsp;|&nbsp;&nbsp;<a href="#">Disclaimer</a>&nbsp;</td>
    			<td width="30" valign="middle" align="center" class="tdfooterpic"></td>
    			<td width="475" valign="middle" align="left" class="tdfooter">&nbsp;<a href="#">Support</a> 
    			  <font color="#ffffff">&nbsp;|&nbsp;</font> <a href="#">Forums</a></td>
    		  </tr>
    		</table></td>
    	</tr>
      </table></td></tr>
    </table>
    </body>
    </html>
    I will have a look at your code later to see what's different.

    Paul

  18. #18
    SitePoint Wizard mark_W's Avatar
    Join Date
    Mar 2004
    Location
    West Midlands, United Kingdom
    Posts
    2,631
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok Paul, Thanks a lot...... This thread is getting long! lol

  19. #19
    SitePoint Zealot Tech9's Avatar
    Join Date
    Oct 2004
    Location
    Arlington, TX
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah! thx paul you are a big help to helping mark and i get my site up i cant wait till its done! thx paul and keep up the good work

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you haven't worked it out yet the problem is that you have added an extra newswrapper div where it shoudn't be. (if you look at the code I posted you will see that it wasn't there originally so you must have added it.)
    Code:
       <div id="newswrapper">
    	  <div class="news"> 
    		<table width="485" border="0" valign="top" cellpadding="0" cellspacing="0">
    		  <tr> 
    			<td class="newsbar">Test Post</td>
    		  </tr>
    		  <tr> 
    			<td height="4px" bgcolor="#cccccc"></td>
    		  </tr>
    		  <tr> </tr>
    		  <tr> 
    			<td class="authorbar">Mark</td>
    		  </tr>
    		  <tr> 
    			<td height="4px" bgcolor="#cccccc"></td>
    		  </tr>
    		  <tr> 
    			<td class="topicbar"></td>
    		  </tr>
    		  <tr> 
    			<td class="newsarticle">Test PostTest Post!!! <br /> <br />
    			  Test PostTest Post!!! <br /> <br />
    			  Test PostTest Post!!!</td>
    		  </tr>
    		</table>
    	  </div>
     <!--	 <div id="newswrapper">	take this out --> 
    		<div class="news"> 
    		  <table width="485" border="0" valign="top" cellpadding="0" cellspacing="0">
    			<tr> 
    			  <td class="newsbar">Test Post</td>
    			</tr>
    			<tr> 
    			  <td height="4px" bgcolor="#cccccc"></td>
    			</tr>
    			<tr> </tr>
    			<tr> 
    			  <td class="authorbar">Mark</td>
    			</tr>
    			<tr> 
    			  <td height="4px" bgcolor="#cccccc"></td>
    			</tr>
    			<tr> 
    			  <td class="topicbar"></td>
    			</tr>
    			<tr> 
    			  <td class="newsarticle">Test PostTest Post!!! <br /> <br />
    				Test PostTest Post!!! <br /> <br />
    				Test PostTest Post!!!</td>
    			</tr>
    		  </table>
    		</div>
    	  </div>
    That should sort it out.

    Paul

    BTW you have some tags that are out of sync so you will need to check through and match everything up.

  21. #21
    SitePoint Wizard mark_W's Avatar
    Join Date
    Mar 2004
    Location
    West Midlands, United Kingdom
    Posts
    2,631
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, Sorry for causing you more trouble!

    I accidently added <div id="newswrapper"> inside a php while loop so it outputted it more than once!

    Also sorted now though so thanks!

    Your awesome!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •