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 -
Then check it in IE.
Here is the CSS code:
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!
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.
<DIV id="subcontent"><IMG src="http://www.springboarddesigngroup.com/dev/images/hr.gif" width="565" height="8">
<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>Apex, N.C. – Sept. 13, 2004 – 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>Ben Woodward, founder of Perpetua Interactive and now art director for Springboard
Design Group, says the combined company’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>“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,” Woodward says. “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.”</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 “build-it-and-customers-will-come,” hands-off approach
to creating marketing materials.</P>
<P>“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,” Terenzi says.
“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.”</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>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’s clients have
included University of North Carolina at Chapel Hill, Merrill Lynch &
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:email@example.com"> firstname.lastname@example.org</A>
or call 919.363.9975.</P>
<P align="center"># # #</P>
Daniel Pearson, Porchfire Communications – 919.372.9112 – email@example.com</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"> </P>
<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 firstname.lastname@example.org</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>
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 ;)
Thanks Paul!! Worked great!