Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Mysterious Margin/Padding In Safari/Chrome

Posted on 2008-10-02
8
2,271 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
ID: 22638864
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
ID: 22639892
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
ID: 22642882
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
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22643542
Good article...
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22645417
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.
ID: 22646222
> 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
ID: 22647421
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.
ID: 22648530
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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

856 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