Member Avatar for elina_vg
elina_vg 0 Newbie Poster

Hi guys,
Im new to CMSms and am having some problems with IE.

Im using CMSms 1.5.3 PHP Version 5.2.6 and the problem I have is with IE7. I havent had the chance to see the page in IE6 so I dont know how it looks there. It looks fine in Mozilla.

My html

<div id="header-links">
        <ul>
                        <li ><a href="index.php" target="_self"  id="first"></a></li>
                        <li ><a href="index.php?page=reserver_vin"  id="second"></a></li>
         <li ><a href="index.php?page=events" id="third"></a></li>    
                        <li ><a href="index.php?page=kontakt" id="fourth"></a></li>      
                  </ul>   

      </div>

My Css

/* header links */
#header #header-links {
   position: absolute;
   top: 60px;    left:38px;
   color: #600;
   
}
#header #header-links a#first span {   
   padding:0 180px  289px 0;

height:289px;
background:url(uploads/images/vinlande.jpg) no-repeat;
}
#header #header-links a#first:hover span {
      background:url(uploads/images/vinlande_color.jpg) no-repeat;
}


#header #header-links a#second span {   
   padding:0 180px  289px 0;

height:289px;
background:url(uploads/images/reserver.jpg) no-repeat;
}
#header #header-links a#second:hover span {
      background:url(uploads/images/reserver_color.jpg) no-repeat;
}


#header #header-links a#third span {   
   padding:0 180px 289px 0;

height:289px;
background:url(uploads/images/events.jpg) no-repeat;
}
#header #header-links a#third:hover span {
      background:url(uploads/images/events_color.jpg) no-repeat;
}


#header #header-links a#fourth span {   
   padding:0 180px  289px 0;
height:289px;
background:url(uploads/images/kontakt.jpg) no-repeat;
}
#header #header-links a#fourth:hover span {
      background:url(uploads/images/kontakt_color.jpg) no-repeat;
}

Could anybody give me some ideas on how to solve my problem?

Thanks

  • 1 Contributor
  • 0 Replies
  • 68 Views

Dani AI

Generated

Likely causes for IE7 hiding a CSS-driven nav are differences in how IE7 treats inline elements, IE "hasLayout" requirements, and stacking/positioning quirks. For the CSS targets a child element inside the anchor for the background. If that child is missing or remains inline, IE7 can ignore the height/padding or collapse the element. Absolute positioning without an explicit stacking context can also leave the nav rendered behind other layers.

Quick checklist that helps isolate the problem: confirm the child element that should carry the background actually exists in the generated markup; inspect computed box sizes and stacking with IE7 developer tools; temporarily give the element a visible border to reveal its area; verify the surrounding container has a positioning context. Also check that a standards doctype is declared so IE7 is not in quirks mode.

Practical fixes to try (in this order): move the background onto the anchor itself and make that anchor a block-level element with explicit width/height; or keep the inner element but explicitly set it to display:block so height and padding are honored. Trigger IE7 layout when needed (for example zoom:1 on the affected element) and add a sensible z-index on the positioned container so the nav is above other content. Replace padding-based area hacks with explicit dimensions where possible.

Notes: keep real link text or screen-reader-only text for accessibility (CSS-only images hide semantics). If problems persist, validate the full rendered HTML from CMSms — malformed markup often explains cross-browser mismatches.

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.