I have a problem with a div in IE7, it's disappearing and I don't understand why.
I already tried to add zoom:1 and overflow: hidden as someone suggested but it is not working.
The div is inside an unordered list (floated left) as the last element, floated right.
This is the HTML
<div id="top_menu">
<ul id="dropmenu">
<li>menu item1</li>
<li>menu item2</li>
...
</ul>
<div class="lang">content</div>
</div><!-- end top menu -->
This is the CSS
#top_menu {width:900px;font-size:13px; }
#top_menu ul#dropmenu {width:630px; height:28px; margin:0px; padding:0px; list-style:none; float:left; }
#top_menu ul#dropmenu li {float:left;display:block;}
.clearfix {display: inline-block;} /* for IE/Mac */
#top_menu .lang { width: 120px; color:#fff; margin:4px 10px 0 0; float: right; }
#top_menu .lang a{ color:#ff8601; }
#top_menu .lang a:hover{ color:#fff; }
Thanks for your help
EDIT: I included the html and removed url to avoid client complaints.
You need to add .clearfix to div#top_menu and add height: 24px; to div.lang
That fixed all the menu problems for me.
edit
...and probably don't use absolute positioning to solve layout issues.
i'm on IE9 now, but putting this site into "Compatibility View" seems to show the issue too.
The last entry in the main menu [ul] seems to extend all the way to the right of the element. This appears in markup before the .lang div so I wouldn't expect it to be covering it up...
Have you maybe tried putting the .lang element into "position:absolute" and then seeing if it shows up, (obviously assuming the parent element of it is positioned relatively). After that maybe try absolute with a top of 20px or so and see if it shows up then.
Good Luck!
UPDATE
Hang on a tick there. your .lang div is inside the [ul] element so is actually incorrectly positioned, since the only element allowed as a child of a [ul] is a [li].
Why not try taking this div out of the list and have it instead, just outside, as a child of the #top_menu element....?
That might work!
Not sure if this is relevant to your situation, but some versions of IE will throw away empty divs; if the div doesn't contain anything, adding something like will force it to exist.
Related
JS Fiddle here
I am attempting to align child elements evenly between left and right. I tried using margin-left and right: auto but nothing happened.
Here is a screen shot of the navigation in question. I have added a border of 1 px around each element so you can see:
I'd like the nav line items to be centred in comparisson to their parent. So in the image the line items would move to the right a bit to be centred between the parent rectangle, which is an unordered list.
Here is my approximation of the relevant html:
<nav>
<div id="main-nav">
<ul id="menu-main">
<li>cats</li>
<li>dogs</li>
<li>sheep</li>
</ul>
</div>
</nav>
Currently relevant (I think) CSS is:
#main-navigation {
display: inline;
float: left;}
#main-navigation div {
display: block;}
#menu-main {
position: relative;
float: left;}
#menu-main li {
float: left;
}
Put another way, I'd like to centre floated child elements against the parent. If I zoom in and out with my browser I can see that the nav adjusts and change size with some line items moving between top and bottom row in order to fit.
But is there a way to ensure that, whatever the current size of the nav, the child line items will be centred?
Here's another picture, where I have manually added a margin left to #menu-main.
Now it looks more centred on my screen right now. But is there a way to auto centre it?
See this : http://jsfiddle.net/rahjrLny/1/
You don't need to float your li elements, simply set them to display:inline . Then you can add text-align: centre to your ul element, and all should be good.
(You'll need to remove some margins that have appeared in the fiddle due to the changes)
This would be my solution: JSFiddle
There's some redundant CSS (for example, no need to specify #main-navigation div {display: block;} if you don't have any div elements inside the #main-navigation).
I've gone with display:inline-block as opposed to display:inline (plus added some colour borders for visual clarity). Please bear in mind I'm working with the code you supplied in the question rather than building the code from the screenshots.
nav {display:inline-block; width:100%;}
#main-nav {
float:left;
width:100%;
}
ul#menu-main {
margin:0;
padding:0;
text-align:center;
width:100%;
float:left;
}
#menu-main li {
list-style: none;
padding: 0.5em;
display:inline-block;
}
EDIT: I answered this question before I observed there was a fiddle supplied, and worked instead from the code supplied in the question. This may not be the right answer for OP but I'm going to leave it alone for now as I believe it gives a valid example of how one could approach the task of centering a nav list.
I've a header div and a menu ul below it. I'd like to accomplish 2 things:
1) the ul should have the same width as the div (outer vertical borders exactly same x position
2) I'd like to keep the spacing between li elements roughly equal
With some trial and error on the li's margins and padding I roughly achieved the first point in Google Chrome (please see this jsfiddle) but in Firefox the li's don't fit in the ul so they don't stay on a single line. Also, the last li tends to 'spill over' to a second line when zooming in/out.
I tried it with margin:5px auto and padding:5px auto on the li elements but here auto seems to mean zero.
Is this really difficult/impossible or am I overlooking something obvious?
I also tried width:fit-contents but that didn't help either.
I edited a whole lot in your CSS, check the updated fiddle.
Basicly, this is what I've done:
HTML:
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
CSS:
ul {
width: 960px;
display: table;
table-layout: fixed;
}
ul li {
display: table-cell;
}
ul li a {
display: block;
}
The ul is displayed as a table, with the li's as table-cells, making it as width as the header. Within the li i display the anchors as a block, making them fill the whole li. Hope it suits you.
P.s. make sure you remove the class cf from the ul when you use this.
I think some fellow frustrates may find this useful:
.main-menu ul li ul li{
white-space: nowrap;
}
Like this
ul#mmenu li
{
padding:7px;
}
DEMO
You'll need to adjust the padding in ul#mmenu I changed the padding to padding:7px 23px; and it stays in a single line,but there will be a blank space at the right end of the last menu.
You can give absolute position to li items and position them (first have left:0, second: left:100px or so... last have right:0 and so on). That way they will always be at the same place when you zoom.
For those wanting to avoid CSS table and table-cell, which by the way, I have no probelm with you can use text-align:justify on the UL with a couple of tweaks.
Basic HTML:
<ul id='mmenu'>
<li><a href='#'>Blah Blah Blah Blah</a></li>
<li><a href='#'>Blah Blah</a></li>
<li><a href='#'>Blah Blah Blah Blah</a></li>
<li><a href='#'>Blah Blah</a></li>
</ul>
Note we've lost the clearfix because: a) We're not going to use floats and b)it breaks this solution.
CSS:
ul#mmenu{
width:100%;
margin:15px 0 10px 0;
overflow:hidden;
text-align:justify; /*Added this*/
}
ul#mmenu li{
letter-spacing:.05em;
color:#0a93cd;
/*Now inline blocks instead of blocks floated left*/
display:inline-block;
font:24px arial;
padding:7px 26px;
background:#fff;
border-left:2px solid #0a93cd;
border:2px solid #0a93cd;
border-radius:13px;
text-align:center;
}
/*Now for the hacky part....
...justify does not, by design, justify the last row of text
therfore we need to add an additional, invisible line*/
ul#mmenu:after {
content: "";
width: 100%;
display: inline-block;
}
I have also removed the :first-child style in the Updated Fiddle
Each time i get this problem.. but the old fix doesn't work this time...
I have a <ul> full of <li> that are floated left
those are perfect.... but i like to have a nice box around... and i style the <ul>
but the <ul> is "sort of empty" because the insides are floated...
the trick with the <div style="clear:both"> dont work...
but event if it work.. it's ugly..
what is the "right" method to get the <ul> a size.. without hardcoding the width and height ?
as both point out... the solution was : OVERFLOW
here is the explaination (for future ference) :
The overflow property specifies what happens if content overflows an element's box.
The new solution
It was Alex Walker who first posted a new, simpler solution, though he gives the credits for actually inventing it to Paul O'Brien. In any case, the solution seems to be:
div.container {
border: 1px solid #000000;
overflow: auto;
width: 100%
}
Set overflow to auto for the ul elements..
ul{overflow:auto;}
I found a better solution:
Set ul properties:
list-style-type:none;
margin:0;
padding:0;
border: 1px solid #000;
Set its li properties:
display:inline-block;
position:relative;
This worked for me. The ul is now wrapped around the li.
Note: However the space between two li can't be cleared in this sense.
I'm trying to create a menu, in which the last menu item (with different class) will stick automatically to the right corner of the menu. I'm attaching a screenshot for this. There are a few menu items on the left and the last item should somehow count the rest of the available space on the right in the menu div, add this space as padding to the right and display a background in whole area ON HOVER (see the screen to understand this please)
Is something like this possible?
Thanks a lot
See if this will work for you: http://jsfiddle.net/neSxe/2
It relies on the fact that non-floated elements get pushed out of the way of floated elements, so by simply not floating it the last element fill up the rest of the space.
HTML
<ul id="menu">
<li>Services</li>
<li>Doctors</li>
<li>Hospitals</li>
<li>Roasted Chicken</li>
<li class="last">Customer Service</li>
</ul>
CSS
#menu {
width: 600px;
}
#menu li {
float: left;
}
#menu li a {
display: block;
padding: 6px 14px 7px;
color: #fefefe;
background-color: #333;
float: left;
}
#menu li a:hover {
background-color: #666;
}
#menu li.last {
float: none;
}
#menu li.last a {
text-align: center;
float: none;
}
Edit
I've made some changes to make it work smoother on IE6, by floating the anchors too.
If anybody else needs this and do not need to support IE6 and below, you can get rid of those two properties.
assuming your html looks like this:
<div id="menu">
<div class="entry">Services</div>
...
<div class="entry last">Support Staff</div>
</div>
I would make the #menu position: relative;, so that you can position the last menu entry absolute inside the #menu div.
Not necessarily putting the menu item last, but if you always wanted that rounded corner at the end then you could apply a background image to the ul itself and position that right top with the curve. The only issue you'd run into with this method is, if you hover over the last menu it will not put a hover right to the right-hand edge.
If you knew how many menu items there were you could achieve this by setting the correct widths for all your menu items?
Have a look at this:
http://jsfiddle.net/ExLdQ/
The trick is to use your lighter green as the background or background-image for the whole list. You can than use the darker green on all li's and add a background-color:transparent to li.last.
Just add float: right; to your css for the last menu item, and use light background for both the list itself and the last menu item.
I've coded myself into a CSS corner. I have a list of images that I display next to each other using an unordered list. The unordered list is placed inside a fixed width div, so that each 3 images, the next 3 images will display on the next "row".
Each li in the ul does not just display the image, it displays all kinds of stuff, like so:
<div id="colmain">
<ul class="imagelist">
<li>
<h2>Image title</h2>
<img src="" />
<p>Description</p>
</li>
</ul>
</div>
This works fine in most browsers, except for IE7. IE7 display the images beneath each other instead of next to each other. I know from the classic horizontal menu bar technique that this can be fixed by setting the float to left for the li. This does not work for my situation, because I do not know the height of each li, it depends on content. Wit different heights for each li, some very strange layout situations occur, for example an image sitting on the right of an empty row. Here's a stripped version of my CSS:
.imagelist { border-collapse:collapse; font-size:9px; width:850px; }
.imagelist li { display:inline-block; list-style-type: none; max-width:240px; vertical-align:top; }
.imagelist li a { display:inline-block; position:relative; }
.imagelist li a img, { padding:0; margin:0; position:relative; }
Basically, I just want IE7 to listen to me and respect the inline-block statement, which SHOULD display elements next to each other.
Through a bit of smarter Googling I managed to find this entry:
http://flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.html
zoom:1; and *display: inline; solve this issue. God I hate IE with a passion.