SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot blackberryfan's Avatar
    Join Date
    Nov 2010
    Location
    middleOnowhere, South Africa.
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Ie only - right column displays under left and middle column

    Hi everyone,

    Excuse me for my silly question... But i am having a problem with a website i am creating.

    I have a 3 column layout with a header at the top and a footer under the 3 columns. The problem i have at the moment is that for some reason the 3rd, or right hand side column, which contains an adsense ad block, is displaying underneath the menu, or first column which is on the left hand side. This only happens in internet explorer and for some reason i did not notice this until now. The website used to display correctly a few weeks ago when i last checked it in IE, so im guessing a change that i have made to the .css file is causing this, as it displays like this in IE throughout the website. The question though, is which one. I am not too clued up about how my website layout is set up as it was a three column layout template that was created in dreamweaver. I have customised this original layout to suit my site.

    My website address is free4blackberry - Free BlackBerry Smartphone Downloads, Guides, News and More

    As i have recieved some very good advice from this forum before, this is naturally my first stop.

    If anyone could help me with this one, i would really appreciate it!!

    Thanks in advance.

    Craig.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Try removing the margin setting here:

    Code:
    .sidebar2 {
      background: none repeat scroll 0 0 #F4F4F4;
      float: left;
      margin: 0 5px; /* remove */
      padding: 10px 0;
      width: 20%;
    }
    If that doesn't fix it, then reduce the width by a % point or so as well.

  3. #3
    SitePoint Zealot blackberryfan's Avatar
    Join Date
    Nov 2010
    Location
    middleOnowhere, South Africa.
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Try removing the margin setting here:

    Code:
    .sidebar2 {
      background: none repeat scroll 0 0 #F4F4F4;
      float: left;
      margin: 0 5px; /* remove */
      padding: 10px 0;
      width: 20%;
    }
    If that doesn't fix it, then reduce the width by a % point or so as well.
    Hi and thanks! Yes that does fix the problem... But it turns out that my problem is a little more confusing than i had previously thought.

    Its not IE thats causing the problem, its the resolution of the screen i was viewing the site on. I mostly use a widescreen laptop to design my site. The margin that i set as you basically stated, is not neccessary as it just bumps the third column a bit to so that it is center when viewing the site on a widescreen. But when viewing the site on a resolution of 800x600 or 1024x768, the column just doesnt seem to fit.. This is as the advert in the column is a set size? Kind of throws a spanner in the works, because it either fits snug at one resolution and looks horrible at another, or visa versa... Any ideas?

    What resolution should i be designing my site in to start off with?

    How do the rest of you guys get things to fit so darn perfectly??

    Thanks!!

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    If you have columns set in % widths, you will run into problems like this if you have any fixed-width margins or paddings left or right of those columns.

    E.g.

    Code:
    .sidebar1 {
      background: none repeat scroll 0 0 #F4F4F4;
      float: left;
      margin: 0 5px 0 0;
      padding-bottom: 10px;
      width: 20%;
    }
    The thing to do is remove those margins, and if you need some left-right spacing, put it on inner element that have no set width (as you do on the inner div of the middle column).

  5. #5
    SitePoint Zealot blackberryfan's Avatar
    Join Date
    Nov 2010
    Location
    middleOnowhere, South Africa.
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Quote Originally Posted by ralph.m View Post
    If you have columns set in % widths, you will run into problems like this if you have any fixed-width margins or paddings left or right of those columns.

    E.g.

    Code:
    .sidebar1 {
      background: none repeat scroll 0 0 #F4F4F4;
      float: left;
      margin: 0 5px 0 0;
      padding-bottom: 10px;
      width: 20%;
    }
    The thing to do is remove those margins, and if you need some left-right spacing, put it on inner element that have no set width (as you do on the inner div of the middle column).
    Thanks Ralph!

    Yes that sorted the issue out for me. Additionally though, i had to remove the margin set in the div wrapping the ad, then play around with its padding a bit.

    It fits at whatever resolution i set it at, despite looking rather ugly at some resolutions, it fits. So i guess my goal is complete, but it looks like i too am left dreaming about those @media queries like Bryan in this article: Rethinking The Mobile Web

  6. #6
    SitePoint Member
    Join Date
    Oct 2012
    Location
    San Marcos, California, United States
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I am having problems with IE as well! HELP! :)

    Quote Originally Posted by blackberryfan View Post
    Hi everyone,

    Excuse me for my silly question... But i am having a problem with a website i am creating.

    I have a 3 column layout with a header at the top and a footer under the 3 columns. The problem i have at the moment is that for some reason the 3rd, or right hand side column, which contains an adsense ad block, is displaying underneath the menu, or first column which is on the left hand side. This only happens in internet explorer and for some reason i did not notice this until now. The website used to display correctly a few weeks ago when i last checked it in IE, so im guessing a change that i have made to the .css file is causing this, as it displays like this in IE throughout the website. The question though, is which one. I am not too clued up about how my website layout is set up as it was a three column layout template that was created in dreamweaver. I have customised this original layout to suit my site.

    My website address is free4blackberry - Free BlackBerry Smartphone Downloads, Guides, News and More

    As i have recieved some very good advice from this forum before, this is naturally my first stop.

    If anyone could help me with this one, i would really appreciate it!!

    Thanks in advance.

    Craig.
    I am having a similar problem and I've tried a lot of things to fix this but to no avail... can anyone help me to figure this out? It's driving me crazy!
    URL: www.hoghedz.com/buy-the-music.html

    My "Buy" links on the right of the music player drop below the left column but only in IE. I have the following code in the header:

    <!--[if IE ]>
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    border:0;
    }
    </style>
    <![endif]-->

    That was a recommended fix I found on another forum. And I've tried to remove margins in the css file, etc. It's probably something simple and I'm just not seeing it but at this point I can't look at this anymore. Ugh!

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Hi Hollianne. Welcome to the forums.

    This is a different issue. You are a tad lucky the right column isn't dropping in other browsers, too. What I would suggest is that you replace

    Code:
    <a name="buy">
    
    </a>
    with

    Code:
    <div id="buy">
    
    </div>
    It's invalid to wrap divs etc in an <a> element anyway. But on your page, the content is going full width anyhow, so the next thing to do is give the new #buy div a width (say 680px) and then float it left.

    The best way to do that on-page target link these days is to reference and ID rather than a "nave value. That's why I've used id="buy" instead of name="buy". You can put that id on any element, too, which is handy. It doesn't have to be an anchor.

    Hope that helps.

  8. #8
    SitePoint Member
    Join Date
    Oct 2012
    Location
    San Marcos, California, United States
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool

    Quote Originally Posted by ralph.m View Post
    Hi Hollianne. Welcome to the forums.

    This is a different issue. You are a tad lucky the right column isn't dropping in other browsers, too. What I would suggest is that you replace

    Code:
    <a name="buy">
    
    </a>
    with

    Code:
    <div id="buy">
    
    </div>
    It's invalid to wrap divs etc in an <a> element anyway. But on your page, the content is going full width anyhow, so the next thing to do is give the new #buy div a width (say 680px) and then float it left.

    The best way to do that on-page target link these days is to reference and ID rather than a "nave value. That's why I've used id="buy" instead of name="buy". You can put that id on any element, too, which is handy. It doesn't have to be an anchor.

    Hope that helps.

    Thanks so much! That fixed my column problem. Your help is much appreciated!!!

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Glad that helped.


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
  •