We have strange issue in iPad (iOS7) - see picture below:
On desktop and other devices it looks fine:
The list has very simple code:
<ul>
<li>Transitioning Veterans</li>
<li>Student Veterans</li>
<li>Guard & Reserve</li>
</ul>
CSS:
ul {
margin: 55px 1% 0 3%;
width: 19%; //part of parent div
padding: 0;
float: left;
display:block;
}
li {
margin: 0;
padding: 0 0 6px 0;
position: relative;
list-style: none;
list-style-image: none;
}
a {
display: inline-block;
margin: 0;
padding: 0 15px 0 0;
}
There is nothing special about that code, beside that it is inside container for sub-navigation that slideDown() (jQuery) when parent item is clicked.
See if changing the height of the li makes any difference like this, also add a border to any CSS this will tell you which element is incorrect
li {
margin: 0;
padding: 0 0 6px 0;
position: relative;
list-style: none;
list-style-image: none; height:30px; border:1px solid black;
}
If it's not the height then try other values like top, bottom margins and padding
Good page to use for testing is here
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_iframe_height_width
The position:relative in li tags caused li elements overlapping each other on iPad.
Related
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;
}
I am facing a problem with the position of bullets
It looks fine in Firefox but in Chrome and IE it gets messed up
Firefox:
Chrome/IE:
This is a css for the shown div
background: url("/images/divider_right_top.jpg") no-repeat scroll left top transparent;
font-size: 12px;
margin-bottom: 20px;
overflow: auto;
padding: 20px;
You have to set directly the UL in the css like this:
#yourdiv ul{ list-position:outside; /*(or inside as you need)*/
padding:20px;}
This should work
Don't set the padding. Use margins.
ul { margin: 1em 0; }
li { margin: 0 0 0 1.4em }
Give CSS for the list element like this'
li
{
background: url(/images/divider_right_top.jpg) no-repeat left;
padding-left: 10px;
list-style-type: 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 am frustrated :( I have been sick for a while and now "happy new years" my customer calls me to let me know that the pager of the gallery on his website is broken.
I have been able to fix most of it and get the style back as it was, however I can get it to display horizontally as it should be.
There isnt much code involved, but whatever I try I either break it all-together (for instance changing the "display:block" or it stays vertical
.go-gallery img,
.go-gallery a { border: none; display: block; margin: 0; padding: 0; }
.go-gallery.gog-dots { padding: 0 0px; position: relative; }
.go-gallery.gog-dots .pager {background: rgba(0,0,0,.6);left: 20px;padding: 5px 10px;position: absolute;top: 352px;z-index: 999; height:20px;}
.go-gallery.has-pager .pager {left: 0px;}
.go-gallery.gog-dots
.pager a {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;background: #969696;height: 0;overflow: hidden;outline: none;padding: 6px 0 0 0;width: 6px; margin-top:6px;}.go-gallery.gog-dots .pager a.activeSlide { background: #fff;}
.go-gallery.gog-dots .pager a:first-child { margin: 0; margin-top:6px;}
Just float your pager elements to the left and add some margin between them, like so:
.go-gallery.gog-dots .pager a {
float:left;
margin:6px 10px 0;
}
Also, comment out this line so your first element stacks correctly like the rest.
.go-gallery.gog-dots .pager a:first-child { ... }
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.