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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 22
  1. #1
    New Coder
    Join Date
    Nov 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet explorer display problem

    Code:
    table.main{
    	margin-left:auto;
    	margin-right:auto;
    	width:780;
    	border-width:0;
    	border-spacing:0;
    }
    I figured setting both border width and border spacing to 0 would give gapless transitions between my table cells in both internet explorer (7) and firefox.

    But lone behold Internet explorer fails the day and displays it with huge chunky gaps between each and every cell. Is there another property I should be defining or some way round this?



    Also why does internet explorer render small text using the following code so massively. I was under the impression that small meant small.

    Code:
    p{font-size:small;}
    Last edited by aatwo; 02-06-2007 at 08:10 PM.

  • #2
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    padding: 0px;

    Maybe?

    Oh, and do you have styles for the TDs?

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #3
    New Coder
    Join Date
    Feb 2007
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Like the other guy said, you need to do the same for TD and TR. Stupid i know, but some reason, its the only way IE will allow you to completely make the spacing go...

    Code:
    table.main {
    	border-width: 0px 0px 0px 0px;
    	border-spacing: 0px;
    	border-style: none none none none;
    }
    table.main th {
    	border-width: 0px 0px 0px 0px;
    	padding: 0px 0px 0px 0px;
    	border-style: none none none none;
    }
    table.main td {
    	border-width: 0px 0px 0px 0px;
    	padding: 0px 0px 0px 0px;
    	border-style: none none none none;
    }

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    I would be surprised if this works in IE.

    You cannot control the spacing between cells through the border-spacing property of css. As of IE7 it still hasn't been adopted.

    On the other hand the old way using the HTML cellspacing attribute still works.
    Code:
    <table cellspacing="0">...</table>

  • #5
    New Coder
    Join Date
    Nov 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah ok I understand what must be done now. It just seems more intuitive that anything defined for the table would be inherited by all the sub elements such as td and tr.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello aatwo,
    should you really be using tables?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New Coder
    Join Date
    Nov 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't know should I not be? Personally I do not see any other way to organize my web page as well as tables allow.

    What alternatives are there?

  • #8
    Regular Coder feras_wilson's Avatar
    Join Date
    Jul 2005
    Location
    Sweden
    Posts
    129
    Thanks
    1
    Thanked 0 Times in 0 Posts

    More More

    Search in the internet!
    Exp:
    PHP
    .NET

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by aatwo View Post
    I don't know should I not be? Personally I do not see any other way to organize my web page as well as tables allow.

    What alternatives are there?

    First, check out the link about tables in my sig below.
    Then give us a link to your site, or at least the code for it. I know someone here can show you how to do your site with floated divs instead of tables.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    New Coder
    Join Date
    Nov 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I was in fact reading through several of the links residing in your signature before reading your latest post, Excavator, how ever this all seems to be quite sketchy in my eyes. I begun the evening intent on redesigning my website and the hole has been getting deeper and deeper as I have discovered more and more flaws with my old design. To be honest I share the same sentiment as the character shown in this slide show explaining all about why tables are bad.

    http://www.hotdesign.com/seybold/14transitional.html

    Here is my current website.

    http://www.aatwo.com/index.html

    the style sheet is located at the following web address.

    http://www.aatwo.com/style.css

    Please bear in mind this is my first attempt at a style sheet.

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Try this for a tableless start:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>aatwo.com</title>
    <style type="text/css">
    html, body {
    	text-align: center;
    }
    * {
    	margin: 0;
    	padding: 0;
    }
    #wrapper {
    	width: 780px;
    	margin: 0 auto;
    }
    #header {
    	width: 780px;
    	background-image: url(aatwo_files/banner.png);
    	height: 150px;
    }
    #nav {
    	height: 39px;
    	background-image: url(aatwo_files/navBackground.png);
    }
    #content {
    	background-image: url(aatwo_files/bodyMiddle.png);
    	background-repeat: repeat-y;
    }
    #footer {
    	background-image: url(aatwo_files/footer.png);
    	height: 44px;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
    					<div id="header">
    					<!--closes header --></div>
    	<div id="nav"><p>some nav here</p></div>
    <div id="content">
    <p>Lots and lots of stuff in here.</p>
    <p>Lots and lots of stuff in here.</p>
    <p>Lots and lots of stuff in here.</p>
    <p>Lots and lots of stuff in here.</p>
    <p>Lots and lots of stuff in here.</p>
    <p>Lots and lots of stuff in here.</p>
    <p>Lots and lots of stuff in here.</p>
    <p>Lots and lots of stuff in here.</p>
    <!--closes content --></div>
    <div id="footer">
          <P class=alignM>Copyright 2006-2007 <A class=foot 
          href="http://www.aatwo.com/">aatwo.com</A> | <A class=foot 
          href="mailto:aaron.wi@gmail.com">Contact</A> 
    aatwo.com</P>
    <!--closes footer --></div>
    <!--closes wrapper --></div>
    </body>
    </html>
    It's really very simple, well worth the extra effort to learn a new way of doing it. Just cut/paste the above code into your editor and correct the path to your images.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #12
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by drippin View Post
    Like the other guy said, you need to do the same for TD and TR. Stupid i know, but some reason, its the only way IE will allow you to completely make the spacing go...
    I just tried this in Internet Explorer versions 6 and 7 and it doesn’t work.

    The CSS2 border-spacing property isn’t supported by Internet Explorer. However, you can use the border-collapse: collapse declaration as an alternative, CSS‐based method of removing space between table cells. Assuming that none of the cells have been assigned borders and you want border-spacing to have a value of zero, then they’re effectively the same. If you want to specify a non‐zero border‐spacing aside from the default though, the closest equivalent in Internet Explorer would probably be to collapse the borders using the mentioned declaration and use spacer cells. Obviously, that’s not semantic and could get pretty messy.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #13
    New Coder
    Join Date
    Nov 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Excavator, I must say you have provided me with an incredibly generous and helpful experience. As expected the script that you provided me with works perfectly with only very minor niggle that I am happy to work on independently.

    I really believed it to be much more complicated than was shown by you so thank you again.

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Right on! Another convert

    If you need any more help don't hesitate to ask! I'm hanging out here for the off season at least -
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #15
    New Coder
    Join Date
    Nov 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts


    I apologize for this next question. I already have a solution to this however I am trying to simply keep my cascading style sheet as neat as possible.

    Is it possible to define the colors of a links various states within a single ID block?


    For example. Here is an extract from the code which you provided me with, Excavator.

    [code]#nav {
    height: 59px;
    background-image: url(images/template/original/navBackground.png);
    line-height: 34px;
    }[code]

    Is it possible to define a set of hyper link rules that apply generically throughout the "div" element with the nav ID? Otherwise my solution involves assigning a class to every single hyperlink that I wish to make.
    Last edited by aatwo; 02-07-2007 at 01:00 AM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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