CSS - Ul A, Li A Spacing Help

Thanks for taking the time to read my question.

The contents in my .ContentContainer are positioned differently in IE6 and FF. I want them to look like FF. What is wrong with my CSS that makes IE6 have more space on the left side of the green globe than FF?

My goal is to have the 2 blue vertical lines line up. They line up in FF and IE7, but not in IE6.

www.scopicdesigns.com/ZoneAll/index.htm

Thanks,

Brad

This is starting to bug me this problem, but on my site www.readinginfo.co.uk the background image (inner shadow and small gradient) at the top is playing up. It doesn't seem to want to align all the way over to the left, however as is always the way, it is working in firefox, ie7, 8 and safari. I've tried some of the ie6 fixes mentioned but I have the sneakiest of feelings that it is to do with the form element (the search box), positioning absolutely just bumps it over to the side. Thanks in advance for any reply!!

I am unable to get ride of the spacing which firefox and IE is doing with <img ...>.
I used margin=0 padding=0 and boarder=0 but still there is a spacing remaining.
i.e. when i put 2 images rigth following, between these 2 images is a spacing, while I want that they are just hitting each other.
can anyone help me?

Code:

example:
<table width="100%" border=0 cellspacing=0 cellpadding=0>
<tr><td><img scr="..." alt="..."></td></tr>
<tr><td><img scr="..." alt="..."></td></tr>

there is spacing between these images even i set the following in the CSS:
 table {margin:0;padding:0;}
 tr {margin:0;padding:0;}
 td {margin:0;padding:0;}
 img {margin:0;padding:0;}

when i put the <img ...> inside <p> commands (below example), then IE shows the images without spaceing (what i want), BUT firefox still has this spaceing between images. i am totaly unable to get ride of those sppaces

Code:

<p><img ...></p>
<p><img ...></p>

and in css:
 p {margin:0;padding:0;}
 img {margin:0;padding:0;}

In both Firefox and IE some of the larger advertisements at the top overlap the content. In IE only, the margin on the bottom of the page does not show up at all.

The website is http://www.socialplay.com.

Please provide help if you know what's wrong.

Thanks.

Hello everyone,

I was wondering if someone could take a look at http://jordanmeeter.com/wp-content/themes/focus-on-content-01/style.css and tell me why on http://jordanmeeter.com/about/ there is no spacing between the two paragraphs? I've looked and looked and looked in the CSS but I can't seem to figure it out!!!

Thanks,
Jordan

Nevermind, I fixed it.

IE strikes again!

My problem is that in ie there seems to be a space in between the main header images and the navigation. In firefox it works great.

Any ideas where I might be going wrong?

You can see what I mean he

html: http://www.kenjones.co.za/norman/
css: http://www.kenjones.co.za/norman/styles/screen.css

And it should look like this:

http://www.kenjones.co.za/norman/images/norm2.jpg

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.

Hello,

What is the best way to adjust the vertical spacing between bullets? I tried inserting a br tag inbetween the li tags, but that isn't "valid" XHTML. So for now I'm using the margin-bottom property...

Code:

li {
	margin-bottom:20px;
}

Any suggestions?

Hi,

q)I have a horizontal menu of 4 text buttons on top on screen and another bit of text on the left of it . I have a text element on far left and 4 text elements on far right . The whole section is in a div tag which displays it in a horizontal bar of 10% height.

To place the text elements of far right I use float but this displays it on line below where i want it. I want text on far left and menu on far right (no spaces between each link) all in the same line.

Code:

#t1 a {font-size:10px;
	font-family:verdana;
	font-weight:bold;
	border:1px outset aqua;
	background-color:aqua;
	color:#000000;
	text-decoration:none;
	display:inline;
	width:15%
	word-spacing: 0;



}
...
<div id="t1">


 This is the 
place where the logo goes

 <a href="#">Java Script</font></a>
<a href="#">Dynamic HTML</font></a>      
  <a href="#">Java Script</font></a>
<a href="#">Dynamic HTML</font></a>  
</div>

I am trying to build out this site
http://realitysol.com/index.php#

In IE it shows up fine. In Firefox there is a space above the navigation Panel.

Any help would be appreciated.

Below is the CSS used for the navigation Section.
Code:

#navibg {
	background-image: url(../images/navibg.jpg);
	width: 500px;
	height: 40px;
	background-repeat: repeat-x;
}

#headerImg {
	height: 250px;
	width: 500px;
}

#navcontainer ul li
{
	list-style-type: none;
	margin: 0;
	display: block;
	float: left;
	background: url(../images/navi-normal.jpg) repeat-x 20px;
	font: 10px/20px "Lucida Grande", verdana, sans-serif;
	text-align: center;

}

#navcontainer a
{
	color: #000;
	text-decoration: none;
	display: block;
	width: 70px;
	border: 1px solid #666666;


}

#navcontainer li#active { background: url(../images/navi-hover.jpg) repeat-x 20px; }
#navcontainer a:hover { background: url(../images/navi-hover.jpg) repeat-x 20px; }
#navcontainer {
	margin-top: 10px;
	margin-left: 30px;

}

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

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

Hey all. I am attempting to create a memberlist type page for my website that has a list on the left and when clicked it shows the members information on the right. I have the positioning down and everything but the problem I am running into is how it displays in IE and Firefox. In Firefox my list looks exactly how I would like it to and works fine. In IE however, the png images i used for the "Memberlist Title" and the bottom rounded edges image appear a different color than the list items... . Also, when clicked the list item stays highlighted with the rollover color and I cant figure out why.
Here is my css its at bestinefight.net/memberlist.php
Code:

/* Memberlist */
#navcontainer { 
width: 210px;
margin-left:109px;
}

#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#navcontainer a
{
display: block;
width: 200px;
background-color: #4B4535;
padding: 0px 0px 0px 10px;
border: 0;
}

#navcontainer a:link, #navlist a:visited
{
font-size:10px;
color: #dbdfaa;
text-decoration: none;
border: 0;
padding: 0px 0px 0px 10px;
outline:none;
}

#navcontainer a:hover, #navlist a:active
{
font-size:10px;
background-color: #8B8063;
color: #dbdfaa;
border: 0;
text-decoration:none;
outline:none;
}

#profile_holder {
background-image:url(profile.png);
background-position:top;
background-repeat:no-repeat;
width:300px;
height:200px;
float:right;
margin-right:30px;
}

#profile {
width:260px;
height:180px;
margin: 40px auto;
}

#memberlist {
width:250px;
height:300px;
float:left;
}

#memberlist_title {
background-image:url(memberlist.png);
width:228px;
height:31px;
margin-left:100px;
}

#memberlist_bottom {
background-image:url(memberlist_bot.png);
height:21px;
width:210px;
margin-left:109px;
}

Here is the code for my page.

Code:

<div id="memberlist"><div id="memberlist_title"></div><div id="navcontainer">
<ul id="navlist">
<li><a href="#">Aslad</a></li>
<li><a href="#">Bilos</a></li>

<li><a href="javascript:ajaxpage('memberlist/Boustij.php', 'profile');">Boustij</a></li>
<li><a href="#">Brak</a></li>
<li><a href="#">Cydian</a></li>
<li><a href="#">Diablo</a></li>
<li><a href="#">Equilibruim</a></li>
<li><a href="#">Cydian</a></li>
<li><a href="#">Faller</a></li>
<li><a href="#">GoOsE</a></li>
<li><a href="#">Melik</a></li>

<li><a href="javascript:ajaxpage('memberlist/Mika.php', 'profile');">Mika</a></li>
<li><a href="#">Nekos</a></li>
<li><a href="#">Normanalata</a></li>
<li><a href="#">O'rian</a></li>
<li><a href="#">Pooga</a></li>
<li><a href="#">Romu'lis</a></li>
<li><a href="#">Sena</a></li>
<li><a href="#">Tepor</a></li>
</ul>

</div>
<div id="memberlist_bottom"></div>
</div>
<div id="profile_holder"><div id="profile"></div></div>

I've been pounding my head on this theme. Here's what it looks like in Firefox and Safari



Here's what it looks like in IE



As you can see there is a spacing issue in IE.

This is a theme for Vanilla which uses list tags to generate the listing of forum topics, I'm trying to stay away from altering the original structure as much as possible (which gets messy), so I use Firebug to help me build the CSS.



Any ideas?

Code:

	
	#pics {
		margin:0;
		padding:0;
		background:#fff;
	}
	#pics ul{
		margin:0;
		padding:0;
		list-style:none;
	}
	#pics ul img{
		 margin:0;
		 padding:0;
         border-style: solid;
		 border-color: #27076A;
		 border-width: thin;
	}	
	#pics li{
		display:inline;
		margin:0;
		padding:0;
	}

  <div id="pics"> 
    <ul>
      <li><img src="images/1.jpg"></li>
      <li><img src="images/2.jpg"></li>
      <li><img src="images/3.jpg"></li>
      <li><img src="images/4.jpg"></li>
      <li><img src="images/5.jpg"></li>
      <li><img src="images/6.jpg"></li>
    </ul>
	</div>

The code above puts pics next to each other but width spaces inbetween them. I got margin and padding set to 0 and cant see why there spaces inbetween them. Am I missing something?