Internet explorer 7 overflow using min-width

Question

affected page: http://adq.geantduweb.ca/

Firefox, Ie8,9 and Google chrome all run with the desired effect. The overflow works...

but internet explorer 7 i get a horizontal scroll at the bottom and you can see my white mask hiding the themed blue bar (Breadcrumbs)

any ideas to make this to work in ie7?

my overflow is on my #wrapper that has a min-width of 960px

Here is some of the CSS for the element that is causing the issue. (Note this is SASS CSS it outputs just like normal CSS when parsed.)

#wrapper
    min-width:960px
    overflow:hidden

#content
    background:#fff
    min-height:100px
    padding:1px 0px 0px 0px
    #component
        padding-bottom:30px
    .contentinner
        position:relative
        width:960px
        margin:0px auto
        .contentrightmask
            position:absolute
            top:-44px
            right:-10000px
            width:10000px
            z-index:900
            height:43px
            padding:0px
            margin:0px
            background:#FFF

thanks for the help!

score 0 · Answer 1 · edited May 23 '17 at 10:34

0

1.IE6 and 7 both do this, and it's caused by their stunningly creaky layout engine - it was never built with CSS in mind and it still shows, even in IE8(q). Put the float:right element first is probably the most commonly seen. By Keith More info
2.Or try setting them to display:inline or display:inline-block More info other link
3.Try to small change markup: place items with a float before items without it (from the same row). It should help. by oryol More info

edited May 23 '17 at 10:34

Community

1
1

answered Sep 05 '12 at 02:37

Snger

1,374
19
23

the element that is causing this is absolutly positioned. theses elements are NOT floated. i tried using display:inline and inline-block. didnt seem to make a diffrence.... also tried using zoom:1 in a few places... that also didn't help. – StiGMaT Sep 05 '12 at 17:10

score 0 · Answer 2 · answered Sep 05 '12 at 04:45

0

in your code

<div class="contentrightmask" slick-uniqueid="389"/> in ie7

which has possision absolute and width is 10000px and even it not contains any data remove this div or fix your Css

answered Sep 05 '12 at 04:45

gaurang171

9,032
4
28
30

this div has a white background. that Hides the right blue bar. the blue bar you see on the left is 100% from left to right. this box is used to HIDE the right side. the huge size insures masking for larger resolutions. its a MASK in other words. so ya its empty. – StiGMaT Sep 05 '12 at 17:04

score 0 · Accepted Answer · answered Sep 05 '12 at 17:23

0

I fixed IT

Thanks to : http://snook.ca/archives/html_and_css/position_relative_overflow_ie

i put position:relative to my #wrapper (the element that has the overflow:hidden.)

thanks everyone who tried :)

answered Sep 05 '12 at 17:23

StiGMaT

760
9
17

Internet explorer 7 overflow using min-width

3 Answers3