Text overlap in IE7

HTML & CSS
1

I’ve run into a really odd and intermittent problem on one of our pages while doing our table-free site redesign.

On our Memorandum pages, the text in the top section is overlapping the text in the bottom section. Example: http://www.fhwa.dot.gov/environment/noise/regulations_and_guidance/cemetery.cfm

In case it doesn’t show up for you, here’s a screenshot (attached).

The odd part is, it doesn’t do it on our development server. Only on our live server. And of course it only happens in IE.

Here’s the CSS for the area in question:


.memo {
	font-weight: bold;
	font-size: 30px;
	}

#memo:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
	}

#memohead {
	width: 100%;
	margin: 0;
	padding: 10px 0 0 0;
	}

#memohead:after {
    content: "."; 
    display: block; 
    height: 1px;
    visibility: hidden;
}

#memohead img {
	float: left;
	border: 0;
	padding: 0 5px 0 0;
	}

#memohead h1 {
	font-size: 200%;
	margin: 0;
	padding-top: 5px;
	}

#memohead p.subj {
	font-size: 120%;
	margin: 5px 0;
	}

#memohead p.small {
	margin-left: 60px;
	}

#memofromto {
	float: left;
	width: 45%;
	margin-bottom: 10px;
	}

#memodatereply {
	float: right;
	width: 45%;
	clear: right;
	margin-bottom: 10px;
	}

#memobody {
	width: 100%;
	float: left;
	}

#memobody ul, #memobody ol {
	padding-left: 25px;
	}

.hr { 
	width: 100%;
	border-bottom: 1px solid #27235E;
	margin: 0 0 8px 0;
	clear: both;
	}

.hr hr, .hrlite hr {
	visibility: hidden;
	}

If anyone has any ideas, I’m all ears.

2

Not getting a problem with IE8 but am with IE7.

on the style #memofromto add overflow: hidden;

3

We’ve cleared the cache over and over and over, and it still happens. It even happens on machines that have never before viewed this page.

@ryan: Good question about the float on #memobody. I’ll remove it and see if that changes anything.

4

Hi, try clearing your cache. I’m not seeing that at all :slight_smile: Any reason why “#memobody” is floated? That might be the cause-but then again I’m completely guessing since I can’t see hte issue on my IE7 :slight_smile:

5

The overflow: hidden seems to have fixed it. Thanks Phil!

6

just clear your cache :slight_smile: