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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jan 2009
    Posts
    160
    Thanks
    40
    Thanked 1 Time in 1 Post

    Question Banner in ie 7 not in same place

    I am having a problem with this banner: site link

    in internet explorer 7 only the banner is pushed right to the top meaning it gets covered by the top left logo.

    The weird thing is that this is how I expected it to act in all browsers however there is a good space between the logo and the banner in all other browsers.

    I want it to have the space though. So any ideas on what is causing this to happen only in ie7 would be helpful. Thanks.

  • #2
    Regular Coder
    Join Date
    Jun 2008
    Posts
    173
    Thanks
    2
    Thanked 9 Times in 9 Posts
    add float:left in both divs

    Code:
    #menubar {
    background:url(images/menubar_bg.png) repeat-x;
    height:40px;
    width:100%;
    float:left;
    }
    
    .textcontent {
    	text-align:left;
    	color:#000;
    	padding-left:25px;
    	padding-right:25px;
    	float:left;
    }

  • Users who have thanked vineet for this post:

    sackstein (12-14-2009)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello sackstein,
    I'm not sure floating a full width div is the right approach. We float things to put other things beside them and if it's full width ...

    Try adding some padding in that container div, like this -
    Code:
    .textcontent {
    	text-align:left;
    	color:#000;
    padding: 100px 25px 0;
    }
    You have another problem there.
    Your #content is 950px wide.
    50px of padding makes .textcontent only 900px wide.
    Your banner_psa.png is 913px wide.
    Have a look at how the box model works.

    ..
    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

  • Users who have thanked Excavator for this post:

    sackstein (12-14-2009)

  • #4
    Regular Coder
    Join Date
    Jan 2009
    Posts
    160
    Thanks
    40
    Thanked 1 Time in 1 Post
    Thanks,

    Adding float left to the #menubar seemed to do the trick along with adding a top padding to just the image. seems to work in all browsers.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    It should probably be margin on the image itself. I didn't do that because I hate inline styles so showed you padding on the containing div instead.

    Did you look at the other issues I mentioned?

    You have some errors found by the validator to fix as well.
    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

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Instead of floating a fullwidth #menubar, try this
    Code:
    #menubar {
    background:url(images/menubar_bg.png) repeat-x;
    width:100%;
    background: #f00;
    }
    The red background is just for testing so you can see what that div is doing.
    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

  • Users who have thanked Excavator for this post:

    sackstein (12-14-2009)

  • #7
    Regular Coder
    Join Date
    Jan 2009
    Posts
    160
    Thanks
    40
    Thanked 1 Time in 1 Post
    I don't have time right now to test this out since it appears to be working (even though I don't understand it fully right now)...

    I will fix this fully later tonight using your advice. Thank you so much.

    Rob


  •  

    Posting Permissions

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