Strange gap on left of H2 tag

philiph · #1 Jul 16th, 2007, 16:56

im still relatively new to css and wondering if anyone could help me.

i'm trying to get a title on top of a list but im having little joy. please see the below code and give me soem guidance

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html lang="en">
<head>
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<link rel="stylesheet" href="test.css" type="text/css"/>
</head>
<body>
<div id="subnavbar">
<h2 class="top">Sub Menu</h2>
<ul id="sectionnav">
<li><a href="#">First Link</a></li>
<li><a href="#">Second Link</a></li>
<li><a href="#">Third Link</a></li>
<li><a href="#">Fourth Link</a></li>
<li><a href="#">Fifth Link</a></li>
<li><a href="#">Sixth Link</a></li>
</div>
</body>
</html>

Code: Select all

#subnavbar{
top:2em;
width:9em;
float:left;
position:relative;
}
#sectionnav{
margin-top:0;
margin-left: 0;
}
#sectionnav li a{
border-bottom: 0.1em solid #FFFFFF;
padding-left:.6em;
padding-right:.6em;
padding-bottom:.4em;
padding-top:.4em;
text-decoration: none;
float: left;
}
#sectionnav a{
background-color: yellow;
color:#000000;
font-size:.8em;
width:100%;
}
#sectionnav a:hover{
background-color:red;
color:#FFFFFF;
}
#selectedmainnav a{
background-color:yellow;
color:#000000;
}
#selectedsubnav a{
background-color:red;
color:#FFFFFF;
}
#subnavbar h2.top{
text-align:center;
font-size:.8em;
display:block;
background-color:red;
color:#FFFFFF;
width:100%;
padding:.2em;
margin-bottom:0;
border-bottom: 0.1em solid #FFFFFF;
}

Lchad · #2 Jul 16th, 2007, 19:12

Just change your html to this:

Code: Select all

<div id="subnavbar">
<h2>Sub Menu</h2>
<ul id="sectionnav">
<li><a href="#">First Link</a></li>
<li><a href="#">Second Link</a></li>
<li><a href="#">Third Link</a></li>
<li><a href="#">Fourth Link</a></li>
<li><a href="#">Fifth Link</a></li>
<li><a href="#">Sixth Link</a></li>
</ul>
</div>

Try to remember to use the w3C validator when you get stuck. It would have shown you that you had a closing </ul> missing.

philiph · #3 Jul 17th, 2007, 08:39

I was hoping that the h2 tag would appear as part of the block, with a background colour of the same width as the list. I do not want this to be within the <li></li> tags, but as a h2 tag above it. Can you think of a way I can achieve this?

pa007 · #4 Jul 17th, 2007, 09:01

Do you have a link to the site or a screenshot of what you are getting now?

Pete.

philiph · #5 Jul 17th, 2007, 09:06

this only seems to work in IE. im new to css so im going to have to work at this for firefox etc. if you look at the link below in internet explorer you can see what i am trying to do. i want the header to be the width of the link list.

http://www.molinsitcm.com/webforumzdemo/test.asp

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
How can I add in a 3rd column in on the right like the one on the left ?	nizmotine	Web Page Design	7	Aug 13th, 2007 13:28
strange icon in top left corner	algoodbody	Starting Out	4	Jul 10th, 2007 18:48
Possible Strange Question	crewdesign	PHP Forum	5	May 3rd, 2007 19:56
Everything to the left HELP needed.	TheWinnersRow	Starting Out	2	Mar 6th, 2007 13:25
<hr /> and clear:left	Krakatoa	Web Page Design	5	Dec 22nd, 2005 12:34

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Strange gap on left of H2 tag