Positioning images in header headache!

HTML & CSS
1

Hey!

I have this site:

http://www.thewebeditor.com/

Based on WordPress.

I’m trying to position the two ads in the header area using relative and absolute positioning, and the left and right attributes.

I set the ads (they’re technically as one, in one div) as right:0 or left:500px and they display fine in Firefox.

I use left:500px and it displays fine in IE6, too.

I use right:0 and it doesn’t display properly in either IE6 or IE7.

I need this site to be at least IE7 compliant, but ideally IE6 compliant, too.

So question is, is there a catch-all that would let me position these ads flush to the right of the masthead container, that would work for both IE6 and IE7?

Thanks SO much!

2

hi firstly for your margins either use pt or px. dont use both together.

just for the solution, i m changing in your inline code but you should write styles in external css file to keep code clean.

secondly change the <ul> width


<ul class="oio-banner-zone" id="oio-banner-1" style="[COLOR="Red"]width: 100%[/COLOR]; 
height: 145px; margin: 0pt auto;">

then set left margin in <li>


<li style="width: 213px; height: 145px; line-height: 145px; [COLOR="Red"]margin-left: 
500px;[/COLOR]">

give that a try and reply back.

vineet

3

add float:right to first <li> and margin-left in second <li>

this is the full <li> code


<li style="width: 213px; height: 145px; line-height: 145px; margin: 0px 
30px 0px 0px; [COLOR="Red"]float:right[/COLOR]"><a rel="nofollow" 
href="http://www.thewebeditor.com/2009/11/november-2009/" title=""><img 
src="rightad2.gif" alt="" style="width: 213px; 
height: 145px; border: 0px none;"></a></li>
<li style="width: 213px; height: 145px; line-height: 145px; [COLOR="Red"]margin-left: 
500px;[/COLOR]"><a rel="nofollow" 
href="http://www.thewebeditor.com/subscribe/printed-magazine/" title=""><img
 src="leftad2.gif" alt="" style="width: 213px; 
height: 145px; border: 0px none;"></a></li>

vineet

4

Guys, thanks SO much for your quick replies.

It’s as I thought - it’s the code being generated by the OIO Publisher plugin that’s causing the mess.

Drats and damnation: now to hack…

Appreciate all your time with this. You rock!

5

you’re welcome

vineet

6

On that first <li> which you give float:right to, add display:inline; there to fix IE6’s issue with that :slight_smile: