I am building a new website. The HTML and CSS is verified but I have trouble displaying the correct layout for IE7. You can view a screenshot of the problem here:
How do I prevent IE7 from putting the extra space between the breadcrumbs links?
The links should be like this:
There are a few issues with your CSS as it doesn't display correctly in FF either. In ie.css, modify the following classes like this:
#breadcrumbs li a{
display: block;
float: left;
background-image: url(../images/bread-separator.png);
background-repeat: no-repeat;
background-position: right;
height: 34px;
line-height: 34px;
padding: 0 20px 0 10px;
}
#breadcrumbs li.sort a{
background-image: none;
border-left: 1px solid #d5d3d2;
padding: 0 10px;
}
I could on test these in FF through FireBug, but it should work on IE as well. Let me know how it goes.
Related
.plus input[type="submit"]
{
background: url("../Image/button_one.png") no-repeat;
border: medium none;
float: right;
height: 32px;
margin-right: 14px;
margin-top: 53px;
width: 32px;
}
I m using following code to display the button on the image it works with all browsers but when it comes to internet explorer 7 the button get out from the image.
input[type="submit"] doesn't support by IE 7 and IE8 see here. IT would be good to make a class.
Also you are writing a css in wrong manner. It should be like this. A working Demo.
input.plus[type="submit"]
{
background: url("http://lorempixel.com/60/30/") 0 0 no-repeat;
height: 32px;
width: auto;
}
input[type="submit"]
{border:1px solid black;
width: 132px;}
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
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.
I am working with Drupal 7, and I made a custom drop down menu using css. Everything is displaying fine, but the drop down does not change position when the screen moves.
Here are some screenshots:
Here is the css:
**/*---------VISITORS SUBMENU---------*/
#block-menu-menu-visitors .content ul.menu{
position: relative;
margin-left: 0 auto;
margin-right: 0 auto;
}**
#block-menu-menu-visitors .content ul.menu li{
padding: 2px 15px 2px 15px;
list-style-type: none;
display: inline-block;
background-color: #ffff90;
}
#block-menu-menu-visitors .content ul.menu li:hover{
padding: 2px 15px 2px 15px;
display: inline-block;
background-color: #ffffaa;
}
Any ideas on how to get the position to be the same relative to the screen size?
So I figured out the problem. In my php, the div that I had placed my submenu in was floating by itself. My solution was to wrap it in the same div that the main menu was, and it worked out perfectly. There was never a problem with writing of the css or html, just a location issue. Consider this issue solved.
This menu is on an ASP.NET navigation. On Chrome and Safari, it looks like this:
But on Internet Explorer, it looks fine:
Here's my CSS:
div.hideSkiplink {
background-color: #000;
width: 100%;
display: block;
height: 42px;
font-size: large;
font-weight: bold;
background: transparent url('../images/redslate_background.gif') repeat-x left top;
font-family: 'Times New Roman' , Times, serif;
text-transform: uppercase;
color: #000000;
}
div.menu ul {
position: absolute;
margin: 0px;
padding: 0;
list-style-type: none;
width: auto;
}
div.menu ul li {
display: block;
float: left;
margin: 0 1px 0 0;
}
div.menu ul li a {
display: block;
float: left;
color: #000000;
text-decoration: none;
padding: 14px 22px 0 22px;
height: 42px;
}
div.menu ul li a:hover, div.menu ul li a.current {
color: #fff;
background: transparent url('../images/redslate_backgroundOVER.gif') no-repeat center top;
}
Somehow, on Chrome and Safari, the menu seems to be below the background. How can I fix it?
Sadly, this is a regular problem in Internet Explorer. Web Developers hate it so bad because that always happens! Nevertheless there are certain rules that you should follow If you want your site to be open from all web browsers. Please take a look at this: Internet and CSS issues
There are hundreds of articles related to this topic so you should google things like
IE and CSS compatibility
IE and CSS issues
It is evident that you have been struggling with margin-top issue. Hence you can use margin-top:10px and top:10px CSS property interchangeably.
It seems that you have used, margin: 0 1px 0 0. Hence, now you should also add top:10px CSS property to adjust your menu. For more detailed help, also paste your HTML code, so that i can give you example...