Header Affected By Picture Change

HTML & CSS
1

[FONT=Trebuchet MS]My website header was some how affected by a picture I updated here: http://nkdogwalking.com/about.html

I edited the picture, and then I realized it had affected the title in the header. Why did it do that, and what is the fix? The navigation tabs also shifted towards right. I just don’t understand why something in the sidebar would affect the header. I did flip flop the paragraphs on the very same page with the same update… It could’ve been that, too. But I think it was the picture that did it.

Would greatly appreciate your help.[/FONT]

2

Hi Mike,

Could you be a little more specific on exactly HOW the title changed, we did not see it before like you did.

I agree though, an edit to the sidebar should not have any effects on the header.

3

Whole layout is busted here (your menu buttons are all broken up, stuff blowing out of their containers)… I suspect the cause is the use of dynamic fonts (%/em) inside elements that are relying on images… since as a large fonts user fonts start out 25% larger by default.

I think some of the problem might be you are over-thinking your markup… you’ve got multiple pointless DIV, classes, paragraphs around non-paragraph elements, cite when you aren’t citing, one cite wrapping multiple separate sources, strong and em around things there’s no reason to be emphasizing, etc, etc…

But yeah, we’d have to see before and after to really help on this.

4

It actually looks fine to me. (I don’t see any change from the last time you posted.) What browser are you viewing this in? Have you scaled up / zoomed your font size by accident?

EDIT:

Possible one way to stop the header breaking at bigger font sizes would be do something like this (a bit crude, I know, but just a rough try):


#header h1 {max-width: 240px}
#header ul {max-width: 170px}
#contact {max-width: 350px;}
5

That’s happening because the line-height inherited from the body is not enough for the H1 (I think). You could try adding this to your CSS:

h1 {
  float: left;
  font-family: "Britannic Bold","Trebuchet MS",Helvetica,Arial,sans-serif;
  font-size: 195%;
  [COLOR="#FF0000"]line-height: 1;[/COLOR]
  padding-left: 0.5em;
  padding-top: 0.3em;
  [COLOR="#FF0000"]margin: 12px 0 0 0;[/COLOR]
}
6

Hey everyone. Hi ralph! Always there when I need you. I will give your code a try later on.

I’m using IE8. I’ve attached a screen shot of the problem. Looks like I got major problems with my code, deathshadow. Wow. Which divs in particular can be deleted?

7

Thanks, ralph! Wow was that fast!! You and I came here at same time. I’m sorry about order of posts now. I deleted mine because I had two images attached and I couldn’t figure out how to delete the other image. So I deleted the post entirely.

EDIT: Your fix did the trick. Now I need to put those tabs back towards left a little. I should be able to do that myself with padding fix. Your logo skills haven’t developed have they? I still haven’t gotten a logo. We’re two years on now almost.

8

If you mean the navigation tabs at the top, just adjust this:


#navigation ul {
  border-left: medium none;
  border-right: medium none;
  border-top: medium none;
  margin-bottom: 0.1em;
  margin-top: 0;
  overflow: hidden;
  [COLOR="#FF0000"]padding-left: 1em;[/COLOR]
  padding-top: 0.7em;
}

Your logo skills haven’t developed have they?

I’m afraid not. :smiley: