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 7 of 7
  1. #1
    New Coder
    Join Date
    May 2005
    Posts
    78
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Table looks A LOT different in IE

    Here is the HTML for the table.

    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%" id="charinfo">Bernard is Charley’s son and an important, successful lawyer. Although Willy used to mock Bernard for studying hard, Bernard always loved Willy’s sons dearly and regarded Biff as a hero. Bernard’s success is difficult for Willy to accept because his own sons’ lives do not measure up.</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%" id="charinfo">David was born in the Bronx. His father, Leon, was a former vaudevillian actor and his mother, Emily, was a radio singer. His family moved frequently and eventually settled in Waukegan, Illinois where he went to high school. The constant moving made him the new kid on the block and forced him to become "a chameleon" to blend in his new settings. He studied drama at the University of Illinois and at Northwestern. He then went to study acting in New York and got constant work in musicals. He slowly pushed to get acting roles in tv and movies, but was frequently overlooked because of his musical roots.</td>
    	</tr>
    </table>
    and here is the CSS...
    Code:
    #vertnavlist
    {
    padding: 0;
    margin: 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;
    text-align: center;
    border-left: 0;
    }
    
    #vertnavlist li a:hover#vertback1
    {
    text-decoration: none;
    background: #555;
    }
    Here are 2 screenshots of the table.
    This one is in Firefox, the good one (don't worry about the red writing in this one, I already fixed that thanks to Arbitrator's help):

    And this one is in IE (messed up one):


    I highlighted something I think might be good news. That might mean that there is some sort of space there that things can be put in, and usually that means you can remove it.

    Normally, I wouldn't mind it not looking as good in IE, as long as it worked, but for the competition they are judging with "multiple" browsers.
    Last edited by ikilledsanta; 12-27-2006 at 08:48 AM. Reason: Wrong CSS...

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,865
    Thanks
    6
    Thanked 1,029 Times in 1,002 Posts
    Since the HTML and CSS you posted is just a truncation (page doesn't show the issue because the relevant CSS is missing) I can't really give any solid advice, only guess what it might be:

    My experience showed that IE needs a width applied to the list items if the list is floated (or something like that - hope my memory doesn't leave me in the lurch), otherwise they cause a line break which results in these gaps.

    And as someone else in the other post mentioned already you can't have the list within a span element as this is an inline element and inline elements can't contain block elements. Just a side note.

  • #3
    New Coder
    Join Date
    May 2005
    Posts
    78
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Oh crap, I'm sorry, I pasted the wrong CSS! Here is the new one (I also edited the original mistake):

    Code:
    #vertnavlist
    {
    padding: 0;
    spacing: 0;
    margin: 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;
    text-align: center;
    border-left: 0;
    }
    
    #vertnavlist li a:hover#vertback1
    {
    text-decoration: none;
    background: #555;
    }
    I tried the span/div thing you said, but got no difference. I have absolutely no idea what the block stuff is you're talking about, I just always use <span> instead of <div> because <span> doesn't make you go to a new line, like a <br>. Thanks.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Okay simply put, its illegal to put the list in the span so don't do it.

    A block level element is any element that makes you go to a new line.

    To get block level elements on the same line you need to float them.

    I suggest you go read some more tutorials so you can understand the terminology otherwise everything we tell you will make absolutely no sense to you.

    IE has always had problems with extra space in li's and links.

    Luckily Microsoft created conditional comments that allows you to feed it certain html that only IE sees. Other browsers treat the comments as normal html comments.

    Add this after your main stylesheet NOT in it.
    Code:
    <!--[if lte IE 7]>
    <style type="text/css">
    #vertnavlist li, #vertnavlist a {
    height:1%;
    }
    </style>
    <![endif]-->
    Conditional Comments

    You should also read the link in my sig titled "Why Tables for Layout is Stupid?".
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    May 2005
    Posts
    78
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you! That worked amazingly well. I tried to nominate you...does that little scale thing on the bottom left of your post do that?

    I read that tables bashing thing, and it said that the reasons not to use tables are:

    * make your pages load faster
    * lower your hosting costs
    * make your redesigns more efficient and less expensive
    * help you maintain visual consistency throughout your sites
    * get you better search engine results
    * make your sites more accessible to all viewers and user agents
    * and give you a competitive edge (that is, job security) as more of the world moves to using Web standards.

    My pages load faster than I can blink. A tiny bit of data more won't be noticeable. I'm not paying for a host, so it doesn't lower the costs. The visual consistency is already constant, I'm not looking for search engine results, and my sites are accessible to all browsers I've tested on (at least, after your help). As for job security, it's not my job. Redesigns are addressed below.

    Now, if I were to convert every one of my files to divs, it would take forever, and it would look the same. Not only that, but I'm certain I would run into problems on the way. I'm sure that it's great to do for anyone who wants to be an web design expert, but I don't even plan to be doing this in a year.

    Also, Google still uses tables. If Google uses it, why can't I?

    Tables are just so easy!
    Last edited by ikilledsanta; 12-27-2006 at 09:32 AM. Reason: forgot something

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,865
    Thanks
    6
    Thanked 1,029 Times in 1,002 Posts
    Sure, go ahead. It's not like the W3C police is coming to get ya'.
    But if you wanna go with time you better learn this stuff as XHTML 2 and CSS 3 are just around the corner and waiting to be released. And with new media devices being able to access the internet coming out every day your pages might not work or look like crap some time in future.

    But if you don't care feel free to use your very own markup language. Nobody's gonna stop you.

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Google likely still uses tables for the same reason you mentioned. Web design is not something they specialize in. They focus their work on other projects. Since web design isn't something they do it doesn't matter what they do. I was telling you because your page could be done with a lot less code. To nominate someone there is a link at the top of the page and there is one in my sig, just click them.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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