Topic: Wierd, possibly rails output related formatting problem

Hey there,

I'm trying to work my way through the Agile Web Development with Rails book but decided to go off the track a bit and use one of the templates from OSWD.org. I'm having a wierd problem with the formatting of the template and for the life of me can't figure out why. I have some shots of the problem.

How it should look

http://raavin.com/goodlayout.jpg

But this is how it looks.

http://raavin.com/wonkylayout.jpg

I've gone through the output with a fine tooth comb and tried viewing and saving the source of the generated wonky page and it looks like the top one (how it' supposed to). The top one is made from a static .htm page from the the source view generated xhtml from rails, and the bottom one is the rails output itself.

In the top one the image is nicely nestles in the rounded box while the rails version, for some reason, sits outside the box. If there is less text it hangs out even more. The top of the image and the box stay ok, it's just the bottom that slips up.

I've used Firefox to check out the outlines of the divs and everything seems like it should sit ok, if the box actually extended the full length of the outline.

I'm thinking that rails is pumping out the page with either wierd invisible characters or some other sort of wonky encoding that doesn't show up in the code itself.

Anyone know if that's possible or have any other ideas???

Rails Version - 1.2.2
OS - OSX 10.4.8
Browsers - Camino and Firefox

Cheers,

Jason

Last edited by Raavin (2007-03-06 06:27:08)

Re: Wierd, possibly rails output related formatting problem

I'm assuming you viewed the HTML source of both pages? Do they both have the exact same HTML? What about the CSS?

It looks like the problem is the lack of clearing a float. For example:

<div class="album">
  <img style="float: left" ...>
  description....
</div>

In this case the image that is floating left may poke out of the album div if the description isn't long enough. You need to clear the left float before ending the album div.

<div class="album">
  <img style="float: left" ...>
  description....
  <div style="clear: both"></div>
</div>

Railscasts - Free Ruby on Rails Screencasts

Re: Wierd, possibly rails output related formatting problem

Thanks for your help. I think that was the problem. I tried throwing <div style="clear: both"></div> in a few places and while it didn't fix it, it was heading in the right direction. In the end I discovered I had broken the css somehow. Unfortunately I overwrote the file before I compared the original to the broken one. I suspect somehow I had done what you said.

Cheers,

Jason wink