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 { ... }
Related
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.
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 page which I am quite happy with the layout of the design: http://dev.twoggle.com/
Then I put this into a Drupal theme and it inserted some extra div's inbetween and I am struggling to figure out how to get my original look back! : dev2.parkingmadeeasy.com.au
the ser_text_right class, when I hover over it using Firebug's page element inspect tool, seems to be overlapping with ser_image_left class - I'm not sure why this is happening.
Below is the css which is causing my problems (when combined with Drupal's output that is).
I'd like to move the entire ser_text_right class upwards, but not sure how?
Many thanks for any help,
Gvanto
/*
=======================================================================
services-prov
=======================================================================
*/
.services-pro {
background: none repeat scroll 0 0 #f3f3f3;
border: 1px solid #A2A1A1;
border-radius: 5px 5px 5px 5px;
float:left;
width:998px;
}
.services-pro .ser {
float: left;
margin: 0;
padding: 10px;
width: 47%;
}
.services-pro .ser img {
margin: 0px 10px 10px;
padding: 0;
}
.services-pro .ser .ser_image_left {
float: left;
height: 100px;
}
.services-pro .ser .ser_text_right {
padding:0;
}
.services-pro .ser .ser_text_right h4 {
padding: 3px 0 0px;
font-weight:bold;
font-size:14px;
}
.services-pro .ser .ser_text_right p {
color: #000;
margin: 0;
padding: 2px;
font-size:14px;
}
Add this to your CSS:
#block-views-home-slideshow-block { width: 400px; float:right; }
Of course you can change the width to whatever width your images are.
I'm trying to get all the text in this list to be flush against the bullet. However, the text is wrapping under the bullet image. Tried changing the padding/margin on the a and li and also nowrap, but that just make it stick out over the right border. The bullets are the WBI logos under News: http://circore.com/womensbasketball/ Any ideas? thanks!
You could try
ul {
list-style-position: outside;
}
but I would personally use a background image and some padding, something like:
li {
list-style: none;
background: transparent url(your/icon.png) no-repeat left center;
padding-left: 20px; /* or whatever the width of your image is, plus a gap */
}
See this page for more details:
http://www.tm4y.co.za/general-tips/css-bulleted-lists-styling.html
I did this on your site with firefox and it works
#menu-news li:first-of-type {
border-top: medium none;
height: 55px;
list-style-position: inside;
margin-left: 8px;
margin-right: 15px;
padding: 10px 10px 10px 66px;
vertical-align: top;
}
#menu-news li {
background: url("images/wbismall.png") no-repeat scroll 0 0 transparent;
border-top: 1px solid #666666;
height: 55px;
list-style-position: inside;
margin-left: 10px;
margin-right: 15px;
padding: 10px 10px 10px 66px;
}
This works for unordered lists:
#menu-news ul {
list-style:outside circle;
margin-left:60px;
}
#menu-news ul li {
padding-left:20px;
}
The margin-left moves the whole list in by 60px.
The padding-left is only needed if you want extra space between the bullet point and the list item text. The list item text wraps under itself and not under the bullet.
You need to add display: inline-block; to the link inside the td element.
Your class looked like this:
#menu-news li a {
color: #000000;
font-family: Arial,Helvetica,sans serif;
font-size: 13px;
margin-top: 10px;´
}
But need to look like this:
#menu-news li a {
display: inline-block;
color: #000000;
font-family: Arial,Helvetica,sans serif;
font-size: 13px;
margin-top: 10px;
width: 200px;
}
I had the same problem and here is how I fixed it. The important line is background-repeat: no-repeat;. Bullet points will be added to every new line/list item of your list but it will not put a bullet point when text is wrapped to the next line. Look at my code below to see where I placed it.
ul {
margin: 0;
list-style-type: none;
list-style-position: inside;
}
ul li {
background-image: url(https://someimage.png);
background-size: 25px;
background-repeat: no-repeat;
background-position: 0px 5px 100px;
padding-left: 39px;
padding-bottom: 3px;
}
A few notes on my code: I used an image for the bullet points. I also used background-image: instead of list-style-image: because I wanted to control the size of the image bullet. You can simply use list-style: property if you want simple bullet and this should work well even with wrapped text. See https://www.w3schools.com/cssref/pr_list-style.asp for more information on this.
Try simple set the position attribute:
list-style-position: inside; nothing more need to work.
Here is the working example:
https://codepen.io/sarkiroka/pen/OBqbxv
I ran into a similar issue while I testing accessibility of pdfs generated with pdfreactor, my problem was that list-style-type: disc broke the 'logical reading order' in Adobe acrobat's Reading Order Pane. Having a jumbled reading order won't break the NVDA screen reader experience for visually-impaired users, but it does prevent the user from bookmarking a pdf document correctly.
My solution to fix the text from wrapping directly underneath the bullet character AND fix the reading order:
ul {
list-style-type: none;
}
li {
margin-left: 10px;
}
li::before {
content: '•\00A0';
margin-left: -10px; // a negative margin will remove the bullet from interrupting the flow of the text
}
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.