3 replies [Last post]
cbserra
cbserra's picture
Offline
newbie
Last seen: 2 years 14 weeks ago
Timezone: GMT-5
Joined: 2007-09-04
Posts: 5
Points: 0

Hello,

Hopefully someone can point out my errors

I have a layout with a div containing a ul element. The div is set to overflow:auto to allow for a scroll bar if needed. It works in Safari, FF, IE7, but in IE6...the left DIV and/or UL does not render, making that element invisible.

Here is a screenshot of what it should look like. I am on a Mac so do not have available access to IE6, so any help would be appreciated! Thank you.

Screenshot (Click for full):

HTML:

M&L_cropped

You need to upgrade your Flash Player


//









































  • CURRENT PROJECTS


  • SERVICES






  • M&L Construction specializes in commercial construction, including site work, excavation, concrete, paving, and masonry.
    We are proud to have been part of the following building projects:



    • Wallingford Public Library

    • Sempra Energy Trading (Stamford)

    • Andor Capital Investments (Greenwich)

    • Wilton Presbyterian Church

    • Main Street Investors (New Canaan)

    • Waveny Health Center (New Canaan)

    • Waveny Arts Center (New Canaan)

    • The Rinks (Shelton)

    • Cara Therapeutics (Shelton)

    • Greens Farms Academy (Westport)









and the CSS (just pertaining to the affected elements--for the full CSS document: http://www.pure9studios.com/clientsDEV/_ml/SITE/css/main.css

/* @group SERVICES */

ul#services_header, ul#services_main {
position: relative;
margin:0;
padding:0;
list-style-type:none;
}

ul#services_header li, ul#services_main li {
display:inline;
float:left;
width:50%;
}

li.menu div {
position: relative;
width:95%;
height:300px;
overflow:auto;
}

li.menu ul {
position: relative;
width:90%;
margin:0;
padding:0;
list-style-type:none;
}

li.menu ul li.icon {
width: 30px;
}

li.menu ul li.icon img{
border: 2px solid #eddca7;
}

li.menu ul li.text {
font-size: 10px;
min-height:80px;
}

/* @end */

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Not tested.Since the <li>s

Not tested.

Since the <li>s are float, the <ul>s have no height. The {overflow: auto;} causes the div to enclose the floats in all but IE6.

Try

ul#services_header, ul#services_main {
  position:relative;
  margin:0;
  padding:0;
  list-style-type:none;
  overflow: hidden;       /*causes modern browsers and IE7 to 
                            enclose float children*/
  display: inline-block;  /*triggers hasLayout in IE*/ 
  }

ul#services_header, ul#services_main {
  display: block;         /*resets display w/o unsetting hasLayout*/
  }

Are you really going to use 20 images totaling 358 KB?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

cbserra
cbserra's picture
Offline
newbie
Last seen: 2 years 14 weeks ago
Timezone: GMT-5
Joined: 2007-09-04
Posts: 5
Points: 0

Thanks a lot..worked like a

Thanks a lot..worked like a charm

What do you suggest I do in place of the 20 images? Compress them more, or have fewer images?

Thanks again.

Chris

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Too many, too large

cbserra wrote:
Thanks a lot..worked like a charm

What do you suggest I do in place of the 20 images? Compress them more, or have fewer images?

Thanks again.

Chris
Both, I'd think.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.