Header Font-Size Shifting

[gifted2333]

Please visit <snip> and click on the first link under 'Original Content'. I'm not sure why, but when I click on the link under 'Original Content' the 'Original Content' font size shifts. It increases by one point. What gives? Why would clicking the link cause that to happen. Please help with this issue.

[edited by: DrDoc at 10:35 pm (utc) on Aug. 13, 2008]
[edit reason] No URIs, please. See posting guidelines. [/edit]

[D_Blackwell]

Welcome to WebmasterWorld - but your link is going to get whacked - TOS.

Strip out the the HTML & CSS that shows the problem and post the code sample for review. The process of preparing the problem for presentation may result in a solution at the same time. If not, we'll see what we've got.

[gifted2333]

I attempted to strip out the HTML, but the problem goes away. Please test the live site so you can see the problem. It's actually losing more styles than just the header definition. If you notice, the page margin get's shifted too.

[D_Blackwell]

- but your link is going to get whacked - TOS.

Mods must be sleeping in:)) Nobody is going to comment on the personal link even if they know exactly what is happening. You need to make a post that contains actual information, and the thread will expand from that point. That's just the way it works here.

[DrDoc]

I attempted to strip out the HTML, but the problem goes away.

That should provide half the answer already! Strip down your code to the bare minimum required to reproduce the problem. Then post that HTML (and CSS) here. And, if you know what triggers it, highlight that in your post as well.

This post [webmasterworld.com] provides some excellent pointers when it comes to troubleshooting CSS and associated markup. Please remember that everyone posting here is a volunteer. If you come asking for help, but are too lazy to narrow down what causes the problem, just imagine how much less motivated a prospective reader will be to do that work for you.

Also, make sure (as highlighted in the linked post and the forum posting guidelines [webmasterworld.com]) to provide sufficient details.

[edited by: DrDoc at 10:42 pm (utc) on Aug. 13, 2008]

[gifted2333]

thanks for your help everyone. i am not able to create a test page that reproduces the problem. I noticed that the page loses a lot of styles that are defined. like page margins, etc. So, it's not just the header that's shifting. if anyone can think of why clicking on a link that calls javascript would break the css link, please reply.

[Xapti]

you need to know what your javascript is doing. it may be the culprit, or it may be something else. Disable javascript on your browser, and see if it still happens. You should also test in other browsers. Which browser(s) are giving the problem?
If javascript is the problem, it's not as much of a CSS issue as it is javascript.
Considering that you don't seem to know what's doing what for the webpage/website, one important way of solving your problem will be learning CSS and javascript.

Check your CSS file for "font-size" entries, and try to remove any that are redundant, or unintended. You may also just have to look for "font" since font size can be specified in the shorthand version (which isn't commonly used).

Lastly, to debug a CSS problem, use a debugger like firebug (or CSS viewer + ColorZilla) to see what elements/id/classes are getting the problem, then search that text in your CSS file to find the problem.

[D_Blackwell]

i am not able to create a test page that reproduces the problem.

This indicates that in stripping down the code you pulled out the problem. Reverse course and start putting things back until the problem comes back.

As noted above, you will want to watch out for separating possible causes. The JavaScript itself would be on my list of suspects also.

[gifted2333]

my peer discovered the issue. the javascript was calling a web service that returned html. there were css definitions in that html that overroad the default styles, killing the layout. thanks for all your help.

[DrDoc]

There is nothing like this:

<textarea onclick="this.value = document.body.innerHTML"></textarea>