- - - - -

Firefox specific CSS for margin-top?


  • Please log in to reply
16 replies to this topic

#1 modiophile

modiophile

    Moderately Sized Orange

  • Members
  • PipPipPip
  • 112 posts

Posted 11 April 2011 - 03:57 PM

I'm running into a little quirk that only shows up in Firefox.  I have a <div> that is being bumped down by 4px.  So instead of having a zero top-margin, I have to compensate by giving it a top margin of -4px.  The problem is, when I open up the same page within Safari or Chrome, that div is 4px too high!  

My guess is that it is being caused by a Flash element that is sitting directly above it.

I know Firefox has a CSS attribute for margin left and right, but does it have one for margin top and bottom?  I find it odd that it wouldn't.

Edited by copaesthetic, 11 April 2011 - 03:59 PM.


#2 davidatfuzzylime

davidatfuzzylime

    Designer; coder; geek

  • Members
  • PipPipPipPipPip
  • 424 posts

Posted 11 April 2011 - 03:59 PM

It's a really bad idea to use browser-specific code in this way unless you're simply targeting bugs in old versions (for example, I use some stylesheets specific for IE6-8 for stuff they don't deal with in a sane way). Much better to track down what's causing the issue in the first place (you seem to be on your way to doing this anyway!), fix it and then it'll work the same cross-browser. If you use a FF-specific hack, there's no telling how it'll show in FF5, for example - you're just making more work for yourself in the long run.
fuzzylime: we know design
Save money when you sign up! Go here then use code giveme15 to get 15% off or giveme5 to get $5 off your order.

#3 modiophile

modiophile

    Moderately Sized Orange

  • Members
  • PipPipPip
  • 112 posts

Posted 11 April 2011 - 07:04 PM

I have no idea what it could be.  I put it through validation and the minor markup errors it found were not causing the issue.  

The page is found here ~~~> http://www.rekhasthr...m/main_aso.html and the <div> where I'm having the 4px margin issue is #mainFooter.

<div id="mainFooter">
		<div id="mainBy"></div>
</div>
#mainFooter {
	height: 48px;
	width: 1096px;
	position: absolute;
}


#4 davidatfuzzylime

davidatfuzzylime

    Designer; coder; geek

  • Members
  • PipPipPipPipPip
  • 424 posts

Posted 12 April 2011 - 02:03 AM

Where did the code for including the .swf come from? It seems a bit mad to have an <object> element embedded within, erm, an object element - and I think that's what's causing your problem. I'd suggest you take a look at that to kick off.

If that doesn't help, you could probably cheat by putting:
object { position: absolute; }
into your CSS and then giving the #mainFooter element a margin-top equivalent to the height of the Flash file.

Also - and I know I've raised this before - why is the site so wide? If I set my browser to 1024x768, it's apparently for somewhere called "R thre". Left-right scrollbars are almost always a bad idea - and lots of people still have their browser set to 1024px wide. I have a much wider monitor but I still use that size as it's what most sites are optimised for and it leaves me the rest of the space to play with!
fuzzylime: we know design
Save money when you sign up! Go here then use code giveme15 to get 15% off or giveme5 to get $5 off your order.

#5 modiophile

modiophile

    Moderately Sized Orange

  • Members
  • PipPipPip
  • 112 posts

Posted 12 April 2011 - 04:22 PM

View Postdavidatfuzzylime, on 12 April 2011 - 02:03 AM, said:

Where did the code for including the .swf come from? It seems a bit mad to have an <object> element embedded within, erm, an object element - and I think that's what's causing your problem. I'd suggest you take a look at that to kick off.

If that doesn't help, you could probably cheat by putting:
object { position: absolute; }
into your CSS and then giving the #mainFooter element a margin-top equivalent to the height of the Flash file.

Ah, I see.  That code you saw with two objects, one within another, was automatically spit out by Adobe Flash.  I don't know the reasoning behind it - but deleting the first object took care of the problem!  Thanks for the keen eye.

Quote

Also - and I know I've raised this before - why is the site so wide? If I set my browser to 1024x768, it's apparently for somewhere called "R thre". Left-right scrollbars are almost always a bad idea - and lots of people still have their browser set to 1024px wide. I have a much wider monitor but I still use that size as it's what most sites are optimised for and it leaves me the rest of the space to play with!

The few sites I've built have been optimized for 1280 x 800 and up.  I know I'm alienating a segment of the population, albeit a small one that is steadily shrinking (15%), but its a tradeoff I'm willing to take.  http://www.w3schools...tion_higher.asp

Edited by copaesthetic, 12 April 2011 - 04:27 PM.


