Solved

Mysterious Margin/Padding In Safari/Chrome

Posted on 2008-10-02
8
2,264 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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22643542
Good article...
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
iOS 10 iPad Zoom and acroll 4 51
Adding a Li to a UL after a specified Li contents 2 42
Why won't this text float to the left 8 26
Put glyphicon in my input button 4 23
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

919 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

21 Experts available now in Live!

Get 1:1 Help Now