CSS - Link Bar Spacing

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

I am new to doing layouts in CSS and have a page (on an existing site) that I just did using CSS.

The problem that I am having is that the "content" div has unwanted space above and below the div. I have padding & margins set to zero for the content div.

Page is he http://www.prairieplugs.com/Sample1/sample1.htmlhttp://www.prairieplugs.com/Sample1/sample1.html

CSS is he
http://www.prairieplugs.com/Sample1...ieplugscss1.css

Below is the CSS that is applicable:

Code:

body {
	margin: 0px;
	padding: 0px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: .9em;
	color: #000;
	background-color: #008F13;
	background-image: url(images/bgbottom.jpg);
	background-repeat: repeat-x;
	background-position: bottom;
	background-attachment: fixed;
}

#wrapper {
	width: 900px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 15px;
}

#wrapper #header {
	background-image: url(images/headerSamp1.jpg);
	margin: 0px;
	padding: 0px;
	height: 276px;
	background-repeat: no-repeat;
}
#wrapper #nav {
	background-color: #FFF;
	background-image: url(images/navSamp1.jpg);
	background-repeat: no-repeat;
	height: 60px;
	width: 900px;
	margin: 0px;
	padding: 0px;
	text-align: center;
}
#wrapper #content {
	background-image: url(images/contentSamp1.jpg);
	background-repeat: repeat-y;
	margin: 0px;
	width: 900px;
	background-color: #FFF;
	padding: 0px;
}
#wrapper #footer {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	background-repeat: no-repeat;
	height: 79px;
	background-color: #FFF;
	background-image: url(images/footerSamp1.jpg);
	margin: 0px;
	padding: 0px;
}
#wrapper #nav ul {
	margin: 0px;
	list-style-type: none;
	text-align: center;
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	color: #060;
}
#wrapper #footer p {
	text-align: center;
	margin: 0px;
	padding-top: 25px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}

#wrapper #nav ul li {
	display: inline;
	border-right-width: 3px;
	border-right-style: solid;
	border-right-color: #000;
	font-size: 1.2em;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-variant: small-caps;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 10px;
}
#wrapper #nav ul li.last {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

#wrapper #nav ul li a:visited {
	text-decoration: none;
}
#wrapper #nav ul li a:hover {
	color: #000;
	text-decoration: underline;
}

#wrapper #nav ul li a {
	text-decoration: none;
	color: #FFF;
}
#wrapper #content p {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 1em;
	text-align: left;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 15px;
}

I have a drop down menu that works great in Chrome but in IE 9 I am getting spaces between my images for my navigation bar. My HTML is as follows...

HTML
Code:

<ul id="nav">
<li><a href="#"><img src="../../images/global/header/home_btn.jpg" width="77" height="29" border="0" /></a>
<ul>
<li><a href="#" style="color:#000;">About Asthma</a></li>
<li><a href="#" style="color:#000;">Treatment</a></li>
<li><a href="#" style="color:#000;">Taking Control</a></li>
<li><a href="#" style="color:#000;">Lifestyle</a></li>
<li><a href="#" style="color:#000;">Resources & Support</a></li>
</ul></li>
<li><img src="../../images/global/header/spacer01.jpg" width="17" height="29" border="0" /></li>
<li><a href="#"><img src="../../images/global/header/kids_btn.jpg" width="66" height="29" border="0" /></a></li>
<li><img src="../../images/global/header/spacer01.jpg" width="17" height="29" border="0" /></li>
<li><a href="#"><img src="../../images/global/header/allergy_btn.jpg" width="67" height="29" border="0" /></a></li>
<li><img src="../../images/global/header/spacer01.jpg" width="17" height="29" border="0" /></li>
</ul></li></ul>

I have tried everything in my CSS to eliminate the spacing between the image files with no luck. Does anyone see what I am doing wrong here?

PROBLEM: I create a nice button using the sliding doors technique for rounded corners. But the button displays with 100% width unless I float it. My layout requires that the buttons be inline with the text, so floating won't work. Anyone know an alternative?

I wouldn't mind floating but I want the button to show inline with the text. When I use float:left, it removes it from the inline flow.

Basically, I want a very modular button that can be used in several different places on a page. In many cases, floating is fine because the mockup has it out of the inline text, but I want to use it there, too.

Here's the HTML:

<a class="button" href="#"><span>Update Profile</span></a>

Here's the css:

a.button:link, a.button:visited {
background:url(button_right.gif) no-repeat right top;
}
a.button span:hover, a.button span:active {
background:url(button_left_hover.gif) no-repeat right top;
}
a.button span {
background:url(button_left.gif) no-repeat left top;
color:#fff;
cursorointer;
display:block;
height:20px;
line-height:20px;
margin:0 2px 0 0;
padding:0 10px;
position:relative;
white-space:nowrap;
}

http://tinyurl.com/5llwfl

