I am having a very basic problem in IE7 that I cannot seem to fix. If you look at this page: http://vitaminjdesign.com/IAM/company/ you will notice that the vertical nav (ul id="leftcol") is displaying incorrectly in IE7. Each word appears on its own line. Here is my HTML /. CSS:
<ul id="leftcol">
<li><a class="active" href="#">Company Overview</a></li>
<li>Why Choose Parker?</li>
<li>Testimonials</li>
<li>Financing Promotions</li>
<li>Licensing & Credentials</li>
</ul>
ul#leftcol{float:left; width:185px; position:relative; z-index:10;}
ul#leftcol li{float:right; clear:right; margin-bottom:14px; list-style:none; list-style-image:none; text-align:right; line-height:1.3; }
ul#leftcol li a{color:#505050; text-decoration:none; font-size:15px; float:right;}
ul#leftcol li a.active,ul#leftcol li a:hover{color:#89b060;}
Any ideas?
Remove clear:right; from the following
ul#leftcol li{float:right;margin-bottom:14px; list-style:none; list-style-image:none; text-align:right; line-height:1.3; }
try adding
ul#leftcol li a {
white-space: nowrap;
}
You could also give you li elements a fixed width.
Or maybe some display property as well like display: inline;
Related
I have created a menu that is only visible on mobiles.
Using CSS I've managed to create a SHOW/HIDE NAVIGATION menu. You can see this in action at http://js.co.nz/mobile-test.php (currently only in portrait view on mobiles as that's as far as I've got with development).
I want to be able to show/hide the submenu items too (as the navigation menu is very long!). For example, if the user clicks on "Browse by type" I would like the submenu of: Chairs; Tables; Mirrors etc to appear.
The html currently looks like this:
<nav id="responsivenav" role="navigation">
Show navigation
Hide navigation
<ul>
<li>HOME</li>
<li>BROWSE ALL STOCK</li>
<li>BROWSE BY TYPE
<ul>
<li>Antique chairs</li>
<li>Dining tables</li>
<li>Antique mirrors<li>
</ul>
</li>
<li>BROWSE BY CATEGORY</li>
<li>BROWSE BY ROOM</li>
<li>REDUCED ITEMS</li>
<li>OPENING HOURS</li>
<li>NEWS</li>
<li>FIND US</li>
<li>ABOUT US</li>
<li>BROCHURES</li>
<li>PERIOD STYLES</li>
</ul>
<div class="clear"></div>
</nav>
The css looks like this:
#responsivenav {display:block;}
#responsivenav > a { }
#responsivenav:not( :target ) > a:first-of-type,
#responsivenav:target > a:last-of-type {
display: block;
height:50px;
line-height:50px;
font-size:15px;
margin-bottom:0;
padding:0;
text-indent:100px;
text-decoration:none;
color:#fff;
font-weight:bold;
text-transform:uppercase;
background: #393b3c url(../images/wd/mobile-menu-icon.jpg) no-repeat 40px center; }
/* first level */
#responsivenav > ul {
height: auto;
display: none;
border-bottom:5px solid #fff;}
#responsivenav:target > ul {
display: block;
list-style:none;
padding:0;
margin:0;}
#responsivenav > ul > li {
width: 100%;
float: none;
display:block;
height:60px;
line-height:60px;
font-size:15px;
text-indent:40px;
border-top: 1px solid #eee;}
#responsivenav > ul > li a {
text-decoration:none;
color:#393b3c;}
/* second level */
#responsivenav > ul > li > ul {
display: none;
}
#responsivenav > ul > li:hover > ul {
display:block;
}
It is this second level of the menu that I know I haven't got right. I've tried various ways of doing it e.g. adding classes to the submenus, using left:-9999px instead of display:none; etc but nothing seems to work yet.
Please help! I'm sure this should be so simple!
Just replace the property height: 60px to min-height: 60px of the #responsivenav > ul > li (line 138 in PhonePtest.css file).
Currently, your code makes the submenu appear on hover which in case of mobile works on click. That is why the navigation menu hides on click. To prevent this you can replace
BROWSE BY TYPE
with
BROWSE BY TYPE
You can do the same with the other menu elements.
I got this problem which i can't figure out.
#menuUL{
font-size:32px;
padding:0;
}
#menuUL li:first-child{
list-style-type: none;
}
#menuUL li{
margin-left:30px;
/*display: list-item;*/
display:inline;
list-style-type:disc;
}
I have a horizontal menu, but i only want the first item to hide it's list style type, the rest needs to show the disc. However then i will put 2 display's in the same li which causes it to display vertically instead of horizontal.
UPDATE.
the html code
<div id="photoMenu">
<ul id="menuUL">
<li>ALL</li>
<li>ARCHITECTURE</li>
<li>PEOPLE</li>
<li>LEGO</li>
</ul>
Try floating the li instead
JSfiddle Demo
CSS
#menuUL{
font-size:32px;
padding:0;
}
#menuUL > li:first-of-type {
list-style-type: none;
}
#menuUL li{
float:left;
margin-left:35px;
}
I have created a very basic hover css menu for a joomla site (I don't really want to get into jQuery if I can avoid it). It works fine in everything except IE (10,9...).
When you hover over the top level and move the move over the child menu the child menu persists in everything except IE.
How do I get IE to play ball?0
Here's the html:
<ul class="menu" id="mainMenu">
<li class="item-210"><a href="/index.php/home-2" >Home</a></li>
<li class="item-213 current active deeper parent"><a href="/index.php/xbus2" >xBus</a>
<ul>
<li class="item-214"><a href="/index.php/xbus2/vision" >Vision</a></li>
<li class="item-215"><a href="/index.php/xbus2/timetable" >Timetable</a></li>
<li class="item-217"><a href="/index.php/xbus2/xbus-mini" >xBus Mini</a></li>
<li class="item-218"><a href="/index.php/xbus2/xbus2" >xBus2</a></li>
</ul>
</li><li class="item-220 deeper parent"> etc ....
and here's the css
ul#mainMenu li {
position:relative;
}
ul#mainMenu ul {
position:absolute;
width:150px;
top:17px;
left:-9999px;
text-align:left;
background-color:#000;
z-index:5;
}
ul#mainMenu ul li {
display:block;
border-top:1px solid #999;
}
ul#mainMenu ul li:first-child {
border-top:none;
}
ul#mainMenu ul li a {
font-size:14px;
line-height:2em;
color:pink;
}
ul#mainMenu li:hover ul {
left:0px;
}
You should set the margin and padding to zero. IE has default value about this.
'ul#mainMenu ul {padding:0; margin: 0;}'
Make sure there is no margin between the elements which could be causing the issue. The IE dev tools will help with this.
Also, try applying a 1px transparent gif or png as the background of the child LI's - http://www.welovecss.com/showthread.php?s=4de6205bc9ac3ff2ead50464d123bcf4&t=6478&page=2
Hope it helps
I'm having trouble with a search box. There are two main issues that I'm having. Firstly, I have tried to create a search bar within a navigation bar and the search bar doesnt match the other elements within the navigation bar.
As you can see, the padding does not match the other elements and the size of the box is off by a couple of pixels.
Secondly, the search box looks fine when the page is maximised (besides the problems mentioned above). However, when the page is not maximised, it does this:
I know these are probably rookie errors and the code is probably sloppy but I'm a university student and this is my first HTML project. I am using XHTML 1.0 Transitional and CSS 2.0 as we arent allowed to use CSS3 or HTML 5 or any scripting languages. If someone could help me out, I'd greatly appreciate it!
This is the HTML code:
<div id="nav_bar">
<div id="inner_nav_bar">
<ul>
<li>home</li>
<li>phones</li>
<li>order</li>
<li>faq's</li>
<li>contact us</li>
<li id="search">Search: <input type="text" /> <input type="submit" value="Go!"></li>
</ul>
</div>
</div>
This is my CSS code:
#inner_nav_bar
{
text-align:center;
}
#nav_bar ul
{
list-style-type:none;
padding:0;
overflow:hidden;
}
#nav_bar li
{
display: inline;
}
#nav_bar a:link,a:visited
{
display:inline-block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#27c645;
padding:4px;
text-decoration:none;
text-transform:uppercase;
border-style:solid;
border-width:3px;
border-color:#0d6e1f;
text-align:center;
}
#search
{
display:inline-block;
font-weight:bold;
color:#FFFFFF;
background-color:#27c645;
padding:5px;
text-decoration:none;
text-transform:uppercase;
border-style:solid;
border-width:3px;
border-color:#0d6e1f;
text-align:center;
}
#nav_bar a:hover,a:active
{
background-color:#7A991A;
}
In your CSS, you're treating the #search list item very different from the other list items.
I changed many of the lines in the CSS around, so that most of the properties are now in li and don't have to be repeated in the other elements.
One problem was the a elements in the other list items, that had vertical padding. I replaced that with line-height.
#inner_nav_bar {
text-align:center;
}
#nav_bar ul {
list-style-type:none;
padding:0;
overflow:hidden;
}
#nav_bar li {
text-transform:uppercase;
display: inline-block;
white-space:nowrap;
color:#FFFFFF;
background-color:#27c645;
border:3px solid #0d6e1f;
text-align:center;
font-weight:bold;
line-height:1.66;
}
#nav_bar a {
display:inline-block;
width:120px;
color:#FFFFFF;
text-decoration:none;
padding:0 4px;
}
#search {
padding:0 4px;
}
#search input {margin:0;}
#nav_bar a:hover, #nav_bar a:focus, #nav_bar a:active {
background-color:#7A991A;
}
Another problem was the size of the input element. The only way I could get that right with any kind of browser consistency was to increase the line height. If that is not acceptable, you may have to set the height on the list items explicitly, and add overflow:hidden.
See result in jsFiddle.
PS you also had other errors: One input didn't end with />, which is mandatory for XHTML. And you had #nav_bar a:link,a:visited, which did not do what you wanted; you should hae written #nav_bar a:link, #nav_bar a:visited otherwise the style would have applied to all visited links, not just the ones in #nav_bar.
I'm creating a menu bar with ul li tags and the links are to close together how do I get them to have a bigger space between links?
Give margin on li element ...
<nav>
<ul>
<li><span>Home</span></li>
<li><span>Gallery</span></li>
<li class="last"><span>Map</span></li>
</ul>
</nav>
<style>
li{
display:inline-block;
background:blue;
width:100px;
height:20px;
text-align:center;
margin-right:15px; /* edit this margin to separate your elements*/
}
a{
text-decoration:none;
color:black;
display:block;
}
.last {margin-right:0px;}
</style>
http://jsfiddle.net/Tv7pA/
you can remove margin right from last element like top or with jQuery or with css li:last-child, li:nth-child(3) ... but best way is with jQuery or with class coz it is sup. in all browsers