SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Dinah-Moe Humm mudshark's Avatar
    Join Date
    Dec 2003
    Posts
    1,072
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IExpl problem with xhtml valid page

    Hi,

    I'm having a problem with this page:
    http://portfolio.moonbug.org/about.php

    In Safari and Firefox (OS X) the page shows up fine, i.e. picture to the left, and to the right of it some text. Windows IE is another story however: once the text to the right becomes taller than the image, the content below lines up with the picture. I checked and the page does validate as xhtml 1.0 Transitional.

    What am I doing wrong?
    Thanks for any replies...

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks fine in IE6 and IE7 on the PC. Have you fixed the problem?

    If you think the problem still exists would you be able to post a screenshot please?

  3. #3
    Dinah-Moe Humm mudshark's Avatar
    Join Date
    Dec 2003
    Posts
    1,072
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks much for having a look csswiz!
    I guess the friend that had a look at it on his windows machine is still running IE 5.x which I have no intention of catering for heh heh...

    Cheers!

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure which version of IE your friend is running as I've checked it in IE5.01 and IE5.5 and neither of them display the problem you describe.

    You do have a problem with your font size a bit as the td isn't inheriting your .item styles so you'll need to add something like this to get it to display the same as other browsers but other than that IE5.01 and IE5.5 look fine.

    Code:
    .item td {
      font-size: 11px;
      color: #666;
    }
    However, I would question why you even need to use tables and you certainly shouldn't be using absolute font sizes as IE6 and lower won't allow your users to resize their text so that's something else you should definitely look into fixing.

    Hope that helps.

  5. #5
    Dinah-Moe Humm mudshark's Avatar
    Join Date
    Dec 2003
    Posts
    1,072
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by csswiz
    I'm not sure which version of IE your friend is running as I've checked it in IE5.01 and IE5.5 and neither of them display the problem you describe.
    Weird -- I'll have to find out about that.

    Quote Originally Posted by csswiz
    You do have a problem with your font size a bit as the td isn't inheriting your .item styles so you'll need to add something like this to get it to display the same as other browsers but other than that IE5.01 and IE5.5 look fine.
    Got it, thanks.

    Quote Originally Posted by csswiz
    However, I would question why you even need to use tables and you certainly shouldn't be using absolute font sizes as IE6 and lower won't allow your users to resize their text so that's something else you should definitely look into fixing.
    About the table usage: you're absolutely right about that one. It was a bit of an emergency fix because I had initially coded the .item css to hold only an image and a tiny bit of text next to it that never gets to be taller than the image. Then of course up came the about page...
    As for the fixed font size: perhaps I should look into using em, yes. I'm one of those controlfreaks who hates to leave any of the visual aspects of a site to the user - bad habit I know...

    Thanks again!

  6. #6
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could it possibly be IE5.2 on the Mac? I don't have access to that but from experience I know that it's the one browser that causes the most problems for me.

    If you use the following HTML instead of the table

    HTML Code:
    <div class="item clearleft"> <img src="images_folio/about-me.png" alt="me"> 
        <div id="aboutcontent"> 
          <h1>About Me</h1>
          <h2>Studies</h2>
          I have a bachelor's degree in graphic arts. 
          <h2>Interests</h2>
          <p style="margin-top: 0pt;">I love design, illustration and drawing, whether 
            for commercial purposes or not. My admiration for people like Robert Crumb, 
            Manara and Moebius is limitless.</p>
          <p>When I'm not playing around with pen and ink, you'll probably find me 
            at my Mac, toying around with software or working on one of my personal 
            sites.</p>
          <p>Aside from that I'm something of a music freak. Favorites include Frank 
            Zappa, Neil Young, Rufus Wainwright, Elliott Smith, Johnny Cash, Steely 
            Dan and Sufjan Stevens. I used to play guitar in a now obsolete band called 
            “Moonbug” which is where the domain name comes from.</p>
          <h2>Skills</h2>
          I am proficient in the following areas: 
          <ul>
            <li>xhtml</li>
            <li>php and mysql</li>
            <li>apache webserver</li>
            <li>Adobe Photoshop</li>
            <li>Adobe Illustrator</li>
            <li>Adobe Indesign</li>
            <li>Quark XPress</li>
            <li>Apple OS X</li>
          </ul>
          <h2>Languages</h2>
          Dutch is my maternal language. I'm fluent (reading and writing) in English 
          and French, and have notions of Spanish and German. 
          <h2>Random facts</h2>
          Some useless information for your perusal... 
          <ul>
            <li>I am currently 35 years old.</li>
            <li>I am married to a lovely Argentine girl.</li>
            <li>My cat's name is Zappa.</li>
            <li>My previous cat's name was Chopin.</li>
            <li>I've traveled to England, Ireland, France, Spain, Germany, Argentina 
              and Brazil.</li>
            <li>Italy and the United States are on my wishlist.</li>
          </ul>
        </div>
    and the following as your main.css

    Code:
    		body{
    			margin: 0;
    			padding: 0;
    			font-size: 70%;
    			/* background: #eee url(images_folio/bottom.gif) bottom center repeat-x; */
    			background-color: #eee;
    			font-family: Verdana, Arial, Sans-Serif;
    		}
    			#header{
    				background-color: #403838;
    				width: 100%;
    				height: 150px;
    				background: #403838 url(header-back.png) top left repeat-x;
    			}
    			#portfolio{
    				position: absolute;
    				top: 0;
    				left: 0;
    				height: 150px;
    				width: 200px;
    				background: #403838 url(images_folio/portfolio.png) top left no-repeat;
    			}
    			div.img-link a {
    				display: block;
    				height: 150px;
    				text-decoration: none;
    }
    			#main{
    				margin-left: 200px;
    				margin-top: 40px;
    				margin-bottom: 30px;
    			}
    			.item{
    				width: 500px;
    				color: #666;
    				line-height: 17px;
    				height: 175px;
    				text-align: justify;
    			}
    			.item h1{
    				font-family: Helvetica, Verdana, Arial, Sans-Serif;
    				font-size: 190%;
    				font-weight: normal;
    				color: #666;
    			}
    			.item h2{
    				font-family: Helvetica, Verdana, Arial, Sans-Serif;
    				font-size: 130%;
    				font-weight: normal;
    				margin-bottom: 0;
    			}
    			.item img{
    				float: left;
    				background-color: #fff;
    				padding: 5px;
    				border: 1px solid #ccc;
    				margin-right: 30px;
    			}
    			#aboutcontent {
    				float: right;
    				width: 315px;
    				margin-bottom: 30px;
    			}
    			.clearleft{
    				clear: left;
    			}
    			ul{
    				margin-top: 4px;
    				margin-left: 7px;
    			}
    	
    	.textInput, textarea{	/* General style for my inputs when they're not highlighted */
    		font-size: 80%;
    		width:314px;	
    		font-family: Verdana, Arial;
    		background-color:#fff;
    		border:1px solid #ccc;
    		color: #666;
    	}
    	textarea{
    		height: 300px;
    	}
    	input, textarea{
    		margin: 3px 0 5px 0;
    	}
    	input.button{
    		background-color: #ccc;
    		color: #fff;
    		padding: 2px;
    		border: none;
    	}
    	.right{
    		float: right;
    	}
    	small{
    		font-size: 80%;
    		color: #666;
    	}
    	
    	.inputHighlighted{	/* Highlighting style */
    		font-size: 80%;
    		background-color:#eee;
    		color:#666;
    		width:314px;
    		border:1px solid #333;
    	}
    
    	#footer{
    		width: 100%;
    		height: 15px;
    		font-size: 70%;
    		padding-top: 10px;
    		padding-bottom: 10px;
    		background-color: #A1A1A1;
    		color: #eee;
    		text-align: center;
    		margin-top: 20px;
    	}
    then that should remove the table and also allow your users to resize the font size in earlier versions of IE. You might have to tweak the percentages of some of your elements as they weren't on this page so couldn't see what they were doing but it shouldn't take you two minutes just to change these through trial and error till you get the sizes you want.

    Allowing your users to resuze the text isn't just leaving the visual aspect to your users, it's about ensuring that your users can actually read the text on your site. Font sizes you specify maybe too small for somebody with poor eyesight so by allowing you users to resize the font, you are making your site more accessible and isn't a hard thing to build in from the start by simply using % or em's to specify your font size

    Hope that helps.

  7. #7
    Dinah-Moe Humm mudshark's Avatar
    Join Date
    Dec 2003
    Posts
    1,072
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, thanks much for the code! Turns out I linked to the wrong page btw (doh): I meant to refer to http://portfolio.moonbug.org/contact.php -- on that page the form to the right didn't display right. Your code fixed it.
    Oh, and the browser in question was IE 6...


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
  •