CSS/HTML/Teamsite Problem with background image in header tag

Hi guys,

Nipper, we haven't made any changes to the templates yet, been waiting for that danged RFP to be approved....I understand changes have been made and we are almost there! Yah!!!! Hope you aren't too busy! ;-)

Now for my issue that I hope some of you can help with......

I have a template where we have given the user the choice of having multiple instances of lists. Each instance of a list has a title. The title is styled with an

header tag. In my style sheet, I call a background image and use the styles to make whatever they enter for the title appear on top of that background image The background image is supposed to mimic what we used to do by creating images for each section header item, but instead this blank image comes up each time a header section title is used and the text the user enters appears on top of it to give a little more flair to an otherwise boring section heading title. The text is supposed to be lined up appropriately on the image. I have attached a screen shot of what it is supposed to look like, and what it looks like.

There are 3 problems:

1.) I had to greatly increase the padding to get the left, top and bottom of the image to fully display. The original code below works in a regular HTML site using the same HTML and CSS with no issues. The only difference is that Teamsite is not involved.

2.) The right end of the image does not fully display. It stops short of the exact place where the text of the title ends. The longer the title, the more of the image shows. I am guessing this is something with Interwoven. No setting changes in my CSS will budge this.

3.) Normally, the styles allows you to move the title text to line it up on the background image, but this is also not happening.

Something happened when I used the code with brackets to display my xml, so I am editing and trying to put it all in the html....

I am using the following code:

[html]h3.section {
font-weight: normal;
margin: 5px 0 0 40px; /* -5px 0 0 40px; /
padding-top: 4px; / 8px; /
}

.headerreplacement {
text-indent: -9999px;
width: 200px; / 150px; 600px; /
height: 50px; / 50px; 100px; /
/ padding-bottom: 5px; /
padding: 0 80px 45px 45px;
background: url(/images/section_header.png) #ffffff no-repeat;
}

/ SHOULD work, does not /
.headerReplacement {
text-indent: -9999px;
width: 150px; / should be size of image /
height: 50px; / should be size of image */
padding-bottom: 5px;
background: url(images/section_header.png) #ffffff no-repeat;
}

my $count = 0;

List Title

Title
This is the title of the group of list items.

[/html]

Thanks, so much, for any help you can pass my way. Of course, they want this working in a week for a presentation they will be making! Yikes! ;-)

Have a great weekend!

Suzanne

Find more posts tagged with

Comments

neil_a

1.) I had to greatly increase the padding to get the left, top and bottom of the image to fully display. The original code below works in a regular HTML site using the same HTML and CSS with no issues. The only difference is that Teamsite is not involved.

Not sure if TS would be the problem. When you compare the output of the PT to the original code, is the HTML and CSS identical? If so, are you using a different browsers or browser version to view the differences between TS and the originals?

I would recommend using a web inspector (like Firebug), to determine if any extra styles are being applied when viewing in TS which is changing the display.

Shazam

Not sure if TS would be the problem. When you compare the output of the PT to the original code, is the HTML and CSS identical? If so, are you using a different browsers or browser version to view the differences between TS and the originals?

I would recommend using a web inspector (like Firebug), to determine if any extra styles are being applied when viewing in TS which is changing the display.

Neil,

Thanks, so very much, for your reply

I normally use Firefox for dev work, but always check my work in all the major browsers. When using Teamsite, I start off checking in IE, then in Firefox, since certain aspects of Teamsite do not work in Firefox (VisualFormat editor) which forces me to use IE to login to Teamsite. I am using IE7 currently, but check in IE6, 7, and 8 before development is complete.

So, to answer your questions, the same browser was used to check both (IE7), the same HTML is rendered, the same HTML structure is being used, other than Teamsite is allowing multiple instances of lists and titles. The exact same styles down to the class names is being used.

The HTML structure is very simple.....a div which calls the background image surrounds the h3 tag. A class is called from the h3 tag which handles the formatting and placement of the actual title text.

In one way, it doesn't make sense that this could be Teamsite, but what else could be limiting the right side, at the end of the text?

I am going to continue to play with my CSS today and see if I can make any progress, as I need to get this taken care of today or tomorrow so I can move on with this project! ;-)

Thanks for taking the time to take a look at this and to reply. I really appreciate it.

Should you have any ideas, please feel free to pass them on, will be glad to try anything to get this solved! ;-)

Suzanne

neil_a

Complete stab in the dark, but could you be accidentally setting IE7 to use quirks mode in your PT?

All it takes is a comment at the start of the document. http://www.satzansatz.de/cssd/quirksmode.html

Sorry, it is the only other thing I could think of without seeing the code.