PDA

View Full Version : Strange DIV positional behavior - any ideas?



zeroms
Jan 19th, 2007, 09:52 PM
I have the following 2 pages (IE is fine, just Firefox has issues)

http://www.carhoo.co.uk/templatecraig/default.htm
(the central table with the cars inside is set to align to the left hand side, this is causing a problem with the footer.... colour bleeds into it)

http://www.carhoo.co.uk/templatecraig/defaultbroken.htm
(the central table has no alignment property, the footer appears correct but the table is on the wrong side of the div!!!)

I have tried everything and im sure its probably something simple but i cannot seem to find the problem..... anyone out there got a clue?

Thanks

Craig

zeroms
Jan 20th, 2007, 07:19 AM
anyone? lol, save my headache!

CMHBowlan
Jan 20th, 2007, 07:23 AM
First tip while I'll look at your code:

1.) Never ever code anything for IE. Code it for Firefox then hack it for IE.

Well, I would help you, but I can't find what would be wrong without Firefox. I'm not at my own computer and I wouldn't dare installing anything on one of my friend's computer. Is there a way you could give me a screenshot of the Web page in Firefox?

koyama
Jan 20th, 2007, 10:56 AM
You have this:


.PageCount {
position: relative;
width: 556px;
height: 30px;
padding-left:10px;
}

Watch out when setting a height for a <div>. IE incorrectly increases the height when content no longer fits. FF doesn't. In your case I don't see why you give give it a height at all. It will expand to the height that is necessary.

Following CMHBowlan's advice you will avoid these kind of things in the future.

Another debugging tip: Give your elements different background colors when developing. You can then clearly see where things go wrong.

nexosis
Jan 20th, 2007, 01:08 PM
nice site :)

zeroms
Jan 20th, 2007, 05:32 PM
Here is a screenshot of the site in firefox.....

Its still not sorted it Koyama, i removed the height as you said.

CMHBowlan, please find url for firefox screens below

http://www.carhoo.co.uk/templatecraig/default.jpg

http://www.carhoo.co.uk/templatecraig/defaultbroken.jpg

I have been on this for 3 days, i am stuck for answers now!

Thanks for looking at it so far guys, my head hurts from too much looking at this lol

koyama
Jan 20th, 2007, 06:04 PM
Now this time it is because you are using align="left" for some of the tables


<table align="left">
...
</table>

This is dangerous because this corresponds to float: left. And floated elements don't expand their container if it itself is non-floated. So the tables are escaping out of your <div>'s. Moreover, the align attribute is deprecated.

So start getting rid of all your align="left" for the tables and then see how much is resolved.

zeroms
Jan 20th, 2007, 09:20 PM
wow..... it worked!

koyama.... i owe you a beer lol, you've helped curb my huge headache!

thankyou so much, your a legend!