Disappearing h6 Elements

HTML & CSS
1

Hello all,

I’m trying to implement some paragraph headings in a page I’m working on. I put them into <h6> elements. You’ll see that at line 44, I have used a containing div temporarily named .bumpmeplease. Because overflow is hidden on this and other divs, the h6 headings disappear and the words do not wrap to a new line when the browser window is small. How can this be fixed?

2

Hi,

I couldn’t see any class of bumpmeplease in that page?

Have you changed it since you posted this?

If text is being hidden with overflow:hidden then it is likely that you have given it dimensions and your content exceeds those dimensions.

Note that you shouldn’t just insert h6 elements willy nilly as heading tags are the most important tags in your page and create a document outline. You should start with a h1 as the main heading and then follow with h2 for sub headings in the page. In each sub heading you would then start with and h3 followed by h4 etc. You would never start with an h6 unless you had used h5 before it (and you wouldn’t use an h5 unless there was an h4 before it also and so on…).

Don’t confuse the default look of a heading tag with a page’s hierarchy. You can change how any tag looks so choose your tags semantically and not for visual effect.:slight_smile:

3

Hi Paul,

Yes, it has changed several times today. Now, the containing divs on that page are given a class of listwrapper. On this page, the headers - the elements that overflow and don’t wrap in narrow viewports- say “bold reputation” and “largest video database”.

I guess I’ll need to change these to <p> elements with a unique class for them.

4

You have a min-width here:

#outer {
display: table;
table-layout: fixed;
border-spacing: 0 0;
max-width: 960px;
[COLOR="#FF0000"]min-width: 470px;[/COLOR]
margin: 0 auto;
}

I don’t really see what you are talking about, though. The question isn’t clear.

5

Hi, etidd. If I’m following you correctly, then you need to add {margin-right:2em} as shown in the following snippit:


.listwrapper h6 {
    font-size: 1em;
    font-style: italic;
    left: 2em;
    [color=blue]margin: 0.3em 2em 0.3em 0;[/color]
    position: relative;
}
6

Thank you very much, Ronpat! Adding margin-right:2em; to the specified element has solved the issue.

edit: changed everything to <p> elements with a class of .italicheader and all issues are solved here.

7

Very cool. Thanks for the feedback!

8

That’s not very semantic :slight_smile: Remember what I said about confusing look with structure.

If the item is a header then it must be a header tag of appropriate level.

Header tags create a document outline and are one of the most important aspects of a web page. Screen readers and Search engines use them extensively to build the outline of the page and most accessibility aids (screen readers etc) use them as jumps to important sections as you can tab through the headings only.

Don’t be concerned with what regular elements look like by default as they can easily be changed with css.