I'm working on front-end of an intranet website.
The problem I have is with to do with the list compatibility. What I want to do is to style the list items, for example, instead of having bullets, I would like to have arrows. I have inserted the arrows, but it displays differently on Firefox compared with Chrome.
On Firefox it displays the bullet point on the corner, but on Chrome it displays inline with the link text which is what I'm looking for.
Here is the CSS for the list and arrow:
.jt-menu .item-280 li li {
color: #FFFFFF;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 16px;
margin: 1px 0 0 1px;
text-align: left;
width: 172px;
list-style: disc inside url("../../../../images/barrow.png");
}
Add this to your CSS:
.jt-menu > li > ul ul li {
width: 240px !important;
}
.jt-menu > li > ul ul a {
display: inline-block;
}
Try adding more left-margin and setting line-height as tall as your image.
Related
I was working on this site and added the header menu with drop downs. The third menu item WINDOWS SUPPORT sub menus are aligned to the left while others are aligned to to the center of the dropdown.I have edited the css to
.sub-menu li a {
text-align: center;
}
but the dropdown area is aligned to the right compared to others.Please help me in making it align correct.Thanks!!
i checked your site. just add these two classes in your css. it will resolve the problem.
#mainmenu .menu-item-292 ul
{
left:-15px;
}
#mainmenu .menu-item-292 li
{
padding-left:15px !important;
}
watch your css file and remove this 2 lines
#mainmenu .menu-item-291 a{margin-right:15px;}
#mainmenu .menu-item-292 a{margin-left:-16px;}
If you want to make more space use padding and border-box:box-sizing
You have
#mainmenu .menu-item-292 a {
margin-left: -16px;
}
It's pulling over both the "Windows Support" anchor, and all anchors below it.
Try this
Add margin-left: 0; css for given anchor tags into your style.css file I guess at line no. 383
#header #mainmenu ul.children li a, #header #mainmenu .sub-menu li a {
color: #FFFFFF;
font-family: 'menu-font' !important;
font-size: 13px !important;
padding: 5px 20px;
text-align: left;
text-transform: uppercase;
margin-left: 0;
}
I hope this solves your problem!
I've been working on a dropdown menu here http://watercookies.topfloorstudio.com/
I want the main menu items (Engage, Play, View, etc...) to have the text-shadow but not the dropdown menu items.. I've tried specific selectors which didn't work and I tried classes applied to only those elements and the sub li elements still had the text shadow. Any suggestions?
Add "text-shadow: none" to this line in your CSS.
ul#main-nav li ul li {
float: none;
font-size: 0.5em;
**text-shadow: none;**
}
You have this CSS:
ul#main-nav li {
float: left;
font-family: "Oswald", "Impact", sans-serif;
position: relative;
text-shadow: 1px 1px #666666;
}
It is catching all of the lis. Move the drop shadow to this selector:
ul#main-nav > li > a
I have this site, please note that in a:hover put the source as bold.
The problem is that the font size decreases and eventually I read it also decreases.
There are two errors in the HTML you would like your help:
The source should not decrease when ally is in bold.
In the event a:hover can not change the size of the tag li.
The tag li must have fixed size, and not size depending on content. How can I fix the size of the li?
I don't know if I understood your question correctly, but can't you put
ul#menu li
{
width:200px; //change this amount...
}
You can prevent the boxes from jumping by
floating the lis
adding a width to the lis
adding left and right padding to the lis
taking the hover off the a and adding it to the lis
--
ul#menu li {
float:left;
width:120px;
background-color: #676767;
text-align:center;
padding:20px 20px;
margin:0 .25em;
}
ul#menu li a {
color: #FFFFFF;
text-decoration: none;
}
ul#menu li:hover {
font-weight: bold;
background-color: #868686;
color: #FFFFFF;
}
http://jsfiddle.net/jasongennaro/5jJg3/10/
Important:
the bolder text still jumps, but the boxes do not
you will only be able to click on the text ** however you can make the entire li clickable with js, if you like.
I took the liberty to touch your css code to achieve the desired result. It would be:
ul#menu li
{
background-color: #676767;
display: inline-block;
text-align: center;
}
ul#menu li a
{
letter-spacing: 1px;
color: #FFFFFF;
display: block;
line-height: 45px;
padding: 0;
text-decoration: none;
width: 100px;
}
ul#menu li a:hover
{
letter-spacing: 1px;
font-weight: bold;
background-color: #868686;
color: #FFFFFF;
}
What I did was:
Remove padding from li and a elements (it should be 0)
Set the a element to display:block with fixed width and height
Set letter-spacing of a and a:hover to 1px so they keep the same space between characters
Keep the text in the center with line-height and text-align:center
The problem was that padding was pushing the box borders when the element changed its size.
I am trying to create a very simple "no-frills" tab using html & css. For this, I have a bunch of li elements and inside each of these, there is a "a href" element. Now, when i look at the output in IE & Firefox (after setting the styles to make the list display horizontally with proper border and everything), I can see that the "a" element overflows the "li" element. How do i make the "li" element resize based on the "a" element?
CSS and html as follows
#tabs ul
{
list-style:none;
padding: 0;
margin: 0;
}
#tabs li
{
display: inline;
border: solid;
border-width: 1px 1px 1px 1px;
margin: 0 0.5em 0 0;
background-color: #3C7FAF;
}
#tabs li a
{
padding: 0 1em;
text-decoration: none;
color:White;
font-family: Calibri;
font-size: 18pt;
height: 40px;
}
<div id="tabs">
<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
</ul>
</div>
You forgot the "#" in the CSS declarations. You've an id="tabs" in you html code which needs to be referenced as
#tabs {
....
}
in the CSS. The rest is fine-tuning ;)
And try
#tabs {
display: inline-block;
}
instead of the display: inline;
Try settings the the display on the li element as "inline-block".
http://www.quirksmode.org/css/display.html
give style to anchor as
display:block
I give
display:block
to both the li and a tags. Then float the li. You can add this code to make the li enclose the a completely:
overflow: hidden; zoom: 1; word-wrap: break-word;
This will clear anything inside.
You could also simply give your li's some padding:
#tabs li {
padding: 8px 0 0;
}
Inline-block is a good way to go (as suggested).
But if you want this to be cross-browser, you need to add som CSS-hacking "magic" :)
One very good tutorial on the subject is http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
Using the method from that article, you'd end up with the following CSS:
/* cross browser inline-block hack for tabs */
/* adapted from:
/* http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ */
#tabs ul,
#tabs li,
#tabs li a {
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
vertical-align: bottom;
margin:0; padding:0; /* reset ul and li default settings */
}
/* The rest is "window dressing" (i.e. basically the tab styles from your CSS) */
#tabs li a {
margin: 0 0.5em 0 0;
background-color: #3C7FAF;
padding: 0 1em;
text-decoration: none;
color:white;
font-family: Calibri;
font-size: 18pt;
height: 40px;
}
Simply display:inline-block on both li & a did the trick for me man. Lists stretched to accommodate whatever I did with the links.
a {
color: #000;
}
a:hover {
text-decoration: none;
color: #fff;
}
That is the code I use. But, none of the links I have in my pages listen to this. They abide by this instead:
#menu li, a {
text-align: center;
display: block;
float: left;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size:1.2em;
color: #575757;
text-decoration: none;
list-style: none;
}
Therefore a lot of the links are skewed, as they all float left and things.
The code for the links itself isn't wrapped in any way. At least not in a way that explains my errors.
<div id="footer">
<p><center>Copyright 2008 - G.S.B.V. Pugilice</center></p>
</div>
That bit of code gives me two lines instead of one, the link floats left on the second line.
I think you may be mis-understanding how selectors work.
#menu li, a { ... }
Means apply styles to any li descendant of a element with the id #menu and to any a found any where.
Did you actually intend:-
#menu li, #menu a {...}
?