html - Why Does Safari's CSS Positioning Break At Smaller Screen Widths -
on site, www.azletconsulting.com, when site drops below 950px safari breaks positioning of register vote, join campaign etc menu positioning. @ larger sizes aligned drops 1 of smaller css media queries menu buttons break alignment. code same between media queries , have no issue in chrome/firefox.
.main_footer_menu { left: 0; bottom: 0; top: 319px; position: absolute; width: 100%; height: 80px; background-color: rgba(93, 93, 93, 1); z-index: 10; box-sizing: border-box; } ul#menu-bottom-menu { margin: 0; padding: 0; height: 80px; } li#menu-item-28 { left: -200px; position: relative; display: inline-block; width: 200px; height: 80.5px; background-image: url("images/buttons/medium/rov.png"); background-size: 200px 80.5px; background-repeat: no-repeat; background-position: center; text-indent: -99999999px; overflow: hidden; } li#menu-item-29 { top: -90px; position: relative; display: inline-block; width: 200px; height: 80.5px; background-image: url("images/buttons/medium/join.png"); background-size: 200px 80.5px; background-repeat: no-repeat; background-position: center; text-indent: -99999999px; overflow: hidden; } li#menu-item-30 { top: -175px; left: 200px; position: relative; display: inline-block; width: 200px; height: 80.5px; background-image: url("images/buttons/medium/contribute.png"); background-size: 200px 80.5px; background-repeat: no-repeat; background-position: center; text-indent: -99999999px; overflow: hidden }
try this:
.main_footer_menu { left: 0; bottom: 0; top: 319px; position: absolute; width: 100%; height: 80px; background-color: rgba(93, 93, 93, 1); z-index: 10; box-sizing: border-box; } ul#menu-bottom-menu { margin: 0; padding: 0; height: 80px; } li#menu-item-28, li#menu-item-29, li#menu-item-30 { display: inline-block; } li#menu-item-28 a, li#menu-item-29 a, li#menu-item-30 { display: inline-block; width: 200px; height: 80.5px; background-size: 200px 80.5px; background-repeat: no-repeat; background-position: center; text-indent: -99999999px; overflow: hidden; } li#menu-item-28 { background-image: url("images/buttons/medium/rov.png"); } li#menu-item-29 { background-image: url("images/buttons/medium/join.png"); } li#menu-item-30 { background-image: url("images/buttons/medium/contribute.png"); }
Comments
Post a Comment