Forum Moderators: not2easy

Message Too Old, No Replies

IE6 and positioning issue (Grid 960 framework)

All browsers work, IE6 adds the banner on newline

         

safin

3:20 pm on Apr 2, 2010 (gmt 0)

10+ Year Member



Am using a custom theme that uses grid960 css layout. Here is the relevant portion of the code.


<div id="header" class="fullspan">

<div class="container_16">

<div class="grid_3 alpha" id="logo">
<h1 style="background: url(URL to LOGO) no-repeat !important;"><a href="Home Page" title="Return to the the frontpage">Blog Name</a></h1>
</div>

<div class="grid_13 omega" id="header_r">
<p class="description">

728X90 Banner Ad HERE

</p>
</div>
<!-- /nav -->

</div><!-- /container_16 -->

</div><!-- /header -->


And here is the css

#header {
background: url(styles/coolblue/header_bf.gif) no-repeat top left;
position: relative;
height: 120px;
}

#header_r {
background: url(styles/coolblue/header_r.gif) no-repeat-x top right;
position: relative;
height: 120px;
}

#logo h1 {
background: url(styles/coolblue/header_l.gif) top left no-repeat;
text-indent: -9999px;
float: left;
}

#logo h1 a{
display: block;
height: 100px;
width: 360px;
}

#header h1.title {
display: none;
}

#header h1.title a {
text-decoration: none;
}

#header p.description {
display: block;
position: absolute;
top: 15px;
right: 20px;
}


Pointers, there is ample space for the p block. the grid13 width is 760 pixels while am adding just a 728pixels block. It should render inline within the header. Instead IE6 adds the banner below the logo. Example image shown: [i39.tinypic.com...]

I have tried various variations to the "description" css.
#header p.description {
display: block;
padding-top: 15px;
padding-right: 20px;
}

AND
#header p.description {
display: inline-block;
padding-top: 15px;
padding-right: 20px;
}


ALl work on every other browser, but not in IE6. It will still put the p block below the header.
Any ideas on how to sort this issue?

safin

3:29 pm on Apr 2, 2010 (gmt 0)

10+ Year Member



Please ignore the above. Imbecile that i am, moment of zen strikes me after posting on webmasterworld and viewing the code here, that i have set the width of h1 a class to 360pixels against 160 pixels ;)

Mods can delete this thread, if they want :)