I have a simple ul/li with images/text inside it. In Safari the images are getting vertically stretched:
HTML Code:
<ul class="dropdown-menu">
<li>
<a><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg/1024px-Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg.png">SharePoint</a></li>
<li>
<a><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg/1024px-Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg.png">SharePoint</a></li>
<li>
<a><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg/1024px-Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg.png">SharePoint</a></li>
</ul>
CSS:
.dropdown-menu > li > a {
border-top: 0 solid #efefef;
color: inherit;
display: flex;
padding: 10px 30px 12px;
clear: both;
font-weight: normal;
line-height: 25px;
white-space: nowrap;
}
ul.dropdown-menu li a img {
width: 25px;
margin-right: 15px;
}
Safari:
Chrome:
Live fiddle URL to test:
https://jsfiddle.net/raghav_khunger/ko0wybhx/8/
I can add hardcoded height 25px to the image to overcome this issue:
ul.dropdown-menu li a img
One more solution could be having align-items: center; rule to .dropdown-menu > li > a (https://jsfiddle.net/raghav_khunger/ko0wybhx/10/)
Is there any other solution to it?
Are the above solutions valid for making the images do not stretch?
Can you share the reason why the images are getting stretched in the Safari whereas it is working fine in Chrome?
can you try with this code, hope it will work for you.
.dropdown-menu > li > a {
border-top: 0 solid #efefef;
color: inherit;
display: flex;
padding: 10px 30px 12px;
clear: both;
font-weight: normal;
line-height: 25px;
white-space: nowrap;
}
ul.dropdown-menu li a img {
width: 25px;
margin-right: 15px;
}
<ul class="dropdown-menu">
<li>
<a>
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg/1024px-Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg.png">SharePoint
</div>
</a></li>
<li>
<a>
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg/1024px-Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg.png">SharePoint
</div>
</a></li>
<li>
<a>
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg/1024px-Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg.png">SharePoint
</div>
</a></li>
</ul>
Related
This question already has answers here:
How to make an HTML anchor tag (or link) look like a button?
(18 answers)
Closed 3 years ago.
I was trying to make webrazzi from scratch.I want to press the buttons while cursor nearby to I also want to press the button.(In the image you can see red rectangles.I also want to add a place like that and can press the button If I am even there).(Sry for bad english)
Image: https://prnt.sc/oaewro
I tried to make a tags block but when I did that search button comes under "Search" text
nav ul li {
display: inline-block;
padding-right: 2.4rem;
}
nav ul li:nth-child(2) a{
margin-right: 1rem;
}
nav ul li a {
color: #0A0A0A;
font-size: .9rem;
font-family: 'Nanum Gothic', sans-serif;
}
<nav>
<ul>
<li>Subscribe</li>
<li>Search<i class="fas fa-search"></i></li>
<li>Sign In</li>
<li>Register</li>
</ul>
</nav>
Give your anchor elements a width and height.
.button {
display: block;
width: 115px;
height: 25px;
background: #4E9CAF;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
font-weight: bold;
}
<a class="button" onClick="javascript: alert('hello')">Say Hello</a>
Above is an extension of this answer.
nav ul li {
display: inline-block;
}
nav ul li a {
padding: 1rem;
border: 2px solid rebeccapurple;
margin-left: 10px;
color: #0A0A0A;
font-size: .9rem;
text-decoration: none;
font-family: 'Nanum Gothic', sans-serif;
}
ul {
display: flex;
justify-content: flex-end;
margin-top: 35px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<nav>
<ul>
<li>Subscribe</li>
<li>Search <i class="fas fa-search"></i></li>
<li>Sign In</li>
<li>Register</li>
</ul>
</nav>
I've been working on a design with three links spanning the width of the device on mobile. I can't figure out why I can't get the spacing right. What looks off?
Here's the design :
And here's what the coded version is looking like :
Here's my CSS :
.b-nav-Wrapper {
width: 100%;
}
.b-nav {margin: 0 auto;}
.b-nav ul {
list-style: none;
}
.b-nav ul li{
display: inline-block;
width: 33.33%;
}
.b-nav ul li a{
text-decoration: none;
color: rgb(151,151,151);
}
.navNumber {
float: left;
width: 20%;
font-family: "korolev-condensed",sans-serif;
font-size: 2.5875em;
opacity: .50;
}
.navLink {
float: right;
width: 65%;
padding-top: 4px;
font-family: "mrs-eaves-xl-serif",sans-serif;
font-size: 1.2em;
line-height: 1em;
font-style: italic;
font-weight: 500;
}
*edit: here's my HTML :
<nav class="b-nav-Wrapper cf">
<div class="b-nav">
<ul>
<li class="active">
<a href="#">
<p class="navNumber active">01</p>
<p class="navLink active">Now Reading</p>
</a>
</li>
<li>
<a href="#">
<p class="navNumber">02</p>
<p class="navLink">Browse My Books</p>
</a>
</li>
<li>
<a href="#">
<p class="navNumber">03</p>
<p class="navLink">Notes & Quotes</p>
</a>
</li>
</ul>
</div>
</nav>
You didn't put your html, that makes us guessing about it. But if .b-nav ul li is referred to numbered parts, you should try width less than 33.33%. Because just 1px margin or padding of other elements cause it to break into two lines. If it doesn't solve, put your link or html.
I made this horizontal menu, and everything was nice and good, until I realized that I can't make the submenus appear vertical, can someone help me?
Here is the menu code:
<div id="nav_custom">
<div id="nav_custom_wrapper"></div>
<ul>
<li>NEW ARRIVALS
</li>
<li>
SEQUIN DRESSES
<ul id="nav_custom_sub">
<li>AVAILABLE</li>
<li>EXAMPLES SOLD</li>
</ul>
</li><li>
BOHO DRESSES
<ul id="nav_custom_sub">
<li>AVAILABLE</li>
<li>EXAMPLES SOLD</li>
</ul>
</li><li>
MOD DRESSES
<ul id="nav_custom_sub">
<li>AVAILABLE</li>
<li>EXAMPLES SOLD</li>
</ul>
</li><li>
PSYCHEDELIC DRESSES
<ul id="nav_custom_sub">
<li>AVAILABLE</li>
<li>EXAMPLES SOLD</li>
</ul>
</li><li>
COATS & JACKETS
<ul id="nav_custom_sub">
<li>AVAILABLE</li>
<li>EXAMPLES SOLD</li>
</ul>
<li>
KIMONOS
<ul id="nav_custom_sub">
<li>AVAILABLE</li>
<li>EXAMPLES SOLD</li>
</ul>
</li>
</ul>
</div>
Here is the css that I have used:
#nav_custom {
text-decoration: none;
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 49px;
color: #000;
display: block;
padding: 10px;
width: 960px;
margin-left: -35px;
margin-right: auto;
text-align: center;
width: auto;
}
#nav_custom_wrapper {
width: 960px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#nav_custom ul{
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#nav_custom ul li{
display: inline-block;
}
#nav_custom ul li:hover{
color: #000;
text-decoration: none;
}
#nav_custom ul li a,visited{
color: #BA7145;
padding: 15px;
text-decoration: none;
}
#nav_custom ul li a:hover{
color: #000;
text-decoration: none;
}
#nav_custom ul li:hover ul{
display: block;
}
#nav_custom ul ul{
display: none;
position: absolute;
margin-top: -25px;
margin-left: -50px;
text-align: center;
color: #4f4f4f;
}
Remove the inline-block on the #nav_custom ul li
See fiddle for working example: http://jsfiddle.net/Tv77g/
Inline-block works similarly to floats, which is why they were stacking left to right next to each other instead of one on top of each other.
I didn't go through to adjust your children. I don't know how the menu is supposed to display. Most likely the children (#nav_custom ul ul) would have the margins adjusted. You can remove text-align:center; on #nav_custom to make the menu completely left aligned.
To set this only on children, add
#nav_custom_sub li {
display: block !important;
}
This will override the inline-block for only the children (in the dropdown). You will have to adjust the margins to make them appear correctly.
I have a simple question. I'm trying to display the elements for "about" "general" and "social-buttons" classes within a nested unordered list. I want these to appear horizontal and inline with each other. I want them to be side by side basically, not vertical. If you can help me figure out which selector I need to add the 'display:inline' block, that would be much useful.
<div class="footer-container">
<div id="footer_menu">
<div id="footer-copy">
<li class="about-blurb">
<h3>Viral DNA</h3>
<ul>
<li>
<p>Virael Marketing is the leading digital marketing blog for the social web. We are a one-stop hub to help you learn from your viral marketing campaigns, offer tips & tricks, and build the best digital marketing teams.</p>
</li>
</ul>
<li class="General">
<h3>General</h3>
<ul>
<li><a class="button" href="#">Media</a></li>
<li><a class="button" href="#">Resources</a></li>
<li><a class="button" href="#">Blog</a></li>
<li><a class="button" href="#">Store</a></li>
<li><a class="button" href="#">Contact</a></li>
</ul>
<li class="social-icons">
<h3>Follow Virael</h3>
<ul>
<li>
<!--social media buttons go here-->
</li>
</ul>
</ul>
</div>
</div>
The CSS:
.footer-container {
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro,'MyriadPro', Arial, sans-serif;
float: left;
text-align: left;
width: 828px;
text-transform: capitalize;
background-color: #4169E1;
color: #FFF;
position: relative;
bottom: 0;
left: 269px;
border-top: 10px solid #B0C4DE;
overflow: hidden;
z-index=-1000;
}
.footer-container h3 {
text-align:justify;
}
#footer_menu {
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro,'MyriadPro', Arial, sans-serif;
list-style-type:none;
z-index=-1000;
}
#footer_menu ul {
margin: 0px 30px;
padding: 10px 30px;
list-style-type:none;
text-decoration:none;
display:inline;
z-index=-1000;
}
#footer_menu ul li {
margin: 0 0;
padding: 5px 0;
z-index=-100;
display:block;
color: white;
clear:both;
}
#footer_menu .about-blurb ul li {
width: 200px;
height: auto;
text-align:justify;
}
Replace your css with mine. Live example here
#footer_menu ul {
/* margin: 0px 30px; */
padding: 10px 30px;
list-style-type: none;
text-decoration: none;
display: inline;
}
#footer_menu ul li {
margin: 0 0;
padding: 5px 0;
display: inline-block;
color: white;
clear: both;
}
Remove margins from the ul and add inline-block to li
It would appear that I am suffering from a new bug in IE7, as I can't seem to find any reference to it anywhere else. It is best explained using screenshots, so here are a couple of links (and as a note, it's not a requirement for it to work in IE6, so I don't even want to know what it looks like under that!):
How it should be displayed (using Safari 4):
http://dl-client.getdropbox.com/u/45961/safari4.png
How IE7 is displaying it:
http://dl-client.getdropbox.com/u/45961/ie7.png
Here's the CSS for that menu chunk:
#mm #leftNav .navigation {
width: 100%;
margin-bottom: 0;
float: left;
}
#mm #leftNav li {
list-style: none;
display: inline;
margin: 0;
}
#mm #leftNav .navigation li ul {
display: none;
}
#mm #leftNav .navigation li a {
text-decoration: none;
color: #ffffff;
font-size: 11pt;
padding-left: 20px;
}
#mm #leftNav .navigation li {
cursor: pointer;
margin-right: 4px;
padding-left: 8px;
padding-right: 8px;
padding-top: 10px;
padding-bottom: 8px;
overflow: visible;
}
.menu_item {
background: #419185;
}
.menu_item:hover {
background: #48a093;
}
.currentcat {
background-color: #4aa8a6;
}
.currentcat:hover {
background: #4aa8a6;
}
And here is the HTML:
<div id="mm">
<div id="leftNav">
<ul class="navigation">
<li class="menu_item">
<a class="icon icon-base">Base</a>
</li>
<li class="menu_item">
<a class="icon icon-devices">Devices</a>
</li>
<li class="menu_item">
<a class="icon icon-management">Management</a>
</li>
<li class="menu_item">
<a class="icon icon-iptools">IP Tools</a>
</li>
<li class="menu_item">
<a class="icon icon-config">Configuration</a>
</li>
<li class="menu_item">
<a class="icon icon-admin">Administration</a>
</li>
</ul>
<div id="subnav"></div>
</div>
</div>
Any ideas?
top and bottom padding are not supported on inline elements (some browsers will render it, others won't)
Here's a good article on the problem:
http://www.maxdesign.com.au/presentation/inline/
If you really need correct padding, you should change the menu items to "display:block" and "float:left"
Hehe, activa beat me to it.
Indeed, move your margin/padding to the A element, kinda like so:
mm #leftNav .navigation li a {
text-decoration: none;
color: #ffffff;
font-size: 11pt;
display:block;
float:left;
background: #419185;
margin-right: 4px;
padding-left: 20px;
padding-right: 8px;
padding-top: 10px;
padding-bottom: 8px;
}
mm #leftNav .navigation li {
cursor: pointer;
}
.menu_item {
}