Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image Bullet Alignment Help - Need To Align With All The Browser and Devices

    http://www.warocks.com/tools-of-the-trade/

    My image bullets points (ticks and crosses) positioned differently across different screen devices. In some devices like iPad, it is positioned slightly above the text. Is there a way to make sure it is positioned properly across all the browsers and all of the hand-held devices?

    I would deeply appreciated if you can come out with a solution as I have spent a lot of hours; trying to get the image bullet points aligned properly across all of the devices and desktop computer, etc. I have searched Google and the only solution is to use media queries. Is there other alternative ways instead of using media queries? Thanks!

    After using media queries, I tested my website on a lot of other devices like iPad, etc is not aligned properly at all… It is so frustrating… I wish to get this bullet points done please.

    Here is the current code in the plugin that I have….

    Removing the bullet…

    Code:
    ul.check, ol.check{
    list-style:none;
    }
    ul.stop, ol.stop{
    list-style:none;
    }
    Changing the bullet to image….

    Code:
    /*.check{
    list-style:inside url(../tinymce/styled-list/images/check.png)!important;
    }
    
    .stop{
    list-style:inside url(../tinymce/styled-list/images/stop.png)!important;
    }
    But positioning wise…. I need you help please.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Codel,
    Have a look at a demo of mine on positioning custom bullets here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Excavator I'm a newbie in CSS I hope you can enlighten me on how to edit the CSS files to get align the image bullets points aligned properly in all kind of devices ..Thanks..

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Codel View Post
    Hi Excavator I'm a newbie in CSS I hope you can enlighten me on how to edit the CSS files to get align the image bullets points aligned properly in all kind of devices ..Thanks..
    Code:
    ul.check li, ol.check li{
    	background:url(../tinymce/styled-list/images/check.png) left 10px no-repeat!important;
    	padding-left:25px;
    }
    A pixel setting there will move the image down a bit. Can also use top, middle or bottom.

    Any particular reason your using !important? See here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks a lot but it is showing differently on different devices so should I use media queries is there other way to solve this problem?

  • #6
    New Coder
    Join Date
    Oct 2013
    Posts
    16
    Thanks
    2
    Thanked 1 Time in 1 Post
    My advice responsive design-> use twitter bootstrap , i design all my sites with it now.A simpler responsive css framework is skeleton.css, easy to get up and running.http://getskeleton.com/
    http://designshack.net/articles/css/...with-skeleton/

  • #7
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Html

    My advise is to refer the code from w3schools.com which gives u much aware.

  • #8
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey guys I did it after testing out for hours and hours but there is something left.

    http://www.warocks.com/tools-of-the-trade/

    That is the ticks and crosses can be seen on only Firefox, Chrome, and cannot be viewed on Internet Explorer 8. It shows the number bullets point as I replace the number bullets points with the ticks and crosses...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •