I've got a problem with rollover menu css3.
I need to create something like this:
I'm sitting on this for two days and I still have problems.
There is my progress (Upper right corner):
http://dash.com.pl/CTP/index.html#
So, the problem is, I can't display my second ul while I set position:absolute to this.
I can't also set padding-bottom to first Ul.
Sure I made some mistakes, if someone could see what I did wrong, I would be grateful.
http://jsfiddle.net/SD58Z/800/
In your css add
#language {overflow: hidden; }
And by the way pls, close your links before you close the div!,
<div> Link</div>
Hi you should close <a> tag inside the div and change html code like this:
<ul class="language" id="language">
<li><div id="sve">svensk<div id="ico"><span></span></div></div>
<div id="uk">english</div>
</li>
</ul>
Related
I have a set of columns on my site. Each item is an <a> within an <li> and a member of an <ul>. The columns are set up so that the top-most <li> has a different class from the lower <li>'s in the same list (<ul>).
In IE7, the top <li> element will not align appropriately with it's lower neighboring <li>'s.
Here is how it should look (Latest version of Google Chrome):
Here is how it looks in IE7 (looks fine in >=IE8):
**Don't mind sizing differences.*
Here is the trimmed HTML for a single column
<div class="map-col" id="map-2">
<ul class="site-map">
<li><a class="map-upper">Services</a></li>
<li>Wood Fencing</li>
<li>Ornamental Iron</li>
<li>Gates and Openers</li>
<li>Restoration</li>
</ul>
</div>
Here is the CSS (I pulled out anything that didn't have to do with positioning --such as font-weight and font-size-- for readability)
.site-map{display:inline;}
.map-col{display:block; width:150px;}
.map-upper{text-align:left;}
.map-lower{*text-align:left;}
#map-1{float:left;}
#map-2{float:left;}
#map-3{float:left;}
#map-4{float:left;}
As far as it seems to me, IE7 just doesn't like when two separate CSS classes are appended to a single list.
Don't define text-align property for anchor tags.. Use it in LI. i.e
ul.site-map li{
text-align:left;
}
I was able to figure it out. For anyone with this issue in the future here is the simple fix:
It appears that IE7 has an indentation/margin bug on list elements. To get around this, the I modified the <li> elements to have a defined width of 100% so that they will fill the entire area of the <ul>. This allows the text to be left aligned correctly.
Added the following:
.site-map li{display:block; width:100%; text-align:left;}
My bootstrap subnav does not look the same as the one on the demo site. Here's my markup:
<div class="subnav">
<ul class="nav nav-pills">
<li>Modal</li>
<li>Tabs</li>
<li>Accordion</li>
<li>Other</li>
</ul>
</div>
and an image of what I am seeing:
and here is what I am trying to replicate:
I tried copying the markup exactly, but to no avail. I wondered if maybe it had something to do with the parent elements being different.. so I moved mine into a "container-fluid" classed div, but that didn't help. Maybe someone here can spot something my eye missed..
This is because the style is not included in bootstrap. You can grab the docs.css from their markup and reference that. That seems to be the CSS that is giving the sub-nav the styling you are looking for.
i.e.
Instead of my background only acting as a background for the 4 different types of pottery in the ul element, the red background covers my name and navigation bar. Why is it doing this? I have tried to make everything relative positioning but doesnt seem to make a difference. Why is the ul element not following the flow of the document, it should sit below my name and navigation.
Please advise, see example here: example
If i am getting your problem correct then here is the solution
check this updated fiddle: http://jsfiddle.net/4GUkU/2/
Note: Please let me know if am lagging here so i can change as per requirement.
Browers have a difficult time with heights of floated DIVs. The easiest thing to do is to put:
<div style="clear:both;"></div>
after the tag.
The red color everywhere is due to
#featured {
...
background-color:Red;
...
}
And the UL displays below "The Pottery Club" and the nav links for me (in Chrome). Which browser are you using?
By the way, semantically you do not need to use and in a tag. tags are already interpreted vertically, unless you choose otherwise with CSS.
You could rewrite your navigation menu like so:
<nav id="nav-main">
<a title="Book Class" href="">Book Class</a>
<a title="Plan your visit" href="/visiting">Plan your visit</a>
<a title="Contact us" href="/visiting">Contact us</a>
</nav>
If you keep the and in your , a blind person's reader would read to him/her: "navigation, unordered list, list-item..." which does not make very much sense.
I have a page that there is a list of "tags", just like here in SO, and when the mouse is over it, it gets darker.
It works great with Ie7, 8, FF, Chrome, Safari etc... but IE6 has a bug that when a:hover is triggered.
The bug is that the div that those (ul li a) are contained, gets a height's increase.
the css I have is:
div.options ul.tags li a:hover
{
background-color: #D5E4A5;
}
if I delete this style or just comment "background-color: #D5E4A5;" it doesn't happen...
any idea of how to fix it?
thanks!
EDIT: Here's a screenshot of the bug:
just fixed it! :D
what I had before was:
<div class="options clearfix">
<!--content here-->
</div>
and I replaced for:
<div class="options">
<div class="clearfix">
<!--content here-->
</div>
</div>
Now IE6 is happy, and I'm happy as well...
Thank you everybody for your help!
This is usually a border getting set that wasn't defined originally. Try setting a border on the growing DIV to the default background color. My guess is that you won't see anyting grow anymore.
I think I ran into this once, and what was happening was that the borders were being modified (or was it the margins?) I ended up copping out, and just giving the problematic elements a transparent border of 1px, and calling it a day.
I really doubt this will turn out to be your solution, but I'm hoping it'll give you some idea in which direction to look in!
I've had that happen to me as well, but I can't remember where that was exactly. I think I did solve it, but I'm not entirely sure how anymore. I can think of two things:
Give the element "layout". I tend to do that with zoom: 1.
Add vertical-align: top to either the a or li element.
Could you give a more complete code example? I can't reproduce it with just that CSS.
Did you specify the height for that div explicitly? If not, setting the height might make this go away.
Are the tags located in a place where you could give them background color all of the time? If so, does setting their background color when :hover is not activated still cause their height to change?
As a note, I can't reproduce this given HTML matching the rule you described, so the problem may be coming from somewhere else higher on the page.
<!-- This does not display the described behavior -->
<div class="options">
<ul class="tags">
<li>c++</li>
<li>not-programming-related</li>
<li>cheese</li>
<li>barnacle</li>
</ul>
</div>
The best thing I can suggest is to do what mercator said and give the element layout.
EDIT: Just a shot in the dark, but you may want to try setting a value for line-height on div.options.
EDIT 2: After seeing your screenshots I recall that I have had this problem at work before, and the fix in my case was to add position:relative; zoom:1; to the container (or maybe the links, I forget!). Try that?
EDIT 3: After googling for some solutions, you may want to try setting the height if your container explicitly. If this doesn't work, I have no idea what to do!
I have this exact problem as well. The trigger is definitely the background color on hover, but the usual solutions of giving the parent hasLayout don't work, I think because of nesting the A tags inside other tags. From what I ended up doing, your solution of nesting the clear fix is the right logic: separating the offending element, parent and clearing objects.
The solution I did was the following:
<div class="options">
<!--content here-->
<!--[if lte IE 6]><div class="ie6clear"></div><![endif]-->
</div>
With the following CSS:
.ie6clear{ clear:both; height:0; overflow:hidden; }
This way the clearfix CSS is only applied for IE6, highlights what the extraneous markup is, and makes it easy to remove when IE6 is no longer supported.
I'm using SIFR 3.0 in combination with suckerfish popup menus. I only want to SIFR the top level li's and not apply the effect to the nested ones. I'm also using WordPress, so restructuring the menu, like wrapping the parent in a <div> or other object is too hard (I'm still figuring out the basics of WordPress).
Is there a way to turn SIFR
ON for ul#menu li
but OFF for ul#menu li li ?
Other things I've tried that haven't worked is applying a class or id to the parent <li class="top-level"> or <li id="top-level">--that didn't stop the SIFR, it still grabbed the children.
Thanks so much for the help.
I'm going to assume your HTML structure is like this:
<ul id="menu">
<li>
My link
<ul>
<li>My submenu item</li>
</ul>
</li>
</ul>
When you replace ul#menu li, you will replace the entire content of the <li> element. Unfortunately this also includes the submenu. The solution is to replace just the link, but note that you can't directly replace <a> elements.
Therefore:
<ul id="menu">
<li>
<span>My link</span>
<ul>
<li>My submenu item</li>
</ul>
</li>
</ul>
And replace ul#menu > li span.
Finally there is the question whether the Suckerfish menus actually work if the events have to come through sIFR. I suspect it won't, meaning you're probably better off not using sIFR here.
This can be done with the CSS child selector:
ul#menu > li
this will only select li elements that are direct children of ul#menu. This should work in all standards complient browsers, and IE7+.
For IE6 there are a few hacks you can do to fake it, although I prefer to use jQuery to make up for selectors it doesn't support:
$('ul#menu > li').css({ ... });
which you can place in conditional comments.
If you download the uncompressed sifr source, and also have jQuery or are good with javascript you can probably put a conditional in at around line 491 of the sifr code along the lines of
if ($(node).parent().parent().parent().attr('id', 'menu')) {continue;}
I'm not great at jQuery, and I'm also not sure what kind of object the nodes that sifr runs through are, but in theory something like the above should make waht you want possible.