SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6/IE7 extra padding and Xscroll

    http://www.stevekimforag.com/test/contact.html

    the "#volun_msg" id is getting butchered in IE6 (extra padding to right) AND IE7 (extra padding to the right AND adding an Xscroll).

    i added a background color of black in addition to the background wallpaper so the issues in IE6 and IE7 are easily noticeable.

    it looks ok... i guess... in other browsers though.
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, IE isn't using that padding space for the scrollbars, it's instead doing the scrollbars and then adding the 10px padding. You could just move the padding
    Code:
    #volun_msg{padding:0;}
    #volun_msg form{padding:10px;}
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cool cool... however, when i did that it worked, BUT the #volun_msg was getting reduced in width and height since no more padding. also, the footer info was getting butchered cuz of reduced width and height. so i added back to the width and height of #volun_msg and the same problem is still there.

    im really tired right now and i guess my left brain is not working right as i can't problem solve due to fatigue. do you think if i were to get rid of #volun_msg COMPLETELY and only do styling on "#volun_msg form{styling}" it would work? im gonna think about this and try this method after a long, deep sleep.
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  4. #4
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks Mr. Reese...
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It shouldn't have decreased in width/height. I literally only movd the padding to a new spot lol .

    Glad it worked though (I assume you got whatever you saw sorted)
    Off Topic:

    I'm left handed so I use the right side of my brain...random fact
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    It shouldn't have decreased in width/height. I literally only movd the padding to a new spot lol .
    ok i ftpd new style page w/the changes you suggested. however, don't you see how the footer now is being moved up because #volun_msg is now smaller? even if i add to the height and width of #volun_msg to compensate, the original problem still remains:

    IE6 #volun_msg width is bigger than in other browsers and is extending into the guys suit AND the black background is still present on the farthest right side of the #volun_msg.

    IE7 is adding a horizontal scrollbar and on the far right side there is the black background

    *black background was added to clearly show that the paper background is not meeting the width in only IE6 and IE7.
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    It's the 100% width in the clear_it style that is causing the horizontal scrollbar in IE7.

    Use height instead.
    e.g.
    Code:
    .clear_it {
      clear: left;
      /*width: 100%;*/
        height:1px;
      font-size: 0;
    }

  8. #8
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    It's the 100% width in the clear_it style that is causing the horizontal scrollbar in IE7.

    Use height instead.
    e.g.
    Code:
    .clear_it {
      clear: left;
      /*width: 100%;*/
        height:1px;
      font-size: 0;
    }
    worked great thanks Paul
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  9. #9
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    one last problem (i hope last):

    http://www.stevekimforag.com/test/about.html

    see the Yscroll section with the about info? yeah-there is no padding on the scroll box at the bottom for IE8. this problem occurs for the about, issues, and contact pages in the little scroll boxes. IE8 has padding on the top, right, and left sides, but NOT on the bottom .

    strangely, this problem is isolated to IE8 and the padding-bottom shows up in all other browsers.
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Read post #2 for an explanation and a fix .

    It's probably just a bug, but the padding doesn't seem to be added in when scrollbars are added. I'll report this bug to James Hopkins.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  11. #11
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Read post #2 for an explanation and a fix .

    It's probably just a bug, but the padding doesn't seem to be added in when scrollbars are added. I'll report this bug to James Hopkins.
    oh you mean the bit:
    #volun_msg{padding:0;}
    #volun_msg form{padding:10px;}

    yeah the problem w/that is the about and issues pages (#about_txt && #issues) have no child element like #volun_msg does (#volun_msg form).

    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well the padding obviously can't be put on a scrollbar element , so if you want, just designate the first child (whatever that is) (using > selector) and then set the bottom padding on that.

    Some questions-what element (type) will always be the first child of the about_txt/volumn_msg page. What kind of structure will always be similar
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  13. #13
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Well the padding obviously can't be put on a scrollbar element , so if you want, just designate the first child (whatever that is) (using > selector) and then set the bottom padding on that.

    Some questions-what element (type) will always be the first child of the about_txt/volumn_msg page. What kind of structure will always be similar
    you lost me. this is like some da vinci mirror writing or something. can you please at least tell me how i should style the #about_txt {} so i can get the padding-bottom to show up in IE8?
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by SirFrigglesworth View Post
    you lost me. this is like some da vinci mirror writing or something. can you please at least tell me how i should style the #about_txt {} so i can get the padding-bottom to show up in IE8?
    You'll have to make space on another element instead.

    You could remove those breaks you have in that section and use some padding bottom on the p element instead.

    e.g.
    Code:
    #about_txt p{padding-bottom:15px;margin:0}

  15. #15
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SirFrigglesworth View Post
    you lost me. this is like some da vinci mirror writing or something. can you please at least tell me how i should style the #about_txt {} so i can get the padding-bottom to show up in IE8?
    As Paul said another element would be neede.

    My last post was a question on the general structure of the page. I could have given you a global CSS rule to place in your file and that would ensure on all pages the padding would show.

    Though make sure you have a common wrapping element that comes after (or before) the scrollbar element to compensate for IE8
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  16. #16
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks everyone. no real quirks to speak of anymore.... i think.

    when is Claussen gonna get picked?
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  17. #17
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  18. #18
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SirFrigglesworth View Post
    when is Claussen gonna get picked?
    Excuse me?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  19. #19
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Excuse me?
    lol i was watching the NFL draft while i was posting... the funny thing: Jimmy Clausen got picked 20 seconds after i clicked post.

    he has Steve Smith to throw to now. wow-he got lucky.
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  20. #20
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    I was watching that as well, although I stopped for a few minutes to post up on here..Ravens got a very nice draft going on.

    I do feel bad for the Broncos though. They are SOL this season. I also feel that the Colts are done
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  21. #21
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Off Topic:

    I was watching that as well, although I stopped for a few minutes to post up on here..Ravens got a very nice draft going on.

    I do feel bad for the Broncos though. They are SOL this season. I also feel that the Colts are done
    yeah it was real cool when Ray Lewis announced the draft pick. ironically, it was a fellow linebacker.

    but im a BEARS fan!!!! can you believe the run first bears hired mike martz and are gonna air it out now with Cutler? next year is gonna be awesome.
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  22. #22
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Certainly will be an interesting season to say the least. I just wish that the people picked wouldn't make such big speeches..accept the draft and move on..This is becoming OT though we should probably move this to PM once it gets reinstated .

    Bears?? I'll remember that when we kick your teams butt
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •