Forum Moderators: not2easy
.bluebtn { background-image: url(images/bluebtn.gif);
background-repeat: no-repeat;
width:20px;
height:19px;
float:left;
margin: 0;
padding: 0 5px 0 0; }
I added float left so it would float left of the header. the padding of 5 pixels on the right is so the header isn't right next to the button.
Here is the code for the header and bullet:
<span class="bluebtn"> </span><h2><a href="PAGE.html"> Title goes here</a></h2>
This works on the first header on the page but not the 2nd where the bullet moves up about 10 pixels and on some pages with several headers they vary between the right position and the upper position.
There is a div in between the 1st and 2nd header containing 2 images but I don't think that is causing it as I have a similar situation on another page but all the bullets are riding too high on that page with Div's with images in between some of the headers.
I set up the bluebtn class with a top margin of 10pixels but this doesn't work in all browsers and again it doesn't affect all buttons on the page.
PS. the header is aligned to the left.
PS 2. i have tried every vertical alignment known to man on the button image and none of them work.
I can't figure out what's doing this. Any suggestions?
[edited by: Lorel at 8:58 pm (utc) on Nov. 9, 2008]
Here is the whole code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
H2 { color: #3333cc;
font-family: arial,Helvetica,sans-serif;
text-align: left;
font-size:16px;
background: transparent; }
.box600 {width:600px;
margin-left:auto;
margin-right:auto; }
.bluebtn { background-image: url(images/bluebtn.gif);
background-repeat: no-repeat;
width:20px;
height:19px;
float:left;
margin:0;
padding: 0 5px 0 0; }
</style>
</head>
<body>
<div class="box600">
<h1>Title goes here</h1>
<div class="bluebtn"> </div><h2><a href="page.html"> Link Text</a></h2>
Some text goes here, and here and here and here and here and here and here and here and here and here and here.<br><br>
<div class="bluebtn"> </div><h2><a href="page.html"> Link Text</a></h2>
Some text goes here,and here and here and here and here and here and here and here and here and here and here.<br><br>
</body>
</html>
This results in the button riding too high above the text on each header. I tried Vertical-align:middle; and it didn't move. I tried margin-top:10px; and it moved the top button down too much with the 2nd one being just right. This seems to be the problem with this method- doesn't work on all buttons.
Even better, if you need bullets, perhaps the h2 isn't the appropriate tag at all in the html and a <ul><li> is preferable. I'm mainly thinking of how screen readers, search engines and other degraded views will "see" your html.
I want to use the H2 because these are actually different categories of links to other pages. The bullet is just a decorative feature,
