SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    100% width not working in IE

    http://tinyurl.com/29wlcbb

    I cannot figure out why IE is not showing the 100% width I have set for the #stripes div and the #footer div. On my computer, I see the very top border and the footer stopping on the right way before the edge of the screen.

    I am aware of the other issues in IE (navigation mainly), but I wanted to get this figured out first.

    Thanks for any help.

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't quite follow you. I've tested your page in IE6,7 and 8 and both stripes and footer have 100% width.

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    No, I see the problem.

    That absolutely-positioned stripes div is screwing with things, I think.

    IE is indeed making the footer and top border 100% width... of the body. The body is not as wide as the stripes div.

    You can test by temporarily removing the min-width or the width: 100% on that... the scrollbar on IE should go away (if it doesn't then "stripes" isn't the one causing it... but I didn't see any other likely candidates).

    Really, I see it as a kind of unsteady kludge to use a div like that (I've seen it used fine, but its kludgy-ness was ok because they were dealing with CSS Opacity which does have special requirements)... instead, use that #wrap element you've got which is currently doing nothing. It's containing everyone else, so its background image will naturally be behind everything else... it can have the min-width: 1037 or whatever, and you won't need to also state a width: 100% with it because it'll be a regular block in the flow (so it'll grow without any help by default). An abso-po'd element does need that explicit "width: 100%;" so this solution may fix your problem.

    I notice the menu's css is repeated several times. I approve of the mention of :focus with the :hover in the last section, but it's missing from the other versions. Near the beginning, all focussed anchors have the useful "outline" removed, yet there is no separate :focus style anywhere... instead, I suggest you remove the outline only from the menu (where you have explicit focus styles to do the job for you) and leave them everywhere else. Esp tabbing through the facebook/twitter/feed buttons, I must rely on my browser showing the url at the bottom to know where I am... no no no. Give me outline, or give me some other style to tell me where I've tabbed to.

    I'm not a fan of the negative text-indent, and you already have the separate classes on each link anyway, so I'd go ahead and use Gilder-Levin so that your images just cover up text (which also gets styles for colour etc)... this prevents users with CSS on but no images (either yours don't load or they've turned them off for better surfing on slow connections or whatever) from getting a mystery-meat-menu.

    So anyway I think removing the stripes div entirely and making #wrap do the equivalent job will make IE happier.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    HI,

    You haven't set the left position of #stripes therefore IE is placing it 100% from where it thinks it is which is somewhere in the middle hence the horizontal scrollbar and mis-position.

    Just set left:0.

    Code:
    #stripes {
        position: absolute;
        width: 100%;
        min-width: 1037px;
        height: 430px;
        background: url(images/stripes-bg.jpg) top right no-repeat;
        left:0;
    }
    Auto position of absolute elements in IE is affected by text-alignment so you need to set co-ordinates to make sure you know where the element is going to be placed.

  5. #5
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help! Paul, you were correct and setting the left to 0 solved the problem.

    For the stripes, I was trying to use the technique explained here.

    Quote Originally Posted by Stomme poes View Post
    I notice the menu's css is repeated several times. I approve of the mention of :focus with the :hover in the last section, but it's missing from the other versions. Near the beginning, all focussed anchors have the useful "outline" removed, yet there is no separate :focus style anywhere... instead, I suggest you remove the outline only from the menu (where you have explicit focus styles to do the job for you) and leave them everywhere else. Esp tabbing through the facebook/twitter/feed buttons, I must rely on my browser showing the url at the bottom to know where I am... no no no. Give me outline, or give me some other style to tell me where I've tabbed to.

    I'm not a fan of the negative text-indent, and you already have the separate classes on each link anyway, so I'd go ahead and use Gilder-Levin so that your images just cover up text (which also gets styles for colour etc)... this prevents users with CSS on but no images (either yours don't load or they've turned them off for better surfing on slow connections or whatever) from getting a mystery-meat-menu.
    This is a custom child theme for the Genesis Framework by StudioPress, so a lot of the code is just from that. The first portion of menu CSS is the default Genesis code. I have it commented out since I'm not using the WordPress menu. Instead, I have a sprite menu and that's what the 2nd menu CSS is for. I will probably delete the first (default Genesis) when all is said and done.

    I agree about the negative text indent, but it's another feature of Genesis. I haven't looked into changing that yet.

    Thanks again, guys.


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
  •