Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Mar 2009
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Float Right Causing Problems in IE 6 & 7

    Normally I wouldn't care about IE, but IE 6 & 7 unfortunately make up the VAST majority of my site's visits.

    So... everything in fine in FF and Safari, hell, it even looks fine on my iPhone, but in IE 6 & 7, my affiliate graphic links display in line with the image box that is meant to contain them.

    http://www.teamleaf.org/ is the site. It is the home page that is having the problem.

    Here is the lines of code in question:

    <div style="float:right;"><img src="images/ClustrMapAd.png" width="200" height="125" border="0" /></div>
    <div style="float:right; margin-top:16px; margin-right:-180px;"><a href="http://www2.clustrmaps.com/counter/maps.php?url=http://www.teamleaf.org" id="clustrMapsLink"><img src="http://www2.clustrmaps.com/counter/index2.php?url=http://www.teamleaf.org" style="border:0px;" alt="Locations of visitors to this page" title="Locations of visitors to this page" id="clustrMapsImg" onerror="this.onerror=null; this.src='http://clustrmaps.com/images/clustrmaps-back-soon.jpg'; document.getElementById('clustrMapsLink').href='http://clustrmaps.com';" /></a></div>

    <div style="float:right; margin-top:125px; margin-right:-200px;"><img src="images/ThanksAd.png" width="200" height="125" border="0" /></div>
    <div style="float:right; margin-top:141px; margin-right:-180px;"><a href="http://www.greenscapegardens.com/"><img src="images/GreenscapeAD.png" border="0px" /></a></div>

    The parts in bold are what is not aligning properly.

    Yes, I know I'm using in line styling, but I don't have time to change that at this point.

    Also, my page is valid except for alt tags on most of the images which isn't a big deal right now.

    Thanks in advance!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    I'd recommend you to check http://bonrouge.com/3c-hf-fluid.php to see how to build a good 3 column layout.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Mar 2009
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    I'd recommend you to check http://bonrouge.com/3c-hf-fluid.php to see how to build a good 3 column layout.
    I just briefly started on it...

    http://www.teamleaf.org/indextest.html

    IE doesn't seem to see that entire right column.

    What gives?
    Last edited by teamleaf; 03-30-2009 at 04:55 PM.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,682
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    Quote Originally Posted by teamleaf View Post
    I just briefly started on it...

    http://www.teamleaf.org/indextest.html

    IE doesn't seem to see that entire right column.

    What gives?
    You need to go through your CSS and clean out the leftover/redundant stuff that is in conflict.
    For example -
    Code:
    body {
    	margin-left: 0px;
    	margin-top: 8px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	background-color: #FFFFFF;
    }
    html {height:100%;}
    body {
    margin:0;
    padding:0;
    height:100%;
    background:#ffffff;
    }
    Code:
    #main {
    width:1000px;
    height:400px;
    position:relative;
    } 
    #Main {
    	position:absolute;
    	left:50%;
    	top:0px;
    	width:850px;
    	margin-left: -425px;
    	height:400px;
    }
    Validating shows plenty of errors that can be fixed. Both in your CSS and your markup.


    ...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Mar 2009
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Problems resolved. I used the 3 column layout with my own adjustments and modifications. Thanks!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •