SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Positioning images in header headache!

    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. #2
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

    Code:
    <ul class="oio-banner-zone" id="oio-banner-1" style="width: 100%; 
    height: 145px; margin: 0pt auto;">
    then set left margin in <li>

    Code:
    <li style="width: 213px; height: 145px; line-height: 145px; margin-left: 
    500px;">
    give that a try and reply back.

    vineet

  3. #3
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    add float:right to first <li> and margin-left in second <li>

    this is the full <li> code

    Code:
    <li style="width: 213px; height: 145px; line-height: 145px; margin: 0px 
    30px 0px 0px; float:right"><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; margin-left: 
    500px;"><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. #4
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    you're welcome

    vineet

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    On that first <li> which you give float:right to, add display:inline; there to fix IE6's issue with that
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Tags for this Thread

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
  •