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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Help with code please

    Hi, I am pretty much new here and in need of a little help from someone more expert than myself.
    I can code basic HTML/XHTML and CSS and have done for quite some time, BUT for the life of me, I cannot figure out a problem that I am having between Firefox and IE.
    Now, my code looks absolutely fine and just how I want it in Firefox (preferred browser), but in IE, it just doesn't sit right.
    Here are the links to 2 pages with the issue on.

    http://www.jays-creations.pwp.blueyo...credimail.html
    http://www.jays-creations.pwp.blueyonder.co.uk/psp.html

    I have tried the list style first, but I couldn't get it to look like how it is "now" in Firefox, so I removed the list style. Now, it doesn't sit right in IE.

    Please check out in Firefox (if you can) before IE to see what I mean.
    I would like it how it is now in Firefox, so if anyone can recode it for me to show me where I have gone wrong, I sure would appreciate it.
    I know what I am supposed to do, but for the life of cannot think how it should be coded for the desired effect.

    Thank you for any help in advance.

    Jay

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Check the compatibility of display:table; property at http://www.quirksmode.org/css/display.html
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    OK, it appears that this type of layout is not supported by IE. Gee, back to the drawing board with the Unordered List again!!

    Anyone willing to help me with this coding would be appreciated.
    Thank you to abduraooft for your incite. Much appreciated.

    Jay

  • #4
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    Try replacing this in your CSS:
    Code:
    .tablediv {
    margin:0 auto;
    width:455px;
    height:42px;
    background-color:#C9C9C9;
    border:1px dotted #000;
    }
    .celldiv {
    float:left;
    width:84px;
    background-color:#D6D6D6;
    text-align:center;
    color:#fff;
    font: 12px Arial, "Trebuchet MS";
    border:1px solid #808080;
    margin:2px;
    }
    .celldiv a{
    color:#808080;
    }
    .celldiv a:hover{
    color:#000;
    border-bottom:1px dotted #000000;
    text-decoration:underline;
    }
    You might need to add a "clear:both" to class para1 too.

    edit:nope, that's not going to work because I just realized that your 2nd page is different.
    Get rid of all the divs and make that a ul instead. I'll find an example and post it.
    Last edited by Fisher; 03-13-2009 at 02:07 PM.

  • #5
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yes, I noticed a slight difference in the 2, though not sure why (probably due to my lack of concentration LOL), but I do prefer the <ul> setup personally speaking (more control over it I think), but as stated, I couldn't get things to sit right.
    I sure do appreciate the help Fisher. Thanks for continuing with this for me.

    Jay

  • #6
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    Okay, this isn't perfect, but try this method. Just swap out the relevant css and xhtml:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {
    	margin:0;
    	padding:0;
    }
    #tablediv {
    	margin:0 auto;
    	width:455px;
    	height:45px;
    	background-color:#C9C9C9;
    	border:1px dotted #000;
    }
    #tablediv ul {
    	display:inline;
    	list-style-type:none;
    	float:left;
    }
    #tablediv ul li {
    	width:84px;
    	float:left;
    	display:inline;
    	background-color:#D6D6D6;
    	color:#fff;
    	font: 12px Arial, "Trebuchet MS";
    	border:1px solid #808080;
    	margin-left:3px;
    	margin-top:3px;
    	text-align:center;
    }
    #tablediv ul li a {
    	text-decoration:none;
    	color:#000;
    }
    </style>
    </head>
    <body>
    <div  id="tablediv">
      <ul>
        <li><a href="animals.html"><b>ANIMALS</b></a></li>
        <li><a href="christmas.html"><b>CHRISTMAS</b></a></li>
        <li><a href="greetings.html"><b>GREETINGS</b></a></li>
        <li><a href="halloween.html"><b>HALLOWEEN</b></a></li>
        <li><a href="nighttime.html"><b>NIGHTTIME</b></a></li>
        <li><a href="romance.html"><b>ROMANCE</b></a></li>
        <li><a href="seasons.html"><b>SEASONS</b></a></li>
        <li><a href="simple.html"><b>SIMPLE</b></a></li>
        <li><a href="vectors.html"><b>VECTORS</b></a></li>
        <li><a href="words.html"><b>WORDS</b></a></li>
      </ul>
    </div>
    </div>
    </body>
    </html>

  • #7
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    OK, I have done as suggested. It is getting better this way, but a couple of things that need some attention.

    If you check out the pages again, both in FF and IE, you will see how it looks.
    Firstly, I would like 5 links on 1 line and the gaps left and right closing so as to make the box symmetrical all the way around, if you know what I mean. That should make it look ok in IE, BUT in FF is a different story LOL.

    It does not actually sit in the box very much at all. How can this be fixed?

    Sorry to be a pain and appreciate your continued help.

    Jay

  • #8
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    This will work fine in both FF and IE. The only thing that is messing it up is your body's font size of 76%. If you remove that, it works perfectly.

    Code:
    #tablediv {
    	border:1px dotted #000;
    	margin: 5px auto;
    	width: 455px;
    	background: #c9c9c9;
    	overflow:visible;
    }
    #tablediv ul {
    	display: inline;	
    	list-style-type: none;
    }
    #tablediv ul li {
    	border: #808080 1px solid;
    	display: inline;
    	float: left;
    	font: 12px Arial, "Trebuchet MS";
    	width: 85px;
    	margin:2px;
    	color: #fff;
    	background: #d6d6d6;
    	text-align: center
    	height:45px;
    }
    #tablediv ul li a {
    	display:block;
    	color: #000;
    	text-decoration: none;
    }

  • #9
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks my friend, much appreciated.
    After a few tiny tweaks with your very helpful coding, I did tweak it slightly, changing overflow to hidden as it didn't quite sit within the <div id="tablediv"> in Firefox, but afterwards it looked just fine.
    Now, in IE, it is just about there, but the line at the bottom has no padding as it does "equally" in FF. Any ideas?

    I have tried, but I can't change it without messing up something else on the same browser or the other ! So, I "undid" until it was almost perfect.

    Thanks again for your continued help and support.

    Jay


  •  

    Posting Permissions

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