SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    bath
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Last few tweaks causing me pain! Can anyone shed some light?

    Hi,

    I'm getting to the end of building my site which has been quite a journey after making the decision to leave tables behind and fully embrace css.

    Definitely getting there but there are a few niggling bits I just can't figure.

    The site is here

    and the issues I can't resolve are:

    - In firefox there's a 13px gap below the Recent Projects header. in ie it's 3px I've tried everything but still it won't budge!

    - In Safari and Firefox (mac) the letter box main pic is mis-aligned 3px vertically

    I think that's about it unless anyone else can spot any other issues.

    The above probs are driving me mad and I'm sure I'm missing something glaringly obvious so if anyone could lend a quick hand that'd be great!

    Cheers, Dan
    Win more ebay auctions with this auction sniper

  2. #2
    SitePoint Addict psychedelic's Avatar
    Join Date
    Feb 2002
    Location
    Boston
    Posts
    284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought about the IE 3 pixel gap problem when reading your post even though you're talking about it appearing in the mac.

    In my experience it's been easier to design on a mac, get it working in both safari and firefox and then try to fix IE.

    That website (although ugly) has a wealth of information about gaps and things like that.
    The Internet is prettier on a Mac.

  3. #3
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    - In firefox there's a 13px gap below the Recent Projects header. in ie it's 3px I've tried everything but still it won't budge!
    You're experiencing collapsing margins. IE handles those incorrectly.

    Please fix your XHTML and (non-pseudo-class related) CSS errors.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    bath
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So very nearly there!!

    psychedelic: still can't figure what's going on with the homepic positioning in safari and firefox (mac) but thanks for the ie link - good for future ref for sure.

    Kravvitz: Once again thanks for your informed advice. I've now made the XHTML valid after a bit of head scratching but not sure how to clean up the CSS
    all the errors remaining are Unknown pseudo-element or pseudo-class
    The syntax looks fine to me. Hmmm

    Anyway, really good to know about collapsing margins, that gap was driving me mad! I now need to move the 'Recent Projects' definition list up 10px but again i've tried everything but nothing seems to work. Once again, I'm sure it's simple when you know. I've scoured numerous sites and applied the knowledge but the darned list doesn't budge. Can you spot anything obvious I'm missing out?

    Code:
    #snippets {
    	width: 200px;
    	text-align: left;
    	float: right;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-bottom: 0px;
    	margin-left: auto;
    	padding-top: 10px;
    	padding-right: 0;
    	padding-bottom: 0;
    	padding-left: 0px;
     }
    .snippetsbg {
    	width: 180px;
    	padding: 0px 10px 5px 15px;
    	background-image: url(http://www.danmauger.com/test/images/snippetsbg.gif);
    	background-repeat: repeat-y;
    	border-top: 1px solid #F2F2F2;
     }
    #first {
    	margin-top: 0.1em;
    	margin-bottom: 0px
    	}
    #snippets-list dt {
    	margin: 12px 0 0 0;
    	font-weight: normal;
    	}
    #snippets-list dl {
    	margin-top: 0.1em;
    }
    #snippets-list dd strong {
        color: #666;
        }
    #snippets-list dd strong {
    	color: #666;
    	}
    #snippets-list dt a {
    	float: left;
    	display: block;
    	margin: 2px 8px 0 0;
    	padding: 2px;
    	border: 3px solid #dbd5c5;
    	background: #fffefa;
    	}
    #snippets-list dt a:hover, #snippets-list dt.active a {
    	border-color: #fff;
    	background: #fff;
    	}
    #snippets-list dt.active a {
    	border-color: #EBF4D9;
    	background: #2D405B;
    	}
    #snippets-list dd.active a {
    	text-decoration: none;
    	font-weight: bold;
    	color: #2D405B;
    	border-bottom: none;
    	}
    Code:
    <div id="snippets"><img src="../images/recent-projects.gif" alt="recent projects" width="200" height="56">
      <div class="snippetsbg"><dl id="snippets-list" >
    		<dt class="first"><a href="../web-and-print-projects/charlotte-stevens.htm"><img src="../images/charlotte_snip.gif" alt="screenshot" width="40" height="40" border="0" /></a></dt>
    		<dd class="first"><a href="../web-and-print-projects/charlotte-stevens.htm">Charlotte Stevens</a></dd>
    		<dd>Pop Princess website revamp </dd>
    		<dt><a href="../web-and-print-projects/sequins-and-sawdust.htm"><img src="../images/sequins_snip.gif" alt="screenshot" width="40" height="40" border="0" /></a></dt>
    		<dd><a href="../web-and-print-projects/sequins-and-sawdust.htm">Sequins & Sawdust</a></dd>
    		<dd>New production on the South Bank </dd>
      		<dt><a href="../web-and-print-projects/the-cloud.htm"><img src="../images/cloud_snip.gif" alt="screenshot" width="40" height="40" border="0" /></a></dt>
    		<dd><a href="../web-and-print-projects/the-cloud.htm">The Cloud PSP Ads </a></dd>
    		<dd>National ad campaign </dd>
    		<dt><a href="../web-and-print-projects/gascoyne-place.htm"><img src="../images/gascoyne_snip.gif" alt="screenshot" width="40" height="40" border="0" /></a></dt>
    		<dd><a href="../web-and-print-projects/gascoyne-place.htm">Gascoyne Place </a></dd>
    		<dd>Award winning restaurant </dd>
      
      </dl></div>
    
    <img src="../images/web-snippets.gif" alt="web snippets" width="200" height="70" class="first">
    
    <div class="snippetsbg">
    
    <a href="http://www.digital-web.com/articles/does_your_copy_hold_up_to_a_quick_glance/" target="_blank" class="top"> Does Your Copy Hold Up To A Quick Glance? </a>
            <h6>By Jessica Neuman Beck</h6>
          <p>Quick - what does your site&rsquo;s copy say about you? Make sure your graphics are proportionate to the rest of the body text. <a href="http://www.digital-web.com/articles/does_your_copy_hold_up_to_a_quick_glance/" target="_blank">More</a> <img src="../images/right-dot-div.gif" alt="dots" width="179" height="13" /></p>
    
    <a href="http://www.digital-web.com/articles/where_did_my_beautiful_internet_go/" target="_blank">Where Did My Beautiful Internet Go? </a>
            <h6>By Sean Madden</h6>
      <p>Most web designers worth their salt know the phrase web design is a laughably broad term. Designing for the web entails understanding interaction design, information architecture.. <a href="http://www.digital-web.com/articles/where_did_my_beautiful_internet_go/" target="_blank">More </a></p></div>
    
    </div>
    Thanks again

    Dan
    Win more ebay auctions with this auction sniper

  5. #5
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ignore the "Unknown pseudo-element or pseudo-class" errors. As far as I can tell, it's a bug in the validator.

    Try this.
    Code:
    #snippets-list dt.first {
      margin-top: 0;
    }
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    bath
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, well I'll be happy to ignore them then!

    Muchas Gracias for getting back, that didn't work but it was pretty much there really. I just replaced the 0 for -10px

    Code:
    #snippets-list dt.first {
      margin-top: -10px;
    }
    Now just that niggly 2px misalignment in Safari and Firefox (mac) and I'm there!



    Thanks again, have a great day/night!

    Dan
    Win more ebay auctions with this auction sniper

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    bath
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I spoke to soon! Going through ie hell or more specifically ie6 hell Guess it's a right of passage

    The layout's pretty much there in Firefox but goes to pot in ie6 and to a lesser extent in ie7.

    The major problem lies with the Recent Projects and Web Snippets boxes. See here

    - The top of the first link and thumbnail is sliced off
    - The word 'Service' is repeated at the bottom left of the main content area.
    - The main logo is being pushed too far right
    - In this page the header and image detail is being pushed down

    If anyone could shed any light I'd be most grateful. Spent all day trying to find a solution!

    Cheers, Dan
    Win more ebay auctions with this auction sniper

  8. #8
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    bath
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    oh and here's the code :)

    Code:
    /* CSS Document */
     body {
    	width:100%;
    	height:100%;
    	margin:0;
    	padding:0;
    	text-align:center;
    	background:white url(http://www.airsauce.com/images/main_bg.gif) repeat-x 0% 0%;
    	font-family: Georgia,"Times New Roman",Times,serif;
    	font-size: small;
    	color: #2F3352;
     }
    #logo {
    	width: 180px;
    	height: 150px;
    	float: right;
    	text-align:left;
    	margin-top: 0;
    	margin-right: auto;
    	margin-bottom: 0;
    	margin-left: auto;
    	padding-top: 4px;
    	padding-right: 0;
    	padding-bottom: 0;
    	padding-left: 0;
     }
    #container {
    	width: 790px;
    	margin: 0 auto;
    	padding: 47px 0 0 0;
     }
    
    #nav {
    	float: left;
    	width: 40em;
    	margin-top: 0;
    	margin-right: auto;
    	margin-bottom: 0;
    	margin-left: auto;
    	padding-top: 12px;
    	padding-right: 9px;
    	padding-bottom: 9px;
    	padding-left: 9px;
    	}
    #nav ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	background: #383d44;
    	}
    #nav li {
    	float: left;
    	margin: 0;
    	padding: 0;
    	font-family: Georgia, serif;
    	font-size: 82%;
    	letter-spacing: 1px;
    	text-transform: uppercase;
    	}
    #nav li a {
    	float: left;
    	padding: 10px 0;
    	text-decoration: none;
    	color: #4F5398;
    	border: none;
    		width:102px;
    	}
    #nav li a:hover {
    	color: #E38E34;
    	background: url(http://www.airsauce.com/images/nav_bg.gif) no-repeat 0%;
    		width:102px;
    	}
    #nav li a.active {
    	font-weight: bold;
    	color: #4F5398;
    	background: url(http://www.airsauce.com/images/nav_bg.gif) no-repeat 0%;
    	width:102px;
    	}
    #projects {
    	margin-left: 1px;
    	}
    
    #PageTitle {
    	background:transparent url(http://www.airsauce.com/images/content_top.gif) no-repeat 0% 100%;
    	width: 570px;
    	float: left;
    	margin: 0 auto;
    	padding:3px 0;
     }
     #title {
    	float:left;
    	top:0px;
    	width:380px;
    	height:40px;
    	margin: 20px 0 0 40px;
    }
    
    /* Content
    .......................................................... */
    
    #content {
    	width: 485px;
    	float: left;
    	text-align: left;
    	height: 100%;
    	margin-top: 0;
    	margin-right: auto;
    	margin-bottom: 0;
    	margin-left: auto;
    	padding: 0 35px 120px 50px;
    	background-color: transparent;
    	background-image: url(http://www.airsauce.com/images/contentbg.gif);
    	background-repeat: repeat-y;
     }
    #content p{padding-bottom:12px; border-bottom:1px solid #F5F5F5;}
    #content p img{
    	float:left;
    	padding-top: 0;
    	padding-right: 0;
    	padding-bottom: 0;
    	padding-left: 0px;
    }
    #content div.subhead {
    	margin: 15px 5px 5px 0;
    	padding: 0 0 4px 14px;
    	font-weight: bold;
    	color: #343867;
    	border-bottom: 1px dashed #dbd5c5;
    	background: url(http://www.airsauce.com/images/star.gif) no-repeat 0 2px;
    	}
    
    #PageTitle {
    	height: 83px;
    	padding-top: 20px;
    	background-position: 0px 0px;
    	margin: 0 auto;
     }
    #homepic {
    	width: 570px;
    	height: 134px;
    	float: left;
    	padding:0;
    	margin: 0 auto;
     }
    #search{
    margin:0 auto;}
    #textfield {
    	width: 30px;
    	height: 15px;
    	outline-color: #ECE9D8;
    	border:1px solid #ece9d8; margin:10px auto 0 10px;
    }
    
    /* Snippets
    .......................................................... */
    
    #snippets {
    	font-size:97%;
    	width: 210px;
    	text-align: left;
    	float: right;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-bottom: 0px;
    	margin-left: auto;
    	padding-top: 10px;
    	padding-right: 0;
    	padding-bottom: 0;
    	padding-left: 0px;
     }
    #snippets a {
    	font-size:90%;
    	font-weight: bold;
    	padding-bottom: 3px;
    	text-decoration:none
    	border-top-width: 0px;
    	border-right-width: 0px;
    	border-bottom-width: 0px;
    	border-left-width: 0px;
    }
    .snipbg {
    	background-image: url(../images/snippetsbg.gif);
    	background-repeat: repeat-y;
    	padding: 0 0 0 0;
    	margin: 0 0 0 0;
     }
    .projectsbg {
    	width: 177px;
    	padding: 1px 20px 20px 20px;
    	background-image: url(..images/projects_bg.gif);
    	background-repeat: no-repeat;
    	background-position: bottom;
     }
     .snippetsbg {
    	width: 177px;
    	padding: 1px 17px 5px 24px;
    	background-image: url(../images/projects_bg.gif);
    	background-repeat: no-repeat;
    	background-position: bottom;
     }
    #snippets-list dt.first {
      margin-top: -10px;
    }
    #snippets-list dt {
    	margin: 12px 0 0 0;
    	font-weight: normal;
    	}
    #snippets-list dl {
    	margin-top: 0.1em;
    }
    #snippets-list dd strong {
        color: #666;
        }
    #snippets-list dd strong {
    	color: #666;
    	}
    #snippets-list dt a {
    	float: left;
    	display: block;
    	margin: 2px 8px 0 0;
    	padding: 2px;
    	border: 3px solid #dbd5c5;
    	background: #fffefa;
    	}
    #snippets-list dt a:hover, #snippets-list dt.active a {
    	border-color: #fff;
    	background: #fff;
    	}
    #snippets-list dt.active a {
    	border-color: #EBF4D9;
    	background: #2D405B;
    	}
    #snippets-list dd.active a {
    	text-decoration: none;
    	font-weight: bold;
    	color: #2D405B;
    	border-bottom: none;
    	}
    
    /* Snippets End
    .......................................................... */
    
    p {
    	margin: 0 auto;
    }
    #porthead {
    	padding-top: 0.4em;
    	padding-right: 0em;
    	padding-bottom: 0.3em;
    	padding-left: 0em;
    	font-family: Georgia, serif;
    	font-size: 2.6em;
    	font-style: italic;
    	font-weight: bold;
    	color: #D2232A;
    	width: 400px;
    }
    #footer {
    	height: 20px;
    	border-left: 3em;
    	width: 100%;
    	float: none;
    	font-size: 10px;
    	color: #FFFFFF;
    	background-color: #999999;
    	clear:both;
    	margin: 0 auto;
     }
    #footer a,a:visited{
    	color: #ffffff;
    	text-decoration: none;
    }
    #footer a:hover{
    	text-decoration: underline;
    }
    
    h1,h2,h3,h4,h5,h6{margin: 0 auto;padding: 0;}
    h1 {color: #9A9ED6; padding:15px 0 0 0; letter-spacing:-1px; text-align:right; width:95%; font-size:120%;}
    h1 span{color:#4F5398;}
    h2{
    	color: #9A9ED6;
    	padding:10px 0 0 0;
    	letter-spacing:-1px;
    	text-align:left;
    	font-size:170%;
    	font-family: Arial, Helvetica, sans-serif;
    }
    h3 {
    	color: #585CA1;
    	font-size:150%;
    	font-weight: bolder;
    	margin-bottom: 0px;
    }
    
    h5 {font-size: 11px; color:#9A9ED6; text-align:left; width:100%;}
    h6 {color: #666666;
    	font-weight:normal;
    	font-size:85%;
    	margin-top:3px;
    	margin-bottom:3px;
    }
    
    .foliolink {
    	padding-bottom: 5px;
    	margin-top: 10px;
    	margin-bottom: 20px;
    	text-decoration:none;
    }
    a:link, a:visited{
    	color:#E38E34;
    	border-bottom: 1px dotted #ccccd6;
    	text-decoration: none;
    }
    a:focus, a:hover{color:#4F5398; text-decoration:none;}
    a.more{
    	font-weight:bolder;
    	margin:0 auto;
    	text-decoration:none;
    	font-size: 100%;
    }
    a.more:link, a.more:visited{color:#E38E34;}
    a.more:focus, a.more:hover {color:#4F5398;}
    .more	{
    	color: #D2232A;
    	margin: 3px 0 3px 0;
    	}
    #quote {padding: 3em 2em 4px; font: italic 1.05em Georgia, serif;}
    #folioquote {
    	font: italic 1.05em Georgia, serif;
    	padding-top: 0em;
    	padding-bottom: 0px;
    	width: 400px;
    	padding-right: 2em;
    	padding-left: 2em;
    }
    
    #folionav	{
    	float: right;
    	color: #D2232A;
    	font-variant: small-caps;
    	text-transform: lowercase;
    	margin-right: 20px;
    	margin-bottom: 0;
    	width: 60px;
    	margin-top: 40px;
    	}
    #folionav a:link, p.categories a:link	{
    	color: #D2232A;
    	text-decoration: none;
    	border-bottom: 1px dotted #003;
    	}
    
    #folionav a:visited, p.categories a:visited	{
    	color: #D2232A;
    	text-decoration: none;
    	border-bottom: 1px dotted #ccccd6;
    	}
    
    #folionav a:hover, p.categories a:hover	{
    	color: #5BB045;
    	text-decoration: none;
    	}
    
    #folionav a:active, p.categories a:active	{
    	color: #5BB045;
    	}	
    	
    h4	{
    	clear: both;
    	font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    	font-size: 0.8em;
    	font-weight: normal;
    	text-transform: uppercase;
    	text-align: center;
    	border-top: 1px dashed #000;
    	border-bottom: 1px solid #000;
    	}	
    p.categories, p.responsibilities	{
    	color: #7f7f99;
    	font-variant: small-caps;
    	letter-spacing: .1em;
    	text-align: center;
    	text-transform: lowercase;
    	text-indent: 0;
    	margin: 1em 0;
    	}
    .post img	{
    	padding: 4px;
    	border: 1px solid #ccccd6;
    	margin: 0 0 .5em 0;
    	}
    
    .post img.inset	{
    	float: left;
    	clear: both;
    	margin-right: 10px;
    	}
    
    .post p+img	{
    	margin-top: 1em;
    	}
    
    .article img	{
    	float: right;
    	border: 1px solid #ccccd6;
    	margin-top: 3.3em;
    	margin-right: 0;
    	margin-bottom: 2em;
    	margin-left: 2em;
    	padding: 4px;
    	}
    
    #leftbox {
    	width: 50px;
    	height: 120px;
    	border: none;
    
    
    	float: left;
    		}		
    #rightbox {
    	width: 50px;
    	height: 40px;
    	border: none;
    	float: right;
    	padding-top: 6em;
    		}

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!-- #BeginLibraryItem "/Library/Meta.lbi" --><title>web designer | web design  | Uk Web Agency</title><!-- #EndLibraryItem -->
    <link rel="stylesheet" type="text/css" href="sIFR-print.css" media="print" />
    <link rel="stylesheet" type="text/css" href="sIFR-screen.css" title="default" media="screen" />
    <script src="sifr.js" type="text/javascript"></script>
    <link href="css/home.css" rel="stylesheet" type="text/css" />
    
    </head>
    <body onload="preloadImages();">
    <div id="container">
    			
    		<!-- nav-->
      <div id="nav">
    		<ul>
    			<li><a href="index.html" class="active">HOME</a></li>
    			<li><a href="about-uk-web-design-agency/about-us.htm">ABOUT</a></li>
    			<li><a href="web-and-print-projects/projects.htm" id="projects">PROJECTS</a></li>
    			<li><a href="products-services/services.htm">SERVICES</a></li>
    			<li><a href="uk-web-designer-contact/contact.htm">CONTACT</a></li>
    		</ul>
      </div>
    <!-- Nav-->	
    
    	<!-- Logo-->
    	<div id="logo"><a href="index.html"><img src="images/clients-include.gif" alt="uk web design - click here foto go to the home page" width="176" height="157" border="0" /></a>
    	  <!-- Search-->
      </div>
    
    	<!-- Page Title-->
    	<div id="PageTitle">
    	 <div id="title" >
           <div align="left"><img src="images/elegant.gif" alt="elegant interactive solutions" width="475" height="60" /></div>
          </div>
    	</div>	
    	<div id="homepic"><img src="images/homepic.jpg" alt="web design - search engine optimisation, seo" width="570" height="134" /></div>
      <!-- #BeginLibraryItem "/Library/Right Content.lbi" -->
    <div id="snippets"><img src="images/recent-projects.gif" alt="recent projects" width="220" height="61" />
      <div class="snipbg"><div class="projectsbg"><dl id="snippets-list" >
    		<dt class="first"><a href="web-and-print-projects/charlotte-stevens.htm"><img src="images/charlotte_snip.gif" alt="Charlotte Stevens" width="40" height="40" border="0" /></a></dt>
    		<dd class="first"><a href="web-and-print-projects/charlotte-stevens.htm">Charlotte Stevens</a></dd>
    		<dd>Pop Princess website revamp </dd>
    		
    		<dt><a href="web-and-print-projects/sequins-and-sawdust.htm"><img src="images/sequins_snip.gif" alt="Sequins and Sawdust" width="40" height="40" border="0" /></a></dt>
    		<dd><a href="web-and-print-projects/sequins-and-sawdust.htm">Sequins &amp; Sawdust</a></dd>
    		<dd>New production on the South Bank </dd>
      		
    		<dt><a href="web-and-print-projects/the-cloud.htm"><img src="images/cloud_snip.gif" alt="The Cloud" width="40" height="40" border="0" /></a></dt>
    		<dd><a href="web-and-print-projects/the-cloud.htm">The Cloud PSP Ads </a></dd>
    		<dd>National advert campaign </dd>
    		
    		<dt><a href="web-and-print-projects/gascoyne-place.htm"><img src="images/gascoyne_snip.gif" alt="Gascoyne Place" width="40" height="40" border="0" /></a></dt>
    		<dd><a href="web-and-print-projects/gascoyne-place.htm">Gascoyne Place </a></dd>
    		<dd>Award winning restaurant </dd>
    		</dl>
      </div></div>
    
    <img src="images/web-snippets.gif" alt="web snippets" width="220" height="61" class="first" />
    
    <div class="snipbg">
      <div class="snippetsbg">
    		<a href="http://www.digital-web.com/articles/does_your_copy_hold_up_to_a_quick_glance/" target="_blank" class="top"> Does Your Copy Hold Up To A Quick Glance? </a>
            <h6>By Jessica Neuman Beck</h6>
          <p>Quick - what does your site&rsquo;s copy say about you? Make sure your graphics are proportionate to the rest of the body text. <a href="http://www.digital-web.com/articles/does_your_copy_hold_up_to_a_quick_glance/" target="_blank">More</a> <img src="images/right-dot-div.gif" alt="dots" width="177" height="13" /></p>
    
    <a href="http://www.digital-web.com/articles/where_did_my_beautiful_internet_go/" target="_blank">Where Did My Beautiful Internet Go? </a>
            <h6>By Sean Madden</h6>
            <p>Most web designers worth their salt know the phrase web design is a laughably broad term. Designing for the web entails understanding interaction design, information architecture.. <a href="http://www.digital-web.com/articles/where_did_my_beautiful_internet_go/" target="_blank">More </a></p>
      <p>&nbsp;</p>
      </div></div>
    
    </div><!-- #EndLibraryItem --><!-- Content-->
    <div id="content">
    <h2>What we do</h2>
    	  <span class="style6"><strong>We love making things. </strong>    </span>
    	  We've been producing new media solutions for over 10 years.
    	  Whether you're small business 
    	  looking for a simple online presence or a Blue Chip looking to re-brand, we can deliver.
    	  <div class="more"><a href="about-uk-web-design-agency/about-us.htm" target="_blank" class="more">More here  </a></div>
    	
    	  <h2>Latest Project</h2>
    	  <span class="style6"><strong>Sequins and Sawdust </strong>is a lavish, circus based theatrical production 
    	    which is being held in a Big top on the South Bank in London 
    	    and slap bang in the Centre of Bristol. Tickets are flying out fast so grab one while you can
        </span><div class="more"><a href="http://www.sequinsandsawdust.co.uk" target="_blank" class="more">See the website</a></div>
    	
    <h2>Search Engine Optimisation</h2>
    
    <strong>Congratulations</strong>, you've now got a beautiful website. The next step is to tell the world or more specifically your target audience that you've arrived. There are a number of ways to attract visitors. The first and most effective way is by <em><a href="products-services/search-engine-optimisation.htm">Search Engine Optimisation</a></em> or <a href="products-services/search-engine-optimisation.htm">SEO</a><br style="clear:both;" />
        <div class="more"><a href="products-services/search-engine-optimisation.htm" class="more">Find out more about Search Engine Optimisation</a></div>
        
    <h2>Latest Project</h2>
    <span class="style6"><strong>We're passionate</strong> about   creating online solutions that enhance and further business. Good web design and development stems from an intrinsic understanding of your business and it's objectives - we always get to know your company and target market before we start the design and build process.</span>
    <div class="more"><a href="#" class="more">Find out more about our web design service </a></div>
    
      </div>
    </div>
    <script type="text/javascript">
    //<![CDATA[
    /* Replacement calls. Please see documentation for more information. */
    
    if(typeof sIFR == "function"){
    
    // This is the preferred "named argument" syntax
    	sIFR.replaceElement(named({sSelector:"h2", sFlashSrc:"conduit.swf", sColor:"#1F2752", sBgColor:"#FFFFFF"}));
    }; 
    //]]>
    </script>
    <div id="footer">
    	<p><!-- #BeginLibraryItem "/Library/Footer Links.lbi" -->
    <a href="Library/index.html">Home</a> | <a href="Library/about-uk-web-design-agency/about.htm">About</a> | <a href="Library/web-and-print-projects/projects.htm">Projects</a> | <a href="/products-services/services.htm">Services</a> | <a href="Library/uk-web-designer-contact/contact.htm">Contact</a> &nbsp;&nbsp;2007 <a href="http://www.airsauce.com">airsauce.com.</a>  All rights are reserved t. +44(0)1225 427638  <a href="Library/legal.htm">Legal</a>&nbsp;<!-- #EndLibraryItem --></p>
    	</div>
    </body>
    </html>
    Win more ebay auctions with this auction sniper

  9. #9
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) These explain how to fix part of the problem in IE6.
    That mysterious gap under images and embedded objects
    Images, Tables, and Mysterious Gaps

    My advice is that you replace this rule:
    Code:
    #snippets-list dt.first {
      margin-top: -10px;
    }
    with these:
    Code:
    #snippets-list {
      margin: 0;
    }
    #snippets-list dt.first {
      margin-top: 0;
    }
    2) It looks like you're experiencing IE's Duplicate Characters Bug

    3) You're also experiencing IE's Doubled Float Margin Bug

    4) On the Charlotte Stevens #homepic is still taking up space. Give it display:none instead of the <img> in it.

    P.S. I suggest you read Tips on Debugging Layouts.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  10. #10
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    bath
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PM'ed you
    Win more ebay auctions with this auction sniper


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
  •