CSS: Problems in zooming

Skinning and designing Serendipity (CSS, HTML, Smarty)
Post Reply
vutschko
Regular
Posts: 8
Joined: Wed Nov 26, 2008 9:50 pm

CSS: Problems in zooming

Post by vutschko »

Hi folks,

I played around with the default theme and did some changes. Now I run into a little problem when I enlarge the page.

At the fifth step in doing STRG++ one of following elements

table #mainpane tbody tr td
(or elements inside the mentioned ones above)

breaks out of the right side. But I got no clue what causes this behaviour. :?

Here's that test-page:

http://blog.trebbel.bplaced.net/serendipity/


Would be nice if you got tips und hints to solve that problem.

Thanks!

vutschko
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: CSS: Problems in zooming

Post by yellowled »

vutschko wrote:At the fifth step in doing STRG++
Two things: First of all, I guess you're talking about Firefox's Zoom function. You can not estimate anything with zooming. It might work differently in other browsers with zoom support (IE7, Opera, Safari). It might also depend on user's browser windows size, default font size etc.

Second, it's usually okay if your layout holds up until the second zoom level.
vutschko wrote:But I got no clue what causes this behaviour. :?
Might as well be something sitting within that table like the headlines or something. Likely candidates are elements with fixed widths or min-width.

Also: Your container div has a max-width in px, all elements below that have a relative width in %, if I'm not mistaken. So the maximum for #content is 70% of 990px, meaning 693px. If some element in #content get's wider than that, it will break out.

Hope that helps.

YL
vutschko
Regular
Posts: 8
Joined: Wed Nov 26, 2008 9:50 pm

Post by vutschko »

Might as well be something sitting within that table like the headlines or something. Likely candidates are elements with fixed widths or min-width.

Also: Your container div has a max-width in px, all elements below that have a relative width in %, if I'm not mistaken. So the maximum for #content is 70% of 990px, meaning 693px. If some element in #content get's wider than that, it will break out.
Good tip. I'll give it a try and change some of the widths.

It might work differently in other browsers with zoom support
I checked it with Safari, Midori, Chrome and Opera. They behave all about the same at that point. (Scared to check it with IE6+ but that's another story)

Right now I've got another question concerning webkit-based browsers: Each entry has an "Weiterlesen &#x21D2". That entity is not displayed well with webkit as you can see here:

http://www.abload.de/image.php?img=webkk52c.png

What's that? :? It happens with Safari, Midori and Chrome.

Thank you so far.

vutschko
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Post by yellowled »

vutschko wrote:(Scared to check it with IE6+ but that's another story)
I just now checked it in IE6 (don't have a higher IE here), and it's perfect in that :twisted:
vutschko wrote:Each entry has an "Weiterlesen &#x21D2". That entity is not displayed well with webkit as you can see here: What's that? :?
You're either missing the ; after that entity in your entries.tpl, or webkit browsers don't display entities in unicode.

Which entity is that supposed to be? (I don't know them all by heart. Shame on me. :wink:)

YL
vutschko
Regular
Posts: 8
Joined: Wed Nov 26, 2008 9:50 pm

Post by vutschko »

just now checked it in IE6 (don't have a higher IE here), and it's perfect in that :twisted:
I had no other chance. :wink:
You're either missing the ; after that entity in your entries.tpl, or webkit browsers don't display entities in unicode.
Hmm. I made a typical Copy&Paste-Error while I wrote my post here. :oops:


So it might be possible that webkit browsers don't display entities in unicode. So I'm going to search the web for solutions.

Update: That ⇒ ist a rightwards double arrow.


Thanks.

vutschko
Post Reply