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
    Dec 2005
    Location
    Rotherham, UK
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Problem with display between FF1.5 and IE6

    I'm having an issue with trying to get my background images to display right in a new site I'm building.

    The site is: http://www.qh-mail.com/

    As you can see, in Firefox, nothing's wrong with the layout (I hope !)

    In IE6, it drops a gap between the background images of the header section and the remainder of the content below. It's about 2px.

    I've been tearing my hair out trying to fix the problem. I had the problem once before and solved it, made a few changes to other areas of the site, cam back to it today (about a week later) and realised that the problem has redeveloped.

    Check the page source out and the following is the relevant section of my css file:

    Code:
    table.info {
    	padding: 5px 5px 5px 5px;
    	background-color: White;
    	border-style: solid;
    	border-color: Black;
    	text-align: justify;
    	border-width: 1px;
    	vertical-align: top;
    }
    
    /* This is for the main text table, not the info */
    table.main {
       padding: 0px;
       background-color: white;
    	vertical-align: top;
    	border: none;
    }
    
    td.logo {
    	background: url('../images/logo_ban.gif') no-repeat;
    	border: none;
    	padding: 0px 0px 0px 0px;
    	text-align: left;
    	height: 111px;
    }
    
    td.banner {
    	background: url('../images/right_ban.gif') no-repeat;
    	border: none;
    	padding: 0px 0px 0px 0px;
    	text-align: right;
    	vertical-align: bottom;
    	height: 111px;
    }
    
    td.spacer {
    	border: none;
    	padding: 0px 0px 0px 0px;
    	margin: 0px 0px 0px 0px;
    	height: 29px;
    	width: 100%;
    }
    
    td.t_nav {
    	border: none;
    	padding: 0px 0px 0px 0px;
    	text-align: center;
    	width: 100px;
    	height: 28px;
    }
    
    a.t_nav:link, a.t_nav:visited {
    	display: block;
    	background: url(../images/nav_button.gif) no-repeat;
    	vertical-align: middle;
    	font-size: 11px;
    	font-weight: bold;
    	color: #00008B;
    	text-align: center;
    	padding-top: 7px;
    	height: 21px;
    	width: 100px;
    	text-decoration: none;
    }
    
    a.t_nav:hover {
    	background-position: 0px -28px;
    	text-decoration: none;
    	color: #191970;
    }
    
    td.top {
    	vertical-align: top;
    }
    Any suggestions? That is, apart from a big hammer?

  • #2
    New Coder
    Join Date
    Sep 2005
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Give this a shot for your img in question.
    Code:
    td.logo img {display: block;}
    Let me know if that helps.
    Last edited by Reinspire; 12-13-2005 at 04:50 AM.

  • #3
    New to the CF scene
    Join Date
    Dec 2005
    Location
    Rotherham, UK
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Worked spot on? Why was that the solution? Was the image (in front of the background) causing the problem?

    Thanks for your help Reinspire.

  • #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
    Did it work or did it just resize the image?
    IE has a whitespace bug. It will read whitespace as extra line breaks sometimes. The solution is to keep your opening and closing tags on the same lin.
    Code:
                    <td class="logo" width="170px"><a href="http://www.qh-mail.com/"><img src="http://www.qh-mail.com/images/logo_ban.gif" alt="QH Mail Logo" /></a></td>
    Now you shouldn't need display:block; for that image. When an element is set to display:block it will resize to fit its containing element. Also when defining widths and heights in html you don't need to put the units, the default unit is pixels so adding px is redundant. Another possible solution would be to set the font-size for that cell to 1px and setting the line-height to 0px

  • #5
    New to the CF scene
    Join Date
    Dec 2005
    Location
    Rotherham, UK
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't think it resized it, but the gap was only about two pixels wide. It seems to be identical to the image below, nothing to tell that it's resized it.

    I'll bear the keeping it on the same line bit in mind when I update the code.

    It's a pain IE6. They say that the IE7 will be better, but we'll have to wait and see.
    Also when defining widths and heights in html you don't need to put the units, the default unit is pixels so adding px is redundant.
    Wasn't aware of that. I'll keep that in mind. I'll have a play with the site over the next couple of days and try those commments and see if that solves the problem.

    Thanks _Aerospace_Eng_.

  • #6
    New Coder
    Join Date
    Sep 2005
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts
    My only question is this...

    Why are you using the same image for your TD background and inserting it as content inside the td ? (<td><a><img /></a></td>). It just seems kind of redundant.

  • #7
    New to the CF scene
    Join Date
    Dec 2005
    Location
    Rotherham, UK
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I agree!

    But to create a link back to my home page, as the CodingForums.com logo above does, I needed to have the image in the td. I can't (at least if I can I don't know how to) do it except that way. When I created that link, I'd already got the image in the background, so it seamed a good idea to leave it as it was.

    You got any suggestions around that little issue?

    PS I hope that made sense!

  • #8
    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
    Just remove it as a background image, no need to have it twice if no one ever sees it.

  • #9
    New to the CF scene
    Join Date
    Dec 2005
    Location
    Rotherham, UK
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'll probably do just that.

    One of the things that I want to do is make it completely tableless, but that's for another day in another thread.

    Thanks for all your help guys.


  •  

    Posting Permissions

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