Check out the gallery i'm building on a webkit browser..
notice that the words on the top right - available, sold, contact - which are part of a <ul>, are listed vertically.. even though on Firefox, they are listed horizontally because of ul {list-style-type: none;} and li {float: left;}.
Click "available", and notice that they neatly align horizontally. Use the back button or click "dubious" in the top-left corner and they stay in that neat horizontal alignment on the first page. Then refresh your browser, and it becomes vertical again.
.menu ul {
list-style-type: none;
margin: auto;
}
.menu li {
padding: 15px;
float: left;
margin-left: 2px;
margin-right: 2px;
font-size: 20pt;
}
The font in the menu titles used with font-face definition causes this.
A related topic: Accurate width of element when using font-face in Chromium
You may try "display:inline-block" for li's instead of "float: left;"
And why don't you use png images for menu titles?
Related
I'm currently working on a CSS Dropdown menu and I've run into the following issues:
Each successive sub menu overlaps its parent menu by an increasing amount.
Attempting to fix item 1 by setting the left attribute (each submenu already has position:absolute) does not work and throws off the position of the menu wildly.
Whenever a submenu is shown, the right padding is automatically increased causing a gap between the menu and the bottom border of the menu items.
In the CSS I use display: table-* (the star being any of the table-related display values) in order to make vertical centering of text easier and to more easily keep the selected menu item at the top of the list (see display: table-header).
I would really like to know both solutions and causes for the above issues.
For reference, I've created a fully functional JsFiddle.
I made a fiddle here http://jsfiddle.net/xUWdj/
Changes made:
Got rid of all the table displays, the only reason you were using it was for vertical alignment, you can utilize line-height on the <a>'s instead.
All submenu <ul>'s now are positioned based off it's parent by left: 100%; & top: 0;
You should now be able to style/position the rest of the menu to how you want it.
Edit:
Here's a version that allows you to continue using the table-group-header http://jsfiddle.net/HSh5n/2/
Changed li a { display: block; line-height: 30px; }
Added margins to move the ul's to -42px 0 0 130px
I guess the biggest thing with tables is that since they're inline elements, you can't assign position: relative to table-cells, so that's why you couldn't use the left or top properties. I haven't browser tested this, but I'd always double check if you go this route.
If you add right border to your li a{...} you can get an idea about what's causing the overlaps.
li a {
display: table-cell;
border-bottom: solid 1px #cccccc;
border-right: solid 1px #cccccc;
text-decoration: none;
color: rgba(89,87,87,0.9);
height: 30px;
padding: 5px;
vertical-align: middle;
cursor: pointer;
}
I'm trying to center the menu bar and make the menu bar fit the text.
Here is a website I'm trying to edit:
http://www.graffitisumperk.g6.cz/blog/
I've already figure out that I can center menu items this way:
.menu {
text-align:center
}
.menu li {
display:inline-block;
float:none;
margin-left: -5px;
}
.menu li li {
display:block;
text-align:left
}
But I can't seem to fit the menu bar to the width of the menu items.
I've calculated it should be 445px long, but when I change this:
#container {
margin: 0 auto;
max-width: 960px;
to 445px, the whole page it affected, not just the menu bar.
Any ideas how to fix it?
You can do it very very similarly :). One of the effects of display: inline-block; is that the element attempts to resize itself to contain its children. You could achieve this with float or position: absolute as well, but those do not really fit into this layout.
.main-nav { text-align: center; }
.menu { display: inline-block; }
I guessed you might want to center the menu, so I added the text-align too.
Tip: If you use the inspector of your browser (all modern browsers have a pretty decent one), you can easily figure out which element you need to change.
When I looked at your page, it looks like the part you really need to change is the "main-nav" class.
The #container div contains your whole page so you don't want to mess with that one.
I've got an issue I'm having with unordered lists in WebKit Browsers. This code is getting injected into a page that I don't own, so I can't really use a CSS reset, but I can't figure out what's causing my issue.
<div class='instruct'>
<ul>For best results please make sure:
<li>Your entire face including your eyebrows and chin are visible in the frame</li>
<li>Your face is well lit but please avoid excessive backlighting</li>
</ul>
</div>
The CSS:
.instruct {
display: inline;
font-size:14px;
text-align:center;
padding-top: 10px;
padding:0px;
margin: 0px;
}
.instruct ul {
position: relative;
left: 30px;
width: 320px;
font-weight: bold;
padding: 0px;
margin: 0px;
list-style: none;
}
.instruct ul li {
font-weight: normal;
text-align: left;
text-indent: 0px;
padding: 0px;
padding-top: 10px;
margin: 0px;
}
The result I'm currently getting in IE/FF is that all of the list items are properly aligned on the far left hand side of the UL content box. However, in Chrome and Safari, there is about 20px worth of space between the left side of the UL content box and each of the LI content boxes.
When inspecting the element in Chrome's developer console, the box highlighting affect is clearly about 20 pixels away from the left hand side of the the UL's left hand side. It's like there's 20 pixels of padding or margin coming from somewhere.
Given that padding and margins for both the UL and the LI are all zero, I can't figure this out.
Any ideas would be appreciated.
EDIT:
You can see a screenshot of it here:
Sorry... necro-thread.. but it likes to place high on Google searches for the topic.
Your inline-block (or inline) gets an extra 4px of space generated by default on the list item. Go up to the UL tag and add a font-size: 0
Problem solved.
try {-webkit-margin-before:0; -webkit-margin-after: 0; -webkit-margin-start: 0; -webkit-margin-end: 0; -webkit-padding-start:0}
check out http://codesearch.google.com/codesearch/p#OAMlx_jo-ck/src/third_party/WebKit/Source/WebCore/css/html.css if that doesn't work
There shouldn't be anything inside the <ul> tag other than <li> tags.
That goes for the text you have directly inside the <ul> tag - that is probably what's causing the problem.
This seems to be a problem with Chrome for Android.
The fix is to not set margin:0px; for the ul but rather set margin-left:0px; and margin-top:0px;.
(I'm looking at this site in IE 8.) As you can see the content floats center knocking the sidebar below it. It works perfectly in Chrome. I can't think why the float:left; command isn't working in IE.
#content {
margin: 5px 0 5px 5px;
font: 1.2em Verdana, Arial, Helvetica, sans-serif;
width:65%;
float:left;
}
Thanks for your help.
Tara
If you add overflow: hidden to your ul#list-nav then that will prevent the floating navigation messing up the rest of the document.
As for why the navigation is displaying strangely, it's because you're specifying your widths and layout badly. What you should be using is this:
ul#list-nav {
overflow: hidden;
}
ul#list-nav li {
width: 16.66%;
float: left;
display: block;
margin: 0;
padding: 0;
}
ul#list-nav li a{
display: block;
margin-left: 1px;text-decoration: none;
padding: 5px 0;
background: #754C78;
color: #EEE;
text-align: center;
}
That way, the width of each element is exactly 16.66%, rather than 16.62% + 1px
what i currently see in IE8 is:
the problem is that menu links are too wide in IE. You've set the width to 16.62% to each anchor in the menu and that's too wide for IE. Since the width of your content is fixed I suggest you set fixed width in pixels (132px) for these links so they fit on one line and look consistent across browsers, also removing li style setting margin: 0.5em 2em to fix positioning problem in IE.
After my fix I see this:
To me it looks like theres nothing really wrong with the content.
In ie6-ie9 the menu seems to be failing in some way.
and also the menu goes in two rows which pushes everything down. I'm not sure if that is all due to the s letter or not at this point..
Note that the extra letter s seems to be somewhere between #menu and #content .containers.
Edit2: the problem is clearly the menu a width which is too much and the menu goes into two rows.
The way menu is often done is that the ulor outer div holds the color and then the menu li are either centered within that or just plain floated to the left. this way you get the full height feel without the tourbles of the menu braking like this ( though if you do it without ignoring the width.. it is possible with too many menu items and so on. )
add clear:both; on menu container.
note: is broken in Firefox to
I have a css driven dropdown menu, and in Chrome when I hover over the last option the whole thing jumps to the left slightly. I assume it's because the dropdown menu is adding to the overall width of the main list even though it's styled to float. Is there any way to fix this? (it's not doing it in firefox interestingly)
I've noticed by using webdeveloper to outline elements that the last li appears to get wider when it's hovered, but none of the others do.
the applicable sourcecode is here:
http://jsfiddle.net/WsAEW/
It worked for me changing this:
#menu ul li {
display: inline;
position: relative;
}
to this:
#menu ul li {
display: inline-block;
position: relative;
}
Here is a modified jsfiddle. I think the issue is fixed. Give it a try.
http://jsfiddle.net/WsAEW/5/
BTW, I only changed the following style. The 'float left' gets the elements to line up horizontally and the 'display: block' gets the top element to size to include the drop down menu.
#menu ul li {
float: left;
display: block;
position: relative;
}