Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Header & Sidebar display different in IE, Firefox, Safari; Need consistent results

Posted on 2009-07-09
4
Medium Priority
?
565 Views
Last Modified: 2013-12-08
In the website i've created, i have a JPG showing at the top of the page (along with title).  What needs to happen is that the "sidebar wrapper" wrap the page text around the JPG.  the website was created with an already designed template.  i am unsure how to 'update' the html, to get the result needed.  Please view the website www.sportstarget.biz.  it "behaves" as desired in the browsers Firefox and Safari.  It is a problem when opened in Internet Explorer.  Since the majority of users of this site will have IE, i need to find a solution.  You can view the source code on the page, of course.  
From the first page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="Keywords"
        content=
        "online advertising strategy, efficient marketing campaigns, sports business, pay per click, search engine marketing, keyword research, copywriting, campaign testing, search engine optimization, landing page optimization" />
  <meta name="Description"
        content=
        "Internet marketing and search engine marketing for the sports industry. Help fans and customers find your sports business with the right online advertising strategy" />
  <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />
  <meta name="robots"
        content="all" />
  <meta name="generator"
        content="RapidWeaver" />
  <meta name="generatorversion"
        content="3.6.7 NA (2777)" />
 
  <title>SportsTarget | Internet Marketing &amp; Search Engine
  Marketing for Sports</title>
  <link rel="stylesheet"
        type="text/css"
        media="screen"
        href="rw_common/themes/aqualicious/styles.css" />
  <link rel="stylesheet"
        type="text/css"
        media="print"
        href="rw_common/themes/aqualicious/print.css" />
  <link rel="stylesheet"
        type="text/css"
        media="handheld"
        href="rw_common/themes/aqualicious/handheld.css" />
  <link rel="stylesheet"
        type="text/css"
        media="screen"
        href=
        "rw_common/themes/aqualicious/css/styles/graphite.css" />
  <link rel="stylesheet"
        type="text/css"
        media="screen"
        href=
        "rw_common/themes/aqualicious/css/sidebar/sidebar_right.css" />
        
  <link rel="stylesheet"
        type="text/css"
        media="screen"
        href="rw_common/themes/aqualicious/css/font/modern.css" />
  <link rel="stylesheet"
        type="text/css"
        media="screen"
        href=
        "rw_common/themes/aqualicious/css/background/white.css" />
  <link rel="stylesheet"
        type="text/css"
        media="screen"
        href="rw_common/themes/aqualicious/css/width/800.css" />
<script type="text/javascript"
      src="rw_common/themes/aqualicious/javascript.js">
</script>
</head>
 
<body>
  <div id="gradient"></div>
 
  <div id="navcontainer">
    <!-- Start Navigation -->
 
    <ul>
      <li><a href="index.html"
         rel="self"
         id="current"
         name="current">Home</a></li>
 
      <li><a href="services/services.html"
         rel="self">Our services</a></li>
 
      <li><a href="work/work.html"
         rel="self">How we work</a></li>
 
      <li><a href="contact/contactus.html"
         rel="self">Contact us</a></li>
 
      <li><a href="about/aboutus.html"
         rel="self">About us</a></li>
 
      <li><a href="blog/blog.html"
         rel="self">Blog</a></li>
    </ul>
  </div><!-- End navigation -->
 
  <div id="container">
    <!-- Start container -->
 
    <div id="pageHeader">
      <!-- Start page header -->
      <img src="rw_common/images/target%20v2.jpg"
           alt="Site logo" />
 
      <h1>SportsTarget</h1>
 
      <h2>Internet Marketing for the Sports Industry</h2>
    </div><!-- End page header -->
 
    <div id="sidebarContainer">
      <!-- Start Sidebar wrapper -->
 
      <div id="sidebar">
        <!-- Start sidebar content -->
 
        <h1 class="sideHeader">What we do</h1>
        <!-- Sidebar header -->
        Your fans and customers are searching for you,
        <strong><em>right now</em></strong>.
        <br />
        <br />
        We help create custom Internet marketing campaigns, that
        help your business connect with these important customers,
        when &amp; where they're looking for you.
        <br />
        <br />
        <span style="font-size:17px; font-weight:bold;"><a href=
        "services/services.html"
           rel="self"
           title="Our services">Learn more</a></span>
        <br />
        <br />
        <a href="ideas/ideaslistreg.html"
             rel="self"
             title="Ideas list registration"><img class=
             "imageStyle"
             alt="Internet marketing ideas for sports"
             src="files/ideas%20graphic%202.jpg"
             width="197"
             height="260" /></a>
        <br />
        <br />
        <code><script type="text/javascript">
//<![CDATA[
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
//]]>
</script><script type="text/javascript">
//<![CDATA[
try {var pageTracker = _gat._getTracker("UA-7481046-3");pageTracker._trackPageview();} catch(err) {}
//]]>
</script></code>
        <br />
        <!-- sidebar content you enter in the page inspector -->
         <!-- sidebar content such as the blog archive links -->
      </div><!-- End sidebar content -->
    </div><!-- End sidebar wrapper -->
 
    <div id="contentContainer">
      <!-- Start main content wrapper -->
 
      <div id="content">
        <!-- Start content -->
 
        <div class="contentSpacer"></div>
        <!-- this makes sure the content is long enough for the design -->
        <strong>It's time for better solutions in sports
        marketing.</strong>
        <br />
        <br />
        Fans and participants are searching the Web for events,
        equipment, tickets and more. With the right online
        advertising strategy, sports businesses can turn those
        searches into sales.
        <br />
        <br />
 
        <div class="image-left">
          <img class="imageStyle"
               alt="Bicycle Race 2edited"
               src="files/page0_1.jpg"
               width="406"
               height="208" />
        </div>SportsTarget creates intelligent and efficient
        marketing campaigns that help your sports business thrive.
        We've been involved in sports marketing for more than 10
        years and understand the needs of your business - from team
        sports to sporting goods retailers.
        <br />
        <br />
        Our services include strategy and planning for Internet
        marketing; pay-per-click / search engine marketing; keyword
        research; copywriting; campaign testing and reporting;
        search engine optimization; landing page optimization;
        banner advertising; and social media strategy.
 
        <div class="clear"></div>
 
        <div class="clearer"></div>
      </div><!-- End content -->
    </div><!-- End main content wrapper -->
 
    <div class="clearer"></div>
 
    <div id="footer">
      <!-- Start Footer -->
 
      <div id="breadcrumbcontainer">
        <!-- Start the breadcrumb wrapper -->
 
        <ul>
          <li><a href="index.html">Home</a>&nbsp;&gt;&nbsp;</li>
        </ul>
      </div><!-- End breadcrumb -->
 
      <p>© 2009 Archer Enterprises</p>
    </div><!-- End Footer -->
  </div><!-- End container -->
</body>
</html>

Open in new window

0
Comment
Question by:eedavidson
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 43

Expert Comment

by:David S.
ID: 24820131
When I attempt to follow the URL you posted I get redirected to http://www.apple.com/mobileme/
0
 
LVL 5

Expert Comment

by:ti84p
ID: 24820170
I see the problem.  Try adding an IE conditional statement to set the margin-left on the text that gets covered to enough to keep it always to the right of the image.
0
 
LVL 5

Accepted Solution

by:
ti84p earned 2000 total points
ID: 24820188
      <div class="contentSpacer"></div>
        <span id="ieFix"><strong>It's time for better solutions in sports
        marketing.</strong>
        <br />
        <br />
        Fans and participants are searching the Web for events,
        equipment, tickets and more. With the right online
        advertising strategy, sports businesses can turn those
        searches into sales.
</span>


in head:
<!--[if IE]>
<style>#ieFix{margin-left:200px;}</style>
<![endif]-->
0
 

Author Closing Comment

by:eedavidson
ID: 31601879
Great catch.  Great work.  Thanks!
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

618 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question