|
CSS - Overlapping Bullet Points On Image
How do I prevent my bullet points overlaying the image? When the image is floated to the left, strange things happen to the <li> items. They seem to ignore the image.
This will probably make more sense if you try the code below with an appropriate image. I can get around this problem by using table formatting, but I am trying to learn a CSS alternative. Here is the code. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<body>
<p>Hello</p>
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
<img src="http://www.selestial.com/resources/image2.jpg" alt="any old image" style="float:left;"/>
<p>Hello</p>
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
<p>Hello</p>
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</body>
</html>
Similar TutorialsI have followed several tutorials for using a bg image as a bullet and I can't figure out why it isn't working. Here is the webpage These are the items that should have a custom bullet (an upside down blue triangle) Introducing the New ATS/ERS Standards Spirometry Training is Essential Guidelines for COPD Emphasize Spirometry Training COPD: Make Your Goal Early Detection by Tom Petty Here is the css: Code:
#newsletter ul {
padding: 0;
list-style: none;
}
#newsletter li {
margin-left: 30px;
background-image: url(../images/bullet.gif) repeat-n;
}
Here is the xhtml: Code:
<div id="newsletter">
<h1>Vitalograph Newsletters</h1>
<div class="row"> <span class="imgLeft"><a href="/pdfs/newsletters/vitalink_fall2005.pdf"><img src="../images/vitalink_fall2005.jpg" alt="vitalink spirometry newsletter" width="125" height="161" border="0" lowsrc="/pdfs/newsletters/vitalink_fall2005.pdf" /></a></span>
<h2>Vitalink Newsletter</h2>
<ul>
<li>Introducing the New ATS/ERS Standards</li>
<li>Spirometry Training is Essential</li>
</ul>
<span><a href="/pdfs/newsletters/vitalink_fall2005.pdf" target="_blank">Vitalink
Fall 2005 (pdf 583 KB)</a></span>
<ul>
<li>Guidelines for COPD Emphasize Spirometry Training</li>
<li>COPD: Make Your Goal Early Detection by Tom Petty</li>
</ul>
<span><a href="/pdfs/newsletters/vitalink_spring2005.pdf" target="_blank">Vitalink
Spring 2005 (pdf 583 KB)</a></span>
</div>
<div class="row">
<h2>Pharma Newsletter</h2>
<p>The Pharma Newsletter provides up to date information on Vitalograph's latest respiratory
clinical trials products and services, news about our people and where you can meet us.
It also highlights important new legislation and other relevant news in the industry that
we hope will be a useful resource for you. </p>
<p><a href="/pdfs/newsletters/pharma_newsletter_jan2006.pdf" target="_blank">Pharma
January 2006 (pdf 76 KB)</a></p>
<p><a href="/pdfs/newsletters/pharma_april2006.pdf" target="_blank">Pharma
April 2006 (pdf 49 KB)</a></p>
</div>
<div class="line"></div>
</div>
I have a <ul> which uses a list-style-image as a bullet, positioned outside. In FF this works fine, but in IE the bullet sometimes displays, sometimes appears obscured. It doesn't appear to be the flickering effect that other posts about bullets have mentioned. It is static and changes only on refresh. Code: #content ul {
list-style-image: url(../assets/bullet.gif);
list-style-position: outside;
color: black;
vertical-align: middle;
}
#content li {
color: black;
line-height: 1.8em;
font-size: 12px;
}
Code: <div id="content">
<ul>
<li>organisational development, training and coaching</li>
<li>learning</li>
<li>children's services</li>
<li>evaluation and qualitative research</li>
<li>public sector policy, strategy and enterprise</li>
<li>partnership support and communities projects</li>
<li>working with difficult and complex issues</li>
<li>building capacity and capability</li>
</ul>
</div>
It happens on a couple of other computers too. The page is XHTML 1.0 Strict. I tried to use a background image instead but would prefer not to do it this way. Any advice would be good. Page is at sample page I've got a unordered list, with a background image on the li a:link selector. I also need to replace the default bullet with an image BUT the image needs to display to the right of the <li> text. Is this possible? The image needs to appear immedately after the text (not aligned at the edge of the list or column). So, for example, list item i [img] list item 2 with longer name [img] list time 3 with short [img] The list is generated dynamically, I cannot simply add the image to the list item text. Any help would be much appreciated - thanks! My page http://www.doylecompanylaw.com/doyle.html uses images for the bullets along the left navigation bar. They display perfectly in Opera and Firefox but position themselves too far up in IE. Anyone got any ideas on how to fix this problem? Thanks in advance. Hey New to the site, I thought it would be a good place to ask a question or two... I am trying to have a repeating background as well as an overlapping body image at the top. I keep failing, I can only get one or the other working. Here is the only part I know works 100% Code: <style type="text/css"> body { margin:0px; 0px; 0px; 0px; background: url(images/topbg1.png) no-repeat 50% 0%; min-height:106px; position:relative; } </style>
Any help you can give I would greatly appreciate, thanks... I have a problem, completed a simple website for a client but now they tell me that the image on the page is overlapping text on right, for some reason I cannot see that I see it working, can someone please have a look at http://www.woodenitbenicecfw.com and tell me if you see the overlapping and why it might be happening. Thanks Tim Hi, Code:
<a href="..." ><span class='openP'></span>Open this section</a>
<style type="text/css">
span.openP{
background-image:url('images/plus.gif');
background-repeat:no-repeat;
width:50px;
background-position:left center;}
</style>
Why does "Open this section" text appears over the image 'images/plus.gif'? How do I make 'plus.gif' to be left or right to the text? Hi Everyone, I'm having a problem with IE rendering correctly. I'm experimenting with using all div's in my pages now, and I'm not very familiar with the quirks of IE. I have created a sample page, and I'm really confused as to what is going on in IE. FF renders the page exactly as I expect. IE renders the page with everything in the correct location, but it seems to double the background image for a sub-div section that is moved up using a negative margin (#menu { ... margin-top: -200px; ... }). Also, this "duplicate background" seems to "flicker" on and off in certain areas, but part of it is always there. (I think there may be more than one duplicate?) To view what's happening, check it out in FF, and then in IE: example.com/HTML example.com/CSS I have very little code, and I'm not sure what is the relevant part: CSS: Code:
.logo_banner { background-image:url(../images/new/logo_web1.png); background-repeat:no-repeat; background-position:left top; height:188px; }
.spacer { height:10px; }
.spacer_10px { height:10px; }
.spacer_40px { height:40px; }
.spacer_50px { height:50px; }
.spacer_separator { height:1px; background-image:url(../images/bg_separator.png); background-repeat:repeat-x; background-position:center top; }
#menu { height:50px; margin-left:200px; margin-top:-80px; }
#home_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; }
#home1_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; margin-left:120px; margin-top:-50px; }
#home2_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; margin-left:240px; margin-top:-50px; }
#home3_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; margin-left:360px; margin-top:-50px; }
#home4_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; margin-left:480px; margin-top:-50px; }
.spacer_dotted_line { background-image:url(../images/new/dotted_line.png); background-repeat:repeat-x; width:860px; height:2px; margin-left:auto; margin-right:auto; }
.div_body_top { background-image:url(../images/backgrounds/bg_dark_body_top1.png); width:900px; height:20px; background-repeat:no-repeat; }
.div_body_middle { background-image:url(../images/backgrounds/bg_dark_body_middle1.png); height:auto; background-repeat:repeat-y; padding-left:20px; padding-right:20px; }
.div_body_bottom { background-image:url(../images/backgrounds/bg_dark_body_bottom1.png); width:900px; height:20px; background-repeat:no-repeat; }
.footer_bar { background-color:#2B2D20; height:60px; text-align:center; }
.footer_text { font-family:Geneva, Arial, Helvetica, sans-serif; font-size:10px; color:#FFFFFF; line-height:60px;}
.text_style_body { text-align:left; font-family:Geneva, Arial, Helvetica, sans-serif; color:#CECECE; font-size:10px; }
.content_body { height:auto; width:900px; margin-left:auto; margin-right:auto; }
.text_area { padding-top:10px; padding-left:20px; padding-right:20px; padding-bottom:20px; width:860px; margin-left:auto; margin-right:auto; }
And here is the HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page 1</title> <link href="styles/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div class="content_body"> <div class="div_body_top"></div> <div class="div_body_middle"> <div class="logo_banner"></div> <div id="menu"> <div id="home_btn"></div> <div id="home1_btn"></div> <div id="home2_btn"></div> <div id="home3_btn"></div> <div id="home4_btn"></div> </div> <div class="spacer_10px"></div> <div class="spacer_dotted_line"></div> <div class="spacer_40px"></div> <div class="text_style_body"> Here is some content. Love that content. One day this text will actually say something. ... <br/> <br/> Here is some content. Love that content. One day this text will actually say something. Here is some content. Love that content. One day this text will actually say something. Here is some content. Love that content. One day this text will actually say something. ... </div> <div class="spacer_50px"></div> <div class="spacer_40px"></div> </div> <div class="div_body_bottom"></div> </div> <div class="spacer"> </div> <div class="footer_bar footer_text">Copyright 2008</div> </div> </body> </html> Any help is GREATLY appreciated. Thanks! Hi all, I'm working on a header which I'm having trouble with. Here's a crude diagram of what I'm looking to accomplish: Code:
____________
_______________________| |___
| _____________________| Logo |_ |
| | |___________| | |
| | Banner | |
| |___________________________________| |
| |
| | <-- container div
Uhhh, hopefully you can see what I'm getting at! I want a logo to be positioned on top of the banner image, but offset above and to the right, outside the container div holding the banner. Note also that the container div is centered in the page, so that the relative amount of space on either side of the container div increases and decreases with the browser window. Approaches I've tried: (1) Use position:absolute for the logo. The problem here is the horizontal position. Regardless of what I've tried, the logo moves horizontally with the size of the window. I want the logo fixed relative to the container div. (2) I've tried to use negative margins and place the logo inside the container div, but this doesn't seem to work either. How should I do this? All suggestions welcome. Thanks! I'm having an issue with a bullet, on www.wirelessguy.net The last bullet isn't showing for some reason. Here is my HTML and CSS. When I take the class off of the HTML the bullets show up fine. Code:
<ul class="phoneOneSpecs">
<li>Color Display</li>
<li>External Caller ID</li>
<li>Voice Activation</li>
<li>Wireless Internet Access(WAP)</li>
</ul>
Code:
.phoneOneSpecs, .phoneTwoSpecs,
{
position: absolute;
top: 5%;
right: 8%;
font-size: 12px;
list-style-type: circle;
}
I've had a good look around for a solution and I've tried applying them to no avail. I can't get the bullet lists to show in ie7 in the block on the right (they show fine in the content (on CV page) : 92 dot 48 dot 108 dot 113 /~legal Any ideas? Also, any quick design hints to improve the site? Can a bulleted list be split in to two collumns? and if so how? I've tried wrapping the list in <div>'s and trying to force it with margins and widths but can't get the result. For example: Code: <ul><li>stuff1</li><li>stuff2</li><li>stuff</li><li>stuff3</li><li>stuff4</li><li>stuff5</li></ul> stuff1 stuff2 stuff3 stuff4 stuff5 Hi everyone, Just two really quick questions. Is there a way to get the list-style-image property to work for in-line unordered lists? And is there a way to remove the first bullet in the list? Thanks for any help. I'm using an external style sheet and a Drupal site. I am pretty much of a CSS novice. No matter what I do, the default bullet is displaying. Sometimes, in the CSS stylesheet, I can have a graphic show up, but the regular bullet is showing as well. I want to make a separate bullet that I can use just on certain pages. It's on the home page of invisibleillnessdocfinder dot com I don't see anywhere to upload the style sheet to show the code. There is a template, so even though I'm putting "List-style=none" the default tiny bullet shows up. I'll be glad to email the stylesheet to anyone who can help. Thanks, Susan Is it possible to make the bullet go on the right hand side of the list item rather than on the left? is it possible to change the bullet point color only of a list? Hi again, fellas. I have another annoyance. I've added some bullets that I want text right next to. I can't get the text to line up directly next to the bullets. I've bordered the two problem div's to make it easier. Could ya'll have a look, please and tell me what is wrong? http://www.bartlett-family.net/test2 Thanks! Chris Hi Guys, I have what i think is a rather odd problem and i have not seen it before. I have just finished creating a wordpress template for my blog which can be found at http://www.mobileshop.com/blog i have pretty much got everything sorted (except Safari pushing the RSS info down) but i have one strange problem in IE. If you look on the right hand bar in a non IE browser you can see that the lists all have a little icon of a phone as the bullet points. Now if you switch to IE then you will see that the first item of each list is missing the phone icon. Even if i swap it back to normal bullets it still misses the first one off. The <li>'s all seem structured fine in the html and my css is as follows... Code:
#rightbar ul li ul {
background: #fff url(images/cat-bg.gif);
background-repeat: repeat-y;
color: #03036a;
padding: 8px;
margin: 0;
margin-top: 0;
}
#rightbar ul li ul li {
margin: 0;
margin-left: 20px;
padding: 0;
line-height: 20px;
list-style-image: url(images/phone-bullet.png);
background: none;
font-size: 120%;
width: 210px;
}
I know its probably not the best code but i cannot for the life of me work out why IE does not display the icon for the first <li> item, anyone have any ideas? Thanx |
|||||||