Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2318
  • Last Modified:

Mysterious Margin/Padding In Safari/Chrome

http://www.yourdentalwebsite.com.au/test.html
--

Hi,

I've created a menu system on the page above and it works fine in all browsers but for some reason in Safari/Chrome some extra margin or padding (about 14px ) gets added in between the top level menu and the sub menu.

The menu system sits inside the DIV named 'menu_content'.

Can anyone work out why?
0
datacomsmt
Asked:
datacomsmt
  • 3
  • 3
  • 2
1 Solution
 
scrathcyboyCommented:
whatever elements you are using, style them all to no margins, no padding, and no border, like this --

DIV  {margin:0px; padding:0px; border:0px; display:inline; overflow:visible;  }

If there is a FORM in the DIV, do the same for that, if a table do the same for that, if an image, do the same

DIV, IMG, FORM, TABLE, BODY  {margin:0px; padding:0px; border:0px; display:inline; overflow:visible;  }

See how that gets them all.  If this is too tight, you can always increase margins or padding later.
0
 
Michel PlungjanIT ExpertCommented:
Can't he just do this:

*  {margin:0px; padding:0px; border:0px; display:inline; overflow:visible;  }
0
 
David S.Commented:
These are well worth reading:

http://www.search-this.com/2007/03/12/no-margin-for-error/
http://snook.ca/archives/html_and_css/no_css_reset/

@mplungjan  Global reset can cause some problems with form controls, so I don't recommend it.
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
Michel PlungjanIT ExpertCommented:
Good article...
0
 
scrathcyboyCommented:
But I never suggested a global reset.  I said to only limit the margin, padding, etc on just the page elements like forms, or DIV that are causing the padding / margin problem, as in my first comment.   I would never to a reset of everything, or recommend it.
0
 
David S.Commented:
> But I never suggested a global reset.

I didn't say you did. However, mplungjan did suggest it.

By the way, as far as I know, no browser puts default padding, margins, or borders on "div" elements. It doesn't hurt to specify those properties for that element type though.
0
 
Michel PlungjanIT ExpertCommented:
I did not "suggest" it, I asked if
DIV, IMG, FORM, TABLE, BODY  {margin:0px; padding:0px; border:0px; display:inline; overflow:visible;  }

could not be written

* {margin:0px; padding:0px; border:0px; display:inline; overflow:visible;  }

and I got my answer.
0
 
David S.Commented:
Oh you really were asking how they were different.

By the way, since the values are 0, the units (i.e. "px") are not required.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 3
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now