IE and span styles

I now IE won't but can I force it?

[nightva]

HI all,

I have a set of styles that puts a top border on a H4 element. I know IE doesn't put borders on inline elements but is there a way to force it? I heard if I change the display to 'block' it would work but it isn't for me.

The page in question is snip

View the same page in Mozilla or Netscape and you'll see certain header styles do appear bot will not appear in IE.

Please help!
Nathan

[edited by: SuzyUK at 8:36 am (utc) on Aug. 2, 2004]
[edit reason] ooops sorry no URLS see TOS #13 [webmasterworld.com] [/edit]

[Krapulator]

Hi Nathan,

H4 is a block level element by default so adding display:block will not affect it.

The following code works in IE:

<style>
h4{
border-top: 1px solid #000;
}
</style>
<h4>This has a top border</h4>

Perhaps post some of the css you have for your h4...

(You will need to get rid of that link to your site- they're not allowed :) )

[nightva]

I wonder...

Does the following code do anything worthwhile?
<h4><span>Title Here</span><h4>

Do the span tags do anything? I mean the H4 is already an element so needing to span it so it can be styled is redundant. Could these span tags make the border style not show up in IE6?

I also use a background color but it also won't appear.

Here's a code snippet:
#wrapper #thirdTierContent h4 {
margin:0;
border-left:1px solid white;
padding-left:4px;
font-size:13px;
border-top:1px solid white;}

<h4><span>Phone Numbers</span></h4>

Any suggestions?

Nathan

[D_Blackwell]

Since everything within the <h4> is spanned, there is no need for a <span> here. If this <h4 > is unique from other <h4>s, you can simply give it a class: <h4 class="specialcase">

make the border style not show up

#wrapper .thirdTierContent h4 { .....

Change thirdTierContent from an id to a class. Someone smarter than I can explain why? (or smarter than me?, see what I mean:)

Do the span tags do anything?

They apply styles unique to whatever they span within an element. Often, they are used for small snippets of specific text. Perhaps a small section of text should suddenly be red: <span class="red">I would be red.</span>I would be black again.

[SuzyUK]

<span>'s within headings are mostly used when image replacement techniques are going to be used.. they are not necessary, they just add an extra level of styling capability to the header if required..

for instance you would put a background image onto the <h4> element and the use some method of hiding the <span> text, either using the visibility property or negative positioning so your image shows but the text value is not lost..

re: your question, background colors should show up on a span, and if you adjust the line-height or the display property of the span to make it "fit" the <h4> element the borders too should appear. The inline <span> won't accept height or width properties unless it is changed to display block..

I also use a background color but it also won't appear.

It could be some sort of specificity problem, that's causing your styles not to appear?
>>#wrapper #thirdTierContent h4
is a very specific selector and will only affect an h4 which has an ancestor element with an id of thirdTiercontent, which has an ancestor element with an id of wrapper..

Change thirdTierContent from an id to a class.

not sure why or if you should do this.. unless you lot know something about the page that is not here.. ;)

e.g. this CSS example works fine.. background colors on both elements... try uncommenting either of the two <span> styles to see where the span (and it's borders) actually is....

h4 {
margin:0;
border-left:1px solid #000;
padding-left: 4px;
font-size: 13px;
border-top:1px solid #000;
background: #ccc;
}

h4 span {
border: 3px double #f00;
background: #ffc;
/* display: block; */
/* line-height: 30px; */
}

Suzy

[nightva]

Thank you for your replies!

I'll look into all of these suggestions.
Nathan