CSS - Bullet To Text Spacing Problem In Ie 7

I've used bullet image for a list but it give more indent then i want to use. I've checked the padding and marging for the other DIV ID's and set all to zero but also there is more indent in the left side. How is it possible to reduce the left indent for the list?

Code:

.test1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	height: 15px;
	color: #003366;
	text-align: left;
	list-style-image: url(bullet1.gif);
	border: 1px solid #000099;
	list-style-position: outside;
	width: 150px;
	margin: 0px;
	padding-top: 5px;
	padding-bottom: 5px;
}
#test2{
	width:215px;
	background-image: url(1bg-menu-v-mid.gif);
	background-repeat: repeat-y;
	border: thin solid #000066;
	float: left;
}

Its been a long time now and I am finnaly getting back into website desiging. I am doing a simple coding but I am having a hard time trying to figure out how to do the following.

I want to create a table but using only divs. So basically I am going to have a parent div acting as the whole table then sub-div acting as each row, and within those divs there will be more divs acting as each cell.

But I can't figure out how to make each cell be right next to each other instead of on the next line. How do I make it look like below:

|<div>| |<div>| |<div>| |<div>|
|<div>| |<div>| |<div>| |<div>|
|<div>| |<div>| |<div>| |<div>|
|<div>| |<div>| |<div>| |<div>|


Also, what CSS properity do I have to use so that the content of each cell will overlap with all th surrounding cells? By overlap I mean so they will be touching each other.

I am presently new at CSS, and I need help with this little problem.

Basically, I am creating a design and on Photoshop I have the following..

jerrytavares[dot]com/phpform/ex1.gif

Then when I convert it into HTML i have this..

jerrytavares[dot]com/phpform/ex2.gif

Now I need help spacing out the checkmark/rss image from the text. What is the best and easiest way to do this with CSS?

Thanks,
Peter

Hi,

I want to show the contents of a textarea as normal text in a preview block with all the text spacing intact.

Name: ABC
Age: 22
Place: World

Somehow the spacing of the text is not displayed as in the textarea. How can this be done.

Thanks

I'm not that familiar with css yet...so this might be a stupid question.
I'm creating this website for my department. on the index page, there are several lists of links. between the links there is line spacing. but some link name is too long it got wrapped under. the wrapped under text also have line spacing. this makes the viewer feels that there are 2 links instead of one. how can i make the wrapped under text go right under without the line spacing?
here is the link if you wanna see how it looks like now.
http://www.scienceevents.uwaterloo.ca/

for example under the first left hand side menu, international year of astronmy is one link. but it looks like 2 links. how can i make them move together?

this is the css for the primary nav
Code:

#primary_navigation { 
	background:url(../images/primary_navigation_bg.jpg) no-repeat; /* This controls the background image on the home page. */
	width:960px;
	height:200px;
	margin-top:20px;
	font-size:0.75em;
	clear:both;
}

#primary_navigation ul {
	list-style:none;
	margin-left:-20px;
	height:110px;
}

#primary_navigation ul li {
	line-height:2.0em;
	margin-right:5px;
}

Hey, all. Just wondering if anyone knows of a proper way to get rid of vertical space between text fields in a form. IE seems to like to have 2px in there, where other browsers will give me the desired 0px. For example: Code:

<input type='text' value='test' style='margin:0px; display:block;'>
<input type='text' value='bottom' style='margin:0px; display:block;'>

Gives me 2px of space between the 2 fields, but only in Internet Explorer.. Any thoughts?

Is it possible to adjust the line spacing in text using CSS because pressing return in text, the spacing is either too big or too small. I want control of line spacing so that I can have text and paragraph control like I do with Word documents.
eg.
A
B
I want the distance from A to B to be either greater or smaller.

Can you also control the space between letters?
eg.
AB
I want the spacing between A to B further or closer.

Is this all possible on a HTML page without having to use images for text or using tables to seperate each text line on a table to create different line spacing.

If I have a couple of paragraphs of text and would like to adjust the space when you press return to start a new paragraph, how would I add it to my styles code below. Right now, a hard and soft return is too big and I would like the spacing to be about half the font size of the text.

How would I add it to my stylesheet code in this example: Code:

.bodytext {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	text-decoration: none;
	text-align:right;
	font-weight: none;
	background-color: #ffffff;
        line-height:1.5;
        letter-spacing:-0.02em;
}

