CSS Issues With Site Sidebar

Discussion in 'CSS' started by Elven6, Oct 18, 2010.

0
  1. #1
    Hello,

    I seem to be having some CSS related issues with my site, for example,

    http://www.thatgamingsite.com/id939-Xbox-360-Getting-Exclusive-Fallout-New-Vegas-DLC.html

    The sidebar (on the right) isn't aligned correctly.

    In the latest build of FireFox for example, it looks like this,

    http://www.uploadscreenshot.com/image/150404/8361040

    It's similar with other browsers as well. In FireFox again with Adblock it looks like this,

    http://www.uploadscreenshot.com/image/150376/6042730

    In Internet Explorer 8 it looks like this,

    http://imgur.com/p7DoC.png

    In IE compatibility mode, it looks even worse. I'd post a screenshot but I can't see to get the entire thing to show.

    My CSS skills are limited and I've done what I can, but I haven't been able to find a solution. Any ideas?
     
    Elven6, Oct 18, 2010 IP
  2. GWiz

    GWiz Peon

    Messages:
    359
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #2
    The reason your layout breaks is because once the ad is removed (with adblock), then there is no element there any longer to replace it. You can place the ad inside a div block the same size as the ad itself, that way if the ad disappears, then the div block will remain, making sure nothing else shifts.
     
    GWiz, Oct 19, 2010 IP
  3. Elven6

    Elven6 Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hi,

    Thanks for the reply,

    I tried implementing your suggestion with the following code, 

    #sidebar_ad_300_250 {
width:300px;
height:250px;
}
    Code (markup):
    But it doesn't seem to want to implement itself properly (as you can see from visiting a page). I've tinkered around with all sorts of float, padding, etc variables and nothing so far.

    Any ideas?
     
    Elven6, Oct 19, 2010 IP
  4. GWiz

    GWiz Peon

    Messages:
    359
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Try adding a float:left; (or right) to that block.
     
    GWiz, Oct 19, 2010 IP
  5. Elven6

    Elven6 Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    When I add a right float to it, I think it might have fixed the issue since sometimes the empty box appears where the ad should be but the ad itself does not.+

    Edit: I fixed the issue by changing the margin-top on the right sidebar, but it still seems to break when ad block is on?
     
    Last edited: Oct 20, 2010
    Elven6, Oct 20, 2010 IP
  6. GWiz

    GWiz Peon

    Messages:
    359
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I don't use adblock so I can't see the behavior, but I would suggest using Firebug to determine what is happening (i.e. what is being removed) to see what causes your page to break.

    Another recommendation I would make is to consider adding a wrapping div around all the elements in your header. That way if something within the header is lost, the rest of the elements below won't try to move up into it. As long as you set a fixed height to the header element.
     
    GWiz, Oct 20, 2010 IP