CSS - Css Navbar Spacing Issue

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

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

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> 

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?

I have a list of faculty members with a picture and bio for each entry and I am having trouble creating a consistent amount of vertical space between the entries. This is because some of the bios are shorter than the picture and some are longer, requiring me (for the shorter entries) to add <br />s to the bio to reach the end of the picture. Of course, depending on the browser and display settings, a greater or smaller number of <br />s are needed to get to the end of the picture so code that looks right on one pc does not look right on another. Here's a sample of the code I am using:

Code:

<h3 class="blue_title">Bob Smith</h3>
<p><em><img height="141" width="120" src="images/stories/bob.jpg" alt="bob" style="margin: 7px 10px 0px 0px; float: left;" />Faculty in Math and Physics.</em><br />The quick brown fox jumped over the lazy dog. <em>Since&nbsp;1999.</em></p>
<br /><br /><br />
<p> </p>
<h3 class="blue_title">Edgar Jones</h3>
<p><em><img height="141" width="120" src="images/stories/edgar.jpg" alt="edgar" style="margin: 7px 10px 0px 0px; float: left;" />Faculty in Spanish, Greek, Latin,<br />and Latin American History.</em><br />he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog.<em>Since&nbsp;2005.</em></p>
<p> </p>

Because the bio in the first entry is short, I need those three extra <br />s to reach the bototm of the picture (otherwise the next entry floats up and into the first). But as a result, the spacing between entries where the top entry needed <br />s looks wrong compared to other entries depending on the user's individual settings.

Any sugestions for how to fix this problem? I guess I could set up a table and use different rows for each entry, but I was hoping not to need a table.

Thanks.

(p.s. - I am using joomla for this site but I don't think that's relevant to this question.)

Trying to resolve the spacing issues when using a list. IE honors the set margin while FF appears to add much more amrgin spacing. I have tried using display:inline but when I do, I lose the haning indent.

Any suggestions?

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.

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

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.

Well, I am finishing up my portfolio website, and I am running into an issue with the footer.

For the CSS for my footer I have:

Code:

.footer {
	background-image: url('images/header-top.gif');
	background-repeat: repeat-x;
	background-color: #2b2f36;
	width: 100%;
	height: 80px;
	margin-top: 900px;
	color: #FFFFFF;
	text-align: center;
	padding-top: 30px;
}

I have to have the "margin-top" because if I don't it will automatically be set to the top, behind everything else. On Firefox, and IE7 it seems to be coming out good, only issue is with IE6. I am aware that IE6 has spacing issues, is there a simple hack or quick fix I can do? If not, what is the best solution to do this?

The link to the site is www.peterbarbosa.net

Thanks,
Peter

I found a horizontal Dropdown menu I really want to emulate he Austin360.com

What I like about it is that the widths of the top level list items adjust to the widths of their text -- rather than all being the same width. Also the top level list appears to "stretch" horizontally, filling up the entire width of the container. (Although I can't see any widths anywhere in the stylesheet!) How'd they do that?

Firstly I'm a new member here so hi to everyone.

I am fairly new to css. I am trying to create a navbar menu with css, I have used ul and li for the links and its positioned on the left hand side of the page, just where i want it, but my problem is I cant seem to get my text paragraphs to lie at the side of the navbar, they either are above it or below it, obviously im doing something wrong but not sure what.



Many Thanks.

Hi all,

I recently started making a site is css and I had no problems until I came to making the navigation bar. Now I want to have like a button effect on the text so I made this:

Code:

a.navbar:link {
	display:block;
	position:absolute;
	height:25px;
	width:150px;
	background-color:#FFCC99;
	top:40px;
	left:0px;
	z-index:1;
}

The only problem is that if I apply this to all my navbar links they overlap each other because the positioning is always the same.

Any help much appreciated!

Jack.

ive been at this for a while now. i have a navleft.gif, navbody.gif, and navright.gif.

what i want to do is make an expandable nav bar with the body repeating on the x axis. every attempt ive made doesnt work. im still fairly new to css.

should i have a <div id="nav"> and within this div put a another div with id=navleft and another with navright? no idea how to go about this. any help would be appreciated.

..