On this page: http://www.poweredpages.com/newtarget/ctia/ there's an spacing problem in IE. Hover over one of the links on the main bar to get the sub link tray. Hover over the first two links in a vertical set, and it will work fine. Hover over the THIRD link, and in that link and any link below it there's extra padding on the top of it. But all these links have the exact same CSS associated with them. Very odd. Works fine in FF.

Here's the code and the CSS:

Code:

<div id="showtray" class="tray" onmouseout="hide('showtray','linkinfo')" onmouseover="show('showtray','linkinfo')">
	<div class="traynav">
		<ul>
			<li><a href="/info/">General Information</a></li>
			<li><a href="/info/registration_packages.cfm">Registration Prices & Policies</a></li>
			<li><a href="/info/keynote_sessions.cfm">Keynote Sessions</a></li>
			<li><a href="/exhibit/">Exhibit Floor</a></li>
			<li><a href="/info/ed_sessions.cfm">CTIA Educational Sessions</a></li>
		</ul>
	</div>
	<!-- 5 links to a column ONLY!  Any more and start a new column, lke this one -->
	<div class="traynav">
		<ul>
			<li><a href="/info/seminars.cfm">Partner Seminars</a></li>
			<li><a href="/info/green.cfm">Green Practices</a></li>
			<li><a href="http://www.ctia.org/conventions_events/convinfo/info.cfm">Receive Information</a></li>
			<li><a href="/info/international.cfm">International Guests</a></li>
		</ul>
	</div>		
	<div class="trayimage whitetext smalltext"><img src="images/show.jpg"><br />Stars of the Show</div>					
</div>

Code:

.tray{
position:absolute;
z-index:500;
top:30px; 
left:0px;
visibility:hidden;
background-image:url(../images/blackback.png);
width:920px;
height:130px;
border-bottom:3px solid #4CADCE;
padding:20px
}
.traynav{
	float:left;
	padding-right:15px;
}
.traynav ul{
	margin: 0px;
	list-style-type: none;
	padding: 0px;
	clear: both;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	border-top: 1px dotted #c2dae2;
}
.traynav ul li{
	list-style-type: none;
	padding: 0px;
	clear: both;
	border-bottom: 1px dotted #c2dae2;
	font-size:11px;
	margin:0px;
	width:200px
}
.traynav li a:link, .traynav li a:visited {
	color: #FFFFFF;
	display: block;
	background-image: url(../images/arrow_orange.gif);
	background-position: 4px 7px;
	background-repeat: no-repeat;
	padding-top: 5px;
	padding-right: 8px;
	padding-bottom: 5px;
	padding-left: 15px;
	text-decoration: none;
}
.traynav li a:hover, .traynav li a:active {
	background-color:#4cadcf;
}
.trayimage{
	float:left
}
.trayimage img{
	border: 1px dotted #c2dae2;
}

Thanks

In IE, there is a space between my div's. Can someone help me fix it?

Attached is a sample htm and graphics or see he
PHP Code:
<div id="red" align="center">
    <img src="red.gif" width="500" height="100">
</div>
<div id="blue" align="center">
    <img src="blue.gif" width="500" height="100">
</div> 





Thanks.

I just launched my first website and I am having a little problem with spacing, it is pretty obvious. I tried the _ hack, and I played with some padding, but I couldn't get the thing to budge in IE.

the site is (psugmb.com)

Please help!

Thank you!

::Kyle

Well, I am stumped as they say. I have a horizontal menu bar which I am unable to get it to display with the same amount of space above and below it with IE and firefox. So if you would take a look at this page
http://www.cacct.com/new/mission.php
and here is the style sheet http://www.cacct.com/new/css/sitestyle.css

The menu content is called by a php include. Notice the difference between IE and firefox. What I would like is the same amount of light blue above and below.
Things I have tried...
Adjusting the padding and margins to header and maincontent.

Tried placing the menu bar in a div but in Firefox the bar actually hangs over the bottom edge of the div. I put a border around the div so I could see it. In IE it is contained within the div (though it is a bit too long for a single line there so wraps around). This probably wouldn't work anyway since the menu is a drop down and needs to overlap the maincontent.

Just to look at it, I moved the menu bar up to different places. Inside the header below the address still same problem. Between the logo and address same problem. When I move it to the top, above the logo it appears to be the same distance from the top of the border.

So, anyone have any ideas on how to get that spacing the same?

tk

I'm stumbling through learning CSS with the help of some great people (here and elsewhere), and I've almost got a complete, working template, but I'm having a problem with (surprise) IE.

