The site is appearing fine in Mozilla, Chrome, and IE6. But IE7 onwards, the menu background image was not appearing at all.
In the file moo.menu.css, I made the following changes in li:
.ry-cssmnu ul li {
margin: 0; /* all list items */
padding: 0;
float: left;
display: block;
background: url(../images/mainnav-bg.gif) repeat-x center top blue;/*added this line*/
cursor: pointer;}
After this, the background repeat is appearing only where the menu text is present.
http://bit.ly/ie8issue
The site is at: www.agmrcet.com/cons
Thanks in advance.
You have to declare a height to that container. Your floating list items are not giving their parent container height because float removes them from the document flow. Your <ul> has a current height of nothing, and the background image won't remedy that.
#mainnav { height:44px; ... }
First of all, I would change the CSS background property according to the CSS syntax:
background: blue url(../images/mainnav-bg.gif) repeat-x center top;
Looks like the problem is with your
<div class="clearfix" id="mainnav">
tag. Have you tried adding a pink border or something (to debug it) to the mainnav element and then setting a fixed width on it to make sure it goes the full width?
Related
I am trying to set up a form that displays a vertical separator between two elements that appear side by side. These are the problem parameters:
The height of either element is unknown and will change by virtue of the contents being modified with JavaScript in response to user interaction.
The separator should cover the whole of the elements' shared vertical border, irrespective of which element happens to be taller at any given time.
Given the above it seems that this setup will do the trick:
<div>This is some text on top.</div>
<ol>
<li id="a">Lalalala</li>
<li id="b">Lololol</li>
</ol>
<div>And some text on the bottom.</div>
CSS
ol { overflow: hidden }
li { float: left; width: 5em; padding: 4px }
div { clear: both }
#a { background: gold; min-height: 100px }
#b { background: yellow; border-left: 1px black dotted }
#b { padding-bottom: 400px; margin-bottom: -400px } /* "infinitely" tall */
The idea is that the second element becomes "infinitely tall" by applying bottom padding and gets a left border; elements following the group are brought back into their original position by counteracting the padding with negative bottom margin; and the "unused" portion of the vertical border is hidden by giving the parent overflow: hidden.
This setup indeed works correctly (JsFiddle) on Firefox, Chrome and IE >=8 (my compatibility requirements):
However, when I try to apply the same technique in my real HTML Firefox breaks down and seems to not honor the overflow: hidden set on the parent element. As a result the infinitely tall vertical border bleeds through all elements following the two panels on the page.
Here is a JSFiddle of (simplified) real copy/pasted content together with my actual CSS rules that shows the problem. Note that only Firefox mishandles this; other browsers continue to display it properly.
Correct render:
Firefox render:
I am properly stumped: why would Firefox display the proof of concept correctly and botch the real deal? And how can I fix it?
I was able to fix your JSFiddle by changing the fieldset element to a div or by surrounding the fieldset with a div that had overflow set to hidden. Maybe worth a try. Is the fieldset tag essential to your HTML?
Im trying to do some horizontal layout of divs but get an unwanted "margin" after the divs.
http://jsfiddle.net/Yzxpu/
When I change the the markup and delete the spaces or line breaks the problem gets fixed for the horizontal spacing, but still there is vertical spacing under the divs. And the markup looks bad.
http://jsfiddle.net/Yzxpu/1/
I don't want to see any red (except for the far right, it will get fixed as the right-margin % gets set)
I'm using latest Chrome as web browser.
By adding: margin:0; and padding:0; to the CSS it fixes the vertical issue, because browers add their own default settings you would be advised to use a reset.css sheet to set everything back to 0.
The fiddle with the fix: http://jsfiddle.net/ynemx/
Reset CSS: http://meyerweb.com/eric/tools/css/reset/
TRY THIS
http://jsfiddle.net/Yzxpu/10/
CHANGE YOUR CSS
#t-newsAndInfo{background-color:red; overflow:hidden}
#t-newsAndInfo div {float:left;}
REMOVE "DISPLAY" FROM #t-newsAndInfo div
You could try to float:left the inner divs:
http://jsfiddle.net/Yzxpu/15/
#t-newsAndInfo{background-color:red; overflow:hidden;}
#t-newsAndInfo div {
background-color:lightyellow;
display: inline-block;
float:left;
position: relative;
width: 31.11111111111111%;/*((900-(30+30))/3)/900*/
height: 100px;
text-align: center;
/*margin-right: 3.111111111%;*/
/*margin-right: 2.99999999999%;*/
}
By taking into consideration the following image, representing the 3 states of this menu interaction:
And knowing that:
1) We cannot have one image for all the horizontal menu, each item, (so, each ul li a) should have their own image;
2)
background image positioning will be favored since it will be better regarding cross-browser issues;
3)
The text on those buttons (should be) text and not an image;
What would be the best way for achieving this ?
I just need a kick off here.
Thanks.
Update:
Here's a test with no swapping images:
http://jsfiddle.net/Cq5JY/
Quite simply you've kind of spelt out your solution yourself I think.
Each item in the navigation needs 1 image with three states for the rollover and active states. Then you would move the background image using CSS as you mentioned depending on the way you layout the images.
The thing that makes the css a bit tricky (well you'll be writing a fair amount) is the text positioning on buttons, if the text starts at lots of different y coordinates then obviously you will be writing each one of these in to the CSS.
I would setup the nav using the code similar to the below (untested) based on a separate image for each button, which has in it the regular state of the button, underneath the rollover and underneath that, the active state of the button.
/* set up the button based on a width of 150px and 100px height */
ul li, ul li a{
display:block;
width:150px;
height:100px;
text-align:center;
background-position:0 0;
}
ul li{
float:left;
}
/* roll over - move the background image by the height of the button (100px) */
ul li a:hover{ background-position:0 -100px; }
/* active state - move the background image by twice height of the button (200px) */
ul li a.active, ul li a.active:hover{ background-position:0 -200px; }
/* define each button (background image and text position) */
ul li a.dashboard
{
background-image:url(images/dashboard.png); /* define image url */
padding-top:40px; /* position the text using a combination of padding / height) */
height: 60px;
}
ul li a.products
{
background-image:url(images/products.png); /* define image url */
padding-top:30px; /* position the text using a combination of padding / height) */
height: 70px;
}
...
And then I would have the html quite simply:
<ul>
<li>Dashboard</li>
<li>Products & Services</li>
...
</ul>
Let me know if you have any questions, I haven't actually tested the code but that is my general approach to most html/css based navigation whether it is vertical or horizontal (although I would use 1 large image for all rollover states for all buttons).
It's amazing how can't I just pull out such a simple task.
We wish to have a menu (ul list) displayed inline, where, on top we have an image and, at the bottom, we have an anchor.
Something like the above:
<iimg> <iimg> <iimg>
<anchor> <anchor> <anchor>
The solution must be valid for IE 7 too.
I've tried text-align centered the image. No luck;
I've tried display:block; on the li, on -img on both...
I've also defined widths here and there (but the images could have variable widths (not sure));
I've tried margin: 0 auto; but it centers on the page, but not on the LI. :///
Can I have a help here plz ?
http://jsfiddle.net/4E7Lu/
ul li {
display: block;
float: left;
text-align: center;
}
Just be sure to do a clearfix after the ul. As in:
<div style="clear: both;"></div>
If you make the ul display as inline-block, and set the anchor and image to display as block, you can center them via margin: 0 auto;.
http://jsfiddle.net/4E7Lu/1/
I would apply the image as a background image to each li element. It's easy to position using background-position and keeps your HTML markup clean for SEO. You can then use CSS sprites to make loading the images faster.
Just saw this, could help.
http://css.maxdesign.com.au/listamatic/horizontal01.htm
The problem is menu openning in the wrong place only in firefox. I thought about putting top:2px position:relative but it`ll effect all browsers
http://img707.imageshack.us/img707/6884/unled1copyqj.jpg
my website; http://tinyurl.com/3g58vhb
You are using the position: absolute but do not define a top value. Try using top: x inside your CSS and it should be on the same position on every browser.
If your header can move up and down. Give the parent node of the submenu (LI) the css property position: relative, but still define the top property.
adjust the padding like this :
height: 17px;
padding: 6px 10px;
And add height to your nav li a { class, should work