Jump to content


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.

Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.


What is wrong with this CSS code

  • Please log in to reply
2 replies to this topic

#1 Jameseee


  • Members
  • 19 posts
  • Local time:09:36 PM

Posted 22 September 2010 - 07:17 AM

The following is my style.css code. For some reason, h1 through h6 work as expected but anything higher (h7, h8, h9) have no effect. Can someone explain why?

body {margin:0; font-size:20px; line-height:26px; font-family:Arial, Tahoma, Helvetica, sans-serif; background:url(images/body.jpg) repeat-x #8D8D8D; color:#cccccc;}
a {color:#0066FF;text-decoration:none;}
a:hover {text-decoration:underline;}
h1 {font-size:16px;}
h2 {color:#0066FF; text-decoration:none; font-weight:bold; font-size:26px; text-align:center; line-height:1px;}
h3 {font-size:18px;}
h4 {font-style:italic; font-size:12px; line-height:15px;}
h5 {font-size:10px; line-height:1px;}
h6 {font-size:20px; line-height:26px; font-weight:normal;}
h7 {color:#0066FF; text-decoration:none; font-weight:bold; font-size:26px; text-align:center; line-height:1px;}
#header {width:1000px; margin:0 auto; background:url(images/header_blackbckg.jpg) no-repeat #000000;font-size:16px;}
#all {width:1000px; margin:0 auto; background:url(images/body_blackbckg20.jpg) no-repeat #000000;font-size:20px;}
#container {background:url(images/footer_blackbckg6.jpg) no-repeat bottom left;}
#logo {padding:50px 0 0 100px; height:80px;}
#logo a {color:#FF0000; text-decoration:none; font-weight:bold; font-size:40px;}
#menu {padding:50px 135px 0 0; float:right;}
#menu ul {margin-top:0;}
#menu ul li {display:inline;}
#menu a {font-size:14px; text-decoration:none; color:#FF0000; padding:5px 10px; text-transform:lowercase;}
#menu a:hover {border-bottom:2px solid #FF0000;}
#main {padding:0 100px; min-height:500px;}
#footer {text-align:right; padding:80px 100px; color:#3b3b3b; font-size:11px;}
#footer a {color:#575757;}

I realize that h2 and h7 are identical. I want to do something different with h7, but I cannot get it to do anything at all. So, I copied the h2 line and changed it to h7. When changing from h2 to h7, nothing should change, but everything changes. The color changes from blue to white; the size changes from 26 to 16; alignment changes from center to left.

Very confused.

Any help would be greatly appreciated.


BC AdBot (Login to Remove)


#2 groovicus


  • Security Colleague
  • 9,963 posts
  • Gender:Male
  • Location:Centerville, SD
  • Local time:07:36 PM

Posted 22 September 2010 - 08:13 AM

There is no such thing as an h7 tag in valid HTML; it goes h1-h6. Your h7 and above are ignored. The <H> tags have associated values so assigning a font-size is sort of redundant. If the font size isn't what you want, use a different tag. maybe this page will help:

#3 Jameseee

  • Topic Starter

  • Members
  • 19 posts
  • Local time:09:36 PM

Posted 22 September 2010 - 09:06 AM

Thanks, Groovicus.

I'm an idiot. The link is going to be VERY helpful.


0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users