Blank line in code probably causes margin above images

Phoca Gallery modules - modules for Phoca Gallery extension
kwindo
Phoca Member
Phoca Member
Posts: 11
Joined: 14 Aug 2011, 16:17

Blank line in code probably causes margin above images

Post by kwindo »

Hi,

I'm using
mod_phocagallery_image 3.0.1
Joomla 1.6.4

There is a strange margin above the images in Firefox, Safari, Chrome and IExplore 8. This margin is not there in IExplorer 9.

You can see this on my website: http://www.belgianpsytrance.be

I've been spending hours on how to figure out why this margin is there and the only thing I can find is a blank line in the coding of the module when I check the source code with Firebug. See screenshot:

Image

I have noticed that this margin also appears on your Joomla 1.6 demo site.

I've searched the modules code but I can not find the cause of this issue. Some help will be greatly appreciated.
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 48386
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Blank line in code probably causes margin above images

Post by Jan »

Hi, can you paste a link to the demo (Phoca) where this occures, so I can take a look at it and check the html code, here:

https://www.phoca.cz/joomlademo/

I see no space for the image module :idea:
If you find Phoca extensions useful, please support the project
kwindo
Phoca Member
Phoca Member
Posts: 11
Joined: 14 Aug 2011, 16:17

Re: Blank line in code probably causes margin above images

Post by kwindo »

Thanks for your reply!

It is on that page. I made an image to illustrate:

Image

My cursor is on the div with class "module-content" in Firebug turning it blue in my Firefox canvas. There is no css for a top padding on that div.

The first nested div is the one with class "phocagallery-module-ri". I can not find any css that would move it away from the grey line (underlining the title) as far as it does. The div's conatining the thumbnails only have a 3px padding so there is no CSS creating this margin. At least I can not find any.

The same is happening on my site, see small image on the right.

The only thing I can find is a blank line in de code when viewing it in Firebug. (see red arrow). This line is not there on other modules hence my logic that this is causing the margin. I could be wrong.

May I remind I can not see this margin in IExplorer 9 but I do in Firefox, Safari, Chrome and IExplore 8. I CSSed it out at first but that moved my images above the box border on IExlorer 9.
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 48386
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Blank line in code probably causes margin above images

Post by Jan »

Hi, for now, I think, I am not able to detect which class is inherited to set padding/margin for this area :-(, maybe some hidden spaces, etc. :idea: ???
If you find Phoca extensions useful, please support the project
kwindo
Phoca Member
Phoca Member
Posts: 11
Joined: 14 Aug 2011, 16:17

Re: Blank line in code probably causes margin above images

Post by kwindo »

But you can see the issue now?

I've been at this for hours. Believe me, there is no CSS causing this, I would have found it. ;-)

The only cause I can come up with is hidden character (as you mentioned). Maybe it's a character-set issue but I'm not sure on how to check this.

For me this is a serious layout issue. I think it's strange I'm the first to notice this.
kwindo
Phoca Member
Phoca Member
Posts: 11
Joined: 14 Aug 2011, 16:17

Re: Blank line in code probably causes margin above images

Post by kwindo »

I've been at this whole morning again. Checking file encoding, searching for hidden characters, rechecking CSS. It's still a mystery to me. I'm beginning to fear I will have to start creating a whole new module for my website.
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 48386
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Blank line in code probably causes margin above images

Post by Jan »

Hi, if there is some hidden character, then this can be found in editor like notepad++ is, but I still think, it is some styling for div which is inherited from some parent div style.

Maybe try to edit the div in the module with style="margin:0px;padding:0px;" etc.
If you find Phoca extensions useful, please support the project
kwindo
Phoca Member
Phoca Member
Posts: 11
Joined: 14 Aug 2011, 16:17

Re: Blank line in code probably causes margin above images

Post by kwindo »

I tried all that (about a hundred times). Again, it is not a CSS issue.

When I input text in the white line in the code (see my screenshots image above) using Firebug the text appears in the margin. Also when I edit out the white line (again using Firebug), the margin discapears. Something is causing a blanco textline.

Do you know of any Joomla 1.6 site using this module that doesn't have this margin?

Maybe this can convince you it's not a CSS issue. On the local version of my site I removed all CSS. This screenshot shows the margin (or blanco textline) is still there.

Image
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 48386
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Blank line in code probably causes margin above images

Post by Jan »

So then really no idea there :-( :-( :-(
If you find Phoca extensions useful, please support the project
kwindo
Phoca Member
Phoca Member
Posts: 11
Joined: 14 Aug 2011, 16:17

Re: Blank line in code probably causes margin above images

Post by kwindo »

Unfortunately that leaves me no other option then starting to build a simplified version of your module to use on my site. If I still find a cause I will let you know in this thread.

But maybe you should check if other Joomla 1.6 site have this problem. I'm probably not the only one who thinks this is a serious enough layout problem to render your module unusable.
Post Reply