SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2002
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hidden menu displaces text when viewed with IE

    Hi All,

    I am putting together a website which among other things contains a reviews page. By default reviews are arranged by date, however the user can change the sort order by clicking on the small, yellow, downward-pointing triangle to the right of the "review'" records title (see the review page here).

    The problem is that when viewed with IE, the sort order menu displaces the text that follows. It displays perfectly when viewed with Firefox. Originally I thought the issue could be due to the fact that the sort order menu is contained within a relatively positioned DIV and the problem could be changed by positioning it absolutely. However if I do this all the sort order menus on the page get placed on top of each other.

    No problem I thought, just place each instance of the sort order menu div within a separate parent DIV (i.e. the DIV tag which displays the date), since position absoluate place elements relative to the parent element. Strangely enough, when I tried this, all the sort order menu divs are still positioned on top of one another.

    It is at this point that I finally become frustrated enough to ask for help.

    Below is the CSS for the reviews page:
    Code:
        a.mainPageReviewTitle {
            background: #691515;
            text-decoration: none;
            /*font-weight: bold;*/
            color: #FFDD00;
            font-size: 11pt;
        }
        a.moreTextLink {
            font-size: 9pt;
            color: gray;
            text-decoration: none;    
        }
        a.navBarLink {
            display: block;
            background: #691515; 
            text-decoration: none;
            /*font-weight: bold;*/
            color: #FFDD00;
            font-size: 11pt;
            border: 1px solid black;
            padding-left: 5px;
            padding-bottom: 3px;
        }
        a.navBarLink:hover {
            background: #971E1E;
        }
        .sortlist {
            padding: 0px;
            margin: 0px;
            width: 80px;
            position: relative;
            left: -64px;
            visibility: hidden; 
        }
        .sortlist ul {
            margin: 0;
            padding: 0px;
            background: #6A1515;
            list-style-type: none;
            font-family: verdana, arial, sanf-serif;
            font-size: 12px;
        }
        .sortlist ul li h2 {
            color: #FFDD00;
            background: #6A1515;
            font-family: verdana, arial, sanf-serif;
            font-size: 12px;
            margin: 0px;
            padding: 0px 0px 0px 2px;
        }
        .sortlist ul li {
            border: 1px solid #6A1515;
        }
        .sortlist ul li a  {
            display: block;
            color: #FFDD00;
            background: #6A1515;
            font-family: verdana, arial, sanf-serif;
            font-size: 12px;
            text-decoration: none;
            padding: 0px 0px 0px 4px;
        }
        .sortlist a:link, .sortlist a:active, .sortlist a:visited {
            background: #6A1515; 
        }
        .sortlist a:hover {
            background: #971E1E; 
        }
        div.triangle {
            width: 0px; 
            height: 0px; 
            border-left: 5px solid #6A1515; 
            border-top: 5px solid #FFDD00; 
            border-right: 5px solid #6A1515; 
            border-bottom: 0px none #6A1515; 
            font-size: 1px; 
            line-height: 1px;
        }
        div.body {
            position: relative;
            width:700px;
            height:auto;
            border: 1px none black;
        }
        .dancestyle {
            position: relative;
            width: 180px;
            height: 200px;
            border: 1px solid #971E1E;
            margin: 3px;
        }
        div.dancestyletitle {
            position: relative;
            height: 20px;
            font-family: sans-serif;
            font-size: 10pt; 
            color: #6A1515;
        }
        div.dancestylebody {
            position: relative;
            height: 150px;
            border: 1px solid white;
        }
        div.sortbox {
            background-color: gray;
            /*height: 145px;
            width: 110px;*/
            border: 1px solid none;
        }
        div.navcontent {
            height: 225px;
            width: 110px;
            background-color: white;
            top: 10px;
            left: 5px;
            position: absolute;
        }
        div.homemaincontent {
            position: absolute;
            width: 390px;
            height: auto;
            left: 120px;
            top: 0px;
            border: 1px solid black;
            margin-left: 5px;
            margin-right: 5px;
        }
        div.maincontent {
            position: absolute;
            width: 573px;
            height: auto;
            left: 120px;
            top: 0px;
            border: 1px solid black;
            margin-left: 5px;
            margin-right: 5px;
        }
        .textbody {
            border-bottom: 1px solid #D3CDCF;
            margin: 0px;
            padding-bottom: 10px;
            padding-top: 5px;
            font-size: 10pt;
        }
      table.rating {
            font-family: sans-serif;
            font-size: 10pt;
        }
        div.newreview {
            background-color: #F2EBEE;
            border: 2px solid #691515;
            padding-bottom: 5px;
        }
        .newreviewtext {
            font-size: 12px;
            font-family: san-serif,serif;
            padding: 2px;
        }
        span.sortboxtext {
            font-size: 13px;
        }
        div.navbar {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 120px;
            height: 400px;
        }
        div.newcontenttitle {
            position: absolute;
            height: 20px;
            width: 170px;
            right: 0px;
            top: 0px;
            background-color: #691515;
            border: 3px solid #691515;
            text-align: center;
        }
        div.newcontent {
            position: absolute;
            height: auto;
            width: 170px;
            border: 3px solid #971E1E;
            right: 0px;
            top: 26px;
        }
        div.title {
            font-size: 10pt;
            color: #FFDD00;
            background-color: #6A1515;
            font-family: sans-serif,serif;
            font-weight: bold;
            border-top: 2px solid #6A1515;
            border-bottom: 2px solid #6A1515;
            margin-top: 0px;
            padding: 0px;
            padding-left: 5px;
        }
    Last edited by ben_m_gunn; Jun 18, 2005 at 04:05. Reason: Post too long
    Experience is that thing which lets you know you've made the same mistake yet again.

  2. #2
    SitePoint Addict fesh's Avatar
    Join Date
    Jan 2005
    Location
    Jackson, New Jersey
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try throwing a float:left in there, it should clear things up...I hope
    oh and the link wasn't working, so I couldn't assess the problem fully.
    Fesh
    imagine what it's going to be like

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2002
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply. I have checked the link and it appears to be working now. The problem has something to do with how IE and firefox interpret CSS (since it works perfecty in Firefox). I hope someone can offer some insight into this one as it is driving me crazy.
    Experience is that thing which lets you know you've made the same mistake yet again.


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
  •