Whenever I have two elements side by side horizontally with right and/or left padding and/or margin specified, there is often space between the elements over and above what I've specified. I'm hoping someone can tell me how to eliminate that space (without something crufty like a negative margin).
Please note: I am not looking for alternative multi-column CSS layout techniques. I know there are loads of them out there and this issue is bigger than just a column layout issue.
Below is the markup and styles for a working example page. Here's a partial screenshot of that page that shows left elements selected with Firebug. The mysterious space in question is to the right and is marked with a red asterisk. There are no reset styles included but I've plugged in Eric Meyers' reset and it didn't solve the problem.
<div id="side-a">
<p>
Lorem ipsum ....
</p>
</div>
<div id="side-b">
<p>
Nunc dapibus....
</p>
</div>
<div id="website-footer">
<ul id="legal-information">
<li>Copyright 2011</li>
<li>Privacy Policy</li>
</ul>
</div>
div#side-a,
div#side-b {
display: inline-block;
width: 200px;
padding: 17px 17px 0;
}
div#side-a {
vertical-align: top;
}
div#side-b {
background: #999;
}
ul {
padding-bottom: 17px;
list-style: none outside none;
}
ul li {
line-height: 17px;
margin-left: 17px;
}
div#website-footer ul#legal-information {
float: left;
}
div#website-footer ul#legal-information li {
border-left: 1px solid #29443C;
display: inline;
margin: 17px 0;
padding-left: 8px;
}
div#website-footer ul#legal-information li:first-child {
border-left: medium none;
padding: 0 8px 0 0;
}
It's natural because of inline-block. Simple solution is to kill whitespace.
http://work.arounds.org/issue/6/unwanted-white-space-between-inline-block-elements/
There are other css based workarounds such as setting a font size of 0 on the body, but AFAIK they aren't as consistent/reliable. I could be wrong though.
I changed this Css:
div#side-a,
div#side-b {
float: left
width: 200px;
padding: 17px 17px 0;
}
And added in Css for the footer:
#website-footer {
clear: both;
}
And this fixed the issue.
I usually float the elements when I want them next to each other.
Related
I am working on a navigation with a bottom border. Active links are displayed with a second bottom border.
When I press refresh, sometimes there is a small gap between the two borders like on this screenshot. Why?
When I resize the window the gap is gone.
I have this issue in Chrome 97 on a mac. But I'm not sure if it doesn't occur in other browsers as well.
Does somebody can point me in the right direction?
* {
box-sizing: border-box;
}
a {
text-decoration: none;
}
li,
ul {
list-style-type: none;
padding: 0;
}
li,
ul {
margin: 0;
}
img{
width:100%;
height: auto;
}
.projektmenu-wrap {
border-bottom: 1px solid #000;
list-style: none;
overflow-x: auto;
padding-left: 2rem;
padding-right: 1rem;
padding-top: 0.75rem;
position: -webkit-sticky;
position: sticky;
top: 0;
white-space: nowrap;
z-index: 98;
}
.projektmenu {
align-items: flex-start;
display: flex;
flex-grow: 1;
flex-wrap: nowrap;
justify-content: flex-start;
white-space: nowrap;
width: 100%;
}
.projektmenu__item {
border-bottom: 3px solid transparent;
margin-right: 2em;
margin-top: 0;
}
.projektmenu__item--selected,
.projektmenu__item:hover {
border-bottom: 3px solid #000;
}
<img src="https://picsum.photos/200/300">
<nav class="projektmenu-wrap">
<div class="scrollable-menu">
<ul class="projektmenu">
<li class="projektmenu__item projektmenu__item--selected">
Lorem Ipsum
</li>
<li class="projektmenu__item ">
Dolor est
</li>
</ul>
</div>
</nav>
After some debugging i think the problem could be position: sticky.
Edit:
After some more debugging I realize that I forget something here, before the menu element there is an image with 100%width and auto height, maybe that could be the problem. I added it to the code above
After trying a lot of things, I have added some vw to the border, for the moment that is looking good. But it is hard to tell if it is the solution:
border-bottom: calc(3px + 0.1vw) solid #000
In general, having such a double border solution is always prone to rendering issues, because at different zoom levels the browser renders the borders a bit different.
See also: Google Chrome - Rendering differences when zooming in/out
A solution / workaround for your example would be to define the border width in relative units (e.g. rem), which isn't linked to pixels but based on font sizes (e.g. the root element).
Try this out:
.projektmenu__item--selected,
.projektmenu__item:hover {
border-bottom: 0.2rem solid #000; // alternative unit: em
// or: using a mixture of fixed and relative units
// border-bottom: calc(0.2rem + 3px) solid #000;
}
Also, although not required in this case, I would recommend you to use pseudo-elements like ::after for such markers in lists, it's basically what those are intended for.
I cannot figure this out. I HAVE DONE RESEARCH so please, no comments about me doing more research. Also, I am a noob, so be nice ;)
Here's my site: http://library.skybundle.com/
Hover your mouse over the two black rectangles in the main blue nav bar (header area). The a:hover should make the color change to a gray. The ISSUE is that in Chrome, this looks perfect. But, in Firefox, the padding-right isn't long enough or something, so there is always a small black rectangle at the far right side of the "Educational Courses" button (this will only be visible when hovering your cursor over the button). In other words, the gray box doesn't go all the way to the right-side end of the button area upon mouse hover. I just don't understand why this looks and works great in Chrome, but bugs out in Firefox...
Believe me when I say I have tried everything I can to fix it using Firebug in Firefox. If you play around with it using an editor in your browser, you will see that if you try to make the padding longer for Firefox, it pops the whole button down onto a new line. So to fix THAT problem, you must make the container wider, but then the original problem comes back. It's a circle of problems and I'm sure one of you geniuses out there will see a simple solution that I am missing.
Please help. Thanks!
EDIT :
Here's my JSFiddle and code. Notice how it looks great in Chrome but not in Firefox?
http://jsfiddle.net/S4st8/
HTML:
<div id="navigation">
<div id="navigation-inner">
<div id="page-nav">
<div id="primary-nav">
<ul id="top-menu">
<li id="li-left">Product Training Videos</li>
<li id="li-right">Educational Courses</li>
</ul>
</div>
</div>
</div>
</div>
CSS:
#navigation {
background: url(http://library.skybundle.com/wp-content/themes/business-services/library/styles/colour-images/mu-nav.jpg) repeat-x;
margin: 0px;
padding: 0px;
height: 40px;
width: 100%;
}
#navigation-inner {
margin: 0px auto;
padding: 0px;
height: 48px;
width: 960px;
}
#page-nav {
margin: 0px;
padding: 0px;
height: 40px;
width: 960px;
}
div#primary-nav {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
}
ul#top-menu {
margin: -5px 0.325em 0 0.325em;
position: absolute;
padding: 0;
z-index: 100;
top: 0;
left: 3em;
width: 367px;
}
ul#top-menu li {
line-height: 3em;
list-style-type: none;
height: 49px;
background-color: #2C2C2C;
float: left;
}
li#li-right {
list-style-position: inside;
border-left: 2px solid #5E5E5E;
}
ul#top-menu li a {
font-weight: bold;
font-size: 11pt;
text-decoration: none;
padding: 15px 10px 16px 10px;
color: #ffffff;
}
ul#top-menu li a:hover {
text-decoration: none;
width: auto;
color: #ffffff;
background-color: #505354;
padding: 15px 10px 17px 10px;
}
its because a tags (anchor tags) have a default display property of inline
due to CSS Box Model you would need to adjust your padding and set the anchor tags display property to display:block;
the display block allows the anchor tag to fill the whole space of the LI tag
change ul#top-menu li a to this:
ul#top-menu li a{
color: #FFFFFF;
font-size: 11pt;
font-weight: bold;
display: block; /* add this */
padding: 0 10px; /* add this */
}
the CSS Box Model adds the content + padding + border + margin
https://developer.mozilla.org/en-US/docs/Web/CSS/box_model
Take a look at this CSS rule:
li#li-right {
border-left: 2px solid #5E5E5E;
list-style-position: inside;
}
Dropping list-style-position: inside seems to fix your issue in Firefox (and still works in Chrome), but I haven't tested the implications in other browsers. The CSS rule is documented here.
The reason why : browsers apply their own css if you don't specify it. Firefox added the space for your bullet (somehow)
FF :
list-style-image none
list-style-position outside
list-style-type disc
GooChrome :
list-style-image: none;
list-style-position: inside;
list-style-type: none;
User JasonSperske gave you a fixing solution,
i invite you to RESET your css.
PS. in the meantime, you are invited to see : https://stackoverflow.com/help AND http://sscce.org/
Reading and understanding those pages will give you few reputations points
First i will show you the problem, wich only happens on IE6/IE7
As you can see, when the length of the innerHtml it's not long, no problem; but when it's 'longer' the sprite set as bg image gets repeated and the text jumps to the next line...
now, the CSS
.contButton {
list-style: none;
float: right;
}
.contButton p {
float: left;
display: inline; /*For ignore double margin in IE6*/
margin: 0 0 0 10px !important;
}
.contButton a {
text-decoration: none !important;
float: left;
color: #FFF;
cursor: pointer;
font-size: 14px !important;
line-height: 21px;
font-weight: bold !important;
}
.contButton span {
margin: 0px 10px 0 -10px;
padding: 3px 8px 5px 18px;
position: relative; /*To fix IE6 problem (not displaying)*/
float:left;
}
/*ESTADO NORMAL AZUL*/
.contButton p a {
background: url(../nImg/spriteBotones.png) no-repeat right -214px;
_background: url(../nImg/spriteBotones.gif) no-repeat right -214px;
color: #FFF;
}
.contButton p a span {
background: url(../nImg/spriteBotones.png) no-repeat left -214px;
_background: url(../nImg/spriteBotones.gif) no-repeat left -214px;
}
And the Html:
<div class="">
....
<div class="contButton mt10">
<p><a tabindex="" title="acceder" href="#"><span>ver disponibilidad</span></a></p>
</div>
...
</div>
This is the bg Image.
![the sprite][2]
Tried with:
<!--[if IE lte 7]>
<style type="text/css">
/*
.contNombrePrecioHtl .contButton p a{ height:20px; }
.contNombrePrecioHtl .contButton p a span{ height:20px; width:auto; } */
</style>
<![endif]-->
But that didn't solve the problem...
PS: class="mt10" it's only a margin-top:10px;
Any idea how to solve this for the glorious IE6/7?
Try adding white-space: nowrap to .contButton.
change this:
.contButton span {
margin: 0px 10px 0 -10px;
padding: 3px 8px 5px 18px;
position: relative; /*To fix IE6 problem (not displaying)*/
float:left;
white-space: nowrap;
}
I don't think it is a problem with either IE versions, it's probably just the newer browsers being less strict about this particular thing. I haven't tested anything, but "display:inline-block" has helped me sometimes. Still it doesn't seem like the most effective solution. The width seems to be limiting here, you shouldn't give the thing a fixed width if you don't want the text to "jump" into a second line...
can you try to add overflow: hidden to each parent of element with float: left? in this case you will have to add it to each div, p and a. I am not sure whether your actual code is optimal.
Moreover, float: left; and display: inline together make no sense. This might be the reason of the strange behaviour. Delete display: inline (remember about adding overflow: hidden to its parent) and it should work.
Haven't tested though.
UPDATE:
apparently as the author of the question mentions float:left + display: inline fixes IE6 double margin bug for floating elements.
defining dimensions for elements like p oder span is always somewhere between tricky and impossible, because they are inline elements. I'd recommend modifying the surrounding block element div.contButton.
In addition to height you should set overflow to hidden:
.contButton {
height:20px;
width:219px;
overflow: hidden;
}
UPDATE:
This seem to only be an issue with ul/li if i replace the ul with a div and remove the li and apply the relevant style to the a's instead its fine. ID' still liek to know why the ul/li structure presents a problem since margin/padding have been reset explicitly.
Im having soem trouble with the children of a fixed position element in IE7. They seem to be gaining width/margin/padding from somewhere but I cant discern where or how to fix it.
You can take a look at it in jsFiddle here. Ive added the bg colors just for debugging. The image/li tags should be flush with they yellow, and are in IE8 as well as mozilla and webkit. But in IE7 there is an extra ~20px of space to the left pushing them over, as if the li, a, or img tags had a margin. However, if i look through the properties in IEDevToolbar there is no margin or padding being applied. Futhermore, this happens even if i assign widths to everything and zero out margin/padding directly on each element with IEDevToolbar.
I'm totally lost on this one.
Below is the relevent code... There is a XHTML 1.0 Transitional doctype on the layout in question:
<style type="text/css">
.social-widgets {
position: fixed;
top: 125px;
left: 0px;
background: #f00;
width: 34px;
}
.social-widgets-content {
list-style: none inside none;
margin: 0;
padding: 0;
text-align: left;
background: #ff0;
}
.social-widgets-content li {
margin: 10px 0 !important;
padding:0;
width: 34px;
background: #0f0;
}
.social-widgets-content img {
display:block;
border-top: 2px solid #e9e8e8;
border-bottom: 2px solid #e9e8e8;
border-right: 2px solid #e9e8e8;
padding: 0px; margin:0px;
background: #00f;
}
</style>
<div class="social-widgets">
<ul class="social-widgets-content">
<li><img src="/images/button/button.facebook.png"></li>
<li><img src="/images/button/button.twitter.png"></li>
<li><img src="/images/button/button.feedback.png"></li>
</ul>
</div> <!-- /.social-widgets -->
This has nothing to do with position:fixed;. It was an issue with the list styling. When using list-style: none inside none; IE7 still adds the spacing for the list-marker despite the marker being set to none. The solution was to set list-style-type: none; instead of using the shorthand.
I am trying to create some simple menu links. I tried something like this:
div.menulinkboxaround
{
height: 25px;
}
a.menulinkbox
{
font-family: Verdana, Helvetica;
padding-left: 50px;
padding-left: 50px;
padding-bottom: 5px;
padding-top: 5px;
background-color: Green;
}
a.menulinkbox:hover
{
background-color: Red;
}
a.menulinkbox:visited
{
background-color: Yellow;
}
<div class="menulinkboxaround">Link 1</div>
<div class="menulinkboxaround">Link 2</div>
<div class="menulinkboxaround">Link 3</div>
<div class="menulinkboxaround">Link 4</div>
What i am trying to accomplish is to create menu elements that has a touch of style to em, so each link should be inside a div box with a padding 50 px on each side.
When i run this, they get clumped up on top of each other. I don't want to specify a width since the text inside the menu box should determine the size of it automatically.
Ex. (50px+text size+50px)
50px space (just green area) | Sample Text | 50px space (just green area)
Maybe this will help (since divs are block displayed elements by default):
div.menulinkboxaround { height: 25px; float: left; }
Try adding this:
a.menulinkbox
{
display: block;
}
Depending on whether you want this menu vertical or horizontal you may also want to add float: left; to div.menulinkboxaround.
As the previous answers suggest, you could put float:left on the menulinkboxaround.
It is difficult to tell from your description the desired effect, I am assuming you want the menu to be horizontal with 50px either side of the links.
With the code you currently have, the hover state only stretches in one direction, also as you are only specifying :hover it is not really as keyboard friendly as it would be if you specified :focus as well.
Also because you are setting the height in px as you increase the font size the text becomes clipped at the bottom. Not specifying the pseudo selectors on the link may also cause you later problems in Internet Explorer.
You could also tidy up the code a little to reduce the unnecessary classes and improve the semantics of the menu.
For example:
<style type="text/css">
ul.menu {
/* removing the browser defaults for margin padding and bullets */
margin: 0;
padding: 0;
list-style-type: none;
/* Now you have a sensible parent it is a good idea to put the font
family here, I have also added a fallback of sans-serif in the rare
case Helvetica and Verdana are not available on the users computer,
it might be best to set this on the body if you are using this font
site-wide
*/
font-family: Verdana, Helvetica, sans-serif;
/* To create symetry I am adding 25px to the right and left of the menu,
this will stay green even if the items inside are not
*/
padding: 0 25px;
background-color: green;
/* increacing the lineheight so the background color of the links does
not overflow the green of the menu behind it, for a simple menu like
this it is fine, a more complex or longer links that need to wrap I
suggest changing the method of implementation from display inline to
floating which is a bit more complex
*/
line-height:1.95;
}
/* because all the list items are inside this parent list you can use
the descendant selector to target them rather than adding a separate
class, you are saying all list items inside the unordered list that
has a class of menu
*/
ul.menu li {
/* telling the list items to behave like inline elements so they are
naturally on one line also removint the browser default margin and
padding
*/
display: inline;
margin: 0;
padding: 0;
}
ul.menu a:link,
ul.menu a:visited,
ul.menu a:hover,
ul.menu a:focus,
ul.menu a:active {
/* you can combine all your padding rules together in the order
Top Right Bottom Left, I remember this like it kinda spells TRouBLe :)
*/
padding: 5px 25px 5px 25px;
background-color: green;
/* setting the color to white because the default link color of blue
is not that visible against green
*/
color: white;
}
/* adding the :focus selector to make this more keyboard accessible */
ul.menu a:hover,
ul.menu a:focus {
background-color: red;
color: black;
}
ul.menu a:visited {
background-color: yellow;
color: black;
}
</style>
</pre>
<ul class="menu">
<!-- Putting these all on one line because we are making
them display:inline so the spaces get counted and there will
be a gap otherwise -->
<li>Link 1</li><li>Link 2</li><li>Link 3</li>
</ul>
I have tested this in recent versions of FF, Opera and Safari, and IE6 IE7 and IE8
<style type="text/css">
ul.menu {
margin: 0;
padding: 0;
list-style-type: none;
font-family: Verdana, Helvetica, sans-serif;
padding: 0 25px;
background-color: green;
/* overflow hidden clears the internal floated links and zoom 1
kicks IE into doing the same, I suggest you move the zoom: 1
into an IE stylesheet using conditional comments
*/
overflow: hidden;
zoom: 1;
}
ul.menu li {
display: inline;
margin: 0;
padding: 0;
}
ul.menu a:link,
ul.menu a:visited,
ul.menu a:hover,
ul.menu a:focus,
ul.menu a:active {
padding: 5px 25px 5px 25px;
background-color: green;
color: white;
/* setting the links to float left and giving them display block as
well explicitly, this is so that the vertical padding of 5px gets
applied, inline elements can only have horizontal margin and padding,
and since we are floating them they now take up 0 vertical height in
the document which is why we needed to clear the float on the
surrounding menu
*/
display: block;
float: left;
}
ul.menu a:hover,
ul.menu a:focus {
background-color: red;
color: black;
}
ul.menu a:visited {
background-color: yellow;
color: black;
}
</style>
<ul class="menu">
<li>Link 1</li><li>Link 2</li><li>Link 3</li>
</ul>
This second method is much more reliable, deals with wrapping links nicer and is generally a better solution but a bit harder to explain.
If you didn't want the menu to fill the full width of the screen just as long as the text takes up, regardless of which method you are using above, I suggest you put float: left and clear: both on the ul.menu which should shrink to the width it needs to take up
I hope this helps
sample code below (credit to other answers)
div.menulinkboxaround
{
height: 25px;
float: left;
}
a.menulinkbox
{
font-family: Verdana, Helvetica;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 5px;
padding-top: 5px;
background-color: Green;
}
a.menulinkbox:hover
{
background-color: Red;
}
a.menulinkbox:visited
{
background-color: Yellow;
}
<div class="menulinkboxaround">Link 1</div>
<div class="menulinkboxaround">Link 2</div>
<div class="menulinkboxaround">Link 3</div>
<div class="menulinkboxaround">Link 4</div>