CSS - Spacing Issue With A List Of Entries

I'm having a problem with my content div positioning in IE 6 only. The best way to show my issue would be to show you a screenshot of the issue with both IE 6 and IE 7 (see attached) IE6 is on the left and IE7 on the right.

index.php
Code:

<div id="main">    
    <div id="content">
        <div class="leftColumn">
            <?php include_once "includes/inc_leftColumn.php"; ?>
        </div>
        <div class="rightColumn">
                <?php include_once "includes/inc_rightColumn.php"; ?>
        </div>
        <div class="middleColumn">
            <?php include_once "includes/inc_index_page.php"; ?>
        </div>
    </div>
    <div id="footer">
        <?php include_once "includes/inc_footer.php"; ?>
    </div>
</div>

attached stylesheet
css Code:
Original - css Code #content { width: 970px; height: auto; /*min-height: 500px;*/ margin: 0px 0px 0px 0px; background: url('/media/images/global_content_background.gif') repeat-y; } #content div.leftColumn{ min-height: 435px; margin-left:5px; padding:15px 15px 15px 15px; float:left; width:170px; z-index:1; text-align: left; vertical-align: text-top; background: url('/media/images/global_leftcolumn_background.gif') no-repeat; } #content div.middleColumn{ min-height: 435px; padding:15px 15px 15px 15px; float:right; width:530px; text-align: left; vertical-align: text-top; } #content div.rightColumn{ min-height: 435px; padding:15px 15px 15px 15px; margin-right:5px; float:right; width:170px; text-align: left; vertical-align: text-top; background: url('/media/images/global_rightcolumn_background.gif') no-repeat; }

  

  


  


 #content {


     width: 970px;


     height: auto;


     /*min-height: 500px;*/


     margin: 0px 0px 0px 0px;


     background: url('/media/images/global_content_background.gif') repeat-y;


 }


  


 #content div.leftColumn{


     min-height: 435px;


     margin-left:5px;


     padding:15px 15px 15px 15px;


     float:left;


     width:170px;


     z-index:1;


     text-align: left;


     vertical-align: text-top;


     background: url('/media/images/global_leftcolumn_background.gif') no-repeat;


 }


 #content div.middleColumn{


     min-height: 435px;


     padding:15px 15px 15px 15px;


     float:right;


     width:530px;


     text-align: left;


     vertical-align: text-top;


 }


 #content div.rightColumn{


     min-height: 435px;


     padding:15px 15px 15px 15px;


     margin-right:5px;


     float:right;


     width:170px;


     text-align: left;


     vertical-align: text-top;


     background: url('/media/images/global_rightcolumn_background.gif') no-repeat;


 } 

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?

Hi all - I've got an issue and hoping someone has an idea how to help.

I'm trying to correct an alignment issue within a page only using css - without modifying the code.

What I have is a DIV with a SPAN and an INPUT box inside. The INPUT box should be set at 100% and aligned to the right. However, the SPAN section causes the textbox to scoot over outside of the div. How can I set the INPUT box to 100%, and stay within the DIV?

I'd like to share an image to show you what I mean, but apparently since I'm new - I cannot do that.

Any help would be greatly appreciated.

Hi Guys,

I am having a small problem with IE, the height between <p> tags is considerably different to that of firefox.

I think it is a padding problem but i am unable to crack it. The area i am referring to is the left side of the page where the two forms are and the images text.

my website is here

my css file can be found here


Any suggestions?

Hi everyone,

I'm a little stumped on why I'm having a wide space showing up when viewing a particular page with FF and not IE7.

Take a look at the following page...

http://spotabusiness.com/View-user-profile.html?user=403

Notice the big space between the profile picture and the tabbed box below it in FF. This space doesn't exist when using IE7.

Thanks for any input

Greetings,
I am attempting to increase the space between the navigation links listed on the left column of this index page.
fop27.org/fopnet/FPT/
I have been trying add spacing between these flash images for hours to no avail. Ideally, I would like to add approx half inch of spacing between each image to balance out the page.
I have minimal knowledge of css and would greatfully appreciate any assistance.
All the Best!

Theres a small spacing issue thats only coming up in opera for the navigation on this site. It seems to be only 1px, but I cant for the life of me find out where its coming from. The hover background doesn't extend all the way down, as it does in firefox/ie. I think its some issue with top:32px; in nav ul li, but I don't know what the solution is. Any help is appreciated.

Demo link at www.ryancolantuono.com/test



Code:

 
body {
	font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
	margin: 0;
	padding: 0;
	
}

#content {
	color: #555;
	margin: auto;
	width: 780px;
	
}


/* ----------------------- HEADER ----------------------- */
#top-header {
	background-color: #000;
	height: 20px;
	color: #eee;
	border-bottom: #555 solid 1px;
	
}

#top-header .login {
	float: right;
	margin: 5px 10px 0 0;
	font-size: .7em;
}

#top-header .login a{
	text-decoration: none;
	color: #70d5d4;
}

#mid-header {
	background: #222 url("../images/mid-header.png");
	height: 55px;
	
}

#bot-header {
	background: #4eaead url("../images/bot-header.png") repeat-x;
	height: 105px;
	
}

