By dignosis on

I'm new to Drupal and attempting a custom theme for a client. Essentially I'm trying to put the content of the drupal site inside a table that exists on a stage of sorts on the site. To the right of that stage is a site logo and mission statement in image form. That logo/mission/sidebar is split into three images and is called from a php include() command on the tpl.php file.

For some reason that I cannot for the life of me figure out the images are being separated by a space about 10px in height. The include, when called by itself, appears fine. There are no CSS issues causing this. What's more is the problem is consistent across every theme I have tried to apply the include to.

I have been designing sites for 10 years and working with PHP for about 5 of those years. I'm not a novice by any stretch, though I am a fresh born newbie to Drupal.

Anybody have any ideas?

Thanks in advance for any help!

⋅ Categories: Drupal 6.x

Comments

flabat’s picture

flabat commented

it will be helpful if you can provide us with an url to see the site

dignosis’s picture

dignosis commented

well it's not live so that won't help. here's a screenshot:

http://bootblago.com/images/bbSS.tiff

you can see how the images are breaking up.

dignosis’s picture

dignosis commented

anybody???

iimitk’s picture

iimitk commented

Well, the fact that you're using tables for layout and PHP's include()s inside .tpl.php files do not give an impression that you're doing things the right way.

It would be better if you posted the HTML & CSS code that generate the content so we know what is going on. Also I strongly advice you not to use any include()s inside theme templates. Are the images generated dynamically? You could write your code in a custom module and use Drupal's powerful template preprocessor concepts to pass variables along to your themes in the form of theming hooks or templates.

________________________
"Creativity is knowing how to hide your resources" - Albert Einstein.

dignosis’s picture

dignosis commented

the images are generated dynamically, they remain the same throughout the site. if memory serves i tried just putting the code right into the .tpl file but had the same undesirable results.

here's the css:

#container {
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line height: 130%;
}

#header {
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}

#header h1 {
padding:0;
margin: 0;
}

#sidebar-left {
float: left;
width: 160px;
margin: 0;
padding: 1em;
}

#body {
margin-left: 200px;
border-left: 1px solid gray;
padding: 1em;
max-width: 36em;
}

#footer {
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color:#ddd;
border-top: 1px solid gray;
}

#sidebar-left p {
margin: 0 0 1em 0;
}

#main h2 {
margin: 0 0 .5em 0;
}

and here's the html from the page source showing the table it is in and the table that table sits in:

you can see i've tried to do a line break and no line break and i'm getting the same spacing.
mndonx’s picture

mndonx commented

When I have problems with gaps -- often in just one or two browsers -- I'll float the images with CSS. That will eliminate gaps. It doesn't work in every case -- but it's the best I can offer without seeing the page itself.

Good luck!

iimitk’s picture

iimitk commented

The HTML code didn't get published. Try enclosing code between <code> & </code> tags.

As another take on troubleshooting, make sure that your included files do not contain BOM signatures which when present may parse some blank lines. Most text editors have tools to remove UTF-8 signatures (BOM) when saving files.
________________________
"Creativity is knowing how to hide your resources" - Albert Einstein.