CSS - Floating Div Causes Strange Bullet Behavior

Hello,

I am having an issue with some background images. Ive finally decided on a method to create my rounded corners. I am using three divs, a top bottom and center content div.

The top and bottom divs have a background image for the top and bottom portions of the curved box. The center div contains the content and a background image repeating along the x-axis. Problem is, the image repeating stops just shy of the top and bottom images. Is there a way to solve this? When I place a border around the center div, the repeating image portion suddenly fills in the gaps, which I don't quite understand.

Here is a link to a development area where I am displaying the problem: http://www.ioforge.com/ezt-example/index.html

Hi there.

I have a blank space that appears as a link when my animated T-R MENU button is clicked.

Click here to view the problem

It didn't do this in the last version of FF... I can't see why it's doing it, there aren't blank spaces in the code to make it behave this way.

Opera, Safari and IE view it fine. Just FF3 that's doing it.

Can anyone shed some light on why it's doing this or how to fix it?

Thanks in advance.

Hello there. I'm afraid I can't provide a live example because it's a complicated commission that hasn't yet been published, but I'll try to be as specific and detailed as possible.

My overall aim: To have a squarish div on the left hand side and a few short rectangular divs vertically stacked on the right hand side of a container. The container is a div whose width is known. The stacked rectangles must have a minimum width but there is some margin for error. All these divs are separated by margins.

Code:

OOOO  ===
OOOO 
OOOO  ===
OOOO
OOOO  ===

There are other, unrelated blocks above and below this arrangement, and there are blocks nested within these divs as well, all unrelated though.

So how did I implement this? I figured this was simple enough:

Code:

<div>
  ...
  <div class="left-square">...</div>
  <div class="right-short-rectangle">...</div>
  <div class="right-short-rectangle">...</div>
  <div class="right-short-rectangle">...</div>
  ...
</div>

And the CSS would then look something like this:

Code:

.left-square {
  width: 100px;
  height: ...px;
  float: left;
}

.right-short-rectangle {
  margin-left: 110px;
  margin-bottom: 5px;
  height: ...px;
}

So, this works just fine in Firefox and Internet Explorer. However, for some reason, Chrome doesn't like it. What Chrome does is, it completely ignores the margin on the right-short-rectangles, placing them underneath the floating left-square, but giving them the correct width (the width of the container minus the margin).

By fooling around with the DOM inspector, I discovered that if I remove the margin attribute from one of the rectangles, they show correctly (in Chrome). However, they obviously will break in Firefox and Internet Explorer if I do that. Also, if I remove the float attribute from the square, Chrome suddenly recognizes the margins of the rectangles properly (when it no longer matters).

So, does anyone have any idea about what's going on here?

EDIT: I just noticed this and it is certainly relevant: The right-short-rectangles contain a few *unstyled* divs and one div that is floated to the RIGHT (in other words, content I want to have on the right hand side of each of these rectangles). Without this inner, right-floated div, the margin issue no longer happens in Chrome. The inner div is, however, essential. What can I do? Use tables?

This pertains to the "last nail in the coffin" so to speak in cross-browser compatability with the template for this site.

The template is at http://www.spearsphotography.com/test_index.html