/* ----------------------- END HEADER ----------------------- */


/* ----------------------- NAVIGATION ----------------------- */

#nav {
	float: left;
	margin: 0 15px 0 0;
}

#nav ul {
	margin: 0;
	padding: 0 70px 0 0;
	display: block;
	list-style: none;
}

#nav ul li {
	top: 32px;
	display: inline;
	position: relative;
	clear: both;
	
}

#nav ul li a {
	font-size: .8em;
	color: #fff;
	text-decoration: none;
	padding: 3px 12px 3px 12px;
}

#nav ul li a:hover {
	background-color: 70d5d4;
	color: #000;
	-moz-border-radius: 3px;
	-webkit-border-top-left-radius: 3px;
	-webkit-border-top-right-radius: 3px;
	padding: 5px 12px 5px 12px;
}

/* ----------------------- END NAVIGATION ----------------------- */

Code:

<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen"/>

</head>
<body>

<div id="top-header">
  <div class="login">Have an account? Login <a href="#">here</a>.</div>
</div>
<div id="mid-header">
  <div id="nav">
	<ul>
	  <li><a href="#">Home</a>
	  <li><a href="#">About Us</a>
	  <li><a href="#">Portfolio</a>
	  <li><a href="#">Links</a>
	  <li><a href="#">Contact</a>
	</ul>
	  
  </div>

</div>
<div id="bot-header"></div>



</body>
</html> 

Hi there,

I am building a site which is working fine in Netscape but is not showing correctly in IE 6. The yellow line I have is not "listening" to its 10px height and there is some mystery spacing occuring around it at well....I have looked around, but can't seen to figure out what the fix is. I would really appreciate some help!

Here is the .css and the link: http://www.kohlrbaby.com/vcc/boxlesson.htm

body {
margin: 0px 0px 30px 0px;
padding: 0px 0px 0px 0px;
font-family: verdana, arial, helvetica, sans-serif;
color: #eee;
background-color: #ffffff;
text-align: center;

}
a {
text-decoration: none;
color: #eee;
outline: none;
font-size: 12px;

}
a:visited {
color: #ccc;

}
a:active {
color: #ccc;

}
a:hover {
color: #990000;
text-decoration: underline;

}
p {
font-size: 12px;
line-height: 22px;
margin-top: 0px;
margin-bottom: 0px;

color: #000000;
text-align: left;

}
#head {
padding: 0px;
margin-top: 30px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto; /* opera does not like 'margin:20px auto' */
border-top: none;
border-right: 1px solid #43709e;
border-bottom: none;
border-left: none;
text-align:left;
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 726px;
height: 110px;

}
#yellowStrip{

width: 726px;
background-color: #e7d77e;
height: 10px;/*height is not functioning?? */
padding: 0px;


}
#lftBar {
width: 93px;
background: #43709e;
float: left;

}
#mainBox {
border-right: 1px solid #43709e;
margin-top: -1px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto; /* opera does not like 'margin:20px auto' */
background: #43709e;
border-top: none;
width: 726px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 726px;
}
.innerbox {
padding: 30px;
background-color: #ffffff;
margin-top: 0px;
margin-bottom: 0px;
margin-right: auto;
margin-left:93px;


}
#bottom {
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto; /* opera does not like 'margin:20px auto' */
background: none;
border: none;
border-top: none;
text-align:left;
voice-family: "\"}\"";
voice-family:inherit;


}
#bottomText{
padding: 0px;
margin-top: 10px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto; /* opera does not like 'margin:20px auto' */
background: none;
border: none;
border-top: none;
text-align:center;
voice-family: "\"}\"";
voice-family:inherit;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
color: #ccc;
}

So I am using tables for a specific part of a website and I'm running into a problem with how IE vs Everything else is treating the CSS for it.

I have the padding and margins set to 0 for the table/cells/rows etc and this works perfectly in everything BUT.......wait for it...........wait for it........ IE where it is putting what I believe to be a 2px cellpadding which wouldn't matter except that the background color and border are different colors so it looks bad. Now the only way I've been able to solve this is by adding a 'cellspacing="0" cellpadding="0" in the HTML of the table...but this then messes things up for every OTHER browser..... Anyway around this seeing as how apparently css has no 'cellpadding or cellspacing' attribute?

the 2 pages below have some general layout css issues, like too much white space above the grey line AND though they both use the same right bar (I uses a PHP include) the format is different in both. The green line is the toughest...it won't extend the height of the page.

Any ideas?

I attached my style sheet as well. thanks.

http://bowtree.org/latest/luminaries.php
http://bowtree.org/latest/index.php

This may actually be a css not a javascript question. Those two are so tightly coupled the distinction blurs. My apologies if it is in the wrong forum.

I adapted this social network bookmarking thing that I've seen kicking around.
It uses prototype and scriptaculous that is why I am posting it here.

It basically has an icon for each social network with a custom link to save the current page to the network in question. It appears on the following page

http://demo.tixrus.us/calendar.php?filter=all