I'm having some problems with this page in particular. Try clicking on one of the Left or Right white image arrows below the main picture. This only occurs in Firefox 2.x. Once you click the link, the content area below "Starting from $278.497" should shift roughly 5 pixels down.

I thought it may be related to the dotted link outline that surrounds the image, but that was not the case. I applied styles to get rid of that and there was no changes.
I also thought it may be related to a position:relative; bug which this site has been notorious for. I tried making certain divs in that area position:relative to no avail. So to test further I tried an overall #content *{position:relative;} fix which could not fix the position shift, either.

I'm not sure what else it could be. And while I do have access to the build of this app, I have not been able to reproduce the issue by downloading all HTML, CSS, and image files locally.

hello all,

I have been working on a web site that is constructed 99% using divs and CSS. I have a unwanted space that is appearing in the main image in Internet Explorer on PC. MAc IE, Safari, Mozilla (PC), etc. work fine.

Can someone see what is happening...I hope so!

You can see the site at www.obsign.com

Here is the code that I am working with:

Code:

<body>


<script language=JavaScript>
function Navigate() {
var number = NavSelect.selectedIndex;
location.href = NavSelect.options[number].value; }

</script>
<table class="boundaries">
	<tr>
		<td class="vertical">

			<center>
			<div id="site">
			<div class="padding">
			<div class="navigation"><div class="navigation">
		
	<a href="index.php?id=2&sid=5c19320a27327c185d6699bf516e47ea" onmouseover="changeImage('about.jpg','customizations/uploadedmedia/images_navigation/about_over.jpg');" onmouseout="changeImage('about.jpg','customizations/uploadedmedia/images_navigation/about.jpg');"><img name="about.jpg" alt="About Us" src="customizations/uploadedmedia/images_navigation/about.jpg" 
	width="94" height="30" border="0" /></a><a href="index.php?id=4&sid=5c19320a27327c185d6699bf516e47ea" onmouseover="changeImage('services.jpg','customizations/uploadedmedia/images_navigation/services_over.jpg');" onmouseout="changeImage('services.jpg','customizations/uploadedmedia/images_navigation/services.jpg');"><img name="services.jpg" alt="Services" src="customizations/uploadedmedia/images_navigation/services.jpg" 
	width="94" height="30" border="0" /></a><a href="index.php?id=6&sid=5c19320a27327c185d6699bf516e47ea" onmouseover="changeImage('resources.jpg','customizations/uploadedmedia/images_navigation/resources_over.jpg');" onmouseout="changeImage('resources.jpg','customizations/uploadedmedia/images_navigation/resources.jpg');"><img name="resources.jpg" alt="Resources" src="customizations/uploadedmedia/images_navigation/resources.jpg" 
	width="94" height="30" border="0" /></a><a href="index.php?id=8&sid=5c19320a27327c185d6699bf516e47ea" onmouseover="changeImage('contact.jpg','customizations/uploadedmedia/images_navigation/contact_over.jpg');" onmouseout="changeImage('contact.jpg','customizations/uploadedmedia/images_navigation/contact.jpg');"><img name="contact.jpg" alt="Contact" src="customizations/uploadedmedia/images_navigation/contact.jpg" 
	width="94" height="30" border="0" /></a>

</div>			
	


</div><div class="locations"><img alt="Cincinnati, Ohio  -  Cleveland, Ohio  -  Austin, Texas" src="customizations/safeharbor/templates/images/locations.jpg" 
	width="362" height="30" border="0" /></div><div class="clear"></div><div class="logo"><img src="customizations/safeharbor/templates/images/logo.jpg" 
	width="195" height="281" border="0" /></div><div class="image"><div class="main_1"><img name="width='533px' height='237px'" alt="The Safe Harbor Group, LLC" src="customizations/safeharbor/templates/images/main_1.jpg" 
	width="533" height="237" border="0" /><br><img name="width='278px' height='21px'" alt="The Safe Harbor Group, LLC" src="customizations/safeharbor/templates/images/main_2.jpg" 
	width="278" height="21" border="0" /><select style="vertical-align:top; padding:0px; border:0px; margin:0px; width:189px;" name="NavSelect" onChange="Navigate(this.form)"><option value="" SELECTED>Choose the Solution for You:<option value="#">Option 1<option value="about:blank">Option 2<option value="#">Option 3</select><img name="width='66px' height='21px'" alt="The Safe Harbor Group, LLC" src="customizations/safeharbor/templates/images/main_3.jpg" 
	width="66" height="21" border="0" /><br><img name="width='533px' height='22px'" alt="The Safe Harbor Group, LLC" src="customizations/safeharbor/templates/images/main_4.jpg" 
	width="533" height="22" border="0" /></div></div>
			<div class=""><h1>HOME&nbsp;BODY</h1>
