i had no problem with my topmenu until the recent google chrome update
Now since it updated, the last item (only the last one) on the top menu goes onto the next line.
Any ideas why that might be?
Here is the code:
/* TopMenu
---------------*/
#topmenu {
float:right;
margin:6px 15px 0}
#topmenu ul.menu {
margin:0;
padding:0;}
#topmenu ul.menu li {
display:inline;
float:left;
padding:0 1.1em 0 0;
border-right:1px dotted #555;
margin:0 0 0 1.1em;
text-shadow: 1px 1px 1px #FFFFFF;
list-style-type:none;}
#topmenu ul.menu li a {
border-bottom:1px dotted rgba(0,0,0,0);
color: #3F5868;
padding-bottom: 2px;}
#topmenu ul.menu li.active a,
#topmenu ul.menu li a:hover {
color:#000;
border-bottom-color:rgba(0,0,0,0);
text-decoration:none;}
#topmenu ul.menu li a img {
float:left;
margin:0px 8px -4px 0}
#topmenu ul.menu li:last-child {
border:none;
padding-right:0;}
I noticed the issue on the site in Chrome, but it looks like you are actively trying to resolve the issue yourself, which makes it hard for me to see what is going on with the menu. If you don't anticipate changing the content in the menu, you could easily solve this issue by giving #topmenu a width of roughly 300px. Otherwise, I'm going to assume it is an issue with padding.
I'm using the latest version of Chrome and the last item in the #topmenu nav at www.housemarket.ie is inline with the rest of the menu items. For some reason, however, it's just a bullet, but when I change the bullet to filler text in the inspector it stays on the same line. Maybe try refreshing your browser's cache?
Related
I would like to clear list-style-type:circle; from the generated PDF (using MPDF57). I've read the CSS3 Docs (and according to the documentation, list-style:none; is supported), but during the Output() stage of creating a PDF file, the circle can seen.
HTML OUTPUT
(source: iforce.co.nz)
Border is to only emphasize, which elements are being targeted.
PDF OUTPUT
(source: iforce.co.nz)
CSS (HTML available via PasteBin).
.schedule_logo_con img {
width: 300px;
height: auto;
}
.daily_schedule { font-family: helvetica, sans serif }
.schedule {
font-family: helvetica, sans serif;
margin: 0px !important;
padding-bottom: 10px;
}
.schedule_list { margin: 10px 0 0 0 }
ul {
margin: 0;
padding: 0;
}
.weekday {
width: 65px;
text-align: center;
border-left: solid #ddd 1px;
color: red;
}
.weekday ul li {
border: 1px solid red;
}
ul, .weekday ul, .weekday ul li {
list-style-type: none;
}
I've also tried list-style-type:none; (In addition too checking MPDF56 to see whether it is something with MPDF57), but regardless this style is not being applied.
For now, it seems to be a rendition problem, from the library itself
<UL> with no parents
But, the above CSS does work, if the UL element is being generated on its own, and not as a child of a another element.
<ul>
<li>Test A</li>
<li>Test B</li>
</ul>
PDF OUTPUT
(source: iforce.co.nz)
Solution
Therefore, the designer and I have a found a work around, using divs and replicating a list with display:block;, although if someone is able to figure out a solution for <UL>, without high server load (That would be great too).
CSS
div.weekday_time {
display:block;
}
HTML
<div class='weekday_time'>
10:30 PM
</div>
Why is there a giant white space in the middle of my accordion content?
This is how I have my .css, and it works completely with the exception of the white space in the middle.
#accordion .ui-accordion-content {
background-color: #dcaf4d;
color: #42dc86;
font-size: 12pt;
}
Here is an example of the white space:
http://jsfiddle.net/bQ5Gd/5/
And before you ask, What is causing this white box inside my Jquery Accordion? does not solve the problem.
It's caused by this:
.ui-widget-content {
border: 1px solid #AAA/*{borderColorContent}*/;
background: #FFF/*{bgColorContent} url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/;
}
It's in the jquery-ui.css file around line 246.
An alternative is to change your own CSS. Try changing this:
#accordion .ui-accordion-content {
background-color: #777;
}
to this:
#accordion .ui-accordion-content {
background: #777;
}
It is because the default background is assigned by an background image so setting it to none should solve it
#accordion .ui-accordion-content {
background-image: none;
width: 100%;
background-color: #777;
color: #000;
border: none;
font-size: 10pt;
line-height: 15pt;
}
Demo: Fiddle
I have a Joomla site using Mosets Tree for a business directory. On the right side all the categories are listed. If the sub-categories for an item are expanded, for example under GENERAL SERVICES and you roll over the next menu item (GOVERNMENT AGENCIES), all the sub-category items above get highlighted, which obviously shouldn't happen.
http://www.downtownnewwest.ca/index.php/directory/general-services
The CSS looks like this:
#sidebar ul {
list-style:none;
margin: 0;
padding-left:0;
}
#sidebar .active ul li a {
text-transform: none;
margin-left: 10px;
}
#sidebar ul.menu li a {
display: block;
width: 190px;
color: #00215b;
padding: 10px 20px 10px 20px;
border-bottom: 1pt solid #ccc;
text-decoration: none;
}
#sidebar ul.menu li a:hover {
background: #00215b;
color: #fff;
}
Thanks in advance.
You would use the direct child combinator, >, in order to only select the direct li children elements of ul.menu. Additionally, the anchor elements should be inline-block as opposed to block:
This will fix the issues:
#sidebar ul.menu > li > a {
width: 190px;
color: #00215b;
padding: 10px 20px 10px 20px;
border-bottom: 1pt solid #ccc;
text-decoration: none;
display: inline-block;
}
I am trying to achieve a divider line between menu items in a Concrete5 site, and tried to implement by adding a border-right to each menu item and then using the :first-child pseudo class to add a separator before the first one. However, the pseudo class is being ignored and borders are being added to both sides of each menu item. Here is the code:
.top-bar-section ul li > a {
display: block;
width: 100%;
color: white;
padding: 12px 0 12px 0;
padding-left: 15px;
font-size: 0.8125em;
font-weight: bold;
background: #0D42C0;
border-right: 1px solid white;
}
.top-bar-section ul li > a:first-child {
border-left: 1px solid white;
}
I don't know the exact structure of the HTML menu that is being produced by the CMS, but these selectors seem to be working. Not sure if there is anything else needed to help with this issue. Let me know if more information is needed to diagnose this problem.
Any help is very appreciated!
All of the <a>s are first children of their respective <li>s. You need to target the first <li> instead. Try this:
.top-bar-section ul li:first-child > a {
border-left: 1px solid white;
}
For future reference, please include your HTML in the question.
I'm looking for ages to figure out how to add some space between my recent posts on a wordpress site.
Really have no idea. Anybody that could help?
You have 2 style statements that pretty directly affect these. One has bottom margin but is being overridden by another with margin: 0;. Change this to margin: 0 0 20px 0;.
.primary_content_wrap ul li {
background: url(images/marker.gif) no-repeat 1px 11px;
margin: 0;
padding: 0 0 0 17px;
list-style: none;
line-height: 25px;
font-size: 13px;
color: #005d9e;
}
.recent-posts li {
margin: 0 0 20px 0;
padding: 0;
border: none;
}
each of your posts is a li with an "entry" class :
<li class="entry">...</li>
it seems there's nothing in any CSS for that entry class. What I would do is define it in the CSS with a margin-bottom set to, let's say 10px.