gaps and h1, h2 placement on header in FF? 1

[jlockley]

I had this more or less working and then thought to clean it up.
I am getting deeper and deeper in trouble as I try to clean up the mess it is after slapping it up "for now".
Here would be the original template:

http://www.page.html

Bringing it down to the bare bones to build it up correctly I lose h1 formatting and get a gap in Firefox:
http:/

http://www.chefsprofessional.com/page1.html

CSS below.

body {
margin-top: 0;
margin-left: 0;
background: #FFFEF5 url('img01.gif');
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #657383;
}
h3 {
color: #258383c;
}

h2 {
color: #258383c;
}

h1 {
color: #003333;
}


#logo {
margin-top: 0;
margin-left:0;
height: 140px;
background: url('images/shortbanner.jpg') no-repeat;
text-transform: none;
}

#logo h1 {
Padding: 0 0 0 0;
letter-spacing: -.1em;
font-style: italic;
font-size: 3.5em;
color: #003333;
}

#logo h2 {
letter-spacing: -.05em;
text-transform: uppercase;
font-style: oblique;
font-size: 2em;
font-style: italic;
font-size: 1em;
color: #003333
}

#logo a {
text-decoration: none;

/* insert content and wrapper and sidebar*/

The gap appeared after an attempt to move logo h1 over and down and to bring logo h2 up right below it and over. I can't get this to work either with margins or padding.

see

http://www.chefsprofessional.com/page2.html

css

body {
margin-top: 0;
margin-left: 0;
background: #FFFEF5 url('img01.gif');
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #657383;
}
h3 {
color: #258383c;
}

h2 {
color: #258383c;
}

h1 {
color: #003333;
}


#logo {
margin-top: 0;
margin-left:0;
height: 140px;
background: url('images/shortbanner.jpg') no-repeat;
text-transform: none;
}

#logo h1 {;
padding-top: 30px;
padding-left: 4px;
letter-spacing: -.1em;
font-style: italic;
font-size: 3.5em;
color: #003333;
}

#logo h2 {
padding-left: 90px;

letter-spacing: -.05em;
text-transform: uppercase;
font-style: oblique;
font-size: 2em;
font-style: italic;
font-size: 1em;
color: #003333
}

#logo a {
text-decoration: none;

/* insert content and wrapper and sidebar*/

adjusting h1 top padding or margin only moves the entire box down.
adjusting h2 left padding is effective. Neither top or bottom padding or margin allow me to get h2 closer to the h2.

the annoying border, furthermore, will not go away. The background image is 150. Regardless of the height I set for the image I continue to get the line.

Any thoughts would be much appreciated. Working on Wordpad and Amaya. Tried Expression web, and it's pretty much a disaster.

 

[Vragabond]

You're getting the gap because h1 element has some default margin -- which is different across the browsers. If you zero out the margin on the h1, you should be able to get uniform results in both IE and FF.

And if you're interested why margins on h1 cause your whole box to move, read up on it here:

http://www.andybudd.com/archives/2003/11/no_margin_for_error/

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[jlockley]

I'd thought about collapsing margins, but , since I had the same problem with no margins, just padding, I rejected the solution. None the less, dividing off the elements with float has pretty much solved this problem.

 

[jlockley]

Thank you Vragabond. It is so far succeeding. The use of it will be relative simple (should never even think that.)

this is the code. I simply floated every element.

#logo {
float: left;
height: 150px;
padding: 0px 0 0 40px;
background: url('images/shortbanner.jpg') no-repeat;
text-transform: none;
}

#logo h1 {
float: left;
letter-spacing: .07em;
font-style: italic;
font-size: 3em;
color: #003333
}



#logo h2 {
float: left;
margin-top: 95px;
margin-left: 30px;
text-transform: lowercase;
letter-spacing: .05em;
font-style: italic;
font-size: 1.5em;
color: #003333
}

#logo a {
text-decoration: none;

Do you know if there is a way to remove the thin border caused by #sidebar?

/* Wrapper */

#wrapper {
clear: both;

background: url('/images/img05.jpg') repeat-y 79px 0;
}

/* Sidebar */

#sidebar {
Float: left;
width: 85px;



}

/* Content. Not sidebar. Main Text. Padding brings bars flush to graphic. Do not adjust */

#content {
margin-left: 20px;
padding: 12px;

}

 

[Vragabond]

I don't know what border you're talking about. Can you show a page that demonstrates this issue?

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[jlockley]

Sorry. I thought I followed up. I have a scaling issue in another topic, and I may have put it there. I am not all that organized at about 1:00am.

http://www.chefsprofessional.com/page.html

There's another at

http://www.chefsprofessional.com

The issue is that thin grey line running at about 80px from the left border in the page piece. The culprit is apparently in the wrapper

/* Wrapper */

#wrapper {
clear: both;

background: url('/images/img05.jpg') repeat-y 79px 0;
}

/* Sidebar */

#sidebar {
Float: left;
width: 85px;

 

[Vragabond]

I don't understand what is the meaning of this line. This line is the background image of the wrapper element, but don't know why you use it. You could either:

1. Remove the background if you don't want this line.
2. Use background position values to move the line somewhere else.

Incidentally, there are two elements with an id of wrapper on your page. Since id uniquely describes ONE element, your code is erroneous. You should either change wrapper to be a class or make it appear only once in a page.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[jlockley]

And again thanks. Absolutely doable on both. I thought I'd verified this, but apparently not. I was thinking that the background image could go, anyway.

Will happen later, but will happen.