Annoying thing happening in CSS/XHTML

Discussion in 'Web Design & Coding' started by S Walch, Sep 27, 2004.

  1. S Walch

    S Walch MAME 0.64 :) VIP Member

    Joined:
    Jun 2, 2003
    Messages:
    1,026
    Likes Received:
    14
    Location:
    Manchester
    http://www.saturn.v21hosting.co.uk/website.htm

    Just hover over one of the links (home, model 1, model 2, 50/60hz switch),you'll notice that the background turns black over the box...but not completely to the top and bottom borders (there's just a bit of grey there)

    No matter what I do in CSS or the XHTML, I can never seem to get it to go fully black withought the grey areas. Any ideas what could be the probs?

    HTML:
    <div id="navigation">
    <table class="navi">
    <tr>
    <td class="navi"><a class="navi" href="website.htm">Home</a></td>
    <td class="navi"><a class="navi" href="website.htm">Model 1</a></td>	
    <td class="navi"><a class="navi" href="website.htm">Model 2</a></td>
    <td class="navi"><a class="navi" href="website.htm">50/60 Hz Switch</a></td>
    <td class="navi"><a class="navi" href="website.htm">Mod Chip Instilation</a></td>			
    </tr>
    </table>
    </div>
    CSS:
    Code:
    #navigation {
    margin: 0;
    background-color: #484848;
    padding: 0;
    width: 650px;
    height: 44px;
    }
     
     
     
    a.navi:link {
    color: white; 
    padding: 0 2px;
    text-decoration: none;
    margin: 0;
    }
     
    a.navi:hover {
    background-color: black;
    margin: 0;
    padding: 45px 2px 45px ;
    }
     
    a.navi:visited {
    padding: 45px 2px 45px;
    color: white; 
    text-decoration: none;
    margin: 0;
    }
     
    a.navi:active {
    padding: 45px 2px 45px;
    color: white; 
    text-decoration: none;
    margin: 0;
    }
     
    table.navi {
    float: right;
    margin: 0;
    padding: 0;
    }
     
    td.navi {
    margin: 0;
    padding: 10px 0;
    }
     
    S Walch, Sep 27, 2004
    #1
    1. Advertisements

  2. S Walch

    RD2DG I smell a bump! VIP Member

    Joined:
    Oct 11, 2003
    Messages:
    549
    Likes Received:
    11
    Location:
    Madison
    What browser/version are you using? it looks fine here with firefox v1.0. Unless I dont know what you are talking about but it looks really neat.
     
    Last edited: Sep 27, 2004
    RD2DG, Sep 27, 2004
    #2
    1. Advertisements

  3. S Walch

    S Walch MAME 0.64 :) VIP Member

    Joined:
    Jun 2, 2003
    Messages:
    1,026
    Likes Received:
    14
    Location:
    Manchester
    Seems to be the same in both opera and IE.

    I will get FF and see what it looks like in there.
     
    S Walch, Sep 27, 2004
    #3
  4. S Walch

    Phil VIP Member

    Joined:
    Dec 20, 2003
    Messages:
    959
    Likes Received:
    14
    Location:
    Ontario, Canada
    Yea I'm using FF v1.0 and it looks fine as well.
     
    Phil, Sep 27, 2004
    #4
  5. S Walch

    RD2DG I smell a bump! VIP Member

    Joined:
    Oct 11, 2003
    Messages:
    549
    Likes Received:
    11
    Location:
    Madison
    Try to set the padding and or spacing to 0 and then add a nbsp before the links.
     
    RD2DG, Sep 27, 2004
    #5
  6. S Walch

    S Walch MAME 0.64 :) VIP Member

    Joined:
    Jun 2, 2003
    Messages:
    1,026
    Likes Received:
    14
    Location:
    Manchester
    Right, in FF, does everybody else see that the black goes OVER the grey?

    if so, then I have to decrease the padding somewhere...

    Edit: Right, I have got it so it looks pretty much excelent in FF.

    But it still looks like this in IE and opera:

    As you should notice, in opera it's almost got it to the full height of the grey bit, still a tiny bit of black there.

    But IE there's quite a bit of grey there at the bottom, but If I remove the height: 44px; in the CSS file, that goes bu tthen it looks wrong everywhere else..

    **** that IE!!!
     

    Attached Files:

    • opera.PNG
      opera.PNG
      File size:
      5.1 KB
      Views:
      341
    • ie.PNG
      ie.PNG
      File size:
      4.4 KB
      Views:
      377
    Last edited: Sep 27, 2004
    S Walch, Sep 27, 2004
    #6
  7. S Walch

    James Photojournalist

    Joined:
    Dec 24, 2002
    Messages:
    6,662
    Likes Received:
    35
    That is some messy CSS right there. I'm going over it. I'll see if I can fix it or not. :|
     
    James, Sep 27, 2004
    #7
  8. S Walch

    S Walch MAME 0.64 :) VIP Member

    Joined:
    Jun 2, 2003
    Messages:
    1,026
    Likes Received:
    14
    Location:
    Manchester
    Last edited: Sep 28, 2004
    S Walch, Sep 27, 2004
    #8
  9. S Walch

    S Walch MAME 0.64 :) VIP Member

    Joined:
    Jun 2, 2003
    Messages:
    1,026
    Likes Received:
    14
    Location:
    Manchester
    /me boosts the topic

    Well, it's looking alright now, looks better in FF than in Opera/IE, but I guess they still don't support CSS 2.0 properly :)

    Anyway, if everybody would like to take a look at

    http://www.saturn.v21hosting.co.uk/uk_us.htm

    and tell me why FF displays the List far closer to the left than opera/ie does?

    I couldn't find anything wrong in the CSS, but here it is:

    Code:
    body {
    padding: 0;
    background: url('bgcolor.jpg') repeat-y 50% 0;
    margin: 0;
    text-align: center;
    font: 100% Georgia, "Times New Roman", serif;
    }
    
    p {
    color: #606060;
    padding: 0 20px;
    }
    
    #list {
    text-align: left;
    margin: 0 auto;
    padding: 0 30px;
    }
    
    ul {
    color: #606060;
    padding: 0 20px;
    }
    
    li {
    color: #606060;
    padding: 0;
    }
    
    h1.title {
    color: #2F4F4F;
    font: 125% Georgia, "Times New Roman", serif;
    text-align: center;
    padding: 10px 0 0;
    }
    
    h2.title {
    color: #2F4F4F;
    font: 115% Georgia, "Times New Roman", serif;
    text-align: left;
    padding: 0 20px;
    }
    
    
    #content {
    margin: 0 auto;
    text-align: left;
    width: 651px;
    padding: 0 20px;
    }
    
    #top {
    padding: 50px 0;
    background-color: red;
    margin: 0 auto;
    width: 649px;
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
    }
    
    #navigation {
    background-color: #484848;
    padding: 0;
    height: 43px;
    margin: 0 auto;
    align: center;
    width: 649px;
    border-left: 1px solid white;
    border-right: 1px solid white;
    }
    
    #colleft {
    width: 450px;
    float: left;
    background-color: #DEB887;
    height: 100%;
    border-left: 1px solid white;
    }
    
    #colright {
    width: 200px;
    float: right;
    height: 100%;
    }
    
    a.navi:link {
    color: white; 
    padding: 12px 2px 13px;
    text-decoration: none;
    margin: 0;
    }
    
    a.navi:hover {
    padding: 12px 2px 13px;
    margin: 0;
    background-color: black;
    }
    
    a.navi:visited {
    padding: 12px 2px 14px;
    color: white; 
    text-decoration: none;
    margin: 0;
    }
    
    a.navi:active {
    padding: 12px 2px 14px;
    color: white; 
    text-decoration: none;
    margin: 0;
    }
    
    table.navi {
    float: right;
    margin: 0;
    padding: 0;
    width: 500 px;
    }
    
    td.navi {
    margin: 0;
    padding: 10px 0;
    }
    
    a.right:link {
    font-size: 100%;
    text-decoration: underline;
    color: black;
    }
    
    a.right:hover {
    font-weight: 600;
    text-decoration: none;
    colour: black
    }
    
    a.right:active {
    color: black;
    text-decoration: none;
    }
    
    a.right:visited {
    color: black;
    text-decoration: underline;
    }
    
    td.right {
    padding: 20px;
    margin: 0 auto;
    height: 30px;
    }
    
    #content p {
    padding: 0 20px 5px;
    }
    
    td.switch {
    height: 30px;
    width: 30px;
    background-color: red;
    }
    
    td.switch2 {
    height: 30px;
    width: 30px;
    background-color: blue;
    }
    
    td.switch3 {
    height: 30px;
    width: 30px;
    background-color: yellow;
    }
    
    #switch {
    text-align: left;
    padding: 0 30px
    }
    
    p.bottom {
    padding: 0 0 30px;
    }
    
    
    
    Code:
    <!DOCTYPE html PUBLIC
    "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    
    <title>Sega Saturn Modification</title>
    
    <link rel="stylesheet" type="text/css"
    href="style2.css" />
    
    </head>
    <body>
    	
    <div id="wrapper">
    
    <div id="top">
    
    </div>
    
    	<div id="content">
    
    <div id="navigation">
    	<table class="navi">
    		<tr>
    		<td class="navi"><a class="navi" href="website.htm">Home</a></td>
    		<td class="navi"><a class="navi" href="model_1.htm">Model 1</a></td>
    		<td class="navi"><a class="navi" href="model_2.htm">Model 2</a></td>
    		<td class="navi"><a class="navi" href="switch.htm">50/60 Hz switch</a></td>
    		<td class="navi"><a class="navi" href="mod_chip.htm">Mod Chip 				
    
    		Instilation</a></td>
    		</tr>
    
    	</table>
    
    </div>
    				<div id="colleft">
    
    				<h1 class="title">Model 1 Sega Saturn UK-US</h1>
    
    				<p> Before you can install your country switch you need to 		
    
    				<a href="dismantle_1">dismantle your Sega Saturn</a></p>
    
    				<p>After that you can start with the Instructions below:</p>
    
    				<h2 class="title">Installing the Country Switch</h2>
    				<p> You will need: </p>
    
    				<div id="list">
    
    					<ul>
      				<li> 15 WATT soldering Iron (flat tipped is best)	</li>
      				<li> Solder (60/40)					</li>
      				<li> 9 Ribbon or PCS wires, 8" in length		</li>
      				<li> 1 SPDT switch					</li>
      				<li> 1 DPDT Switch					</li>
      				<li> Damp Sponge					</li>
      				<li> Pliers 						</li>
      				<li> Tape						</li>
    					</ul>
    
    				</div>
    				
    				<p>After <a href="dismantle_1">Dismantling your Sega Saturn</a> 	
    
    				you can remove the motherboard.</p>
    
    				<p>Now you need to locate the jumpers named JP 10 - 13 
    				which will be at the front near the ribbon cable. The jumpers 		
    
    				will look like the picture shown in the right hand column.</p>
    
    
    				<p>When you compare this to a US Saturn of the same type 
    				you will notice only one difference, shown in the picture in 		
    
    				the right hand column:</p>
    
    				<p>On a US Saturn, the two jumpers on JP 13 are connected, 
    				where as on the UK Saturn, the two jumpers on JP 12 are 		
    
    				connected. So to play US games on your UK Saturn you 
    				need to install a switch to toggle between JP 12 being 
    				connected and JP 13 being connected. </p>
    
    				<p>First of all, you will have to cut the copper wire that 
    				is connecting the two jumpers of JP 12. After doing that it'll 		
    
    				look like the picture in the right hand column:</p>
    
    				<p>Now we need to connect the SPDT switch to the right jumpers 
    				on the motherboard.</p>
    
    				<p><strong>SPDT Switch: </strong></p>
    				<div id="switch">
    				<table>
      					<tr> 
    					    <td class="switch"></td>
    					</tr>
      					<tr> 
    					    <td class="switch2"></td>
    					</tr>
          					<tr> 
    					    <td class="switch3"></td>
    					</tr>
    				</table>
    				</div>
    
    				<p>This shows where the ports of the SPDT switch should be 		
    
    				connected to using the PCS wire, as shown to the right:</p>
    
    
    				<p>Be very carefull when soldering on the PCS wire. First, 
    				heat the JP port up a bit and then put on the solder using the 		
    
    				soldering iron on top of the solder to join to the JP port. </p>
    
    				<p>After finishing this, try the Saturn with a 				
    
    		normal, U.K game and it should allow the CD to play. 
    				Now flip the switch. If it doesn't allow the UK CD to play, 		
    
    				then take it out and put in a US CD. If it allows the US CD 		
    
    				to play you now have a modified saturn :)</p>
    				<br />
    				</div>	
    
    	<div id="colright">
    		<table>
    			<tr>
    				<td class="right">	
    				<a class="right"href="dismantle_2.htm">
    				Dismantle your <br />
    				Sega Saturn</a>
    				</td>
    			</tr>
    			<tr>
    				<td class="right">	
    				<a class="right" href="pal_2.htm">
    				PAL Country Switches</a>
    				
    				</td>
    			</tr>
    			<tr>
    				<td class="right">
    				<a class="right" href="usa_2.htm">
    				USA Country Switches</a>
    				
    				</td>
    			</tr>
    			<tr>
    				<td class="right">
    				<a class="right" href="jap_2.htm">
    				JAP Country Switches</a>
    				</td>
    			</tr>
    		</table>
    	</div>
    			</div>
    </div>
    </body>
    </html>
    
     
    S Walch, Oct 1, 2004
    #9
  10. S Walch

    SwitCh \\ ├črainstorm \\ VIP Member

    Joined:
    Jan 29, 2004
    Messages:
    225
    Likes Received:
    4
    Location:
    Toronto Canada
    Results From CSS Validator

    Your XHTML is perfectly fine. Out of laziness I saved your .css file to my desktop and validated it with W3's CSS Validator.

    Results:
    Line: 0 Context : #navigation Property align doesn't exist : center
    Line: 0 Context : table.navi Invalid number : widthonly 0 can be a length. You must put an unit after your number : 500 px
    Line: 0 Context : a.right:hover Property colour doesn't exist : black
     
    Last edited: Oct 8, 2004
    SwitCh, Oct 8, 2004
    #10
  11. S Walch

    Fenis-Wolf VIP Member

    Joined:
    Apr 30, 2003
    Messages:
    2,951
    Likes Received:
    35
    Location:
    Ann Arbor, Mi
    Looks fine in Opera?
     
    Fenis-Wolf, Oct 8, 2004
    #11
  12. S Walch

    S Walch MAME 0.64 :) VIP Member

    Joined:
    Jun 2, 2003
    Messages:
    1,026
    Likes Received:
    14
    Location:
    Manchester
    Doesn't matter now - I got it fixed :)

    Edit: Although I would like this thread to remain open incase I have anything else I wish to add :)
     
    S Walch, Oct 13, 2004
    #12
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.