CSS - Ie/ff Spacing Issue When Rendering List<ul><li>

I have this:

Code:

li {
	line-height: 25px;
}

Which does sort of what I want. What I really want is for the spacing between bullets to be 25px and the line spacing within a bulletted point to be normal .. is there a way to do that?

Hi,

I was wondering if it's possible to space out seperate blocks of text within a <ul> element?

So for instance:

Code:

<ul>
<li>Caption1 Caption2 Caption3</li>
</ul>

In that code I want to have each word spaced out a set amount. I guess I'm basically trying to emulate table rows, but I can't use tables for what I'm trying to do.

Hey all,

I am just starting to develop a new site for my web design company, though i'm doing it in mac os x env using camino, so to my horror, when i finally got around to checking it in IE, I discovered that everything was horribly wrong. All of the div's that were supposed to be floated left are now overlapping the right float. I've read a few articles which all suggest different things, i.e. putting 'display: inline' in all the float styles. That didn't work.

I don't have the time to figure it all out though I'm sure it's a simpleish solution. I'd really appreciate the help.


Pete

Hello. I just created my first web layout using DWCS4 with CSS. On desktop browsers, it view great. However, when I view it on my iphone, the divs are not connected and a line is shown. The line goes away when I pinch in to view but reappears when I zoom back out.
How can I fix this? My header div and content div contains an image and are set to no borders.

Hi there guys,

This is a pretty specific problem to my website, but I can't seem to find out why part of my navigation list moves down when an element is shown by Javascript in IE.

So I can't plug in a url into this post, so I suppose I'll just explain the problem. I have a list navigation with images, and within one of the list elements is another nested list. When I click on the link that then uses JS to display the subnavigation, the link below that shifts down something like four pixels when its not supposed to, and I couldn't fix it by playing with CSS for some reason, but I'm assuming the problem is hidden in there somewhere. I've been trying to resolve this for a couple days; if anyone could help me out, I'd really appreciate it!

Is there a way to decrease a default spacing between bullet and text in <ul>?

Trying to follow "the best practices" I wanted to convert my menu from bunch of <a></a><br> to unordered list. I already display arrows icon next to menu items so I though it would save me some typing on <img>. But there is one problem: I can't decrease the space between bullet and text. There is bullet, around one em of empty space and then text. It breaks my layout, making menu items wrap to another line, and also wastes some space. I tried to play with margins and padding, but bullets still stay at the same place. Also negative margin and padding doesn't seem to work. If I use a background image instead of bullet, I can adjust the spacing but then the bullet position doesn't seem consistent and get cramped on text in longer lines.

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?

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;


 } 

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

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

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.