I am lost at how can I fix this problem ... Chrome is the top 1 and FireFox below
CSS looks like
#mainnav ul {
background: #a51c10;
padding: 5px 0;
margin: 0;
-moz-box-shadow: 0 2px 6px rgba(60,60,60,0.8);
-webkit-box-shadow: 0 2px 6px rgba(60,60,60,0.8);
box-shadow: 0 2px 6px rgba(60,60,60,0.8);
position: relative;
z-index: 2;
}
#mainnav li {
display: inline;
padding: 0;
margin: 0 2px;
position: relative;
}
#mainnav a:link, #mainnav a:visited {
padding: 4px 10px 5px;
font-size: 16px;
line-height: 1em;
font-weight: bold;
color: #a29061;
text-decoration: none;
}
UPDATE
it looks alittle different somehow from the working site (I dont think I can post a link tho) but copy & paste CSS
http://jsfiddle.net/aM8rn/4/
it appears I should put line-height: 1em in the #mainnav ul
http://jsfiddle.net/aM8rn/5/
In order to avoid this sort of problems is always a good idea to reset the default style: http://meyerweb.com/eric/tools/css/reset/
putting line-height on the #main nav ul is making the link overlap the outer box for me..
I'd suggest not using line-height at all. You have px padding on your links to try to get them to match the outer ul's line height, there might always be 1px differences if you try to do that.
instead I tried to let the outer container expand as required with the links themselves, in order to do this they had to be display: block; and for your inline li elements to remain side-by-side with blocks inside them, they had to become inline-blocks.
with this fiddle every px can be controlled with the padding on the a's - http://jsfiddle.net/g5AXG/1/
I know you probably don't want a top bottom "border" but I marked where how it can be removed.. the negative wordspacing is because inline-blocks, the li's, will naturally have about 3-4px between them (like words) I didn't think it made a difference to the aesthetics of your menu if it was there or not, but put it in anyway
Related
I created tabs using <li>. I used css to add style but the problem is, there is a space between tabs. I tried to add margin: 0px; in ul.tabs li but the spaces are still there.
Please see the link http://jsfiddle.net/cfv65agn/
Thanks.
A straightforward fix is to set the font size of your ul with the class "tabs" to 0, and set the proper font size on the list items directly.
This will remove the default spacing between them, without the need of magical negative numbers.
I just tested, and the following works:
ul.tabs {
font-size: 0;
}
ul.tabs li {
font-size: 16px; /* set to the font size you want */
}
Change margin in "ul.tabs li" to a negative number. -3 gets rid of them, -2 makes them real small.
Adding float: left to your ul and li will fix it too (make ul 100% width as well):
CSS
ul.tabs {
margin: 0px;
padding: 0px;
list-style: none;
width: 100%;
float: left;
}
ul.tabs li {
background: #ffffff;
color: #222;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
border-top-right-radius: 1em;
border-top-left-radius: 1em;
border: 1px solid #afafaf;
margin : 0px;
float: left;
}
Here's a jsFiddle
probably it is because you have set display:inline-block in ul.tabs li.
changing it to float:leftwill fix this. this usually happens when there is a \n between inline-block elements
display: inline-block will honour white-space between them. Simply delete the tabs an spaces between your li's. The will unfortunately make your code slightly less readable, but you can more or less compensate by putting a line break within the li, at the end.
Question
If both <li> are 50%, why won't they be side by side?
Code
Demo on jsfiddle.
HTML
<ul>
<li>left</li>
<li>right</li>
</ul>
CSS
ul {
padding: 0;
}
li {
list-style: none;
display: inline-block;
width: 50%;
font-size: 12px;
color: gray;
background-color: rgb(216, 216, 216);
padding: 3px;
text-align: center;
border: 1px solid rgba(179, 179, 179, 0.83);
}
Because by default, margin padding and border are counted outside the element and not inside. So padding of 3px + border of 1px will be added to 50% on all the sides.
Also am not sure whether you are resetting browser default margin and padding of the elements, if you aren't than do it. You can either use universal selector which some oppose as it hits performance by few bits, like
* {
margin: 0;
padding: 0;
}
Or if you want to reset in a lenient way than you can use CSS Reset Stylesheet
So inorder to count the padding and border inside, you will have to use box-sizing property with a value of border-box.
Also you are using inline-block which will leave a margin / whitespace whatever you call of merely 4px so make all the li in one line. OR what you can do is, you can float your elements to the left, so that you don't have to make all the li in one line in your source document.
Demo
Just make sure you clear your floating elements if you are going with the float solution.
First problem: With the display:inline-block property, there is a white-space betwen elements. This make the li elments 100% + white-space is more than 100% so they can't fit on same line better use float:left for your issue
Second problem: You give a 3px border which makes your li elements more than 50% wide you could use the property box-sizing:border-box; which would make your borders inside the li elements
CSS:
ul {
padding: 0;
padding:0;
}
li {
list-style: none;
float:left;
width: 50%;
font-size: 12px;
color: gray;
margin:0;
padding:0;
background-color: rgb(216, 216, 216);
text-align: center;
border: 1px solid rgba(179, 179, 179, 0.83);
box-sizing:border-box;
}
JSFIDDLE
It is because the <li> elements have a padding. You have to remove the padding or decrease the width.
For example,
width: 48%;
padding: 2%
It's because of the padding. Wash element is 50% + 3px wide.
As others have mentioned display: inline-block; adds space between blocks.
ul {
padding: 0;
font-size: 0; /*This is a hack for inline-block to not add space between blocks*/
}
The above code is a hack to make the "space" between <li> elements become zero. Source: CSS Tricks - https://css-tricks.com/fighting-the-space-between-inline-block-elements/
Demo
Looks like it is a simple problem
looks like you want a padding of
3px per <li> you have 2 then you need 6px extras
and you have broder of 1px ( you have 2 borders per li) that means that you have 4px extras.
That means that you need 10 px extras
You just need to change this line
width: calc(50% - 10px);
Example
http://jsfiddle.net/L5DbR/14/
Hello everyone my menu bar can't fit into my <div> area at different browser. I have checked with Opera and Chrome it looks fine but with Explorer and Firefox my menu can't fit.
And my menu is in this <div> tag:
.page {
width: 964px;
margin-left: auto;
margin-right: auto;
background-image:url(../images2/images/orta_alan_bg_GOLGE.png);
background-repeat:repeat-y;
}
Here is my menu:
ul#menu {
padding: 0 0 2px;
position: relative;
margin: 0;
text-align: center;
}
ul#menu li {
display: inline;
list-style: none;
font-family: 'Museo300Regular';
font-size:17px;
font-style:normal;
}
ul#menu li a
{
background-image:url(../../images2/images/menu_bg_normal.jpg);
background-repeat: repeat;
padding: 5px 19px 5px;
font-weight: normal;
text-decoration: none;
line-height: 2.8em;
background-color: #e8eef4;
color: #FEFEFF;
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
cursor:pointer;
}
So what is the problem why it can't fit into with Explorer and Firefox?
I attach an image you can understand what I mean
Here is the Chrome and Opera it can fit
Text will always take up different space in different browsers (and even in the same browser on different computers).
So, if you want your menu to fit exactly, you can't base the width of the buttons directly on the text in them. Either make all buttons the same width, or specify an exact width for each button.
Alternatively, resort to using a table, which can divide the space between the cells based on their content.
You can achieve it by resetting your CSS code. Then use ul li to style your list items.
If needed, you can use conditional comments to load your stylesheet for IE with some sort of bug fixes.
But normally i can achieve 100% exact result in all browsers on li element, so it's proved.
On this page, there's a menu with an automatically generated submenu under 'life'. There are some problems with the submenu (it flickers and changes size - you'll see if you scroll over it). Somehow I need to override the css that it's currently reading and make it uniform.
Any suggestions?
Thanks - Tara
Starting at line 744 of /wp-content/themes/primus/primus/style.css, you have this CSS:
#catmenu li li a:hover, #catmenu li li a:active {
background:#fff ;
width: 150px;
float: none;
margin: 0px;
padding: 0px 10px 0px 10px;
color:#ff9999;
}
Change the padding to match what it is before hover:
padding: 7px 10px
It because you have set:
padding: 7px 10px 7px 10px;
on the a:link. And then you set padding to 0, on a:hover.
Try set the same padding values for both behaviors.
I'm having the weirdest issue in IE (7, specifically) when implementing CSS borders. I first noticed this a few months ago.
The CSS is literally this: #donate {border:1px solid #299ae5;}
As you can see from the attached image, both of these screenshots were taken in IE7, from the same website, different pages - same template file. It's like the border has a "tail" in the bottom left corner.
Does anyone have any insight about this???
Edit: Here is the HTML (although I've seen this also on random sites in IE7 recently on input fields as well)
<li><span>Donate</span></li>
And here's the CSS:
li { display: inline; }
li a { color: #fff; display: block; float: left; margin-right: 8px; padding-right: 8px; line-height: 1.2em; }
li a span { background: url(bg-gradient.png) repeat-x 0 0; border: 1px solid #299a35; padding: 1px 5px 2px 4px; }
Thanks in advance!
I tend to use display:inline-block...the only other thing I'd change is making the anchor the button rather than the span. here's a quick example http://jsfiddle.net/3x4fR/2/
Does giving the li a span element the display: block; declaration do the trick? It may be having trouble applying vertical padding to an inline element.
jsfiddle makes testing stuff easy.
If you don't need the span get rid of it if not try *zoom:1 or some other way to give 'hasLayout' to the element. see example here http://jsfiddle.net/ShaggyDude11/zbZr8/3/