#6 davidatfuzzylime

davidatfuzzylime

    Designer; coder; geek

  • Members
  • PipPipPipPipPip
  • 424 posts

Posted 13 April 2011 - 01:57 AM

Glad that sorted it - I'd doublecheck it still works across browsers tho, just in case :) If you haven't already that is!

I'm always a bit concerned when I see stats like that. I mean, strictly speaking, the stats are true - but what it means is that an increasing number of people aren't running with their browser maximised, because they don't need to. Up to you - but I'd be nervous building a site that even 15% of people weren't going to see properly when they loaded their browser. Hell, we still code for IE6, and its market share is below 10%!
fuzzylime: we know design
Save money when you sign up! Go here then use code giveme15 to get 15% off or giveme5 to get $5 off your order.

#7 IBBoard

IBBoard

    Massive Orange

  • Volunteer Moderators
  • PipPipPipPipPipPipPip
  • 4,729 posts

Posted 13 April 2011 - 01:22 PM

Agreed (except for the IE6 thing - as long as it isn't completely borked then I don't care, but I can't remember when I last checked!).

I'm running at 1280x1024, which means that very few of my windows get maximised and almost all of them (including the browser) are 1024px wide at the widest.

Part of my reasoning is switching between apps and seeing what is in other windows. Part of my reasoning is that I just prefer it from an aesthetics point of view. And part of my reasoning is that if a site is any wider than 1024px then I tend to find that the paragraphs are too wide and it breaks the flow of my reading. From a designers point of view then the latter is probably the most important of the lot.
The more information you provide, the better answer the community can give.

*** Sign up at ASO  with a 15% discount (coupon: saveme15%) or $5 discount (coupon: saveme$5) ***
(Valid on shared hosting and VPS)

#8 billzo

billzo

    Very Large Orange

  • Members
  • PipPipPipPipPip
  • 585 posts

Posted 13 April 2011 - 02:02 PM

View Postdavidatfuzzylime, on 13 April 2011 - 01:57 AM, said:

Hell, we still code for IE6, and its market share is below 10%!

I sure don't code for IE6.  I stopped years ago. Statcounter puts the usage of IE6 at 3% for U.S. browsers and under 5% globally.  I don't care what anybody says, there is no reason that someone cannot upgrade from IE6 or choose a better browser for web use.  I've used Opera, Safari, Google Chrome, and Firefox 4 and all run well even on old computers.  The only people using IE6 are those who don't have to upgrade because webmasters foolishly support that buggy piece of crap or those using operating systems from 13 years ago.  The Opera browser (which is nice) still supports Windows 2000.  

If webmasters didn't support IE6, people would have no choice but to upgrade.  Webmasters supporting that piece of garbage IE6 are holding back the progress of the internet.
Posted Image
Click here to sign up with A Small Orange today!  

ASO servers are fast and they offer excellent support for a great price.  ASO is the BEST host around!

I have been with ASO since June 2007 and recommend this host highly.  ASO has only gotten better over time.  There is no better testimonial about the quality of service of a webhost than a long-term customer like me.  Don't make a frustrating and time-consuming mistake of signing up with any other webhost.  ASO is what you need.

Whether you are hosting a small hobby site like a Wordpress blog, a serious business website, or need a Dedicated Server, VPS or Cloud hosting, ASO has superior quality professional-level hosting packages for you.


View A Small Orange Hosting Plans


$$$ Coupon codes to save you money $$$

Code to save $5: saveme$5
Code to save 15%: saveme15%


Enter the coupon codes when ordering to get your discount. Save $5 or 15% off your initial order.

Sign up with A Small Orange today!  You will be glad you did.
Posted Image

#9 davidatfuzzylime

davidatfuzzylime

    Designer; coder; geek

  • Members
  • PipPipPipPipPip
  • 424 posts

Posted 13 April 2011 - 02:10 PM

View Postbillzo, on 13 April 2011 - 02:02 PM, said:

I sure don't code for IE6.  I stopped years ago. Statcounter puts the usage of IE6 at 3% for U.S. browsers and under 5% globally.  I don't care what anybody says, there is no reason that someone cannot upgrade from IE6 or choose a better browser for web use.  I've used Opera, Safari, Google Chrome, and Firefox 4 and all run well even on old computers.  The only people using IE6 are those who don't have to upgrade because webmasters foolishly support that buggy piece of crap or those using operating systems from 13 years ago.  The Opera browser (which is nice) still supports Windows 2000.  

If webmasters didn't support IE6, people would have no choice but to upgrade.  Webmasters supporting that piece of garbage IE6 are holding back the progress of the internet.

I agree, in principle. But let me give you a real-world example. One of our biggest clients right now is a local authority, with thousands of employees. They still run IE6. They aren't going to upgrade any time soon, unfortunately. If we didn't develop the site to work on the browsers that they use, then we wouldn't get the contract. As nice as it would be to say "we're not working with you until you roll out a better browser throughout your organisation", the response wouldn't be "oh, OK" - it would be "OK, we'll go find someone else to work with, then". I'd also suggest that 3% is still a quite a lot of potential customers to lose if you're an online shop?

That said, luckily, the IE8 Javascript library generally makes supporting it not too much of a hassle - maybe an extra 5mins of tweaking. And I'm still wishing death on the thing :)

View PostIBBoard, on 13 April 2011 - 01:22 PM, said:

Agreed (except for the IE6 thing - as long as it isn't completely borked then I don't care, but I can't remember when I last checked!).

I'm running at 1280x1024, which means that very few of my windows get maximised and almost all of them (including the browser) are 1024px wide at the widest.

Part of my reasoning is switching between apps and seeing what is in other windows. Part of my reasoning is that I just prefer it from an aesthetics point of view. And part of my reasoning is that if a site is any wider than 1024px then I tend to find that the paragraphs are too wide and it breaks the flow of my reading. From a designers point of view then the latter is probably the most important of the lot.

Interesting and good point, especially the last one. Even 1024px is too wide if there's nothing to break up the text, I find - I prefer to have a column down the left or right to split things up a bit. Wider and you're right, it just gets to be a total nightmare. Especially if you have to scroll about :)
fuzzylime: we know design
Save money when you sign up! Go here then use code giveme15 to get 15% off or giveme5 to get $5 off your order.

#10 NyteOwl

NyteOwl

    36 Bits forever!

  • Volunteer Moderators
  • PipPipPipPipPipPipPip
  • 1,902 posts

Posted 13 April 2011 - 03:10 PM

Screen size != browser size. Few people browse at full screen and as monitors continue to increase in size, this trend will only increase. As compact netbooks and smaller notebooks continue to proliferate even full screen for them is rarely over 1366 and more commonly 1024. It takes little extra effort to make a design flexible between say 1000px (or even 800) and something higher. If you want to cut off this market segment (and many of them use larger browsers on desktops but will be POed anyway) that's entirely your business however.
Obsolescence is just a lack of imagination.

Sign up at ASO and enjoy friendly, quality hosting services. Use coupon code no2512 and save 15% or coupon code 2152on and take $5 off. Valid on both Shared Hosting and VPS plans.

#11 billzo

billzo

    Very Large Orange

  • Members
  • PipPipPipPipPip
  • 585 posts

Posted 14 April 2011 - 07:45 AM

View Postdavidatfuzzylime, on 13 April 2011 - 02:10 PM, said:

I agree, in principle. But let me give you a real-world example. One of our biggest clients right now is a local authority, with thousands of employees. They still run IE6. They aren't going to upgrade any time soon, unfortunately. If we didn't develop the site to work on the browsers that they use, then we wouldn't get the contract.

Does that local authority realize how buggy and insecure IE6 is?  What operating system are they running?  Because you can have additional browsers installed in addition to IE6 if you are using Windows XP or higher.  If they need to rely on IE6 for work purposes, they can install a new browser for general web browsing.  Have you discussed this with them?

Youtube dropped support for IE6 a while ago.  Gmail dropped support.  Facebook dropped support for IE6 for some features such as chat from what I've read.  Digg dropped support, too.  European governments urged citizens to stop using that piece of crap.  The only reason people are not upgrading is because webmasters continue to support it.

IE6 is 10 years old now.  How many more years are you going to support it?  Until everyone stops using it?  Some people are not going to upgrade until they absolutely have to.  And if webmasters continue to support IE6, that means they don't have to upgrade.

I have never had a problem designing for Firefox.  IE7 isn't much of a problem, either, once you get past the hasLayout bug which causes disappearing borders when scrolling.  IE6, on the other hand, has been nothing but a pain in the ass.

If somebody is so technologically behind the times as to still be using a 10-year-old browser, how much online shopping are they going to do, anyway?  They obviously haven't been shopping for computers.

By the way, I still get hits from IE5 and lower from time to time and old versions of Netscape Navigator.  I don't support those, either.  Do you?

CSS3 has some nice features that are available to us now (rounded borders, gradients, shadows, etc.).  But the problem is we will never be able to use them because people are not going to upgrade their browsers because some webmasters insist on supporting dinosaur software.

Edited by billzo, 14 April 2011 - 07:57 AM.

Posted Image
Click here to sign up with A Small Orange today!  

ASO servers are fast and they offer excellent support for a great price.  ASO is the BEST host around!

I have been with ASO since June 2007 and recommend this host highly.  ASO has only gotten better over time.  There is no better testimonial about the quality of service of a webhost than a long-term customer like me.  Don't make a frustrating and time-consuming mistake of signing up with any other webhost.  ASO is what you need.

Whether you are hosting a small hobby site like a Wordpress blog, a serious business website, or need a Dedicated Server, VPS or Cloud hosting, ASO has superior quality professional-level hosting packages for you.


View A Small Orange Hosting Plans


$$$ Coupon codes to save you money $$$

Code to save $5: saveme$5
Code to save 15%: saveme15%


Enter the coupon codes when ordering to get your discount. Save $5 or 15% off your initial order.

Sign up with A Small Orange today!  You will be glad you did.
Posted Image

#12 davidatfuzzylime

davidatfuzzylime

    Designer; coder; geek

  • Members
  • PipPipPipPipPip
  • 424 posts

Posted 14 April 2011 - 09:51 AM

I'm sure that the IT people do realise this, yeah. Unfortunately it's not them that make the decisions - and if they don't listen to them, they're not going to believe some random contractors. Large organisations are just like that. I don't like it any more than you but I'm afraid I have to be of the opinion that, if it's a case of support IE6 or don't get the job, I'm going to choose the former every time.

That said, I'm hopeful we'll be able to phase it out over the next year. I know most large organisations are at least up to 7 now, or are planning to migrate later in the year - that's the case in the UK, at least. I fully agree that it's a pain in the ass to design for, but if one of our biggest clients insists on using it, then I'm going to design for it. If they used IE5, I'd probably make sure it worked in that, too.

On the CSS3 point - surely any design should degrade gracefully? IE8 doesn't even support the options you've mentioned there. Given that WinXP doesn't support anything later than 8, and given that a large proportion of the public is never going to switch from Internet Explorer (and probably isn't even going to switch from XP until their computer breaks down), are you really saying we shouldn't be using these techniques until everyone can see them?

