Overlapping When Browser is shrunken

**coryholt** · 12-10-2006, 05:17 AM

I had this exact same problem with a previous design, but this time, I don't understand where the problem is. When you shrink the browser, some text overlaps each other. I dont have the site online, but here is the complete code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Cory Holt - Web Designer</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}

a{color: #4096EE; text-decoration: none; border-bottom: 1px dotted #4096EE}
a:hover {color: #FFF; background: #4096EE; border-bottom: none}
a img {border: none}
img {padding: 4px}

div#header h1{height:80px;line-height:80px;margin:0;
  padding-left:10px;background: #FFF;color: #4096EE}
div#content p{line-height:1.4}
div#about{background:#FFF}

div#contact a{border-bottom: none; color: #000}
div#contact a:hover{border-bottom: none; color: #000; background: none}
div#contact ul{list-style: none; padding-left: 10px}

div#navigation{background:#FFF}
div#extra{background:#FFF}
div#footer{background: #FFF;color: #000}
div#footer p{margin:0;padding:5px 10px}

h2{padding-left: 10px; color: #000}
h3{padding-left: 10px; color: #000}

div#wrapper{float:left;width:100%;margin-left:-33%}
div#content{margin-left:33%}
div#about{float:right;width:32.9%}
div#navigation{float:right;width:32.9%}
div#extra{float:right;clear:right;width:32.9%}
div#footer{clear:both;width:100%}

div#design-img{float:left;width:50%; padding-left: 10px}
div#design-img img{border: 5px solid #36393D; padding: 0px}
div#design-summary{float:left;width:45%; padding-left: 10px}
</style>
</head>
<body>
<div id="container">
<div id="header"><h1>Cory Holt - Web Designer & Developer</h1></div>
<div id="wrapper">
<div id="content">
<h3>One guy who like to design websites...</h3>
<p>
As you scour the web for that one person that will take your idea and craft it into something 
beyond your imagination, you’ve stumbled upon this site. But what is this site? I am Cory Holt,
a passionate designer and developer who cares about every single project that I work on. I am
one person who will bring you through the process, from beginning to end. I design, I develop,
and I code. And if there’s something that I can’t do, I have a vast network of friends that 
can. You’ll never be at a loss. My goal is to make sure that every single project I finish 
is exactly what you were looking for. Through my experiences working with a vast range of 
clients, I like to think that I have mastered my working routines which helps me work to my 
full potential and at a productive speed which helps keep the cost you pay down.</p>

<h3>Recent Work</h3>

<p>This is just a preview of some of the work that I have done in the past for various clients.</p>

<div id="design-img">
	<img align="left" src="img/placeholder.gif" alt="Design Project" /></a>
</div>
<div id="design-summary">
<p><strong>McSound Productions</strong> <small>http://mcsoundproductions.com</small><br/>
This is where I descrribe some of the highlights of the project. This includes details such as
what services I preformed, like web design and company branding, and what I enjoyed and didnt
enjoy about working on the project. Then there will be a link to more of this which goes to the
projects official page with more screenshots and a full description. <a href="#">More...</a>
</p>
</div>

<p align="right"><a href="#">View My Complete Portfolio</a></p>

</div>
</div>
<div id="about">
<a href="http://flickr.com/photos/cory-holt/318076326/">
<img align="left" src="http://static.flickr.com/131/318076326_0f07ba4d7b_s.jpg" alt="Average Me" /></a>
<p><strong>Who is Cory Holt?</strong> Cory Holt is an avid (tech) blogger, obsessed Flickr user, your typical
computer whiz kid, as well as a web designer. He resides in North Carolina and is into video games
and cars.</p>

<p><strong>Other Versions of Me:</strong><br/>
<a href="http://claimid.com/coryholt">ClaimID</a> / <a href="http://linkedin.com/in/coryholt">LinkedIn Resume</a> / <a href="http://flickr.com/people/cory-holt">Flickr</a> / <a href="http://hs.facebook.com/profile.php?id=1393680710">Facebook Profile</a>
</p>

<div id="contact">
	<p><strong>Contact Me:</strong></p>
	<small>
	<ul>
		<li style="height: 20px;"><a href="mailto:cory.holt@gmail.com" title="Drop me an Email"><img src="img/gmail.gif" alt="email" title="email" align="middle" height="16" width="16">cory.holt@gmail.com</a></li>
		<li style="height: 20px;"><a href="callto://coryholt" title="Skype Me"><img src="img/skype.gif" alt="Skype" align="middle" height="16" width="16">coryholt</a></li>
	</ul>
	</small>
</div>

</div>
<div id="navigation">
<h3>The Four Parts to Great Design</h3>
<h3>Web Standards</h3>
<p>All of the code that I write is compliant with the <a href="http://w3.org/Consortium/">W3C's Web Standards</a>. Keeping my code 
standardized makes sure that your users have the best experience possible by making sure 
that my code works for each and everyone no matter what operating system or browser they are 
using. By writing standardized code, I can also drastically cut down on the time that I am 
developing, therefore the cost for you is lowered greatly.</p>

<h3>Website Managment</h3>
<p>Thanks to <a href="http://wordpress.org">WordPress</a>, an amazingly powerful and lightweight publishing tool, you always are 
able to update and create content whenever you want, from wherever you are. As long as you 
have an internet connection, you’re good to go.</p>

<h3>Project Collaboration</h3>
<p>Using <a href="http://activecollab.com">activeCollab</a>, a great online open source project management and collaboration tool, you 
are never left out of the loop. With this software stored on my own server, you can be assured
a safe place to share and store information regarding our project that can be accessed at any 
time.</p>

<h3>Communication</h3>
<p>Along side of keeping you up to date on our progress, I also believe that communication is 
one of the most important aspects to making sure that you get what you want. I can usually 
always be contacted via instant messaging, email, and voice. Whether you just had a great 
idea for your website or your just wondering what I’m up to, you can almost always get in 
touch with me.</p>
</div>
<div id="extra">
<h3>Interested?</h3>
<p>If you are looking for a designer that is passionate about their work and that will not stop 
until you are 100% satisfied with the final product, then drop me an email using this form.</p>
</div>
<div id="footer">
<p>Coded With Valid <a href="http://validator.w3.org/check?uri=referer">HTML</a> + <a href="http://jigsaw.w3.org/css-validator/">CSS</a>, Hosted By <a href="http://dreamhost.com">DreamHost</a><br/>
Site Best Viewed With <a href="http://getfirefox.com">Mozilla Firefox</a><br/>
Copyright 2006 Cory Holt, All Rights Reserved</p></div>
</div>
</body>
</html>

**coryholt** · 12-11-2006, 02:01 AM

anyone?

**jscheuer1** · 12-11-2006, 04:29 AM

The only text that seems to be a problem here is:

Cory Holt - Web Designer & Developer

It appears to be the height and, especially the line height that is causing this, try:

Code:

div#header h1 {
margin:1em 0;
padding-left:10px;
background-color:#ffffff;
color:#4096ee;
}

instead.

**mwinter** · 12-12-2006, 02:33 AM

Originally Posted by coryholt

body{font: 76% arial,sans-serif}

Why would you want your visitors to read a large amount of text at such an uncomfortably small size?

Kudos for using percentages, though. It's a shame that you use pixel lengths for many other values.

<h3>One guy who like to design websites...</h3>

Where's the level 2 heading?

An align property? And pseudo-XHTML in a HTML document?

I find it disingenuous to state that "All of the code that I write is compliant with the W3C's Web Standards" when what you have posted is neither valid, compliant, nor representative of what you intended[1].

Originally Posted by jscheuer1

It appears to be the height

Yes. The min-height property would have been better.

and, especially the line height that is causing this,

That certainly exacerbates the problem.

Mike

[1] NET-enabled start-tags followed by a greater-than symbol are not the same as empty-element start-tags.

Thread: Overlapping When Browser is shrunken

Thread Tools

Search Thread

Overlapping When Browser is shrunken

Bookmarks

Bookmarks

Posting Permissions