Solved

Mysterious Margin/Padding In Safari/Chrome

Posted on 2008-10-02
8
2,263 Views
Last Modified: 2012-05-05
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
Comment
Question by:datacomsmt
  • 3
  • 3
  • 2
8 Comments
 
LVL 44

Expert Comment

by:scrathcyboy
Comment Utility
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
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Can't he just do this:

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

Accepted Solution

by:
David S. earned 500 total points
Comment Utility
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
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Good article...
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 44

Expert Comment

by:scrathcyboy
Comment Utility
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
 
LVL 42

Expert Comment

by:David S.
Comment Utility
> 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
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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
 
LVL 42

Expert Comment

by:David S.
Comment Utility
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

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now