I'm not saying every single feature should work on IE6, or even 7, any more; but I do genuinely think that while there's what is, in terms of total numbers of visitors, a relatively high number of people using them, it's just not an option to turn them away.
fuzzylime: we know design
Save money when you sign up! Go here then use code giveme15 to get 15% off or giveme5 to get $5 off your order.

#13 billzo

billzo

    Very Large Orange

  • Members
  • PipPipPipPipPip
  • 585 posts

Posted 15 April 2011 - 03:52 PM

View Postdavidatfuzzylime, on 14 April 2011 - 09:51 AM, said:

On the CSS3 point - surely any design should degrade gracefully? IE8 doesn't even support the options you've mentioned there. Given that WinXP doesn't support anything later than 8, and given that a large proportion of the public is never going to switch from Internet Explorer (and probably isn't even going to switch from XP until their computer breaks down), are you really saying we shouldn't be using these techniques until everyone can see them?

Microsoft refused to support Windows XP with IE9 because...ta da!--they want to encourage sales of their latest operating system.  If Firefox, Opera, Safari, and Google Chrome can all support XP, there is no reason that the company that made the operating system can't support it.

If people don't upgrade from XP, that means no money for Microsoft. :P

View Postdavidatfuzzylime, on 14 April 2011 - 09:51 AM, said:

