1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Will pay if you can fix this tiny CSS problem

Discussion in 'CSS' started by misohoni, Jan 18, 2005.

  1. #1
    The offending page is http://www.misohoni.com/bba/
    SEMrush
    When you look in Firefox you can see when graphic banners show up - they float to the middle of the page. I checked the size and everything looks ok esp when Google Ads the same size appear ok...

    I know it's something to do with the CSS but can't work out what it is.

    I can supply the code and css to anyone who wants to do it, I can pay by Paypal. Let me know by message or on this topic.

    Thanks
     
    misohoni, Jan 18, 2005 IP
    SEMrush
  2. david_sakh

    david_sakh Peon

    Messages:
    1,225
    Likes Received:
    29
    Best Answers:
    0
    Trophy Points:
    0
    #2
    david_sakh, Jan 18, 2005 IP
  3. rickbender1940

    rickbender1940 Guest

    Messages:
    259
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Must...resist...mentioning...tables.....

    heh

    Sorry, I couldn't resist. I tried a redesign from tables to css (for positioning, not formatting). After a bunch of research I found that the CSS zealots consider a 3 column layout with a fluid middle column a great achievement rather than a 3 minute triviality. I even saw some Javascript suggestions just to get a simple footer working!

    Here's a great article from the cantankerous jwz (of the original Netscape fame) on the vagaries of CSS http://www.livejournal.com/users/jwz/193866.html

    Choice quotes:
    Ok, I've got that off my chest now!
     
    rickbender1940, Jan 18, 2005 IP
  4. Nicky21

    Nicky21 Guest

    Messages:
    83
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    rickbender1940: i hear you man!

    i have this geek as a friend that is up to the latest news and makes a habbit of learning the latest (and most useless) of technologies.

    Last time i asked him he told me that i should completely redesign my entire site from using tables to using css.

    the arguments were that the pages won't load all at once (as they do right now), but the text will load first and the images fill start to fill in one at a time.

    the cost for this was around $5000

    i think i'll pass.

    Anyway, i strayed from the subject. misohoni i'll look at the problem and see if i can do something.....
     
    Nicky21, Jan 18, 2005 IP
  5. Nicky21

    Nicky21 Guest

    Messages:
    83
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #5
    just a quick note: the problem aslo appears in Opera, not only in Firefox.

    I can assume from the code i saw that the offending line is that:
    <noscript><a href='http://misohoni.com/phpadsnew/adclick.php?n=ac11965c' target='_blank'><img src='http://misohoni.com/phpadsnew/adview.php?clientid=1&amp;n=ac11965c' border='0' alt=''></a></noscript>

    Anyway, i'm gonna give you acode that will correct the problem regardless of how you display that banner:

    Try something like:


    <span style='position: absolute; left: 300; top: 100;'>
    whatever code you have that's displaying the banner
    </span>


    Let me know if that helped....
     
    Nicky21, Jan 18, 2005 IP
  6. Arnica

    Arnica Peon

    Messages:
    320
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Misohoni

    The page is suffering a bit from 'divitis' - you can achieve the same layout with fewer <divs> and much less in the css file. Anyhow your problem is the 'subnav' and 'subnav2' <divs> are not defined in the css and are being repositioned 'correctly' because of the left floated 'headwrap' <div>. IE displays as you intended because of the f*!<ed up box model it uses. I always find it useful to get it right in Firefox (most standards compliant browser currently) and then tweak for the shortcomings of IE afterwards.

    Mick
     
    Arnica, Jan 18, 2005 IP
  7. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    64
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I will tell you exactly what your problem is. Before that, though, let me tell you that, for your own sake, you need to change your DOCTYPE to be HTML/transitional - your so called XHTML isn't even close to be even transitional HTML. I'm surprised browsers can even parse it, that's how much it is malformed.

    Anyway, back to your problem. It's simple. You have to realize that in the presence of a float, block elements (e.g. div's p's, etc) are created as if the float doesn't exist. Inline content, on the other hand, is shifted by floats to the left, right or downwards, depending on the kind of a float it is and how much space is around it.

    In style.css, you have this CSS rule: #subnav A {display : block;...}

    Since <a> is a block, it goes right underneath the float. Its content, however, the img element is an inline element and cannot stay underneath the float, so it's shifted down.

    Do a small experiment, find this style I quoted and add "margin-left: 300px;". You will how your image jumps up to the right of the float. This is not a fix, though - just something for you to see what's going on.

    If you want to fix it well, you would need to redesign the whole header (or better yet the whole page). If you just want to hack it, you can fiddle margins and paddings on the anchor and the image.

    J.D.
     
    J.D., Jan 18, 2005 IP
  8. misohoni

    misohoni Notable Member

    Messages:
    1,717
    Likes Received:
    32
    Best Answers:
    0
    Trophy Points:
    200
    #8
    Thanks guys for all the tips and sorry for lateness in getting back - it's the HK time difference I think. I'll go through each one and see if it does the job or not, then contact you about Paypal...

    Cheers
     
    misohoni, Jan 19, 2005 IP
  9. misohoni

    misohoni Notable Member

    Messages:
    1,717
    Likes Received:
    32
    Best Answers:
    0
    Trophy Points:
    200
    #9
    Hi Nicky, thanks for helping. Nope that tag you gave moved the bottom bar upto the top, overlapping the google ads (in both Firefox and IE).

    I attach a screenshot below:




     

    Attached Files:

    • span.jpg
      span.jpg
      File size:
      25.3 KB
      Views:
      239
    misohoni, Jan 19, 2005 IP
  10. misohoni

    misohoni Notable Member

    Messages:
    1,717
    Likes Received:
    32
    Best Answers:
    0
    Trophy Points:
    200
    #10
    Yep you are right, the offending code is below. If anyone could help with the tidy up of the code please let me know by message again I can Paypal across, and I can send you the original (X)HTML Coding:

    <div id="header">
    <div id="headwrap">
    <h1>Best Blogs in Asia</h1>
    </div>
    <div id="subnav">
    <div style="margin-left: 2em">
    <script language='JavaScript' type='text/javascript'>
    <!--
    PHPADS INFO
    //-->
    </script><noscript><a href='http://misohoni.com/phpadsnew/adclick.php?n=ac11965c' target='_blank'><img src='http://misohoni.com/phpadsnew/adview.php?clientid=1&amp;n=ac11965c' border='0' alt=''></a></noscript>

    </div>
    </div>
    <div id="subnav2">
    <UL>
    <LI id=s1><A href="http://www.misohoni.com/bba/" title="Best Blogs in Asia Directory">Directory</A>
    </LI>
    <LI id=s2><A href="about.php" title="About Best Blogs in Asia">About</A>
    </LI>
    <LI id=s3><A href="design_blog.php" title="Need Web Design for your Blog?">Need
    Design?</A></LI>
    <LI id=s4><A href="blog_submit.php" title="Blog Submit Tools">Blog Submit
    Tools</A></LI>
    </UL>
    </div>
    </div>

     
    misohoni, Jan 19, 2005 IP
  11. misohoni

    misohoni Notable Member

    Messages:
    1,717
    Likes Received:
    32
    Best Answers:
    0
    Trophy Points:
    200
    #11
    Thanks for the help, although I can't really get my head around the solution. :confused:

    Should I make :
    #subnav img {display : block;...}

    That will turn the image into a block? I attach a screenshot in Firefox of your suggestion. I think it's to do with UL and LI also, but again too complex for me to handle.

    If anyone wants to work on the original source code I can forward it on...and if you can fix the (X)HTML errors also and too mayn DIV tags, as noted in previous comments.

    I've been having this problem for months and a bit annoying not to fix it!

     

    Attached Files:

    misohoni, Jan 19, 2005 IP
  12. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    64
    Best Answers:
    0
    Trophy Points:
    0
    #12
    As I said, it wasn't a fix - my post was just to help you understand what the problem is. Here's what you need to fix your page.

    1. Fix DOCTYPE. If you want to stay with XHTML, change all tags and attributes to lower case - XHTML must be in lower case. Close all tags (I saw some img tags without the end tag). Better yet, given the state of the page, just change DOCTYPE to HTML/transitional and remove all XML stuff (CDATA, tag endings, etc).

    2. Regarding your problem. Design your page with tables. Most of what bad things you heard about tables is a myth - HTML and CSS are designed to work together. See the end of my thread Why I don't like tables for some details on this.

    If anyone is compelled to comment on tables vs div, I suggest you do this on *that* thread.

    I'm sure with tables you will be able to fix your header within an hour or so.

    3. Don't use doctype.write. This is one of the reasons you cannot solve this problem by yourself - it isn't very easy to deal with its output. On top of that it may not be secure (I'm not saying it isn't, but it's doctype is a common source of cross-site scripting attacks). Just use your PHP code instead to generate the anchor and the image reference.

    J.D.
     
    J.D., Jan 19, 2005 IP
  13. misohoni

    misohoni Notable Member

    Messages:
    1,717
    Likes Received:
    32
    Best Answers:
    0
    Trophy Points:
    200
    #13
    Sorry but I only want to change the part I indicated and I want to stick with Divs/XHTML...but I know this is difficult work - although I don't know how to do it, that's why I'll pay someone to help with this prob...

    Thanks guys so far for your help...
     
    misohoni, Jan 19, 2005 IP
  14. Nicky21

    Nicky21 Guest

    Messages:
    83
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #14
    I said to include the offending code in thes tag:

    <span style='position: absolute; left: 300; top: 100;'>

    Now play with the coordinates! try less tha 300, more than 300, less than 100, more than 100

    play with it until you move it into the right poisition!
     
    Nicky21, Jan 19, 2005 IP
  15. misohoni

    misohoni Notable Member

    Messages:
    1,717
    Likes Received:
    32
    Best Answers:
    0
    Trophy Points:
    200
    #15
    Nope still didn't work, placed around the script and noscript tags and modified them for a while - still no luck

     
    misohoni, Jan 20, 2005 IP
  16. misohoni

    misohoni Notable Member

    Messages:
    1,717
    Likes Received:
    32
    Best Answers:
    0
    Trophy Points:
    200
    #16
    Can anyone help? I thank the guy above for their tips, but still didn't work. I had a guy who emailed me from this forum - but after giving him the code haven't heard from him since...

    Can anyone with CSS skills help out? Still Paypal payment for you...
     
    misohoni, Jan 27, 2005 IP
  17. Nicky21

    Nicky21 Guest

    Messages:
    83
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #17
    Can you please send me the source code too? use office at crea-soft dot com.

    Also: instead of span try using div. Just an idea. I'll tell you something for sure when i can see the sources...
     
    Nicky21, Jan 27, 2005 IP
  18. misohoni

    misohoni Notable Member

    Messages:
    1,717
    Likes Received:
    32
    Best Answers:
    0
    Trophy Points:
    200
    #18
    thanks code on the way...
     
    misohoni, Jan 28, 2005 IP
  19. Arnica

    Arnica Peon

    Messages:
    320
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #19
    Misohoni

    If you're just after a hack then adding the following to your css will solve the problem. I would be inclined to revisit the design and pare it down to the essentials to deliver your layout. It would then make it easier to pick up other issues and amend later.

    div#subnav {
    float:right;
    margin: -100px 0;
    padding: 0;
    }
    div#subnav img{
    margin: 100px 0 0 -318px;
    padding: 0;
    }
    div#subnav2 {
    float:right;
    margin: -30px 0;
    padding: 0;
    }
    
    Code (markup):
    Mick
     
    Arnica, Jan 28, 2005 IP
  20. HHI Golf Guy

    HHI Golf Guy Guest

    Messages:
    86
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #20
    I had a problem with CSS and Firefox when I was placing a Google skyscraper ad, even though the <div> was within a table column. The solution was to set the div height and width to match the skyscraper ad size.

    Take a look at this page, then take a look at the associated css file, main.css. The div name is "box-ad".
     
    HHI Golf Guy, Jan 31, 2005 IP