I'm using nav boxes on the left and the right, and within the nav boxes I'm using unordered lists to define the menu options. In Firefox it works perfectly, in IE it adds an additional space to the bottom of each list item. Does anyone have any clue what's going on? I've tried to define the margins to 0, but that doesn't seem to do anything.

http://www.mcconaha.com/css_refined.php
http://www.mcconaha.com/css_refined.css

Code:

     <div class="navbox">
        <h3>Navigation</h3>

        <ul>
          <li><a href="#">. News</a></li>
          <li><a href="#">. Junk</a></li>
          <li><a href="#">. Pics</a></li>
          <li><a href="#">. Downloads</a></li>
		  <li><a href="#">. Links</a></li>
        </ul>
      </div><!-- end navbox -->

Hey guys,
First post here. I've scoured the web for answers, searched this forum, and visited many CSS sites (alistapart, maxdesign.com.au, positioniseverything, htmldog, etc.) and haven't seen a problem like this. I'm learning CSS as we speak (or more correctly, as I type), and here's the issue. I have a space between my #header and #page. I can't get rid of it unless I put a border around the #page.

I've posted four screens here so you can see what's going on in Safari and Firefox (the two browsers I use). #1 is what the site looks like now (as the code is below). #2 is with the #header removed, #3 is with the #header removed and a 1px border put around the #page, and #4 is with the #header there and the #page has a 1px border. It seems to me that the #page has a top margin, and I've tried margin-top: 0px; and tons of other combos, but I can't get that space to go away unless I put a border around #page.

Here's my css:
Code:

/* basic elements */
body { 
	font: 8pt/16pt georgia; 
	color: #000000; 
	background: #AEAEAE url(images/butterflybg.gif) no-repeat top center; 
	}
p { 
	font: 8pt/16pt georgia; 
	margin-top: 0px; 
	text-align: justify;
	}
h1 { 
	font: italic bold 14pt georgia; 
	letter-spacing: 1px; 
	margin-bottom: 0px; 
	color: #000000;
	}
h2 { 
	font: normal bold 12pt georgia; 
	letter-spacing: 1px; 
	margin-bottom: 0px; 
	color: #000000;
	}
h3 { 
	font: normal 12pt georgia; 
	letter-spacing: 1px; 
	margin-bottom: 0px; 
	color: #000000;
	}
a:link { 
	font-weight: bold; 
	text-decoration: none; 
	color: #FFFFFF;
	}
a:visited { 
	font-weight: bold; 
	text-decoration: none; 
	color: #D4CDDC;
	}
a:hover, a:active { 
	text-decoration: underline; 
	color: #9685BA;
	}

/* divs */
#header {
	background: url(images/2006_Header.png) no-repeat;
	width: 697px;
	height: 127px;
	padding: 0px;  
	margin: 0px auto;
	}
	
#page {
	width: 697px;
	background: url(images/2006_WideExt.png) repeat-y center; 
	margin: 0px auto; 
	padding: 0px;
	}

#nav {
	background: url(images/2006_LNav.png) no-repeat left;
	padding: 0px;
	margin: 0px;
	width: 175px;
	height: 306px;
	float: left;
	}

#content { 
	background: none transparent;
	margin-top: 0px;
	}
	
#text {
	}

#footer { 
	text-align: center; 
	}

And my html:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

	<title></title>
	
	<link rel="stylesheet" type="text/css" href="style.css" />
	
</head>

<body>

<div id="header">
	</div>
<div id="page">
	<div id="nav">
	</div>
	<div id="content">
		<div id="text">
			<p>put text here</p>
			
		</div>
		<div id="footer">
			<a href="http://devshed.com" title="Forums">xhtml</a> &nbsp; 
		</div>
	</div>
</div>


</body>
</html>

Am I overlooking something simple?

Hi,
Why there is such a big vertical space between table and element (div class="frm_container)
in Internet Explorer 6.
There is no space like that in Mozilla Firefox.
What can I do about it?
Thank you.
Code:

<head>
<title>Title</title>

<style type="text/css">
.frm_container {
    padding: 0px;
	margin: 0px;
	border: 1px solid #000;
	background-color: #fff;
}
</style>

</head><body><div class="frm_container">
<form name="register" enctype="multipart/form-data" method="post" >
<table><tr>
<td align="right">Username:</td><td><input type="text" name="user" /></td>
</tr></table>
</form></div></body></html>