H1 tag not aligned correctly

[jj1234]

I have a few probems with the H1 tag in that it need to be moved across to the right on faq and contact pages. I tried increasing padding but this did not work.
Also when l view the site in IE the bottom padding seems to increase to much , can't work out why, as it looks just fine in firefox just a problem with IE.
see attachment link below for what l mean:

http://clubamigos.port5.com/h1_tag_problems.jpg

 

[Vragabond]

Showing the code would help us help you. Padding-left should be good enough for your first problem and either padding-top or margin-top should work with the second one. But without knowing your code, it is hard to say what is causing the behaviour.

 

[jj1234]

Here is my faq css:

html, body {
margin : 0;
padding : 0;
}

body {
font : 12px "Lucida Sans Unicode", Verdana, sans-serif;
color : #333333;
background: #e9eef4;
width : 100%;
}

a:link {
color : blue;
background : transparent;
text-decoration : none;
}

a:visited {
color : purple;
text-decoration : none;
}

a:hover {
color : red;
}

a:active {
color : red;
}

h1 {
text-align : center;
font-weight : bolder;
font : 20px "Lucida Sans Unicode", Verdana, sans-serif;
margin: 0px;
clear: left;
padding-left: 45px;
padding-top: 2px;
padding-bottom: 8px;
}

#wrapper {
text-align : left;
padding : 0;
border-top : 1px solid #66635C;
border-bottom : 1px solid #66635C;
border-left : 1px solid #66635C;
border-right : 1px solid #66635C;
margin : 5px auto;
width : 761px;
}

#header {
background-image : url(club_amigo_logo.jpg);
background-repeat : no-repeat;
margin: 0px;
height : 107px;
}

#content {
background-image:url(dotted.gif);
background-repeat:repeat-y;
background-position:621px 0;
margin: 0px;
padding : 10px 0px 10px 10px;
background-color : #ffffff;
}

#content p {
margin : 0 0px 0px 0;
text-align : justify;
}

#rightcol
{
float: right;
text-align: center;
width: 120px;
margin-left:30px;
}

#rightcol td
{
padding-bottom: 20px;
}


#rightcol img
{
margin-top: 20px;
width: 104px;
}


#navcontainer {
margin-top : 0;}


#navcontainer ul {
list-style : none;
margin : 0 0 0 0px; /* adjust left margin to suit */
padding : 0;
text-align : center;
}

#navcontainer li {
display : block;
float : left;
}

#navcontainer LI A {

BORDER-RIGHT: #84979c 1px solid;

BORDER-TOP: #84979c 1px solid;

DISPLAY: block;

BACKGROUND: #deffff;

WIDTH: 151px;

COLOR: #444;

BORDER-BOTTOM: #84979c 1px solid;

TEXT-DECORATION: none;

TEXT-ALIGN: CENTER;

padding-top: 2px;

padding-bottom: 2px;

}


#navcontainer #last {

BORDER-RIGHT: none;

WIDTH: 153px;

overflow: hidden;

}

#navcontainer ul li a:hover {
color : #000;
background : #FFCCCC;
}

#navcontainer a:active {
background : #ffecd2;
color : #fff;
}

#specialborder {
border-right : 1px solid #84979C;
}

#searchform {
background: #fff;
padding: 2px;
width: auto;
border: 1px solid #999;
}

#searchbut {
background: #fff;
font-size: 90%;
width: auto;
border: 1px solid #333333;
margin-left : 2px;
}

#searchinput {
background: #deffff;
font-size: 90%;
border: 1px solid #1d4151;
margin-left : 2px;
width : 53px;
}

#footer {
border-bottom : 1px solid #000;
border-top : 1px solid #000;
margin : 0 28px 0 25px;
padding : 10px;
}

#counter {
display : none;
}

 

[jj1234]

This is the css code l am using for the fag page:

html, body {
margin : 0;
padding : 0;
}

