I've almost finished a new design for a website I run. However, there are some DIV bugs, which are probably real small but make a BIG difference.

Bug 1, Safari: If you have a look at http://skatebasingstoke.com/ in different browsers there will be lots of different bugs. For example, in Safari after I added a 1px border to the light blue divs on the left, the two divs inside this no longer sit next to each other, they place themselves above or below each other (one containing the picture, the other containing the text). To compensate for the extra 2px the border will have added I made the main width of the blue div 2px narrower but they still do not sit in line.

Bug 2, IE/Firefox: When the page is loaded for the first time, either through a link to from a URL. Another set of two divs no longer sit next to each other (the one containing all the content stays in place, but the one containing the news sits below it). However, when you refresh the page this sorts them out and they're right where they're meant to be - side by side.

I'd be extremily greatful if anyone could help me with either of these because I've worked really hard on the site and I can't launch it until these are fixed!

Thanks..

Dom

IE/Firefox: what happens if you position them absolute instead of using float?

http://css-discuss.incutio.com/?page=AbsoluteOrFloatLayout

I'd like to stick with float, there must be a work around this! I've worked around the first one (with the help of Guido!) but Guido and I have been trying to figure out the second one for a good while and it seems like it may be a Firefox bug! After all.. a page shouldn't render differently when its refreshed.

I've reported this as a bug, however, I am still learning CSS so if someone wants to add to that, explaining a bit clearer whats happening, and what should happen.. or just confirm it that'd help thanks.

https://bugzilla.mozilla.org/show_bug.cgi?id=327536

Everything looks good over here. That's a really nice site , Good job.
P.S. Don't double post Edit: I see that it was a long time ago since the last post so you did really need to bump it a bit ;-p

What about putting the news code first?

Then I get the problem on the other side! The content gets thrown to the bottom!

You'll have to float both elements

They are.. take a look at the source.

change .newslistbody to:

code:

---

.newslistbody {
    width:180px;
    padding-left:5px;
    padding-right:5px;
}

---

Worked for the first four times, then messed up! ..grrr!

Any more ideas?