10 replies [Last post]
ratinakage
ratinakage's picture
Offline
newbie
Last seen: 8 years 12 weeks ago
Timezone: GMT+2
Joined: 2009-12-19
Posts: 7
Points: 10

Hi there,

I have a website that looks fine on my machine in all browsers but not fine on a small number of other machines. Basically, machines that have a slightly different system font for Arial.

This is the site: http://springfieldconvent.co.za/

You can recreate this issue on your side by holding CTRL + SCROLL (backwards and forwards to change the font).

After a scroll in either direction, the images below the top menu bar jump left or right due to the menu bar text pushing out the slider images by about a pixel.

The issue seems to be happening on the machine of the guy that needs to pay me and its the last issue on the site!! Big smile So, once I fix this I get paid! Please help!!!!

Thanks...

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

The issue is not happening on

The issue is not happening on the clients machine the issue is happening with you *wags finger!*

It has nothing to do with a machines system fonts it has everything to do with having built a fragile layout.

Any layout that breaks apart at one text resize point is not ready for release you should be able to furnish a layout that at the least accommodates two text size increases, three is better.

Debugging or de-constructing the layout would have shown where the issue lies, get familiar with using FireBug to debug layout elements it makes development life a whole lot smoother.

Understanding the nature of the 'em' measure is crucial and you have a lot of em values dotted around the line-height values expressed as em units are a worry.

The issue rests with the menu bar and more specifically with the anchors nested some 72 levels deep Smile

Look at the padding values top and bottom set as em units these increase to a point where they disrupt the elements below.

Two choices really remove the em padding and replace with pixel values or ensure that the element is effectively contained within the header and causes header to increase in height, also a third possible option/issue might be that the elements directly after header is not cleared, clear:both might be effective? but didn't look at that aspect.

Is this a Drupal layout? cos there is one huge case of over diving going on. Drupal was naughty for over using divs but I don't remember it being that bad!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ratinakage
ratinakage's picture
Offline
newbie
Last seen: 8 years 12 weeks ago
Timezone: GMT+2
Joined: 2009-12-19
Posts: 7
Points: 10

Heya, Thanks for your

Heya,

Thanks for your reply!

I definitely do use Firebug when developing. This is a custom Drupal theme I created based on the Zen theme with Nice Menus Module and Easy Slider. Getting them all to play nicely with each other seems to be the challenge.

Do you really think there's a difference between using em and px? And can that really be causing the problem? I always use px. But there are some em's left in there from the Zen theme.

Regarding your suggestion that the menu bar is contained in the header, how do I ensure this? The one div is inside the other. I can't disable overflow or my drop-downs will stop working...

I'm not sure what you mean by that clear:both suggestion. Which div would I apply that to?

Thanks for the help so far!!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

clear:both; on picture bar,

clear:both; on picture bar, it will ensure the layout doesn't break as at present but doesn't remove the padding issue. EM padding means it will increase in computed value as the text size is increased it's not desirable in this instance although it's obvious why it's employed which is to keep an equal space top and bottom of the text.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ratinakage
ratinakage's picture
Offline
newbie
Last seen: 8 years 12 weeks ago
Timezone: GMT+2
Joined: 2009-12-19
Posts: 7
Points: 10

You fixed it!!

Thanks!!!

That worked!! I could kiss you! Laughing out loud

Cheers...

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Update: add 'overflow:hidden'

Update: add 'overflow:hidden' to #header this will ensure that all child elements are bounded and contained nicely and will prevent that gap developing between the header and picture_bar, the clear:both might as well be left in place as it is a desirable behaviour of picture_bar to fully clear itself of preceding elements that could impact on it.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ratinakage
ratinakage's picture
Offline
newbie
Last seen: 8 years 12 weeks ago
Timezone: GMT+2
Joined: 2009-12-19
Posts: 7
Points: 10

Nah, adding overflow hidden

Nah, adding overflow hidden will cause the drop down menus to be hidden. It was one of the first things I tried...

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Fair point but that is why we

Fair point but that is why we would then turn to using the 'clearfix' method - same result different approach to arriving there.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

antiAlias
antiAlias's picture
Offline
newbie
Last seen: 9 years 50 weeks ago
Timezone: GMT-5
Joined: 2009-11-09
Posts: 10
Points: 12

I believe there is a way for

I believe there is a way for you to upload the font to the site and have it embed for those who do not have it.

gm0nk3y
gm0nk3y's picture
Offline
newbie
Last seen: 9 years 47 weeks ago
Timezone: GMT-5
Joined: 2010-01-16
Posts: 1
Points: 1

thanks

Debugging or de-constructing the layout would have shown where the issue lies, get familiar with using FireBug to debug layout elements it makes development life a whole lot smoother.

Understanding the nature of the 'em' measure is crucial and you have a lot of em values dotted around the line-height values expressed as em units are a worry.
get paid to upload
The issue rests with the menu bar and more specifically with the anchors nested some 72 levels deep Smile

Look at the padding values top and bottom set as em units these increase to a point where they disrupt the elements below.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 6 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Ah, it would be nice to have

Ah, it would be nice to have a little "report" button we could click so mods don't have to look around for spam (regarding gm0nk3y's post).

antiAlias wrote:

I believe there is a way for you to upload the font to the site and have it embed for those who do not have it.

Yeah, @font-face exists but in this particular case, the problem wasn't even that all machines didn't have Arial, but that text-enlarge was breaking the layout.

It's also likely going to cost some bandwidth or speed to have users download fonts; there are restrictions on what fonts you can offer for download; this can be yet another attack vector, asking people to download bin files; and currently you need to offer like three different font types (svg, eof, whatever saffy uses) to accommodate all the browsers who support Web Fonts.

I'm no expert, but I fake one on teh Internets