SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jul 2004
    Location
    Apex
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question IE Rendering Problem

    Hello everyone -

    I am pretty new to *** CSS based sites so I am hitting some walls that I am sure are spawned out of my lack of knowledge of CSS.

    Go here in Mozilla -
    http://www.springboarddesigngroup.co...nes_091304.htm

    Then check it in IE.

    Here is the CSS code:
    http://www.springboarddesigngroup.com/dev/sb.css

    It's messy right now and I plan to clean it up and organize it but you CSS gurus should be able to make heads and tails of it.

    Thanks for any help you can offer!

    Lenny

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Occasionally ie looses track of where it is when you have absolutely placed elements first in the html before static elements (sometimes affects mozilla also) even though it shouldn't make any difference it does. I always try to make sure that absolutely placed elements come after the static placed elements in the html so that they can't have any effect.

    Just move the absolute elements to the end of the html and then change the z-index on subcontent.
    Code:
    #subcontent {
     position: relative;
     visibility: visible;
     z-index: auto;
     width: 565px;
     margin-top: 175px;
     left: 60px;
     z-index:100;
    }
    Code:
    <BODY>
    <DIV id="subcontent"><IMG src="http://www.springboarddesigngroup.com/dev/images/hr.gif" width="565" height="8"> 
      <P>&nbsp;</P>
      <P><STRONG>SPRINGBOARD DESIGN GROUP LAUNCHES IN RESEARCH TRIANGLE PARK MARKET</STRONG><BR>
    	<EM>Company provides a new graphic design and brand communications resource 
    	for entrepreneurs and companies of all sizes</EM></P>
      <P>&nbsp;</P>
      <P>Apex, N.C. &ndash; Sept. 13, 2004 &ndash; Perpetua Interactive and Lenny 
    	Terenzi Interactive Media Design announced today the operations and assets 
    	of both companies merged into Springboard Design Group, a graphic design and 
    	brand communications company that specializes in serving entrepreneurs and 
    	forward-thinking companies of all sizes, based in the Research Triangle Park 
    	region of North Carolina.</P>
      <P>&nbsp;</P>
      <P>Ben Woodward, founder of Perpetua Interactive and now art director for Springboard 
    	Design Group, says the combined company&rsquo;s commitment to developing creative 
    	marketing materials, and strategies for packing and delivering those collateral 
    	materials to target audiences, strengthens the brand building efforts of current 
    	clients while developing new and exciting ways for ambitious companies to 
    	maximize profits and market share.</P>
      <P>&nbsp;</P>
      <P>&ldquo;Our goal is to continue transforming our ideas and visions for business 
    	communications into new revenue streams for current and future clients of 
    	our company,&rdquo; Woodward says. &ldquo;We accomplish these goals by working 
    	side-by-side with each of our customers to fully understand their business 
    	needs and the problems they face, and to create materials that inspire audiences 
    	to take note and take action.&rdquo;</P>
      <P>&nbsp;</P>
      <P> Lenny Terenzi, founder of Terenzi Interactive Media Design and now creative 
    	director for Springboard Design Group, says too many graphic design firms 
    	take a &ldquo;build-it-and-customers-will-come,&rdquo; hands-off approach 
    	to creating marketing materials.</P>
      <P>&nbsp;</P>
      <P>&ldquo;Springboard Design Group sets a new standard for graphic design and 
    	brand communications in the Research Triangle Park region by becoming an extension 
    	of an existing company, rather than another hired gun,&rdquo; Terenzi says. 
    	&ldquo;We help entrepreneurs and businesses of all sizes reach out to core 
    	customers and prospects, nurture business-to-business relationships, increase 
    	brand awareness, and most importantly, to stimulate profits.&rdquo;</P>
      <P>&nbsp;</P>
      <P> Springboard Design Group, headquartered in Apex, works with an impressive 
    	roster of existing clients, including Long View Center, Falken Reality Inc, 
    	Powell Medical Equipment, and Metro Magazine.</P>
      <P>&nbsp;</P>
      <P>About Springboard Design GroupSpringboard Design Group offers design services, 
    	including Corporate Identity (Brand Strategy, Visual Identity, Graphic Standards, 
    	Logotypes), Print (Stationery, Marketing Collateral, Advertising Design), 
    	and Web (Websites, Internets, Extranets, Multimedia), for forward-thinking 
    	companies of all types and sizes. Springboard Design&rsquo;s clients have 
    	included University of North Carolina at Chapel Hill, Merrill Lynch &amp; 
    	Co., Wake County Literacy Council, Alpheon Corporation, Osceola Recording 
    	Studios and Alligator Records.</P>
      <P>For more information, please visit Springboard Design Group on the Web at 
    	<A href="<A href="http://www.springboarddesigngroup.com">www.springboarddesigngroup.com</A">http://www.springboarddesigngroup.com">www.springboarddesigngroup.com</A>, 
    	send email to<A href="mailto:jump@springboarddesigngroup.com"> jump@springboarddesigngroup.com</A> 
    	or call 919.363.9975.</P>
      <P align="center"># # #</P>
      <P><STRONG>Media Contact:</STRONG><BR>
    	Daniel Pearson, Porchfire Communications &ndash; 919.372.9112 &ndash; dpearson51@nc.rr.com</P>
      <P>&nbsp;</P>
      <P align="center"><A href="#top"><IMG src="http://www.springboarddesigngroup.co...b_toparrow.gif" width="38" height="48" border="0"></A></P>
      <P align="right">&nbsp;</P>
    </DIV>
    <DIV id="secondlevelfooter" class="text11px"><IMG src="http://www.springboarddesigngroup.co...ges/footer.gif" width="580" height="41"> 
      <DIV align="right"><STRONG>Springboard Design Group</STRONG> 1002 Old Raleigh 
    	Rd Apex, NC 27502<BR>
    	<STRONG>tel</STRONG> 919.363.9975 <STRONG>fax</STRONG> 919.367.8399 jump@springboarddesigngroup.com</DIV>
    </DIV>
    <DIV id="masthead"><IMG src="http://www.springboarddesigngroup.com/dev/images/sub_masthead.gif" width="487" height="136"></DIV>
    <DIV id="mastheadlogo"><IMG src="http://www.springboarddesigngroup.com/dev/images/masthead_logo.gif" width="278" height="145"></DIV>
    <DIV id="arrowsub" class="subarrow"><IMG src="http://www.springboarddesigngroup.com/dev/images/sub_arrow.gif" width="217" height="544"></DIV>
    <DIV id="navcontainer"><A href="../index.htm"><IMG src="http://www.springboarddesigngroup.com/dev/images/mainnav_home.gif" width="141" height="28" border="0"></A><A href="../portfolio/portfolio.htm"><IMG src="http://www.springboarddesigngroup.com/dev/images/mainnav_portfolio.gif" width="141" height="24" border="0"></A><A href="headlines.htm"><IMG src="http://www.springboarddesigngroup.com/dev/images/mainnav_headlines.gif" width="141" height="24" border="0"></A><A href="../contact.htm"><IMG src="http://www.springboarddesigngroup.com/dev/images/mainnav_contact.gif" width="141" height="29" border="0"></A><IMG src="http://www.springboarddesigngroup.com/dev/images/mainnav_bottom.gif" width="141" height="63"></DIV>
    <DIV class="text11px" id="headlinesubnav">[<A href="headlines.htm">back to headlines 
      home</A>][<A href="headlines_archive.htm">back to headlines archive</A>] </DIV>
    </BODY>
     
    The page will now display correctly. This will have the added benefit of bringing the content higher in the html so that search engines see it earlier and screen readers don't have to real all the headers before they get to content etc.
     
    However if you want to keep a logical order to your page then make sure that your header container isn't absoultely placed and that it has a suitableheight to take up the screenspace so that other elements can follow logically without absolute postioning.
     
    As the header is first on the page then it doesn't need to be placed absolutely anyway, but you can of course absolutely place the internal header elements on top of it. This way you preserve the flow of the document and things can follow one after the other with explicit positioning.
     
    If that all seems like too much work then you could just change the subcontents margin:top:175px to top:175px and that will move it relatively and place it below the header. However, that means that all following content will need to be inside the subcontent div otherwise it will overlap by the amount that it has been relatively positioned.
     
    Hope that doesn't sound too confusing ;)
    
    Paul

  3. #3
    SitePoint Member
    Join Date
    Jul 2004
    Location
    Apex
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    Thanks Paul!! Worked great!


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
  •