Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Oct 2009
    Location
    London
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Weird problem in CSS positing in FF; works fine in Safari and IE

    Hi!
    The website in question is http://bit.ly/3H9h1l (www. horhizon. com/ main/) (to prevent linkbacks) which is a wordpress site running a theme that I have designed. The HTML and CSS are W3 validated.

    The problem that I am facing is that in the fourth column (Publications), the post title is a few pixels closer to the image above as compared to the other 2 columns.

    This is appearing fine in IE8 and Safari 4.

    I would really appreciate if someone knows what exactly is happening here since I am at my wits end trying to sort this out. If I increase the bottom margin of the image in the fourth column by a certain number of pixels, the layout gets messed in IE and Safari! :-(

    Cheers!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    There are some errors, see http://validator.w3.org/check?uri=ht...Inline&group=0
    Fix them first.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Dec 2007
    Posts
    107
    Thanks
    0
    Thanked 3 Times in 3 Posts
    IS this solved?
    Programming & Webmaster Forum - AdSense Revenue Sharing forum

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello pushkinpassey,
    Just goofing around with it a little. I've never worked with tables so I have no idea what could be causing it, but if you widen the container and give .fourth_column the same float:left; and margin:0 25px; then your captions drop down into place.

    This makes it wider just for the experiment:
    Code:
    </div></div></div></div>
    <br>
    
    <table width="1000px" border="0" cellpadding="0" cellspacing="0">
    	<tbody><tr valign="top">
    	<td>
    
    <div class="first_column">
    	<p class="column_titles">Members</p>
    Then just change
    <div class="fourth_column"> <div class="third_column"> so you have two third-columns in your markup.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    Oct 2009
    Location
    London
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi! Thanks for your responses!
    @abduraooft: I have corrected those errors and it is showing as clean XHTML again.

    @Excavator: I tried out your suggestion, and it will work fine if I give the fourth column the same class. About the tables... I used it before I new about the clear:both syntax! :P
    The problem is that I can't use the 'third column' class on the fourth column, reason being that:
    1. third_column has a right-border and the fourth_column is borderless.
    2. fourth_column is slighty smaller (197px instead of 200px) than the third_column (and the other 2 as well). I had to do this because if I gave the whole 200px width, the columns was not coming in line with the other columns. (maybe due to using 'margin:0 auto' on the container? any help on this?)

    Please suggest!
    Cheers!

  • #6
    New to the CF scene
    Join Date
    Oct 2009
    Location
    London
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Bump!
    Sorry!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •