h1 text getting clipped- strange

HTML & CSS
1

strange thing happening in Safari browser: my h1.title for the main content gets clipped off the top when I scroll down the page and the title touches the top of the view port. when i refresh it’s fine. I’m guessing I can fix it with css, though not sure.

B

2

It is probably being caused by having your font-size set in pixels and your line-height set in em’s. Make sure your line-height isn’t calculating out and causing it to be clipped in some browsers (IE is notorious for this).

3

I’m on windows (1280x1024), checked the site in Safari 3, 4 (via spoon.net/browsers) and Safari 5 installed locally, and everything seems to be fine.

What resolution are you using? It may have something to do with that. Check it in other rez’s as well as on other machines…

4

link:
http://www.dailyrx.com/topics/news/prescription-drug-news

open in safari (i’m on windows, not sure if it makes a dif)

just scroll down the page and scroll back up and you’ll see the h1 text gets chopped.

Let me know if you have any ideas.

Thanks.
b

5

I’m seeing all sorts of rendering issues here in all browsers. Browsers that obey the system metric (since I’m a large font/120dpi user) your menu placement is broken because you are using %/em fonts around them. The search box is also horribly broken, and I’m seeing float drop on your right column. It also doesn’t help that people running adblock the entire page is screwed up.

Let’s see… 3 validation errors, but that’s alt text so that’s nothing fatal to the design. Lets look at the source and…

Wow, talk about a punch in the face. Some fat bloated jquery nonsense I don’t even see used on the page, static javascript in the markup, IE conditional bull, and analytics running BEFORE the content (isn’t that supposed to go LAST, and most definitely NOT in the head?)… and that’s before we even get to BODY.

Class train wreck on the body tag – none of which looks like stuff that should even be necessary… comment placement proven to cause rendering bugs in IE, clearfix nonsense like it was still 2003, no images off graceful degradation, endless nested divs with classes for nothing, pointless classes on elements that should be inheriting off their parent (a heading tag is a title? Who’d have thought?!?), ID’s and unique classes on elements at the same time… is it any wonder it’s 39k of markup for only 4k of plaintext and 5-7 content images? (that’s roughly four times the necessary markup)

I mean this for example:


<div id="page-wrapper">
  <div id="page">
    <div id="header">
      <div class="section clearfix">
                <a href="/" title="Home" rel="home" id="logo"><img src="/sites/default/files/rxv2_logo.jpg" alt="Home" /></a>
                <div class="region region-header">
  <div id="block-block-6" class="block block-block region-odd odd region-count-1 count-7">
  
  <div class="content">
    <!-- ca-pub-9358598719781643/DailyRx-728x90 --><script type='text/javascript'> GA_googleFillSlot("DailyRx-728x90");
</script>  </div>

  </div> <!-- /.block -->
</div> <!-- /.region -->
 </div>
    </div>
    <!-- /.section, /#header -->

Is one giant load of code for what I’d have written as:


<div id="pageWrapper">
	<h1>
		<a href="/">
			daily<span>RX<span><span> - </span></span></span>
			<small>Relevant Health News</small>
		</a>
	</h1>
	<div id="topAdvert">
		<!-- ca-pub-9358598719781643/DailyRx-728x90 -->
		<script type='text/javascript'>
			GA_googleFillSlot("DailyRx-728x90");
		</script>
	<!-- #topAdvert --></div>

which takes it from 653 to 348 bytes. (in the CSS, h1 span would get the reddish brown, h1 span span being gilder-levin, and h1 span span span getting display none since it’s present for CSS off users only)

Problems run pretty deep - but that’s pretty much the norm for wordpress templates.

6

Let’s see. I’ve made changes to the css and both line-height:25px and font-size:30px are set. The problem keeps occurring. Is it the same for you, VernonK? I’m on windows.

I’ve also noticed the way the page loads is funny. The top loads quickly and then there’s a pause and then the rest loads. Just curious if that’s happening to all visitors.

Thanks.

B

7

must be a windows thing. It works fine on OSX

8

It looks like changing my h1.title font from Helvetica to Verdana fixed the problem.
Actually I noticed in Safari’s developer plugin that if I changed the h1 to h2 the problem went away. I changed things in my styles and kept checking until I changed the font-family to verdana and the problem went away.

Maybe Steve Jobs should focus on fixing that instead of undermining Flash.

thanks, y’all,

B

9

not a Wordpress but Drupal. This site uses the Zen Theming system. That what generates the extra divs.

I’m not following your comment:
“… h1 span span being gilder-levin, and h1 span span span getting display none since it’s present for CSS off users only”

Are you getting the same behavior in Safari?

B

10

Got a link?

11

thanks, I’ll try that.

B

12

I don’t know about that… Inspect the H1 with Firebug or Google Chrome Developer Tools… It shows a line height of 1.3em being set on all h1’s.

13

I wish it were a problem of mixing ems with px’s, but it’s not. Line-height is set to 30px. Font-size is set to 24px. There is nothing in the that style that uses anything else but pixels.

B

p.s. though I might try setting all to ems…