Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    May 2005
    Posts
    78
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Help with CSS and tables

    Code:
    <table border=0 width="100%">
    	<tr>
    		<th rowspan=3 valign=top bgcolor="#555555">
    			<span id="vertnav">
    				<ul id="vertnavlist">
    				<li id="vertbackone"><a href="../characters.html" id="vertback1">Back to Character Information</a></li>
    				<li id="vertactive"><a href="bernard.html" id="vertcurrent">Bernard</a></li>
    				<li><a href="charley.html">Charley</a></li>
    				<li><a href="linda.html">Linda Loman</a></li>
    				<li><a href="biff.html">Biff Loman</a></li>
    				<li><a href="harold.html">Harold Loman</a></li>
    				<li><a href="willy.html">Willy Loman</a></li>
    				<li><a href="ben.html">Benjamin Loman</a></li>
    				<li><a href="woman.html">"The Woman"</a></li>
    				<li><a href="howard.html">Howard Wagner</a></li>
    				</ul>
    			</span>
    		</th>
    		<td width="15%" align=center><b>Bernard</b><br><img src="../pictures/bernard.jpg" alt="Bernard"></td>
    		<td width="85%">CHARACTER INFO</td>
    	</tr>
    	<tr>
    		<td><br></td>
    	</tr>
    	<tr>
    		<td width="15%" align=center><b>Played by David Chandler</b><br><img src="../pictures/davidchandler.jpg" alt="David Chandler"></td>
    		<td width="85%">ACTOR INFO</td>
    	</tr>
    </table>
    here is the CSS for it:
    Code:
    #vertnavlist
    {
    padding: 0;
    margin-left: 0;
    font: bold 12px Georgia, Verdana, sans-serif;
    background: #555;
    width: 13em;
    }
    
    #vertnavlist li
    {
    list-style: none;
    margin: 0;
    border-top: 1px solid #555;
    text-align: left;
    }
    
    #vertnavlist li a
    {
    display: block;
    padding: 0.25em 0.5em 0.25em 0.75em;
    border-left: 1em solid #333;
    background: #222;
    text-decoration: none;
    }
    
    #vertnavlist li a:link { color: #fff; }
    #vertnavlist li a:visited { color: #fff; }
    
    #vertnavlist li a:hover
    {
    border-color: #666;
    color: #FFF;
    background: #000;
    }
    
    #vertnavlist li a#vertcurrent
    {
    border-color: #555;
    color: #FFF;
    background: #555;
    }
    
    #vertnavlist li #vertback1
    {
    font: bold 12px Georgia, Verdana, sans-serif;
    color: white;
    background: #000;
    border-color: #000;
    }
    
    #vertnavlist li a:hover#vertback1
    {
    text-decoration:underline;
    }
    Here's a screenshot of it:


    I want to take out the border above the table on the vertical gray column. I want it to be 1 pixel, like the other borders. I would prefer to do this in the CSS file, since I have it on 10 or so different pages, but I could change them all manually if I have to. Thanks in advance for any help.

    If you have any suggestions on how to make it look better, that would be nice too

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Browsers give default margins and/or padding to list elements depending upon browser. Have you removed the list’s default top margin? I infer that it’s a margin instead of a border because the area below the list appears to be the same color as the “border” and you don’t seem to have a border that large specified.

    The browsers also may not like it that you have a ul element with a span element as its parent since that’s invalid in (X)HTML. If you need a generic element to surround a list element, use a div.

    If those above things are not the cause of the problem, then it would be useful to see more code (preferably all of it) and a list of what browsers you see the problem in.

    Finally, and on another note, I simply must say that tables for layout is bad practice and using deprecated presentational attributes such as align, border, valign, and width—when CSS should be used instead—is also bad practice.
    Last edited by Arbitrator; 12-23-2006 at 09:51 PM. Reason: Fixed grammatical error.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    New Coder
    Join Date
    May 2005
    Posts
    78
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Ok thanks a lot, it was the margin-top. I specified the margin-left, but not the margin-top. I always write with bad practice, sorry. Some things I can't remember how to do in CSS, and some things I can't remember how to do in HTML, so I mix and match. None of my sites or pages get popular enough that anyone would want to edit them, so as long as it works it doesn't matter. Although I guess it does make it easier for people like you who want to help.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,641
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    Quote Originally Posted by ikilledsanta View Post
    Although I guess it does make it easier for people like you who want to help.
    No, creating websites with valid and semantic code, styled with CSS also makes it easier for you to maintain and edit the pages afterwards.
    And if you're interested, read the article about why tables for layout is stupid.

  • #5
    New Coder
    Join Date
    May 2005
    Posts
    78
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Rather than make another topic, I'm gonna post another question I just ran across here. I remembered something I saw like last year...it was a link that faded into a color. So I searched and found this site: http://www.phpbb.com/phpBB/viewtopic.php?t=126192

    It works beautifully, but I want it to fade the background color of the link. Here's the links code:

    Code:
    <div id="navcontainer">
    <ul id="navlist">
    <li id="active"><a href="home.html" id="current">Home</a>
    <li><a href="playwright.html">About the Playwright</a></li>
    <li><a href="acknowledgements.html">Acknowledgments</a></li>
    <li><a href="characters.html">Character Information</a></li>
    <li><a href="directions.html">Directions</a></li>
    <li><a href="donate.html">Donate</a></li>
    <li><a href="schedule.html">Schedule</a></li>
    <li><a href="tickets.html">Ticket Sales</a></li>
    </ul>
    </div>
    Up a little bit is a screenshot of my site...its the topmost set of links, they are horizontal. When it hovers, I want it to fade from #222 to #777. This is much too complicated of Javascript for me, I've never tried to make anything like this before.


  •  

    Posting Permissions

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