I am working on this site, and I have a pretty large .css document. For some reason I cant get these list items to have a padding or margin of anything other than 0px.
I have no idea where it might be inheriting this from, and why me writing
{
margin: 5px;
padding: 5px;
}
does nothing!
Here is the site, im referring to the element in a really ugly, bright green, with the class of ".wiffleMainNav ul li."
The CSS rule is at the bottom of the linked styles sheet.
Thanks so much!
-Aza
You have a comma in your definition.
Change this
.wiffleMainNav ul li {
display: block;
float: left;
padding: 5px, /* PROBLEM! :) */
margin: 0px 2px;
background: green;
}
To this
.wiffleMainNav ul li {
display: block;
float: left;
padding: 5px; /* FIXED */
margin: 0px 2px;
background: green;
}
You have a comma at the end of the padding line:
padding: 5px,
margin: 0px 2px;
Your css uses this:
.wiffleMainNav ul li {
display: block;
float: left;
padding: 5px,
margin: 0px 2px;
background: green;
}
Note the Comma after "padding: 5px" instead of semi-colon.
Related
So I have a containing element whose width gets smaller as the screen get smaller #Aa, this element has a <nav> element that contains a <ul> element and some <li> elements as menu items.
When #Aa can no longer contain all the <li> elements the page layout is broken.
What I would like to happen is what is suppose to happen when
overflow:hidden is used. I applied this rule to #Aa.
I thought this was the purpose of overflow:hidden. I entered it manually through the web inspector.
Here is some of the relevant CSS
nav {
white-space: nowrap;
float: right;
}
nav ul li a {
display: inline-block;
padding: 0 20px;
line-height: 60px;
color: #2e2c60;
font-size: 14px;
text-transform: uppercase;
letter-spacing: .1em;
}
nav ul li {
display: inline-block;
float: left;
border-left: 1px solid #ffffff;
position: relative;
list-style: none;
background: rgba(255, 255, 255, .25);
}
nav ul li:hover{
background: rgba(255, 255, 255, 0.5);
}
nav ul li:last-child{
border-right: 1px solid #ffffff;
}
Please try below code,
nav {
float: right;
width: 75%;
height: 60px;
overflow: hidden;
}
and add float:left to logo image
Well, you'll have to put codes for "nav" according to the resolution in your media queries.
In short:
You need to define the height, or max-height (more suitable for this example) in order for overflow to work, otherwise it would just expand, since is the expected behavior
element {
display: none;
}
Try removing this from the inline style of the #left-column element:
<section style="display:none;" id="left-column">
Below I have included an image illustrating my issue. In summary, I am having an issue with an approximately 2 pixel whitespace below each of the images on my website. I'm not exactly sure what is causing this, but it is most definitely not the image itself. I believe it to be the box-sizing: border-box snippet in my CSS, due to the fact that 2px would be the sum of the top and bottom borders, however, removing that part of the code does not solve the issue. Any help or tips would be greatly appreciated. I have tried viewing the webpage on my mobile phone, using Firefox and using Chrome, and the issue is persistent between all of them.
The webpage in question can be found at http://www.bellasaluminum.com/gallery.php?jobType=GlassWindow&page=1, however, I have included a portion of the gallery's stylesheet below:
#gallery > div {
border: 1px solid black;
margin: 5px;
width: auto;
}
#gallery > div > * {
display: inline-block;
}
#gallery > div > img {
position: relative;
padding: 0px;
margin: 0px;
}
#gallery > div > div.description {
position: relative;
padding: 3px;
width: auto;
vertical-align: top;
}
#galleryNav {
padding: 0px;
background-color: #dedede;
text-align: center;
border-left: 2px solid black;
border-right: 2px solid black;
border-bottom: 1px solid black;
width: 90%;
margin: auto;
}
#galleryNav > a {
text-decoration: none;
color: black;
font-family: Arial;
font-weight: bold;
display: inline-block;
padding: 10px 8px 10px 8px;
margin: 0px;
}
#galleryNav > a:hover {
background-color: #efefef;
}
#galleryNav > a.active {
background-color: #afafaf;
}
You can either make the img elements block level:
#gallery > div > img {
display:block;
}
or, change the vertical-align property value to something like top. (the default is baseline)
#gallery > div > img {
vertical-align:top;
}
The second option (vertical-align:top) should be used in this instance, because you want the text to be inline with the img element.
Working on revamping a client's site, and one of their requests is to change the nav to accommodate text of any size. Here's the trick: I can't change html, just css and javascript. Oh, and the version of jquery on the site is 1.4.4 - this can't change either.
I've got a javascript-based solution in place, and it's working across all modern browsers - but I can't seem to get it to function in IE7. The solution relies on all nav elements rendering in their native width (i.e. wrapping instead of resizing), in order to calculate the necessary width changes. In IE7, the nav items don't clear - the last one shrinks to a tiny size to fit into the first row, and the javascript thus can't tell that resizing needs to be calculated.
The javascript should work fine, the main issue is that I need to know what my css isn't doing to force the last element to wrap instead of resize in IE7. I've tried an exhaustive number of combinations of display: inline-block;, white-space: nowrap;, and float: left; to no avail.
I isolated the nav in question and put it in a fiddle right here. If anyone has any ideas, or knows a better way I can implement, let me know - all suggestions welcome!
I have two versions of your jsFiddle here to compare with and verify that this is what you're going for. I cleaned up your CSS a bit but the main thing I did was set a percentage width on the li in your navigation. You have 6 elements so 100/6 = 16.6666%. I should also not I removed the jQuery in the jsFiddles below.
http://jsfiddle.net/D8etp/1/
and
http://jsfiddle.net/D8etp/2/
CSS
body {
margin: 0;
}
#top-nav{
padding-top: 30px;
width: 940px;
}
#nav {
color: #FFF;
font-size: 12px;
margin: 0;
padding: 0;
text-transform: uppercase;
min-height: 49px;
background-color: #007369;
overflow: hidden;
}
#nav > li {
display: block;
float: left;
list-style-type: none;
margin: 0;
padding: 9px 0 0 0;
width: 16.6666666666%;
}
#nav > li > a {
display: block;
box-sizing: border-box;
text-align: center;
padding: 7px 12px 17px 12px;
line-height: 16px;
margin: 0 4px;
color: #fff;
text-decoration: none;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
overflow: hidden;
}
#nav > li > a:hover {
background: #b0a893;
}
#nav > li > a:hover {
text-decoration: none;
}
Our application has a master .css common for all our pages and we are not allowed to change anything in this file.
We have an entry there as follows:
ul li{display:block;padding:0 0 0.5em 15px;margin:0 0 0 0;background:url(../images/bullet.gif) top left no-repeat;}
I am implementing predictive search on one of the jsp-s and I have a specific css file for this purpose which is as follows
.ac_results {
padding: 0px;
border: 1px solid black;
background-color: white;
overflow: hidden;
z-index: 99999;
}
.ac_results ul {
width: 100%;
list-style-position: none;
list-style: none;
padding: 0;
margin: 0;
list-style: disc inside;
}
.ac_results li {
margin: 0px;
padding: 2px 5px;
cursor: default;
display: block;
/*
if width will be 100% horizontal scrollbar will apear
when scroll mode will be used
*/
/*width: 100%;*/
font: menu;
font-size: 12px;
/*
it is very important, if line-height not setted or setted
in relative units scroll will be broken in firefox
*/
line-height: 16px;
overflow: hidden;
}
.ac_loading {
background: white url('indicator.gif') right center no-repeat;
}
.ac_odd {
background-color: #eee;
}
.ac_over {
background-color: #0A246A;
color: white;
}
My problem is that I am unable to remove this bullet.gif from my current predictive search list . If I add background: none I am loosing all the existing background colours.
How can I stop this bullet.gif to appear in my list.
PLEASE NOTE : I tried with background-image:none; also and it did not work, the bullet.gif is still coming up in my search list :(
Regards, M
Instead of background: none try:
background-image: none
You should write
background-image:none;
I have a bizarre problem, IE 7 and 8 are not loading about 80% of one of my stylesheets, they get to a point, and then don't load any further. The IE dev tools recognise the unloaded properties, but they aren't applied in browser. The following stylesheets all load correctly, and no other browser has any problem with them. Additionally, the HTML prototype site which is about 90% the same as the near-production version has no problem.
The site is being built locally on Wordpress, but I've uploaded the source for the home page here, should that help (the stylesheet that doesn't load correctly is '760.css'). Additionally, the (correctly working) prototype can be viewed here, but some changes have been made between that version and the conversion to Wordpress.
The offending stylesheet (seems to stop loading after the ul#menu-site-nav properties have been applied):
/*
Created by Mikey Clarke | #mikey_clarke
*/
#nav-bar {
font-size: 0.95em;
padding: 0px 0px;
}
#nav-bar ul {
text-align: left;
}
ul#menu-site-nav {
width: 95%;
margin: 0 auto;
}
#nav-bar li.primary-nav {
width: 14.584%;
padding: 20px 1.042%;
float: left;
text-transform: uppercase;
}
#nav-bar li.primary-nav:first-child {
display: block;
padding-left: 1.042%;
}
#nav-bar li.primary-nav:nth-child(2) {
padding-left: 1.042%; /* restore outer padding */
}
#nav-bar li.primary-nav:last-child {
padding-right: 1.042%; /* restore outer padding */
}
#nav-bar li ul {
display: block;
width: 100%;
text-transform: capitalize;
}
#nav-bar li ul li {
float: none;
padding: 0px 0px;
display: list-item;
}
#nav-bar li.shield-logo {
background: url(/wp-content/themes/itsa/images/shield.png) no-repeat;
background-size: 25px;
background-position: 10px 23px;
}
#nav-bar .shield-logo span {
text-indent: 1000%;
white-space: nowrap;
overflow: hidden;
display: block;
padding-bottom: 12px;
}
#masthead {
font-size: 2.25em;
padding: 35px 0;
}
#masthead a {
display: block;
padding: 0 160px;
}
#content {
width: 82.279%;
padding-right: 1.042%;
float: left;
}
.sidebar {
width: 14.586%;
float: left;
text-align: right;
padding: 0px 1.042% 20px 1.042%;
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: none;
}
#section-nav>ul>li>span {
padding: 4px 4%;
border: 1px solid transparent;
margin-bottom: 4px;
}
#section-nav li ul li {
padding: 4px 4%;
margin: 4px 0px;
border: 1px solid transparent;
}
#section-nav>ul>li.current-menu-item>span,
#section-nav>ul>li>ul>li.current-menu-item {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
border: 1px solid #f6f6f6;
-webkit-box-shadow: inset 0px 1px 4px rgba(0,0,0,0.3);
-moz-box-shadow: inset 0px 1px 4px rgba(0,0,0,0.3);
box-shadow: inset 0px 1px 4px rgba(0,0,0,0.3);
background-color: #ececec;
background: rgba(0,0,0,0.02);
}
#breadcrumbs {
font-size: 0.9em;
}
/* Restore content only useful for users browsing from desktops */
.mobile-superfluous {
display: block;
}
#media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
#nav-bar li.shield-logo {
background: url(/wp-content/themes/itsa/images/shield#2.png) no-repeat;
background-size: 25px;
}
}
After rewriting the entire stylesheet by hand and testing after every line, it seems that the problem is with the media query at the end. I've removed every part of the media query individually and am completely unable to identify what part of it IE is choking on. I also copied and pasted the media query to a different stylesheet and that stylesheet loads fine in IE 7 & 8. So very strange.
Since it does work without the media query, I've moved it to another stylesheet where it works fine.
Your problem seems to be in the fact that some CSS pseudo selectors you are using aren't supported by these browsers, namely :nth-child and :last-child.
And while it should work I they might be having trouble with the immediate child selector used without spaces (this is just a guess but not far fetched) i.e. section-nav>ul>li should probably be #section-nav > ul > li
Do mind that IE7 and I think 8 as well don't support rgba either.
Any succeeding parse errors or missing styles could be attributed to this, maybe...
For more information about the exact spec that IE7+ should support please read this excellent article about CSS2.1 selectors