Forum Discussion

mdoriano's avatar
mdoriano
Contributor
13 years ago

Fix for IE8

We have a glitch that is happening only in IE 8 and 9 with the positioning of one of the elements in our header. In the "Find Support Now" banner, the text under the third icon is jumping up and pushing the fourth icon over to the right. You can see the page here:

 

http://community.diabetes.org/

 

The code for that component is below, if anyone might be able to see something I could add or take away to keep this from happening.

 

Thanks!

 

___________________________________________________

 

<html>

<head>

<style type="text/css">

.ada-banner-mainbox {
position: relative;
min-width: 960px;
width: 100%;
height: 280px;
margin-top: 8px;
background-image: url('/html/assets/banner_bg.jpg');
z-index: 1
 
}
 
.ada-banner-title {
position: absolute;
top: 5px;
left: 15px;
font-family: arial, sans-serif;
font-size: 24px;
font-weight: bold;
z-index: 60;
margin-top: 10px;
margin-left: 10px;
line-height: 35px;
}

.ada-banner-title-bottom {
position: absolute;
top: 235px;
left: 15px;
font-family: arial, sans-serif;
font-size: 12px;
font-weight: normal;
z-index: 100;
margin-top: 10px;
margin-left: 10px;

.ada-banner-photo {
position: absolute;
top: 0px;
right: 0px;
z-index: 50;
}
 
.ada-banner-left {
float: left;
z-index: 50;
 
}
 
.ada-banner-navbox {
Position: absolute;
top: 100px;
left: 5px;
width: 960px;
float: left
margin-top: 130px;
z-index: 60;
overflow: hidden;
 
}
 
.ada-banner-icon1 {
width: 100px;
float: left;
margin-right: 15px;
padding-left: 30px;
font-family: arial, sans-serif;
font-size: 14px;
font-weight: bold;
margin-bottom: 1em;
}
 
.ada-banner-icon2 {
width: 100px;
float: left;
margin-right: 15px;
padding-left: 25px;
font-family: arial, sans-serif;
font-size: 14px;
font-weight: bold;
}
 
.ada-banner-icon3 {
float: left;
width: 100px;
margin-right: 15px;
padding-left: 25px;
font-family: arial, sans-serif;
font-size: 14px;
font-weight: bold;
}
 
.ada-banner-icon4 {
width: 100px;
float: left;
margin-right: 30px;
padding-left: 25px;
font-family: arial, sans-serif;
font-size: 14px;
font-weight: bold;
}
 
.ada-banner-bottom {
background-image: url('/html/assets/banner_bottom_bg.gif');
min-width: 960px;
width: 100%;
height: 48px;
padding-bottom: 5px;
z-index: 2;
clear: both;
 
}
 
.ada-banner-link1 {
float: right;
margin-right: 20px;
padding-top: 20px;
font-family: arial, sans-serif;
font-size: 14px;
font-weight: bold;
}
 
.ada-banner-link2 {
float: right;
margin-left: 10px;
padding-right: 20px;
padding-top: 20px;
font-family: arial, sans-serif;
font-size: 14px;
font-weight: bold;
}

</style>

</head>

<body>
<div class="ada-banner-mainbox">
<div class="ada-banner-title">Find Support Now<br/><p style="font-size: 14px; font-weight: bold;">Join the conversation! Check out these message boards:</p></div>
<img class="ada-banner-left" src="/html/assets/banner_left.jpg"/>
<img class="ada-banner-photo" src="/html/assets/banner_right.jpg"/>
 <div class="ada-banner-navbox">
<div class="ada-banner-icon1"><img src="/html/assets/banner_icon_1.jpg" /><br/><br/><a style="color: #333;" href="/t5/Adults-Living-with-Type-1/bd-p/Adults-Living-with-Type-1">Adults

Living<br/>with Type 1</a></div>
<div class="ada-banner-icon2"><img src="/html/assets/banner_icon_2e.jpg" /><br/><br/><a style="color: #333;" href="/t5/Adults-Living-with-Type-2/bd-p/Adults-Living-with-Type-2">Adults

Living<br/>with Type 2</div>
<div class="ada-banner-icon3"><img src="/html/assets/banner_icon_3.jpg" /><br/><br/><a style="color: #333;"

href="/t5/Recently-Diagnosed-New-Members/bd-p/Recently-Diagnosed-and-New-Members">Recently<br/>Diagnosed</a></div>
<div class="ada-banner-icon4"><img src="/html/assets/banner_icon_4.jpg" /><br/><br/><a style="color: #333;" href="/t5/The-Place-for-Parents/bd-p/The-Place-for-Parents">The Place<br/>for

Parents</a></div>
</div>
<div class="ada-banner-title-bottom">Are you a member of Camps, Planet D, or ERP Connect? Register or log in and these communities will appear below!</div> </div>

<div class="ada-banner-bottom">
<div class="ada-banner-link1"><a style="color: #333;" href="/t5/help/faqpage">First time here?</a></div>
<div class="ada-banner-link2"><a style="color: #333;" href="/t5/Forum-Tools-Information/Our-Community-Standards/td-p/31671">Community Standards</a></div>
</div>

</body>

</html>

  • ChudoL's avatar
    ChudoL
    Lithium Alumni (Retired)

    From what I can tell, the anchor tag (link) for "Adults Living with Type 2" is missing a closing tag (</a>) that is causing the banner to render differently between the browsers.

      • mdoriano's avatar
        mdoriano
        Contributor

        Doesn't look like that had any effect. Any other ideas?