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.

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) :slight_smile:

Off Topic:

I’m left handed so I use the right side of my brain…random fact :stuck_out_tongue:

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 :slight_smile:


#volun_msg{padding:0;}
#volun_msg form{padding:10px;}

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.

thanks Mr. Reese…

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.

It’s the 100% width in the clear_it style that is causing the horizontal scrollbar in IE7.

Use height instead.
e.g.


.clear_it {
  clear: left;
 [B] /*width: 100%;*/
    height:1px;[/B]
  font-size: 0;
}

worked great thanks Paul (:

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.

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

:injured:

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 :slight_smile:

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.


#about_txt p{padding-bottom:15px;margin:0}

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 :slight_smile:

thanks everyone. no real quirks to speak of anymore… i think:(.

when is Claussen gonna get picked?

ftpd changes:

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

Excuse me? :slight_smile:

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.

[ot]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[/ot]