I'm not saying every single feature should work on IE6, or even 7, any more; but I do genuinely think that while there's what is, in terms of total numbers of visitors, a relatively high number of people using them, it's just not an option to turn them away.

But as webmasters we have something to influence browser usage:  visitors.  How many IE hating webmasters out there actively encourage their visitors to choose a better browser?  I do.  Do you?  Change doesn't happen if people don't realize the benefits of changing.  There are real benefits to using modern non IE browsers, one of which is that sites are easier to design and take less time.  Which takes more time?  Applying a rounded border with CSS or making images, mucking up the markup, and making sure the CSS is just right?  

I hope that Microsoft's intentional choice not to support XP with IE9 backfires on them and drives even more people to dump IE.  From the estimates I've read, between 45% and 55% of computers are still running XP.  Statcounter puts the global market share of internet users using XP at 47% in March 2011 and the U.S. share at 32%.  According to Statcounter, more people still use XP than any other operating system.  

I do understand that you are willing to support IE6 if your client pays you to.  If I was paid, I would, too.  You are getting paid for it, so it isn't like all the aggravation is for nothing.  If I was making sites for clients, I would be tempted to tack on an additional IE6 aggravation fee.  ;)
Posted Image
Click here to sign up with A Small Orange today!  

ASO servers are fast and they offer excellent support for a great price.  ASO is the BEST host around!

I have been with ASO since June 2007 and recommend this host highly.  ASO has only gotten better over time.  There is no better testimonial about the quality of service of a webhost than a long-term customer like me.  Don't make a frustrating and time-consuming mistake of signing up with any other webhost.  ASO is what you need.

Whether you are hosting a small hobby site like a Wordpress blog, a serious business website, or need a Dedicated Server, VPS or Cloud hosting, ASO has superior quality professional-level hosting packages for you.


View A Small Orange Hosting Plans


$$$ Coupon codes to save you money $$$

Code to save $5: saveme$5
Code to save 15%: saveme15%


Enter the coupon codes when ordering to get your discount. Save $5 or 15% off your initial order.

Sign up with A Small Orange today!  You will be glad you did.
Posted Image

#14 davidatfuzzylime

davidatfuzzylime

    Designer; coder; geek

  • Members
  • PipPipPipPipPip
  • 424 posts

Posted 15 April 2011 - 06:07 PM

View Postbillzo, on 15 April 2011 - 03:52 PM, said:

I do understand that you are willing to support IE6 if your client pays you to.  If I was paid, I would, too.  You are getting paid for it, so it isn't like all the aggravation is for nothing.  If I was making sites for clients, I would be tempted to tack on an additional IE6 aggravation fee.  ;)

We pretty much do. It's one of our clauses! If I can make it work, well enough, within a few minutes, I'll just do it - but if it's major code rewrites then we invoke a clause that says "if you want it to work in this old browser, we'll need to charge you extra" :)
fuzzylime: we know design
Save money when you sign up! Go here then use code giveme15 to get 15% off or giveme5 to get $5 off your order.

#15 jednorozec

jednorozec

    Eclectical Engineer

  • Volunteer Moderators
  • PipPipPipPipPipPip
  • 1,119 posts

Posted 15 April 2011 - 06:16 PM

I have one system that runs Win7 in VirtualBox under Debian and several old systems (mainly laptops) that run XP so my XP usage is well above that 55%. I even have some systems running 95 that should probably be recycled and I may still have a 3.1 system in storage. Anybody need a doorstop?

Considering all of the security problems that IE has had, the only thing that I use it for is Windows upgrade.

Microsoft does all that it can to force people to upgrade. Look at how they change the file formats in each new version of Office. I still use a very old version of Lotus.
Join ASO and use a coupon to Save $5 or Save 15%

#16 billzo

billzo

    Very Large Orange

  • Members
  • PipPipPipPipPip
  • 585 posts

Posted 15 April 2011 - 10:09 PM

View Postjednorozec, on 15 April 2011 - 06:16 PM, said:

Microsoft does all that it can to force people to upgrade. Look at how they change the file formats in each new version of Office. I still use a very old version of Lotus.

That method of not allowing older versions of Office to open newer version files is one way to generate revenue.  Open Office is a decent office suite if you have never tried it.  It works with Excel files.
Posted Image
Click here to sign up with A Small Orange today!  

ASO servers are fast and they offer excellent support for a great price.  ASO is the BEST host around!

I have been with ASO since June 2007 and recommend this host highly.  ASO has only gotten better over time.  There is no better testimonial about the quality of service of a webhost than a long-term customer like me.  Don't make a frustrating and time-consuming mistake of signing up with any other webhost.  ASO is what you need.

Whether you are hosting a small hobby site like a Wordpress blog, a serious business website, or need a Dedicated Server, VPS or Cloud hosting, ASO has superior quality professional-level hosting packages for you.


View A Small Orange Hosting Plans


$$$ Coupon codes to save you money $$$

Code to save $5: saveme$5
Code to save 15%: saveme15%


Enter the coupon codes when ordering to get your discount. Save $5 or 15% off your initial order.

Sign up with A Small Orange today!  You will be glad you did.
Posted Image

#17 modiophile

modiophile

    Moderately Sized Orange

  • Members
  • PipPipPip
  • 112 posts

Posted 20 April 2011 - 06:56 PM

I've went ahead and redesigned the entire website at a more scaled down size, however at 1108px wide it is still optimized for 1280px as the nature of the layout and menu interface would not work at anything at or below 1024px.  After considering that not everyone views sites at 1280, even if that is their screen resolution, the original at 1265px was just too wide.

Edited by copaesthetic, 20 April 2011 - 06:57 PM.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users