body {
font : 12px "Lucida Sans Unicode", Verdana, sans-serif;
color : #333333;
background: #e9eef4;
width : 100%;
}

a:link {
color : blue;
background : transparent;
text-decoration : none;
}

a:visited {
color : purple;
text-decoration : none;
}

a:hover {
color : red;
}

a:active {
color : red;
}

h1 {
text-align : center;
font-weight : bolder;
font : 20px "Lucida Sans Unicode", Verdana, sans-serif;
margin: 0px;
clear: left;
padding-left: 45px;
padding-top: 2px;
padding-bottom: 8px;
}

#wrapper {
text-align : left;
padding : 0;
border-top : 1px solid #66635C;
border-bottom : 1px solid #66635C;
border-left : 1px solid #66635C;
border-right : 1px solid #66635C;
margin : 5px auto;
width : 761px;
}

#header {
background-image : url(club_amigo_logo.jpg);
background-repeat : no-repeat;
margin: 0px;
height : 107px;
}

#content {
background-image:url(dotted.gif);
background-repeat:repeat-y;
background-position:621px 0;
margin: 0px;
padding : 10px 0px 10px 10px;
background-color : #ffffff;
}

#content p {
margin : 0 0px 0px 0;
text-align : justify;
}

#rightcol
{
float: right;
text-align: center;
width: 120px;
margin-left:30px;
}

#rightcol td
{
padding-bottom: 20px;
}


#rightcol img
{
margin-top: 20px;
width: 104px;
}


#navcontainer {
margin-top : 0;}


#navcontainer ul {
list-style : none;
margin : 0 0 0 0px; /* adjust left margin to suit */
padding : 0;
text-align : center;
}

#navcontainer li {
display : block;
float : left;
}

#navcontainer LI A {

BORDER-RIGHT: #84979c 1px solid;

BORDER-TOP: #84979c 1px solid;

DISPLAY: block;

BACKGROUND: #deffff;

WIDTH: 151px;

COLOR: #444;

BORDER-BOTTOM: #84979c 1px solid;

TEXT-DECORATION: none;

TEXT-ALIGN: CENTER;

padding-top: 2px;

padding-bottom: 2px;

}


#navcontainer #last {

BORDER-RIGHT: none;

WIDTH: 153px;

overflow: hidden;

}

#navcontainer ul li a:hover {
color : #000;
background : #FFCCCC;
}

#navcontainer a:active {
background : #ffecd2;
color : #fff;
}

#specialborder {
border-right : 1px solid #84979C;
}

#searchform {
background: #fff;
padding: 2px;
width: auto;
border: 1px solid #999;
}

#searchbut {
background: #fff;
font-size: 90%;
width: auto;
border: 1px solid #333333;
margin-left : 2px;
}

#searchinput {
background: #deffff;
font-size: 90%;
border: 1px solid #1d4151;
margin-left : 2px;
width : 53px;
}

#footer {
border-bottom : 1px solid #000;
border-top : 1px solid #000;
margin : 0 28px 0 25px;
padding : 10px;
}

#counter {
display : none;
}

 

[BillyRayPreachersSon]

To save wading through it, can you tell us what is different between the first and second lots of CSS?

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[jj1234]

I have made some minor alterations to content section this morning.
So very little indeed.

 

[BillyRayPreachersSon]

... H1 tag in that it need to be moved across to the right on faq and contact pages ... it looks just fine in firefox just a problem with IE

Odd - when I look at either your contact page or your FAQ page, the H1 looks fine (in fact, virtually identical) in both Fx and IE.

Are you sure you're not looking at a cached version of the code?

Dan




