CODEWITHSUNDEEP
css
flasshy
flasshy

Reputation: 121

Maximum margin-top in Safari?

I've run into a really weird problem.

I have a slide-down menu in CSS where I use margin-top to show and hide it. When the menu is hidden, margin-top is set to "-375". This value works fine and puts it in the right place in every browser except Safari. If I change the value to a greater negative number, like "-575", it does nothing in Safari. Positive changes in the value do change its position in Safari.

I'm hoping to avoid pulling out all my HTML, CSS, and Javascript code for this question but what I'd really like to know is (a) has anyone ran into Safari doing weirdness with margin-top attributes with negative values and (b) is there any reason I'd hit a limit on how low I can set the attribute?

I'm baffled. Every other browser works just dandy.

Also: I've noticed top places the menu in a different place than all other browsers, too.

CSS

/* Main container that has overflow set to hidden so when the menu is at 
a negative value, all that's seen is the button at the bottom of it */
div.mobileMenu {
  display: inline-block;
  position: absolute;
  z-index: 200;
  height: 35px;
  width: 100%;
  top: 55px;
  overflow: hidden;
  text-align: center;
  transition: height 0.5s ease;
}

/* DIV that holds the actual menu */
#mobileMenuWrapper {
  display: inline-block;
  position: relative;
  height: 230px;
  width: 300px;
  /* Adjust the margin-top below to account for the height of the menu 
  that needs to be hidden when the menu isn't open */
  margin-top: -375px;
  text-align: center;
  transition: margin-top 0.5s ease;
}

/* Same as above except Javascript sets it to 'show' to set margin-top to
0 px, initiating the transition in the process */
#mobileMenuWrapper.show {
  display: inline-block;
  margin-top: 0px;
}

/* DIV that contains the actual menu */
div.mobileMenuOptionsWrapper {
  display: block;
  height: 100%
  width: 100%;
  text-align: center;
}

/* Button at the bottom of the menu that opens and closes it */
#mobileMenuButton {
  display: inline-block;
  height: 35px;
  width: 100px;
  margin: auto auto;
  text-align: center;
  line-height: 35px;
  background-color: black;
}

Upvotes: 0

Views: 222

Answers (1)

Will Reese
Will Reese

Reputation: 2841

Try using display block instead. There is no reason to use inline block here. Safari has been known to have this issue.

#mobileMenuWrapper {
  display: block;
}

Not knowing the markup, its hard to tell how and why you are using inline-block, but if you are trying to line up tabs or something horizontally, use float.

#mobileMenuWrapper {
  float: left;
}

Upvotes: 1

Related Questions