Solved

Mysterious Margin/Padding In Safari/Chrome

Posted on 2008-10-02
8
2,274 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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: 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.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Mobile apps - web/native or hybrid? 1 69
Can't get cursor to change 3 16
CSS - how to make button/link change to black on hover? 2 17
toggle content 12 24
When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
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)

749 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