Teaser problems again (I suspect it's not a theme bug though)
| Project: | Four Seasons |
| Version: | 6.x-1.20 |
| Component: | User interface |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed |
Hello there. I am sorry I have to come up with this again, but I am having problems with the teaser image overflowing in IE6 again, and I cannot find the previous post where I was signaling the same issue... The attachment shows what I mean.
In the page presented in the screenshot, the image and its description are wrapped in a div, for which I have created a style in style.css.
Here is the complete node code:
<div class="pdescright"><a rel="lightbox[][Tag RFID (SmartLabel). In centru este microcipul, iar antena este cea portocalie]" href="/files/label-drawing.jpg"><img src="/files/imagecache/doc/label-drawing.jpg" alt="" /></a> <div class="tdesc">Tag RFID (SmartLabel). In centru este microcipul, iar antena este cea portocalie</div></div> <p>TAG-urile sunt compuse de obicei dintr-un microcip şi două antene, toate extrem de mici şi adaptate perfect mediului în care urmează să fie folosite. Pot atinge mărimi ca a unei etichete, a unui bob de grâu, dar se găsesc şi sub forme mai mari, ca aceea a unei cutii de chibrituri sau a unei cărămizi. Pot fi flexibile astfel încât să poată fi îndoite odată cu o foaie de hârtie (cum sunt cele folosite în foile paşapoartelor biometrice), sau pot fi încastrate într-o fiola de sticlă, cum sunt cele folosite pentru marcarea animalelor.</p>
And here is the end of my css file:
#font a {
display:block;
float:left;
margin-left:5px;
font-family:arial;
color:#cccccc;
font-size:10px;
text-decoration:none;
}
div.pdescright {
float:right;
width:auto;
padding:5px;
border:1px solid #999999;
margin: 5px 0px 0px 12px;
height: auto;
text-align: center;
}
div.tdesc {
text-align: justify;
font-weight: normal;
width: 196px;
margin: 0px;
color: #006699;
}
.view-header {
margin-bottom: 1em;
}I have just started understanding how everything works, and I am sure the solution is simple, however I can't find it this time :(
Thank you very much for helping.
| Attachment | Size |
|---|---|
| error.jpg | 53.19 KB |
#1
you need an element with the css property "clear:both;" inside and at the end of your teaser boxes.
the easiest approach would be to place the following code inside your node.tpl.php
<div style="clear:both;"></div>it should go right before the div that had the grey border is closed. Use Firefox and Firebug plugin to find the right position. :-)
#2
It's not working no matter how hard I try. I just can't find the place in page.tpl.php (this is the correct file, I suppose) where to put this div style. I mean, I can see that you have used it all over the place and it is working, I can modify the page in IE using the Developer Toolbar and it's working, but for the life of god, I can't find a place for it in page.tpl.php.
Now I must go outside and chill out a little before I kill someone (well, my cat actually because I am alone right now...)
If you have any other ideas of troubleshooting, please do express them, even if I can only promise a virtual beer since I'm so far away :)
Danke schön.
#3
Hi Vially, if you post a link i can take a look. The right file ist the node.tpl.php. It should be in the teaser section: (
if ($page == 0)). Btw: where is far away? ;>j.
#4
The site is at www.vially.ro. You will see that right now there is a post promoted on the front page, and it exhibits the issue in IE6. Usually, there is only one post on the front page (the one below, with the tree) and that one does not have any problems. The issue also appears at http://www.vially.ro/ce-este-rfid-view (that page is actually a view that gathers teasers from certain nodes), but I suppose that if we fix the frontpage, I will also be able to fix the view.
As for node.tpl.php, I think I still require some experience with it until I will be able to modify it on my own...
I am located in Bucharest, Romania, so that's why it's a little far. This maybe also explains why I haven't paid someone a few bucks to fix everything for me instead of getting annoyed... But at least i get to learn something useful with this.
Thanks for your help :)
#5
edit your node.tpl.php and modifiy the content div like that
<div class="content"><?php print $content ?>
<div style="clear:both;"></div>
</div>
or if that does not help try to insert a clear block before the last div is closed in the node.tpl.php
<div style="clear:both;"></div></div>
#6
Isn't IE wonderful ?
Finally, it's working... partially :(( The grey border is extending properly, but this time there's another bug: Upon first loading the problem pages, the grey lines that form the teaser are interrupted somewhere on the sides, for certain teasers. If I drag with the mouse around where the "more" should be, the problem dissapears. Also, the affected teaser boxes are a little bit wider then the unaffected ones...
Have you seen anything like this before ?
#7
this is a really annoying bug of IE!!! The reason is that IE positions elements in the z-axis because of css position:relative ... I'm not a CSS-pro so i fixed a similar issue by trial/error ;>
try to play with position:relative in the css file
for example
.teaser {position:relative;
}
Not sure if that helps...
#8
It does help, at least the vertical lines of the border are not interrupted anymore. However, the teaser boxes are still a little bit bigger then the others and it looks awful. Maybe I should start looking for another way of putting my images with descriptions inside the nodes, this way I'll get rid of this thing... Suggestions are very much welcomed :)
Thank you very much for helping Jochen Meyer,
Vially.
#9
Well, here it could help to give the teaser itself a certain width?
.teaser {width:XYZ%;
}
have you tried the IE developer toolbar (I haven't) ... Maybe it could help in dealing with IE issues ... ?!
http://www.microsoft.com/downloadS/details.aspx?familyid=E59C3964-672D-4...
#10
He he, I have fixed it, after reading some stuff here: http://www.communitymx.com/content/article.cfm?page=2&cid=C37E0, and I can see you just recommended the same thing, great.
I just had to add a dummy height, like the one below:
.node.teaser {padding:5px 10px 0px 10px;
margin-bottom:1em;
border:5px solid #f3f3f3;
height:1%;
}
I am using the toolbar, this is how I experimented with this wonderful browser...
Thank you very much, you were really helpful and nice, a case of beers wouldn't have been enough :)
Vially
#11
#12
Automatically closed -- issue fixed for two weeks with no activity.