View Full Version : Weird problem in CSS positing in FF; works fine in Safari and IE

10-27-2009, 11:08 PM
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! :-(


10-28-2009, 09:03 AM
There are some errors, see http://validator.w3.org/check?uri=http%3A%2F%2Fhorhizon.com%2Fmain%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
Fix them first.

10-28-2009, 10:40 AM
IS this solved?

10-28-2009, 04:45 PM
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:

<table width="1000px" border="0" cellpadding="0" cellspacing="0">
<tbody><tr valign="top">

<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.

10-29-2009, 01:09 AM
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!

11-02-2009, 08:08 PM