I’m using CSS columns to get a multi-column main-navigation on my website (www.alexanderschlosser.de/wordpress – built using Semplice). Everything works great in Chrome, but the top of the columns are not correctly aligned in Safari. Any idea what might cause the issue? _
Here’s how it looks in Chrome and should look everywhere:
Chrome Rendering
And here’s how it looks in Safari (second columns begins to low):
Safari Rendering
What’s even weirder: Safari still seems to think that the elements are all underneath each other when I use the inspector. Could this be the problem?
Safari Inspector Screenshot
_
Here’s my CSS
/***VERTICAL MENU IN TWO COLUMNS***/
nav.standard ul {
display: block !important;
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
height: 100px !important;
}
/***DISTANCE BETWEEN MENU ELEMENTS***/
nav.standard ul li {
padding-bottom: 15px !important;
}
/***STYLING MENU ITEMS***/
.navPrimary a {
background-image: linear-gradient(to bottom, #252526, #252526);
background-position: left 0 bottom 0;
background-repeat: repeat-x;
background-size: 2px 1px;
}
And my HTML simplified
<nav class="standard">
<ul class="menu">
<li class="navPrimary">
<span>All Projects</span>
</li>
<li class="navPrimary">
<a target="_blank" href="http://blog.alexanderschlosser.de"><span>Blog →</span></a>
</li>
<li class="navPrimary">
<span>About Me</span>
</li>
<li class="navInactive">
<span>Alexander Schlosser</span>
</li>
<li class="navSecondary“>
<span>mail#alexanderschlosser.de →</span>
</li>
<li class="navSecondary">
<a target="_blank" href="tel:004917657807152"><span>0049 176 57 80 71 52 →</span></a>
</li>
</ul>
</nav>
_
Many thanks in advance and all the best from Switzerland! Alex
Ok, seems as if I’ve finally figured something out. Adding this seems to do the trick for me:
nav.standard ul li {
page-break-inside: avoid;
break-inside: avoid;
-webkit-column-break-inside: avoid;
}
Still have no idea why this is working though. What does safari try to break between the columns? Cannot be the margin or padding as the problem still occurs without any distance between the elements at all.
In my case problem was in margin on column items, so when I delete it all was fine. Also display: flex for items solve the problem without removing margin from items
Related
Using flex to lay out a menu, all works nicely on chrome on windows:
However on ios devices (various iphones and ipads) the longer content does NOT expand its container as much as it should, and/or the smaller items don't shrink as much as they should, and the longer content gets cut off:
I'm viewing on Safari 9, which should be pretty up to date and not need prefixes (I've tried prefixes anyway - they didn't work). Am I missing something?
<style>
.lvl1Menu
{
width:750px;
display: flex;
flex-direction: row;
justify-content: space-around;
background-color:white;
padding:0;
font-size: 16px;
flex-direction: row;
}
li{
list-style: none;
text-align:center;
background-color:#EEEEEE;
padding:0px;
font-size: 25px;
flex: 1 1 auto;
}
</style>
<ul class="lvl1Menu">
<li>
Some words
</li>
<li>
Some words
</li>
<li>
ONELONGWORD
</li>
<li>
Some words
</li>
<li>
Some words
</li>
<li>
Some words
</li>
<li>
Some words
</li>
</ul>
"Chrome, Opera, and Safari do not honor the default min-content size of flex items. Set flex-shrink to 0 (instead of the default 1) to avoid unwanted shrinkage."
Source:
https://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/
I'm guessing the Chrome has fixed this since then, but Safari hasn't.
Perhaps you need to set flex-shrink:1; and possibly flex-grow:1;
https://css-tricks.com/almanac/properties/f/flex-shrink/
i have a weird problem with Chrome only. I have a menu on my website with a submenu that shows only when parent item get hovered.
Here's my CSS :
.menu .liFirstLevel ul
{
position: relative;
background-image: url(/imgs/bg-submenu.jpg);
background-repeat: repeat;
}
.menu .liFirstLevel:hover ul {
display: block;
z-index: 5;
padding: 0px;
line-height: 30px;
}
Here's the problem : Lets supppose that i have a parent menu with a submenu that contains 3 options. Like this :
<ul class='menu'>
<li class='liFirstLevel'>
<ul class='submenu'>
<li>SubMenu1</li>
<li>SubMenu2</li>
<li>SubMenu3</li>
</ul>
</li>
</ul>
When i hover the ul.menu, the submenu always display, as supposed to. But when i try to select one of the subitem menu, it disapear as soon as the crusor is at the middle height of the first subitem... So in the exemple above, As soon as i reach the middle height of "Submenu1" my submenu disapear. Now here's the strange part : If i minimize chrome and then bring it back, the bug is gone...
My menu is 100% functionnal. So i'm pretty sure my CSS is ok...
Any ideas of what i can try ? I tried so many things.
I hope i'm clear, it's a bit complex to explain !
Thanks
Edit: Now that flexbox has become basically universally supported, use flexbox!
I want to have 3 div objects next to each other for my navigation bar. There should be an image in the right one to begin the navigation bar, one on the end to finish it, and the middle part should be as wide as it needs to be to fit all the text in. And the navigation bar should be in the middle of the page. I am not sure if I did it totally wrong, because it won't really work at all. This is the code I already got.
HTML:
<div class="navigation">
<div class="navLeft"></div>
<div class="navMiddle">
<ul>
<li id="active">Home</li>
<li>Info</li>
<li>Projects</li>
<li>Contact Us</li>
</ul>
</div>
<div class="navRight"></div>
</div>
CSS:
.navigation {
margin: auto;
height: 70;
}
.navigation ul {
list-style: none;
}
.navigation ul li {
display: inline;
margin: 0px;
}
.navLeft {
float: left;
width: 13;
height: 70;
background: url(../images/Nav_L.png);
}
.navMiddle {
height: 70;
background: url(../images/Nav_Mid.png) repeat-x;
}
.navRight {
float: right;
width: 13;
height: 70;
background: url(../images/Nav_R.png);
}
First of all there are many errors in your css.
width:13; // WRONG
width:13px; //CORRECT
any width, height, margin, padding which is more than 0 should either have px, em or %
adding width: calc(100% - 26px); will take the remaining width of .navMiddle.
JSFIDDLE
It's very hard to diagnose this problem without seeing what is happening. I would imagine that you need to set a width on your navigation class. It might help to float all three of your classes (navLeft, navMiddle, and navRight) in the same direction (most likely left). If you want to vertically center all of this, you will most likely need to make sure whatever is containing this navigation has a height of 100%.
Hi I highly recommend save yourself the headaches with hard coding all of this and utilize the flexbox. It makes a much cleaner solution and gives alot more control with out so much hard coding.
http://net.tutsplus.com/tutorials/html-css-techniques/an-introduction-to-css-flexbox/
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
I'd use inline-block instead of floating. it give's you better handling.
Check out this Fiddle
BTW: values other than 0 need to have a value, so 70 needs to be 70px
I think you can place the <div class="navRight"> before <div class="navMiddle">
<div class="navigation">
<div class="navLeft"></div>
<div class="navRight"></div> <!-- place navRight div here -->
<div class="navMiddle">
<ul>
<li id="active">Home</li>
<li>Info</li>
<li>Projects</li>
<li>Contact Us</li>
</ul>
</div>
</div>
.navLeft, .navMidlle, .navRight{display:inline;}
I'd suppose that would work, you can try to test it out. Delete the float:left; and float:right; in your css also.
This is my code for a drop down menu. I pulled the code from a tutorial that produced this: http://www.webdesigndev.com/wp-content/uploads/2009/07/fancydropdown.html
But instead of text navigation I have images as you can see in the CSS attached to the span id's. With this code, I'm given the dropdown menus for each span correctly, I just can't get rid of the white space between them.
I know a new line in HTML between divs/spans create whitespaces, but I want to know a way to rid of them in CSS.
<div id="menu">
<ul class="tabs">
<li class="hasmore"><span id="bird"></span>
<ul class="dropdown">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li class="last">Menu item 6</li>
</ul></li><li class="hasmore"><span id="wild"></span>
<ul class="dropdown">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li class="last">Menu item 6</li>
</ul>
</li>
</ul>
</div>
This is some CSS that applies:
#menu ul
{
margin: 0 auto;
}
ul.tabs
{
display: table;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
ul.tabs li
{
margin: 0;
padding: 0;
list-style: none;
display: table-cell;
float: left;
position: relative;
}
ul.tabs a
{
position: relative;
display: block;
}
#bird {
background-image:url(images/birdingnav.png);
width:80px;
height: 20px;
text-indent:-9009px;
font-size: 0px;
border: 0;
}
#wild {
background-image:url(images/wildernessnav.png);
width:119px;
height: 20px;
text-indent:-9009px;
font-size:0px;
border: 0;
}
What do I need to do to this code in CSS to get rid of the white space that appears between my span images?
This is a common problem. More common with inline-block than inline, as inline usually means it's in the flow of text, where white space is relevant. With inline-block, people are using it for layout, and the white space becomes a problem.
There is a new CSS property specifically trying to deal with this issue - white-space:collapse; and white-space-collapse: discard;, but sadly it isn't supported by any of the major browsers yet. So that's not an option.
In the absence of that, the solutions to this tend to be a bit hacky.
One common solution is to set the container element to font-size:0;. This effectively renders the white space irrelevant; it's still there, but doesn't take up any space. The downside here is that you then need to set the font-size back again for the internal elements. If you're using a dynamic layout, with em based font-sizes, this can be tricky to handle.
Switching the layout to a float:left layout will remove this issue, but introduces other problems. Personally I've never liked working with float, but it might be the answer for some cases.
You could also use Javascript to remove the spaces, but that really is a hack.
Other than that, re-arranging the HTML code to remove the spaces is the most likely best solution. I know it's not the one you wanted though.
Try setting display: inline-block on the image elements. Spans are supposed to be inline, so the best solution would be to not use spans at all, but since you said don't change the html...
See how there's no spaces between the images in this fiddle: http://jsfiddle.net/rVTZc/
From this style:
#menu ul li a:hover span {
background: url("images/topselectionright.png") repeat scroll right top transparent;
}
remove
right top
If I understand you correctly, maybe ul { font-size:0 } would help?
I have a simple menu coded up like this
<ul id="main-menu" class="container">
<li>About Us</li>
<li>Home</li>
<li>Villas & Yachts</li>
<li>Islands</li>
<li>Gallery</li>
<li>Blog</li>
<li>Get In Touch</li>
</ul>
which looks like this
The little dots in-between each menu item are created using the :after pseudo element. Eveything is working fine, but I also need sub menus, which will be nested lists.
The problem is, when i add a line break to the menu like this
<ul id="main-menu" class="container">
<li>About Us</li>
<li>Home</li>
<li>Villas & Yachts
<!-- LINE BREAK -->
</li>
<li>Islands
<!-- LINE BREAK -->
</li>
<li>Gallery</li>
<li>Blog</li>
<li>Get In Touch</li>
</ul>
I get this result in Safari & Chrome (But not Firefox)...
It seems to me as though webkit is treating the whitespace as 'pre'. The CSS for the :after element looks like this
ul#main-menu li:after
{
content: "\00b7";
width: 61px;
float: right;
text-align: center;
border: rgba(225,225,225,0.25) 1px solid;
}
I've also tried setting white-space: normal/nowrap on the ul, li and :after elements which doesn't affect anything.
Can anyone see where I'm going wrong, or is this a problem with Webkit/Firefox?
UPDATE
I've created a demo at http://jsfiddle.net/zmVbH/
The issue is that the line break is white space which makes the floated content drop a line. The issue can be reproduced by adding a single space between the </a> and </li>. Try making the inserted content display:inline-block instead of floated.
ul#main-menu li:after
{
content: "\00b7";
width: 61px;
display:inline-block;
text-align: center;
border: rgba(0,0,0,0.25) 1px solid;
white-space: normal;
}
Updated JSFiddle.
UPDATE BY OP
Yup, inline-block fixes this, but it's not quite that simple since inline-block has some patchy browser support.
ul#main-menu li:after
{
content: "\00b7";
width: 61px;
float: right;
text-align: center;
border: rgba(225,225,225,0.25) 1px solid;
/* FIX */
display:-moz-inline-stack; /* For older versions of Firefox */
display:inline-block; /* Anything that supports inline-block */
/* IE FIX */
zoom:1;
*display:inline;
}