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; }
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.
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!!!
..it didn't seem that messy you can get it all by going to: http://www.saturn.v21hosting.co.uk/style2.css Edit: I think i've tided some of it up >.>
/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>
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
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
