Member Avatar for geryzone

Hello!

I'm having trouble with the CSS of this liquid (flixible ) layout. The problem occurs only in IE7.
Whenever I decrease the size of the browser the #eventsListing (6 images) drops under #content (text/copy).
I tried all kinds of hacks and freestyle solutions but nothing have worked so far.
Let me know if you think of something that might solve it.

Thank you in advance!

Happy coding. :)

/*CONTENT AREA*/

a {overflow:hidden;}
.clearLeft {clear:both;}

#contentArea {color:#000; font-family:Arial, Helvetica, sans-serif; max-width:100%; min-width:665px; padding-top:0px;}

        #content {width:30%; float:left;}
        #content h1 {padding:14px 13px 2px;}
        #content p {padding:0 13px;}

        #eventsListing {border-left: #a6aaad; float:left; width:450px;}

  * html #eventsListing {width:450px;}
  * html #content {width:30%; float:left;}
        #eventsListing ul {margin:3px; padding:5px; list-style:none !important;}
             #eventsListing li {float:left; padding:0;}
        #eventsListing li h2 {margin:0px;}

    #eventsListing .sector1 {}
    #eventsListing .sector1 a {background:url(/image.jpg) no-repeat; text-indent:-9999px;}
    #eventsListing .sector1 a:hover {background:url(/image.jpg) no-repeat;}
    #eventsListing .sector1 a:active {background:url(/image.jpg) no-repeat;}
    #eventsListing li a {display:block; width:200px; height:88px;}

            #eventsListing .sector2 {}
    #eventsListing .sector2 a {background:url(/image.jpg) no-repeat; text-indent:-9999px;}
    #eventsListing .sector2 a:hover {background:url(/image.jpg) no-repeat;}
    #eventsListing .sector2 a:active {background:url(/image.jpg) no-repeat;}
    #eventsListing li a {display:block; width:200px; height:88px;}

            #eventsListing .sector3 {}
    #eventsListing .sector3 a {background:url(/image.jpg) no-repeat; text-indent:-9999px;}
    #eventsListing .sector3 a:hover {background:url(/image.jpg) no-repeat;}
    #eventsListing .sector3 a:active {background:url(/image.jpg) no-repeat;}
    #eventsListing li a {display:block; width:200px; height:88px;}

            #eventsListing .sector4 {}
    #eventsListing .sector4 a {background:url(/image.jpg) no-repeat; text-indent:-9999px;}
    #eventsListing .sector4 a:hover {background:url(/image.jpg) no-repeat;}
    #eventsListing .sector4 a:active {background:url(/image.jpg) no-repeat;}
    #eventsListing li a {display:block; width:200px; height:88px;}


            #eventsListing .sector5 {}
    #eventsListing .sector5 a {background:url(/image.jpg) no-repeat; text-indent:-9999px;}
    #eventsListing .sector5 a:hover {background:url(/image.jpg) no-repeat;}
    #eventsListing .sector5 a:active {background:url(/image.jpg) no-repeat;}
    #eventsListing li a {display:block; width:200px; height:88px;}

               #eventsListing .sector6 {}
    #eventsListing .sector6 a {background:url(/image.jpg) no-repeat; text-indent:-9999px;}
    #eventsListing .sector6 a:hover {background:url(/image.jpg) no-repeat;}
    #eventsListing .sector6 a:active {background:url(/image.jpg) no-repeat;}
    #eventsListing li a {display:block; width:200px; height:88px;}
Edited by Reverend Jim because: Fixed formatting
  • 3 Contributors
  • 2 Replies
  • 184 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by Troy III
Member Avatar for ko ko

Pleas post your HTML codes.

Member Avatar for Troy III

Hello!

I'm having trouble with the CSS of this liquid (flixible ) layout. The problem occurs only in IE7.
Whenever I decrease the size of the browser the #eventsListing (6 images) drops under #content (text/copy).

That's exactly what the content should do when there isn't enough space to fit, so what is your problem exactly. Can we see the page?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.