<p class="general_text">Now that you have installed the system, please proceed to customize and populate with content.</p></div>
			</div>
			</div>
			</center>

		</td>
	</tr>
</table></body>
</body>

</html>

Code:

html {
	width:100%;
	height:100%;
}

body {
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
	background-image: url('http://www.obsign.com/customizations/safeharbor/templates/images/bg.jpg');
	background-repeat:repeat
}

img {
	margin-bottom: 0px;
}


#site {
	text-align:left;
    width:770px;
	padding:0px;
	border:0px;
	margin:0px;
	background:#ffffff;
	border:1px solid #CFC9C0;
}

table {
    font-size: 100%;
}

a.breadcrumb {
    color: #444444;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    text-decoration:none;
}

a.breadcrumb:visited {
    color: #888888;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    text-decoration:none;
}

ul {
	margin-bottom:5px;
	margin-top:5px;
	padding:0px;
	border:0px none;
	list-style-type:square; list-style-image:url('/uploadedobjects/images/bullet.gif')
}

li {
	padding-top:3px;
}

.text_highlight {
	background: #FDFD00;
	color: #000000;
}

.clear {
	clear:both;
}

.gentext {
    font: normal 110% Tahoma, Verdana, Arial, Arial Narrow, sans-serif;
    color:#666666;
}

.gentext a {
    font: normal 110% Tahoma, Verdana, Arial, Arial Narrow, sans-serif;
    color:#666666;
}

input.liteoption	{
	background: #efefef;
	font: normal 100% Verdana, Arial, Arial Narrow, sans-serif;
	color:#444444;
	text-align:center;
	padding: 1px;
	border: 1px solid #dddddd;
	border-bottom: 1px solid #aaaaaa;
	border-right: 1px solid #aaaaaa;
}

input.searchoption	{
	font: bold 100% Verdana, Helvetica, Arial, sans-serif;
	background-color : #eeeeee;
	color : #000000;
	border: 1px solid #000000;
}

input.text {
	font: normal 105% Verdana, Helvetica, Arial, sans-serif;
	border: 1px solid #dddddd;
	border-top: 1px solid #aaaaaa;
	border-left: 1px solid #aaaaaa;
}

select {
	font: normal 100% Verdana, Helvetica, Arial, sans-serif;
	color: #000000;
}

.form_label {
	font:bold 100% Verdana, Helvetica, Arial, sans-serif;
	display:inline;
	color:#000000;
}


.search_text{
	font:normal 9px Verdana, Helvetica, Arial, sans-serif;
	color:#000000;
	border-top:#000000;
	border-left:#000000;
}

.boundaries {
	width:100%;
	height:99%;
}

.vertical {
	vertical-align:middle;
}

.padding{
	padding:16px;
}

.navigation{
    border:0px;
	margin:0px;
	float:left;
	width:376px;
}

.locations{
    border:0px;
	margin:0px;
	float:right;
	width:362px;
}

.logo{
	padding:10px 10px 10px 0px;
	float:left;
    border:0px;
	margin:0px;
}

.image {
	padding:10px 0px 10px 0px;
    border:0px;
	margin:0px;
}

.main_1{
	float:right;
	background:#EAE3DB;
    border:0px;
	white-space:nowrap;
	margin:0px;
	padding:0px;
}

is there a way to control the pixel amount a br will space in IE and FF so it's the same distance or is there just an issue in my css causing extra space?

I have a division on my web page. I've set the width to 800 and the height to 100.

Inside of the division I have 3 nested divisions

The first holds a logo and is positioned absolutely within the wrapping division so that it appears on the left side. The division has a background image and the word "HTML" that is centered both vertically and horizontally within the nested division.

The second nested division is positioned so that the text within it appears in the upper right of the wrapper.

The third nested division is positioned so that the text displays in the lower right hand.

The problem is that in IE I am getting alot of white space between the bottom of the wrapper and the bottom of the third nested division.

This does not happen in firefox.

Can anyone tell me what is hapening here.

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

as is common with divs is the auto return at the bottom of them... i have this CSS page...

http://defunctgames.com/helpfix/page1.htm

the only problem with it is the space underneath "All Websites: Reviewed!"

here is the original HTML version of this section..

http://defunctgames.com/helpfix/page2.htm

can you please help me get the same exact result as the HTML version thanks.

Lets say I had a list like this in html

<ul>
<li>the first link</li>
<li>the second link</li>
<li>the last link</li>
</ul>

then in CSS

ul{
letter-spacing:4px;
}
*left out some code, I'm concerned about this atm though:

Is there a way where I can space groups of words, so that instead of looking like this...
Code:

the   first   link   the   second  link  the  last  link

it looks likes this:
Code:

the first link         the second link       the last link

for my final result, I'd like to put pipes between these groups of spaced words
Code:

the first link   |   the second link  |   the last link

I'm not sure how to space those groups of words. Can anyone help?

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?