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.
Related
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
Working on revamping a client's site, and one of their requests is to change the nav to accommodate text of any size. Here's the trick: I can't change html, just css and javascript. Oh, and the version of jquery on the site is 1.4.4 - this can't change either.
I've got a javascript-based solution in place, and it's working across all modern browsers - but I can't seem to get it to function in IE7. The solution relies on all nav elements rendering in their native width (i.e. wrapping instead of resizing), in order to calculate the necessary width changes. In IE7, the nav items don't clear - the last one shrinks to a tiny size to fit into the first row, and the javascript thus can't tell that resizing needs to be calculated.
The javascript should work fine, the main issue is that I need to know what my css isn't doing to force the last element to wrap instead of resize in IE7. I've tried an exhaustive number of combinations of display: inline-block;, white-space: nowrap;, and float: left; to no avail.
I isolated the nav in question and put it in a fiddle right here. If anyone has any ideas, or knows a better way I can implement, let me know - all suggestions welcome!
I have two versions of your jsFiddle here to compare with and verify that this is what you're going for. I cleaned up your CSS a bit but the main thing I did was set a percentage width on the li in your navigation. You have 6 elements so 100/6 = 16.6666%. I should also not I removed the jQuery in the jsFiddles below.
http://jsfiddle.net/D8etp/1/
and
http://jsfiddle.net/D8etp/2/
CSS
body {
margin: 0;
}
#top-nav{
padding-top: 30px;
width: 940px;
}
#nav {
color: #FFF;
font-size: 12px;
margin: 0;
padding: 0;
text-transform: uppercase;
min-height: 49px;
background-color: #007369;
overflow: hidden;
}
#nav > li {
display: block;
float: left;
list-style-type: none;
margin: 0;
padding: 9px 0 0 0;
width: 16.6666666666%;
}
#nav > li > a {
display: block;
box-sizing: border-box;
text-align: center;
padding: 7px 12px 17px 12px;
line-height: 16px;
margin: 0 4px;
color: #fff;
text-decoration: none;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
overflow: hidden;
}
#nav > li > a:hover {
background: #b0a893;
}
#nav > li > a:hover {
text-decoration: none;
}
I am facing a problem with the position of bullets
It looks fine in Firefox but in Chrome and IE it gets messed up
Firefox:
Chrome/IE:
This is a css for the shown div
background: url("/images/divider_right_top.jpg") no-repeat scroll left top transparent;
font-size: 12px;
margin-bottom: 20px;
overflow: auto;
padding: 20px;
You have to set directly the UL in the css like this:
#yourdiv ul{ list-position:outside; /*(or inside as you need)*/
padding:20px;}
This should work
Don't set the padding. Use margins.
ul { margin: 1em 0; }
li { margin: 0 0 0 1.4em }
Give CSS for the list element like this'
li
{
background: url(/images/divider_right_top.jpg) no-repeat left;
padding-left: 10px;
list-style-type: none;
}
I have what I think is some pretty basic css, and it behaves differently in FF4 and IE8.
The CSS in question is like this:
div.showme {
border: 1px dotted blue;
position: absolute;
top :10px;
bottom :10px;
left: 1%;
right: 33%;
overflow: auto;
padding: 0.8em 1em 0.8em 1em;
line-height:1.75em;
}
div.showme a {
padding: 0em 5px 0em 5px;
margin: 0;
white-space: nowrap;
color: #FF00FF;
background-color:#E6E6FA;
border: 1px solid grey;
padding: 0em 4px 0em 4px; }
div.showme a:link { color: blue; }
div.showme a:visited { color: #1E90FF; }
div.showme a:active { color: red; }
The relevant HTML looks like this:
<div class='showme'>
<a href='one'>one</a>
<a href='two'>two</a>
...
</div>
The problem is, the padding is not consistently displayed, in IE8.
In Firefox, it works as I would expect.
working example:
http://jsbin.com/ogosa4
Using the above working demonstration, if you resize the window you will see the padding on the "leading" element on each line within the div, change from zero to non-zero.
How can I fix this?
If you add display: inline-block; to your div.showme a {} the padding will be applied in IE also, but it has some impact with the line height and you may need to specify additional margin's
I have seen this behaviour in Opera too. The padding goes to the upper line. Try display: inline-block and white-space:nowrap if you have more than one word in the link...
You can safely use inline-block in IE7 with inline tags.
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