Posted on: 04/01/07 10:52pm
By: Anonymous (Beandip)
I'm looking for someone to confirm for me what I am seeing on my own geeklog web site. I hadn't noticed until I was browsing previous stories submitted in the past when I found several stories in which the images included in the story overlapped down into the next story. I'm using the professional theme that ships with Geeklog 1.4.1.
Here's how to reproduce it.
1) Create a new story. Attach an image to the story. Make sure the image is at least 150 to 200 px tall, to simplify things.
2) use the tag [imageX_right] at the beginning of the story.
3) include a few additional lines of text.
4) Post the story.
Check it to see how it displays. The Image should be right aligned. The professional theme uses a few pixel wide divider to separate the stories.. that divider below your story should hit the side of your image instead of being below the image.
My guess is that if you had enough "content" in your story you'd never notice this... but if you post a short story with a large image this shows up pretty seriously.
So my question is this... is there some simple CSS code that would fix this issue? or is this simply a side effect of using DIVs now instead of tables?
Thanks for any input.
Re: Geeklog 1.4.1, Professional Theme, Right-aligned Images bleed into next story
Posted on: 04/02/07 05:07am
By: buckwildbill
I noticed this also and started using tables to separate things in stories. This works fine for me but I haven't looked into it any further to see if there are any other solutions.
Re: Geeklog 1.4.1, Professional Theme, Right-aligned Images bleed into next story
Posted on: 04/02/07 01:57pm
By: beewee
That should be quite easy to fix. Put this in storytext.thtml etc right before the story-footer div:
Text Formatted Code
<div class="clear"></div>
and put this in the stylesheet:
Text Formatted Code
.clear {
clear:both;
width:100%;
}
Re: Geeklog 1.4.1, Professional Theme, Right-aligned Images bleed into next story
Posted on: 04/02/07 04:03pm
By: Dirk
It's actually a side effect of the changes in the Professional theme, trying to get away from a table-based design.
The code beewee posted should help, although I have to admit it's not exactly a very elegant solution.
bye, Dirk
Re: Geeklog 1.4.1, Professional Theme, Right-aligned Images bleed into next story
Posted on: 04/02/07 04:48pm
By: beewee
Quote by: DirkThe code beewee posted should help, although I have to admit it's not exactly a very elegant solution.
I'm aware of that, but more elegant options I could think of didn't help (and I'm making my own themes anyway).
Re: Geeklog 1.4.1, Professional Theme, Right-aligned Images bleed into next story
Posted on: 04/02/07 04:56pm
By: Dirk
beewee, I wasn't criticizing your solution. It was more of a self-criticism - I would have preferred something that didn't require any user interaction. We may have overdone it a bit with the div-based layout there ...
bye, Dirk
Re: Geeklog 1.4.1, Professional Theme, Right-aligned Images bleed into next story
Posted on: 04/02/07 05:11pm
By: beewee
No, you're not overdoing the div's (very much), and table aren't foolproof either (colspan etc is also tricky). Next step should be to reduce the amount of div's by converting
Text Formatted Code
<div class="classname"></div>
to something you already use like
Text Formatted Code
<p class="classname"></p>
etc, so that you do not use div's to make a part of the layout which could be done with another existing HTML element.
EDIT: which makes my above suggested solution completely foolish and overdone...
Re: Geeklog 1.4.1, Professional Theme, Right-aligned Images bleed into next story
Posted on: 04/02/07 08:21pm
By: Anonymous (Beandip)
Dirk and Beewee, thank you so much for your input. I did apply the Div / Clear combo and that did in fact fix it...
I'm not sure I know why yet.. but I'm reading up on it.
Thanks again.
Scott
Re: Geeklog 1.4.1, Professional Theme, Right-aligned Images bleed into next story
Posted on: 11/05/07 09:32am
By: Freya