Wordpress Themes - WP Forum at BFA - Contents of a post coming 'through' the right sidebar.

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Sidebars & Widgets (http://forum.bytesforall.com/forumdisplay.php?f=14)

- - Contents of a post coming 'through' the right sidebar. (http://forum.bytesforall.com/showthread.php?t=4061)

Contents of a post coming 'through' the right sidebar.

Did not notice this in Internet Explorer, but in two other browsers (Google Chrome and Apple Safari) I get a weird effect, such that the (tabled) content of my posts is coming through the sidebar.

See for yourself at:
http://www.elefantin.nl/

Any idea why that is happening?

try adding 'size-full' to the 'class=' in the <img.....>

Please can you be a little more precise?

Did you mean adding an attribute to the CSS class, or adding something to the <image ...> tag itself?

Also I do not know about a 'size-full' attribute.

If you meant size="full" then my CSS editor gives an error saying that size is not an allowed attribute in XHTML transitional 1.0

Are you using a plugin to add the images, or did you build teh table yourself?

If you built it yourself, you have this code

HTML Code:

<table class="photoblog" border="0">

<tbody>

<tr>

<td><a href="http://www.elefantin.nl/gallery/sprookjesbeelden/index.html"><br />

<img class="style_no_border" src="/blogged/blog_sprookjesbeelden/p1.jpg" alt="sprookesbeelden1" width="180" height="135" /></a></td>

<td><a href="http://www.elefantin.nl/gallery/sprookjesbeelden/index.html"><br />

<img class="style_no_border" src="/blogged/blog_sprookjesbeelden/p2.jpg" alt="sprookesbeelden2" width="100" height="135" /></a></td>

<td><a href="http://www.elefantin.nl/gallery/sprookjesbeelden/index.html"><br />

<img class="style_no_border" src="/blogged/blog_sprookjesbeelden/p3.jpg" alt="sprookesbeelden3" width="180" height="135" /></a></td>

<td><a href="http://www.elefantin.nl/gallery/sprookjesbeelden/index.html"><br />

<img class="style_no_border" src="/blogged/blog_sprookjesbeelden/p4.jpg" alt="sprookesbeelden4" width="100" height="135" /></a></td>

<td><a href="http://www.elefantin.nl/gallery/sprookjesbeelden/index.html"><br />

<img class="style_no_border" src="/blogged/blog_sprookjesbeelden/p5.jpg" alt="sprookesbeelden5" width="180" height="135" /></a></td>

</tr>

</tbody>

</table>

just change each of the class="style_no_border" to class="style_no_border size-full". The 'size-full' class is built into the Atahualpa CSS

If a plugin created the table, you could try a CSS Insert

HTML Code:

table.photoblog tr td a img.style_no_border{

max-width:96%;

width:auto 100%;

margin:5px 0 5px 0

}

I created the HTML myself, and adding the extra class info makes the images to disappear completely.

did you make it look like this

HTML Code:

<table class="photoblog" border="0">

<tbody>

<tr>

<td><a href="http://www.elefantin.nl/gallery/sprookjesbeelden/index.html"><br />

<img class="style_no_border size-full" src="http://www.elefantin.nl/blogged/blog_sprookjesbeelden/p1.jpg" alt="sprookesbeelden1" width="180" height="135" /></a></td>

<td><a href="http://www.elefantin.nl/gallery/sprookjesbeelden/index.html"><br />

<img class="style_no_border size-full" src="http://www.elefantin.nl/blogged/blog_sprookjesbeelden/p2.jpg" alt="sprookesbeelden2" width="100" height="135" /></a></td>

<td><a href="http://www.elefantin.nl/gallery/sprookjesbeelden/index.html"><br />

<img class="style_no_border size-full" src="http://www.elefantin.nl/blogged/blog_sprookjesbeelden/p3.jpg" alt="sprookesbeelden3" width="180" height="135" /></a></td>

<td><a href="http://www.elefantin.nl/gallery/sprookjesbeelden/index.html"><br />

<img class="style_no_border size-full" src="http://www.elefantin.nl/blogged/blog_sprookjesbeelden/p4.jpg" alt="sprookesbeelden4" width="100" height="135" /></a></td>

<td><a href="http://www.elefantin.nl/gallery/sprookjesbeelden/index.html"><br />

<img class="style_no_border size-full" src="http://www.elefantin.nl/blogged/blog_sprookjesbeelden/p5.jpg" alt="sprookesbeelden5" width="180" height="135" /></a></td>

</tr>

</tbody>

</table>

Yes I did. And the result in Internet Explores is that the images disappear. In Chrome and Safari, a neat resizing effect is the result, but some sort of spacing seems to be (re)introduced. I have put both ways of HTML coding in the exisiting post so you can see for yourself. It looks either IE or Chrome/Safari are bugged.

just an update, I've been playing with your generated code and I get three diffrent results. IE acts one way, Firefox another and Safari and Chrome act a third way. (sigh...I hate IE). I'm waiting to hear from Flynn about part of it and to see if it can be fixed somehow.

Yup I noticed this too :-P

It surely has to do with the differences in the render engines of those browsers.

I did expected minor difference in the presentation, but this is pretty major.

I think I will need to start learning PHP and CSS to create a plugin which makes these small photo_blog thingies automatically. I already know ASP and I love IE ;-) so I guess I need to forget everything already learned.

Thanks for taking some time to dig into this. Let me know if you require input from my side.

Quote:

Originally Posted by juggledad (Post 17638)

... I'm waiting to hear from Flynn about part of it and to see if it can be fixed somehow.

Has Flynn been able to shed some light on it?

I haven't heard too much from him, he is busy getting Themeframe ready for beta. I'll send him another note.

It is a pitty this did not get sorted out. :(