[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[jj1234]

The code is the same, just changed it today. Sorry about that

 

[BillyRayPreachersSon]

You changed it so it's working, or you changed it so it's broken? You're not beeing to clear. Come on - if you want help, you'll need to help yourself to help us. Start being a bit more descriptive in your posts!

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[jj1234]

The problem only exists in IE, in that the H1 tags are not being displayed correctly. For some odd reason they are being moved down in IE and l cannot work out why?

If you see visit this link you will see what l mean.

http://clubamigos.port5.com/h1tag_problem.jpg

I would like the H1 tag so that it looks right in both IE and Firefox.

It looks fine in Firefox.
Please let me know if you require any additional information so you can assist in this matter.

 

[BillyRayPreachersSon]

For some odd reason they are being moved down in IE

Aaaah - now you're changing the problem! Earlier, you said that "it need to be moved across to the right" - now it needs to move up!

I think (although this is just a guess) that the "p" element preceeding the H1 may have something to do with this. Try styling it to have no margin and see what happens.

Incidentally, it would be so much more helpful if you posted links to your site, rather than to JPG files - that way, we can view the code, and the CSS.

Also, the "F" in "FAQ" does not stand for "Frequency", and "FAQ's" should not have an apostrophe in it - in fact, I believe (although cannot be 100% sure on this) that it shouldn't even have the "s" on the end.

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[jj1234]

This is coding , can you tell me where the p element system you are referring to is?
Thanks for pointing out about the FAQ's.

<p>&nbsp;</p>
<p>&nbsp;</p>
<p><img src="faqphoto.jpg" width="104" height="159" /></p>
<p>&nbsp;</p>
<p><img src="clubmember_faq1.jpg" width="104" height="104"/></p>
<p>&nbsp;</p>
</div>

 

[BillyRayPreachersSon]

I've already told you it's the one preceding the H1. While there are many preceding it, it's the last of the ones preceding it. I'm sure you can work it out from there.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[jj1234]

Thanks for that, it appears to be ok for faq page , what h1 tags would l have to delete in the other pages , as the only p tags preceding the H1 tag is the space for the image. So l am a bit confused as to what tag to delete.

 

[BabyJeffy]

jj1234... you are the developer for this project (not Tek-Tips). If you are finding it that difficult to solve problems like this (given all the advice you have recieved so far) then maybe it's time to simplify your code and return to some of the CSS basics.

You don't seem to understand what you are doing - you just seem to make changes and report on the success/failure of these changes.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[jj1234]

I understand CSS to a certain extent , but this is the first site l have done in CSS so you will have to bear with me.
I find you can only learn so much from a book. It may appear to you that l don't understand what l am doing. But as there is no one to actually show me in person l find it very difficult to find out what l am doing wrong.

 

[Foamcow]

Granted it's hard to learn when you are on your own, and granted that thereis only so much you cn learn from a book.
But I know of no CSS book or tutorial that would encourage coding such as

<p>&nbsp;</p>
    <p>&nbsp;</p>
<p><img src="faqphoto.jpg" width="104" height="159" /></p>
 <p>&nbsp;</p>
<p><img src="clubmember_faq1.jpg" width="104" height="104"/></p>
      <p>&nbsp;</p>
    </div>

Perhaps you could go back to the book and refresh yourself with the basics of modern markup techniques.
You quite simply should not have any HTML elements on your page that are there purely for visual effect. Empty paragraph tags fall into that category. Get rid of them and use CSS to present your HTML in the way you want.

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

 

[BillyRayPreachersSon]

Another point... When I gave you a fix for a problem on one page, you seemed unable to apply the same fix to the same problem on a different page. I would think this points to one of two things:

1. Markedly different template coding for pages that look the same, or
2. No desire to try to figure things out for yourself

I hope it's not 2... and so if it is 1, that would point to a problem with your site. All of the pages have the same basic layout - so they should all be using similar code for the base template.

If they do not - you have to sit back and ask yourself why.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[jj1234]

i do try to figure things out for myself,but if l don't understand something in CSS then l have to ask for help.
As l am used to doing things using tables , l find it difficult at times not to use any old html markups. Its just habit which l must try and not to do.