The effect in question is on paragraph tags in the news item elements under the pagebody id div. (e.g., #pageblock div.story p ).

Essentially, in every browser -except- IE Windows, the line spacing is as intended by the design. In IE6Win (haven't tested 5, but assume same) the lines are too-tight.

Can anyone see the problem here, or has experienced this before?

CSS File is at: http://www.spearsphotography.com/css/style.css

Thanks.

Hi all,

I'm building my first experimental CSS site, and I'm trying to attain accessibility for the widest array of users. While testing various browser settings, I came across this issue.

(I'm looking at the site in IE, as I'm at work. I'll be able to look it over in other browsers when I get home.)

When my site is viewed with text set to "Medium," everything appears fine:

http://www.flickr.com/photos/251449...in/photostream/

When my site is viewed with text set to "Larger," the text in the middle left section doesn't fit:

http://www.flickr.com/photos/251449...in/photostream/

Fair enough. But here's what has me stumped: when the site is viewed with the text set to "Largest," it fits again:

http://www.flickr.com/photos/25144998@N00/4997174984/

I've learned alot very quickly in the last week or so, but this really has me over a barrel. Any ideas?

CSS

Code:

body
{
background-color: #393939;
font-family: sans-serif;
font-size: 100%;
margin: 0;
padding: 0;
}

.header
{
text-align: right;
font-weight: bold;
font-size: 1.6em;
}

.clickables
{
text-align: right;
font-weight: bold;
font-size: 0.95em;
}

.content
{
text-align: right;
font-size: .8em;
}

.navbutton
{
float: right;
width: 5em;
background-color: #ffcc00;
color: #666666;
height: 1em;
text-align: right;
font-weight: bold;
font-size: 0.95em;
margin: .75em 0.2em .75em 0em;
}

#mother
{
margin-left: auto;
margin-right: auto;
min-width: 720px;
max-width: 1000px;
width:expression(document.body.clientWidth > 1000? "1000px": "auto" );
width:expression(document.body.clientWidth < 500? "500px": "auto" );
}

#UpperLeftWrapper
{
float: left;
width: 35%;
background-color: #7d7d7d;
}

#UpperLeft
{
height: 8em;
margin: 0;
background-color: #7d7d7d;
}

#UpperRightWrapper
{
float: right;
width: 65%;
background-color: #666666;
}

#UpperRight
{
float: right;
width: 7em;
height: 7em;
margin: 0;
padding: .5em;
background-color: #666666;
color: #ffcc00;
}

#MiddleLeftWrapper
{
float: left;
width: 35%;
background-color: #ffd426;
}

#MiddleLeft
{
float: right;
width: 8em;
height: 1.2em;
color: #7d7d7d;
background-color: #ffd426;
margin: 0;
padding: 0.6em;
}

#MiddleRightWrapper
{
float: left;
width: 65%;
background-color: #ffcc00;
}

#MiddleRight
{
float: right;
width: 24.85em;
height: 2.45em;
background-color: #ffcc00;
margin: 0em .6em 0em 0em;
}

#LowerLeftWrapper
{
float: left;
width: 35%;
background-color: #e5e5e5;
}

#LowerLeft
{
float: right;
width: 5.8em;
height: 75em;
color: #7d7d7d;
background-color: #e5e5e5;
padding: 0.7em;
}

#LowerRightWrapper
{
float: left;
width: 65%;
background-color: #ffffff;
}

#LowerRight
{
float: right;
height: 88em;
color: #666666;
background-color: #ffffff;
padding: 0.8em 1.1em 2em 2em;
}

HTML

Code:

<!DOCTYPE html>
<HTML>
<HEAD>
<META CHARSET="UTF-8">
<title>layout three</title>
<link rel="stylesheet" type="text/css" href="comp.css" />
</HEAD>
<BODY>
<div id="mother">

	<div id="UpperLeftWrapper">
		<div id="UpperLeft" class="header">
		</div>
	</div>
	<div id="UpperRightWrapper">
		<div id="UpperRight" class="header">
		<p>demonstration<br>layout<br>number two</p> 
		</div>
	</div>

		
	<div id="MiddleLeftWrapper">
		<div id="MiddleLeft">
		  <div class="clickables">
		  <p>additional reading</p>
		  </div>
		</div>
	</div>
	<div id="MiddleRightWrapper">
		<div id="MiddleRight">
		  <div class="navbutton">
		  <p>tab one</p>
		  </div>		  
		  <div class="navbutton">
		  <p>tab two</p>
		  </div>
		  <div class="navbutton">
		  <p>tab three</p>
		  </div>
		  <div class="navbutton">
		  <p>tab four</p>
		  </div>
		  <div class="navbutton">
		  <p>tab five</p>
		  </div>
		</div>
	</div>

	<div id="LowerLeftWrapper">
		<div id="LowerLeft" class="clickables">
		  <p>
		  first link<br>
		  second link<br>
		  third link<br>
		  fourth link<br>
		  fifth link<br>
		  sixth link<br>
		  seventh link<br>
		  eighth link<br>
		  </p>	
		</div>
	</div>
	<div id="LowerRightWrapper">
		<div id="LowerRight" class="content">
		  <p>
		  Body content here...
		  </p>
		</div>
	</div>

</div>
</BODY>
</HTML>

Thanks in advance for any advice!

I haven't seen this one before. And I can't for the life of me figure out what could be causing this.
Take a look at This Page
To see what I'm talking about, you'll need to view it in a good browser first (Mozilla, Netscape, Opera) Then look in IE.
Basically there's an H3 that also serves as a link to my RSS Feed page.
You don't see it in IE unless you actually hover the mouse over it. Even then, if you move the mouse over the menu on the left, the heading disapears again. At first I thought it could be because it was a heading, but on another page a regular link does it too.
I've got two stylesheets, and it does it on both.
Any thoughts or suggestions?
Here's the main stylesheet

Hello to all,
I have a problem of compatibility when using Safari (V3).
I have a strange interface and i can't identify the problem. When I refresh my page,I don't have the same css !!!!
The same interface is testing wit hFirefox and IE and it's ok.
Can you help me please.
Thank you in advance for your time.

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

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?

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 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 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>

is it possible to change the bullet point color only of a list?

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?