below the calendar. The spacing is all wrong when it first renders, I want all the icons to be jam packed together. As you can see, it messes up and puts the last one at the beginning of a new row (not what I want). Now if you hide them and then click Social Networks again, they appear the way I wanted them in the first place. Is it because in the source
each icon is on its own line?
Code:

<a href="xxxxx"><img ....../></a>
<a href="yyyyy"><img ...../></a>

as opposed to jam packing the codes into extremely long lines
Code:

<a href="xxxxx"><img ....../></a><a href="yyyyy"><img ...../></a>

I remember this being an issue with most browsers many yrs ago..
I could run each row together on a huge line but it would make the code template even harder to read and maintain than it already is. So if there is some style thing I can do I would prefer to do that. The stylesheet for this stuff is at the bottom of

http://demo.tixrus.us/styles/tixstyles.css

I already explicitly set the height and width for the icons (they weren't previously) and that is fine but it was never the issue and it doesn't solve the spacing issue.

Hi,
This renders ok in firefox but not in IE, it places extra space between the elements. Can someone correct it for me please, i cant see where im going wrong. Thanks.

the CSS:
Code:

#menu {
	margin: 0px;
	padding: 0px;
	border-top: 1px solid black;
	border-left: 1px solid black;
	border-right: 1px solid black;
	
}
#menu ul {
	border: 0px;
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	text-align: center;
}

#menu ul li {
	display: block;
	text-align: left;
	padding: 0px;
	margin: 0px;
}


#menu ul li a {
	border-top: none;
	border-bottom: 1px solid black;
	padding: 2px;
	margin: 0px;
	text-decoration: none;
	display: block;
}

#menu a:link, #menu a:visited {
	color: black;
	text-decoration: none;
}

#menu a:hover, #menu a:active {
	background-color: #fffed9;
}

the html:
Code:

<div id="menu">
  <ul>
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
    <li><a href="#">item 4</a></li>
    <li><a href="#">item 5</a></li>
  </ul>
</div>

plug this in and view it in ie and you'll see what i mean.

Hey,

Page in question

In FF, the top menu (laser tag, arcade etc.) works well...'glo golf' is sitting on the 'bear factory' option as it should...no dice in IE, i don't know what the deal is.

here's the css;

Code:

#activities {
position:absolute;
top:233px;
left:-5px;
width:760px;
height:80px;
margin:auto;
}

#activities a {
text-decoration:none;
display:block;
height:80px;
}

#activities li#glogolf a { background-image:url(images/glogolf_button_off.gif); }
#activities li#glogolf a:hover{ background:transparent; }
#activities li#glogolf { background-image:url(images/glogolf_button_roll.gif); width:190px; height:40px; float:left;}

#activities li#bearfactory a { background-image:url(images/bearfactory_button_off.gif); }
#activities li#bearfactory a:hover{ background:transparent; }
#activities li#bearfactory { background-image:url(images/bearfactory_button_roll.gif); width:190px; height:40px;float:right;}

Thanks!

Im having spacing issues with my main navigation. I cant get rid of the spaces between the li. There are these white spaces between the dark gray navigation. Ive tried putting negative px in my li and my paddings/margins for li are 0. I am fairly new to css and this is my first list navigation. Any help is appreciated.

THANKS

Code:
CSS

#pipe {
	font-size:13px;
	}
#pipe ul {
	float: left;
	margin-top: 74px;
	margin-left: 143px;
	padding: 0;
	display: inline;
	} 

#pipe ul li {
	
	margin-top: 0px;
	margin: 0px;
	padding: 0px 0px;
	/*border-left: 1px solid #000;*/
	list-style: none;
	display: inline;
	width: 100%;
	}
	
		
#pipe ul li.first {
	background-image: none;
	margin-left: 0;
	margin-right: 0;
	border-left: none;
	list-style: none;
	display: inline;
	}
	

	
#pipe li a:link {
	/*background-image:url(images/navline.gif);*/
	background-color:#999;
	color:#333333;
	padding: 19px;
	margin-right: 0px;
	text-decoration: none;
	
}

#pipe li a:visited {
	/*background-image:url(images/navline.gif);*/
	background-color:#999;
	color:#333333;
	padding: 19px;
	margin: 0px;
	text-decoration: none;
}

#pipe li a:active {
	/*background-image:url(images/navline.gif);*/
	background-color:#999;
	color:#333333;
	padding: 19px;
	margin: 0px;
	text-decoration: none;
}

#pipe li a:hover {
	color:#ffffff;
	background-image:url(images/navline_on.gif);
	padding: 19px;
	margin: 0px;
	text-decoration: none;
}

Code:
HTML

<div id="pipe">
<ul>
<li><a href="(a href="")">HOME</a></li>
<li><a href="(a href="")">WHAT WE DO</a></li>
<li><a href="(a href="")">SEMINAR</a></li>
</ul>
</div>

Here are a couple of questions, all are in reference to THIS LAYOUT

1) There seems to be an Internet Explorer issue where bullets don't always show up on list items, any ideas how to fix this?

2) It wont validate in XHTML simply because of two urls I use, anyone have any hacks as to how to fix this?

3) I've only been able to test on IE and Firefox, so if anyone is on a different browser and can let me know of any other issues it would be amazing.

Thanks in advanced!