Results 1 to 4 of 4

Thread: Overlapping When Browser is shrunken

  1. #1
    Join Date
    Aug 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Overlapping When Browser is shrunken

    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>

  2. #2
    Join Date
    Aug 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    anyone?

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by coryholt View Post
    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?

    <img align="left" src="img/placeholder.gif" alt="Design Project" />
    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].


    Quote Originally Posted by jscheuer1 View Post
    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •