SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    In Internet Explorer 6, float right isn't working, appears at the bottom

    As the title says Internet Explorer 6 is not recognising the float right - Map appears on the bottom. Please view the image of the problem here: http://i56.tinypic.com/1zbarrr.jpg. Can someone please help me fix this? Thanks in advance.

    Here is my html:
    HTML Code:
    <div id="contentWrapper">
    <div class="headings">
    <div class="contentLeft">
    <h2>Facilities</h2>
    <div class="row">
    <ul>
    <li>5 Artesian Thermal Pools on site for guests to use (1 cold pool during summer monnths)</li>
    <li>New spacious 1 &amp; 2 bedroom villas</li>
    <li>Basic Ensuite Cabins</li>
    <li>Tennis Court</li>
    <li>Kiosk (Meals available daily)</li>
    </ul>
    <p><a href="#">Read more…</a></p>
    </div>
    </div>
    <div class="contentMiddle">
    <h2>Attractions</h2>
    <div class="row">
    <h3>Public Transport</h3>
    <p>Local bus service picks up 3 times per day at the entrances of the park.</p>
    <p>Moree is accessible by train and coach travel and we are happy to provide transfers to/from the local station terminal.</p>
    <p><a href="#">Read more…</a></p>
    </div>
    </div>
    <div class="contentRight">
    <h2>Map</h2>
    <div class="row">
    <a href="http://gwydircarapark.com.au/website/wp-content/uploads/2011/10/map-large1.jpg" rel="lightbox"><img src="http://gwydircarapark.com.au/website/wp-content/uploads/2011/10/map-small.jpg" alt="Map small" title="Map small" width="220" height="167" class="alignnone size-full wp-image-26" /></a></p>
    </div>
    </div>
    </div>
    </div>
    Here is my css:
    Code:
    #contentWrapper {
    	width: 100%;
    	overflow: hidden;
    	margin-top: 10px;
    	color: #025c90;
    }
    
    .headings {
    	background: url('images/titlebar.gif') no-repeat;
    	width: 850px;
    	height: 40px;
    }
    
    h2 {
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 22px;
    	float: left;
    	width: 30%;
    }
    
    .contentLeft {
    	float: left;
    	width: 30%; /* 283px */
    	margin-left: 10px;
    	margin-top: 10px;
    	margin-right: 25px;
    }
    
    .contentLeft ul {
    	margin-left: 30px;
    	margin-right: 10px;
    	margin-bottom: 1em;
    }
    
    .contentLeft li {
    	list-style: disc;
    }
    
    .contentMiddle {
    	float: left;
    	width: 30%;
    	margin-top: 10px;
    }
    
    .contentMiddle p {
    	margin-right: 10px;
    }
    
    .contentRight {
    	float: right;
    	width: 30%;
    	margin-top: 10px;
    	line-height: 0.8em;
    }
    
    .contentRight p {
    	background: url('images/click-to-enlarge.gif') no-repeat;
    	width: 220px;
    	height: 24px;
    }
    
    .row {
    	width: 283px;
    	margin-top: 3em;
    }

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    IE6 has a double margin bug where they are they appear twice as big, there are a few different ways to fix it but because your code is pretty simple using the _ IE6 hack might be a good way to go. To use it simply see the below example:

    Code:
    .contentMiddle {
        _margin-right: 5px;
    }
    From there you can adjust it till it matches what you see in other browsers, personally i wouldn't bother supporting IE6 just because the chance of someone actually using it to see your website is slim to none.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks SgtLegend. I have tried your hack, but now am fed up with IE6 and as you said it will be a slim chance that someone will be using IE6, so I am fed up with that version, and have decided to not support that version any more.


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
  •