CSS Forum

**magicvw** · 01-28-2009, 08:25 AM

I'm trying to use css to put two separate background images as a top header to a site - css as follows: (the left-hand part of the header (body-design) is combined with other background elements on the page e.g. in the nav, the right hand part of the head (headerpics) just auto fills out the blue header across the page.

Code:

body {
    color: #333333;
    font-family: "trebuchet ms", Arial, sans-serif;
    font-size: 9pt;
    background-image:url(design-bits/realenglish-bodydesign.png);
    background-repeat: no-repeat;

}

/*    LAYOUT DIV IDs   */
#header {
    height: 128px;
    width: 760px;
    float:left;
    padding:0px;
    margin-right:0px;
}    

#headerpics {
    margin-left:755px;
    
    height:128px;
    width:auto;
    background-image:url(design-bits/top-background-strip.png);
    background-repeat:repeat-x;

}

No problems in Firefox but in IE7 I get a 1px gap between the 2 images (see screenshot). Any ideas how to fix?

screenshot.jpg

**chrishirst** · 01-28-2009, 08:31 AM

possibly white space in the HTML source

**magicvw** · 01-28-2009, 10:56 AM

Here's the html - I can't see any white space I can take out?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Real English School Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
        
            <div id="header">
            <p>header</p>
            
            </div>
            <div id="headerpics">
            <p>headerpics</p>
            </div>
            
            <div id="navigation">
            
            <p>nav bar</p>
            <ul>
            <li><a href="#"> an item</a></li>
            <li><a href="#"> an item</a></li>
            </ul>
            </div> <!-- end of nav div -->
        
            <div id="content">
            <p>content</p>
            <br/>
            <p>more content</p>
            <br />
            <p>more content</p>
            
        </div> <!-- end of content div -->
        
        <div id="footer">
          footer
        </div> <!-- end of footer div -->
        
    
</body>
</html>

**johniman7** · 01-28-2009, 11:06 AM

This may have something to do with padding and margins in the p tag. Try adding this to your css...

Quote:

p {
padding-left: 0;
margin-left: 0;
}

**magicvw** · 01-28-2009, 11:24 AM

Nope

Here's the full css if that helps.

The image for the body is 760 px wide and the headerpics should overlap from the 755px margin by 5px. I can't figure out if the white space is part of the headerpics div or not - I suppose it must be? the headerpics image is a strip 25px wide.

Code:

/* CSS Document */
* {
    margin:0;
    padding:0;
}

body {
    color: #333333;
    font-family: "trebuchet ms", Arial, sans-serif;
    background-image:url(design-bits/realenglish-bodydesign.png);
    background-repeat: no-repeat;

}

 p {
     padding-left: 0;
    margin-left: 0;
}
    
    
/*    LAYOUT DIV IDs   */
#header {
    height: 128px;
    width: 760px;
    float:left;
    padding:0px;
    margin-right:0px;
}    

#headerpics {
    margin-left:755px;
    height:128px;
    width:auto;
    background-image:url(design-bits/top-background-strip.png);
    background-repeat:repeat-x;

}


    
#navigation {
    width:200px;
    height:auto;
    float:left;
    padding-top:120px;
    padding-left:10px;
}

#navigation ul {
    margin-left:10px;
    list-style-type:none;

}

#navigation li {
padding:10px;
margin:10px;
font-size:18px;
color:#FFFFFF;
        

}

#navigation ul a:link, #navigation ul a:visited{
    
    background-image:url(design-bits/btn-off.png);
    text-decoration:none;
    color:#FFFFFF;
}

 

#navigation ul a:hover {
    background-image:url(design-bits/btn-on.png);
    color:#FFFFFF;
}


#content {
    width:auto;
    margin-left:205px;
    
}

#content ul {
    color: #333333;
    margin-top: 0px;
    margin-bottom: 0px;
    
    list-style-image: url(elements_page1_files/elements_page1_bullet.gif);
}

#content a:link {
    color: #005db6;
}
#content a:visited {
    color: #999999;
}
#content a:link:hover {
    color: #221f81;
}
#footer {
    clear:both;
    background-color:#FF0033;
}

h1 {




}
h2 {
    
    
}

**chrishirst** · 01-28-2009, 11:31 AM

IE renders white space between the tags

HTML Code:

<div id="header"><p>header</p></div><div id="headerpics"><p>headerpics</p></div>

**magicvw** · 01-28-2009, 04:23 PM

Quote:

Originally Posted by chrishirst

IE renders white space between the tags

HTML Code:

<div id="header"><p>header</p></div><div id="headerpics"><p>headerpics</p></div>

So there's no fix? I hate IE!

**chrishirst** · 01-28-2009, 04:51 PM

Just butt up the end and start tags of adjacent elements when it strikes.

**marx18** · 02-02-2009, 03:30 PM

try this:

<body style="background: none url(design-bits/top-background-strip.png) 0 0 repeat-x">
<a href="."><img src="realenglish-bodydesign.png" width="" height="" alt="" /></a>
....
</body>

this way you will have clickable left logo

**magicvw** · 02-02-2009, 04:29 PM

Quote:

Originally Posted by marx18

try this:

<body style="background: none url(design-bits/top-background-strip.png) 0 0 repeat-x">
<a href="."><img src="realenglish-bodydesign.png" width="" height="" alt="" /></a>
....
</body>

this way you will have clickable left logo

Thanks, but I want to put as much of the design into the css as possible. I'm not too fussed about having a clickable logo as there will be a prominent link to the home page top left anyway.

I spent hours fiddling with this and no matter what I did that darned white strip was glaring out at me. In the end I went to bed on it and the next day I started the css page from scratch again, and it disappeared. Not sure what all that was about, but it's working now!

I'm trying to recreate the original design (http://www.realenglishschool.eu). It was the first website I ever made and lots of people have told me how nice it is to use, but if you take a look at the source code it's mighty horrible in there! I was using dreamweaver and xara with only a half working knowledge of html and now, 2 years later I am shocked by how disgusting it is back there! I want to have nice clean html pages with no clutter as I currently can't update anything without setting off a chain reaction of code failure as it's so badly done.

This is my real job btw - find me on the staff page! http://www.realenglishschool.eu/teachers.html

**LadynRed** · 02-02-2009, 04:33 PM

In that case, it would be simpler to start over with a new html/css framework, and then copy/paste your content into the new structure. I've tried 'fixing' old code - it's not worth the aggravation. It actually takes a lot less time to rebuild with a clean structure and code.

**magicvw** · 02-02-2009, 04:37 PM

Quote:

Originally Posted by LadynRed

In that case, it would be simpler to start over with a new html/css framework, and then copy/paste your content into the new structure. I've tried 'fixing' old code - it's not worth the aggravation. It actually takes a lot less time to rebuild with a clean structure and code.

Exactly what I'm doing! I didn't have a css file in the original anyway, as I'd never heard of it.....The old stuff is so nasty I won't touch it. I didn't write it - dreamweaver created it and I was happy as long as it worked. Thanks for the reply LadynRed - I've read a lot of your posts on here and respect is due to you!

**LeBear** · 12-09-2009, 08:44 AM

This was causing me problems, too. I can't tell if this is by CSS design or a design flaw, as it happens in IE and Firefox. However, if you put an overflow:hidden in the style of your div with the background image, it will go away.