CSS - Separate, Unexpected Horizontal Spacing Problems In Firefox & Ie

Hi guys
I have a simple Wordpress website and I don't know anything about CSS
I used a visual CSS editor called stylise to change a few things but I can't seem to get the spacing

I can't put the URL here because I am a new member, but look at the pics and you will figure it out. Actually urls in pictures are removed as well so no pics. Website is

theinterviewkit dot com

What I want done is some simple spacing:
The add to cart button doesn't line up
I the store page, it is ok when I check the website on safari and Firefox, but on my iPad the add to cart button is beside the quantity box. I'd like it under

Have images I marked up but The forum doesn't allow urls in posts of new users!!!!!! check store page




When you click on the product and go to the product page, the add to cart is slightly to the left of the name and price. I would like it Lined up where the red line is.

On safari and my iPad, it is as you see in the screen shot. On Firefox though, the add to cart button is under the picture.

Unfortunately when I tried editing, any change I did moved the add to cart button on each page that had it (store page and every product page). I'm guessing because I'm editing that element instead of the spacing of the page.

Had Image here but no urls allowed. Check product page


Again, I don't know anything about CSS, only very very basic HTML. If anybody could figure it out that would be awesome.

Here is the industry news page

I have the picture floating either right or left with text beside it - then a line underneath it. I want the line to always be at least 10px below the picture. When the text is less, the line crosses into the picture.

xhtml: Code:

	  
	  <div id="industry"> 
	  
	  <h1>Industry News and Information</h1>
	         
	    <div class="row">
		<span class="imgLeft"><img src="../images/ATS-ERS_thumb.jpg" width="100" height="100" alt="ERS ATS Logo" /></span> 
        <h2>New single set of standards for ERS and ATS</h2>
          <p>Through the combined efforts of the European Respiratory Society (ERS) 
          and the American Thoracic Society (ATS), there is now a new single set 
          of standards for both sides of the Atlantic. <a href="/resources/industry_news/news_ers_ats.html">More 
          ...</a></p>
		  
		  </div>
		
		<div class="row"> <span class="imgRight"><img src="../images/ARTP_thumb.jpg" width="112" height="100" alt="COPD Day at Vitalograph" /></span> 
          <h2>Winter ARTP meeting well attended</h2>
		  <p>Vitalograph recently attended the Association for Respiratory Technology 
            and Physiology (ARTP) 3Oth Annual Conference at the Hilton Metropole 
            Hotel in Brighton. <a href="/resources/industry_news/news_artp.html">More 
            ...</a></p>
			
		  </div>
		  
		  <div class="row">
		  <span class="imgLeft"><img src="../images/ATS-ERS_thumb.jpg" width="100" height="100" alt="ERS ATS Logo" /></span> 
        <h2>New single set of standards for ERS and ATS</h2>
          <p>Through the combined efforts of the European Respiratory Society (ERS) 
          and the American Thoracic Society (ATS), there is now a new single set 
          of standards for both sides of the Atlantic. <a href="/resources/industry_news/news_ers_ats.html">More 
          ...</a></p>
		  </div>
		
        <div class="rowLast">
		<span class="imgRight"><img src="../images/COPDdayoffice_thumb.jpg" width="99" height="98" alt="COPD Day at Vitalograph" /></span> 
        <h2>Vitalograph participates World COPD Day</h2>
		  <p>To mark World COPD Day on 16 November 2005, the British Lung Foundation 
          teamed up with Superdrug to offer a free spirometry test at selected 
          stores across the UK. <a href="/resources/industry_news/news_world_copd_day.html">More 
          ...</a></p>
		  </div>		

       <p class="back"><a href="javascript:history.go(-1)">< Back</a></p>
		  
      </div>

css: Code:

.imgLeft img {
	clear: none;
	float: left;
	margin: 0px 20px 10px 0px;
	border: 1px solid #000099;
}

.imgRight img {
	clear: none;
	float: right;
	margin: 0px 10px 10px 20px;
	border: 1px solid #000099;
}

/*rows*/

.row {
	padding-top: 10px;
	margin-top: 10px;
	border-top: 1px solid #3399FF;
}

.rowLast {
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	border-top: 1px solid #3399FF;
	border-bottom: 1px solid #3399FF;

}

.line {
	border-bottom: 1px solid #3399FF;
	padding-top: 0px;
	padding-bottom: 10px;
}

.inline {
	display: inline;
}



#mainColumn {
	padding: 0px;
	margin-left: 175px;
	background-color: #FFFFFF;
	height: 100%;
}

/*industry news*/

#industry {
	padding-right: 20px;
	padding-left: 20px;
}

#industry h1 {
	margin-bottom: 20px;
}

#industry h2 {
	color: #000099;
	margin: 0px 0px 10px 0px;
}

#industry img {
	margin-bottom: 10px;
}
	
.copdDay img {
	clear: both;
	margin: 0px 40px 15px 55px;
	border: 1px solid #000099;
}

.artp {
	margin: 0px 40px 15px 40px;
}

.artp img {
	clear: both;
	margin: 0px 40px 15px 25px;
	border: 1px solid #000099;
}

Any suggestions on how to get this consistently since through css accounting for varying lengths of text?? I know I can adjust padding/margins for each section to make it work, but I want something that is more universal that I can always use to get the same appearance.


Thanks!

I dont understand the purpose of Browser that behave differently from each other. Couldn't the browser makers just make it result consistently?

This is my code to make my line spacing bigger or padding. I try to do other style changes and it also has the same problems. In Firefox, doing it this way works but in IE, nothing happens.
Code:

h1 {
	font-size: 10px;
	font-weight:bold;
	line-height:50px;
	padding:10px 10px 10px 10px;
}

Code:

h1 {
	font-size: 10px;
	font-weight:bold;
	padding:10px 10px 10px 10px;
}

Then on my web page I put this in on the text I want to customise.
Code:

<h1>Sample Text</h1>

h1 text is inside my little div box.

Am I doing this wrong to achieve what I want?

I created a CSS box where there's a header image & a css box under it, having 3 sides (no top border). It looks good in firefox, but can't get the box to close all the way (by meeting the header image) in explorer. There's a 2-3 px space there.

li'l help please?

I've been trying to solve this for many hours. I'm using CSS and transitional tables. I have content with a box of navigation right aligned within the content table. I need to have a gray line in the content area dividing sections. The width of that gray line is dependent on whehter that navigation box is there or not. I've tried two ways to create the line, a table set at 100% with a gray background color and a <hr> tag that is styled in the css. I thought the hr tag was working, but in NS7, the gray line writes over the navigation box. Here's the page:

http://www.vma.org/paris/nci-intranet/work-life-services-coachin.html

If I use a table width=100%, it starts working in NS7 and Firefox, but stops working in IE.

As you can see from the page, the width of the gray line is dependent on the navigation box to the right. The navigation box is a right aligned table floating within the content box.

Here's my <hr> definition in the css:
hr
{ border: 0;
color: #D5D5D5;
background-color: #D5D5D5;
height: 1px;
text-align: left;
padding: 0px;
margin: 0px;
}

Any ideas? Its driving me crazy, I know there's gotta be a simple solution to having the line take up the same amount of space as the text does and no more. Thanks!

I'm trying two "new to me" things at once here. First, I'm creating a horizontal drop down menu for the first time. Along with that, I'm using the whatever:hover method with the IE behavior fix instead of the conditional comment tables method (which is semantically incorrect).

I've got two problems in IE that can be viewed he
http://www.windrivers-gsp.com/test/index.php

CSS:
Code:

@charset "utf-8";
/* CSS Document */

/* Document Formatting */
html {	width:100%;}

body, tr, th, td, p {	font-family:Verdana, Arial, Helvetica, sans-serif;
						font-size:1em;
						color:#000000;
						margin:0px;
						padding:0px;
						}

#navigation	{	position:relative;
				background:url(design/menubar.gif) #009933;
				background-repeat:repeat-x;
				width:100%;
				height:30px;
				text-align:center;
				display:block;
				}

#nav2	{	position:absolute;
			left:50%;
			width:628px;
			margin-left:-314px;
			}

#container	{	position:relative;
				max-width:1400px;
				min-height:400px;
				overflow:visible;
				margin-left:auto;
				margin-right:auto;
				border-bottom:1px solid #666666;
				padding:15px 10px 10px 10px;
				z-index:2;
				}

#content	{	font-size: 1em;
				margin-right:36%;
				overflow: visible;
				background: #FFF;
				text-align: left;
				height: auto;
				padding-right:10px;
				}

#rightpane	{	font-size: 1em;
				float:right;
				margin-top:0;
				width:35%;
				overflow: visible;
				text-align: left;
				height: auto;
				}

#fixcont	{width:100%;float:left}

/* PIE/Aslett Clear Fix */
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
			
/* New Navigation Menu Styling */

#menu {
width: 100%;
float: left;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 157px;
float: left;
}

#menu a, #menu h2 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
display: block;
border-left:1px solid #FFF;
border-right:1px solid #FFF;
margin: 0;
padding: 0;
height:30px;
line-height:30px;
}

#menu h2 {color: #000; background:url(design/menutab.gif); font-weight:normal;}

#menu h2:hover {background-position: 0 30px;}

#menu a {color: #000; text-decoration: none;}

#menu ul ul a {font-size:.8em; background-color:#a4906d;}

#menu ul ul a:hover {background-color:#CCCCCC;}

#menu ul li {position: relative;}

#menu ul ul {position: absolute; z-index: 10;}

div#menu ul ul {display: none;}

div#menu ul li:hover ul {display: block;}

HTML:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Menu</title>
<link href="menutest.css" type="text/css" rel="stylesheet" />
<!--[if IE]>
        <style type="text/css" media="all">
        body { behavior: url(csshover.htc); font-size: 100%;} 
        #menu ul li {float: left; width: 100%;}
        #menu ul li a {height: 30px;} 
        #menu a, #menu h2 { font: 1em; font-family: Verdana, Arial, Helvetica, sans-serif;} 
        </style>
<![endif]-->
	<meta http-equiv="Content-Language" content="en-us" />
    <meta name="title" content="Test Menu" />
    <meta name="Publication_Date" content="09/07" />
    <meta name="robots" content="ALL" />
    <meta name="revisit-after" content="2 weeks" />

    </head>
<body>
<div id="navigation">
<div id="nav2">
<div id="menu">
<ul>
  <li><h2><a href="index.php">Home</a></h2></li>
</ul>
<ul>
  <li><h2><a href="index.php">Page Two</a></h2>
    <ul>

      <li><a href="index.php">Page 2.1</a></li>
      <li><a href="index.php">Page 2.2</a></li>
      <li><a href="index.php">Page 2.3</a></li>
    </ul>
  </li>
</ul>
<ul>
  <li><h2><a href="index.php">Page Three</a></h2></li>

</ul>
<ul>
  <li><h2><a href="index.php">Page Four</a></h2>
    <ul>
      <li><a href="index.php">Link 1</a></li>
      <li><a href="index.php">Link 2</a></li>
      <li><a href="index.php">Link 3</a></li>
    </ul>

  </li>
</ul>
</div>
</div>
</div>
<div id="container" class="clearfix">
<div id="content"><div id="fixcont">
<p style="text-align:center;">Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; 
Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; 
Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; </p>
</div></div>
<div id="rightpane"><p>Right Side Content</p></div>
</div>
</body>
</html>

Basically, it looks like my #container div has a higher z-index than my menu drop downs, despite stating otherwise in the CSS. Also, the drop down <ul>'s are not directly under the header <ul>, but rather are about 50% off right.

In FF everything looks good, of course. Any ideas?

I'm using this for a horizontal rule, I'm after a 1 pixel blue line...
Code:

hr {
  border: 0;
  width: 98%;
  height: 1px;
  color: #003366;
}

But while I get what I'm after in IE, in Firefox there is nothing, zip, no line at all.

What's wrong?

See the last post for the solution.

Before I get to the CSS and the markup, some background info: I am rebuilding a web-based database to be all-CSS (except for the tabular data, of course). I want to make it accessible in Safari, Firefox/Mac and Firefox/Win. Anything else would be a plus but is not necessary. The markup relies heavily on PHP.

The problem lies with a horizontal nav bar I have at the top of every page. I'm using a modified version of the Suckerfish Dropdown that you can find on either HTML Dog or A List Apart.

In Safari, this works to perfection. In Firefox/Mac, the alignment is a little off (which I'll fix later), but other than that works pretty well. In Firefox/Win, this absolutely blows up all over the place. There are a lot of symptoms to describe, so for now I'll provide the CSS and the markup, and if more description is necessary, I'll provide it as best I can.

Without further ado, here's the CSS for the menu:

Code:

#main_menu {
top: 0;
left: 0;
position: fixed;
width: 100%;
background: #D8DCEF;
margin: 0; padding: 1px 0;
text-align: left;
border: 1px dotted #446CB4;
border-width: 0 0 1px 1px;
}

#nav, #nav ul {
float: left;
list-style: none;
padding: 0;
margin: 0 2px;
font-weight: bold;
}

#nav a { color: #111; }

#nav li, #nav li.search {
float: left;
padding: 1px 4px;
margin: 0 2px;
border: 1px solid transparent;
background: transparent;
text-align: center;
}

#nav li.search { padding: 0 4px; border: 0; }
#nav li:hover { border-color: #3466B1; background: #fff; }
#nav li.search:hover { background: transparent; }

#nav li span { font-size: 9px; line-height: 11px; }

#nav li ul {
position: absolute;
left: -999em;
width: 150px;
font-weight: normal;
border: 1px solid #3466B1;
margin: 1px 0 0 0;
}

#nav li li {
width: 142px;
margin: 0;
padding: 0 4px;
line-height: 1.5em;
border: 0;
background: #fff;
text-align: left;
}

#nav li li a {
display: block;
width: 142px;
text-decoration: none;
padding: 0;
}

#nav li li a:hover { color: blue; }
#nav li ul ul { margin: -1.6em 0 0 150px; }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li li:hover, #nav li.sfhover { background: #D8DCEF; }
#nav ul.end { width: 300px; }
#nav ul.end li, #nav ul.end li a { width: 292px; }
#nav ul.long { width: 165px; height: 300px; overflow: auto; }
#nav ul.long li, #nav ul.long li a { width: 142px; }
#nav li.flyout { background: url(../images/icons/arrow.gif) center right no-repeat #fff; }
#nav li.flyout:hover { background: url(../images/icons/arrow.gif) center right no-repeat #D8DCEF; }
#nav li.separate { border-top: 1px solid #3466B1; background: #EFF1F9; font-style: italic; }

And here's an anonymized version of the markup:

Code:

<div id="main_menu">
	
<ul id="nav">

<li>Menu 1<ul>
	<li><a href="#">Choice 1</a></li>
	<li><a href="#">Choice 2</a></li>
</ul>
</li>

<li>Menu 2<ul>
	<li><a href="#">Choice 1</a></li>
	<li class="flyout">Submenu 2a<ul class="end">
		<li><a href="#">Subchoice 1</a></li>
		<li><a href="#">Subchoice 2</a></li>
		<li><a href="#">Subchoice 3</a></li>
	</ul>
	</li>
	<li><a href="#">Choice 2</a></li>
</ul>
</li>

<li>Menu 3<ul>
	<li><a href="#">Choice 1</a></li>
	<li><a href="#">Choice 2</a></li>
	<li><a href="#">Choice 3</a></li>
</ul>
</li>

<li>Menu 4<ul>
	<li><a href="#">Choice 1</a></li>
	<li><a href="#">Choice 2</a></li>
</ul>
</li>

<li class="search"><form name="search" action=""><input name="name_search" type="text" onFocus="if(this.value=='Search')value=''" onBlur="if(this.value=='')value='Search';" value="Search" size="25"> <input type="submit" name="Submit" value="Go"></form></li>

</ul>
							
</div>

When I comment out the main menu, the pages load just fine, so it has to be somewhere in the code for the main menu (or that means it's somewhere else entirely). Thanks in advance for taking the time to look at my code, and any help at all is extremely appreciated.

Hi all,

I have a horizontal navbar using the old favourite ul/li html list with css doing the layout. Problem is that there is a difference of display between firefox and ie7.

The li tag css is

Code:

li{
 	background:url('../images/li_bg.gif') repeat-x #ff0000;
 	display:inline;
 	padding:0 5px 0 5px;
 	margin:0 2px 0 0;
 }

List html is:

Code:

<ul>
	<li><a href="member.php">Home</a></li>
	<li><a href="profile.php">Profile</a></li>
	<li><a href="help.php">Help</a></li>
	<li><a href="logout.php">Logout</a></li>
</ul>

I reset margin and padding for all other tags in a general css file.

The image is a 1px width gradient.

Looks fine on ie7 but firefox seems to add an extra 2 or 3 pixels of margin.

Used firebug to try and track down the extra but it highlights only the margin and padding I have specified and doesn't give any clues to the additional space.

Have seen plenty of navbar tutorials but not with margin between list elements.

Any help is much appreciated...

Hi Folks,

I'm having problems with some of the divs on my site. Here is the site with the problem areas colorized to highlight the issue...

example

I have 3 columns, but the problem arises in the area marked "panel2". I want the div containing this text to stretch to fill the remaining available space so that the border-left attribute reaches the footer, encapsulating the text in the middle column.

I can't use the border-right attribute of the middle column because of the small indent between panels 1 and 2. I've scoured forums and googled till my fingers hurt, but can't seem to come up with a satisfactory explanation as to why I can't do this.

the CSS is he
styles.css

Any help/suggestions or comments would be appreciated more than I can describe!!

Thanks in advance!!

Hi,

I have an issue with Vertical menu contained in Re-sizable DIV. This menu appears differently in IE vs Firefox (Please refer attached Image)

http://img402.imageshack.us/img402/7830/resize.png

URL

Attached Image

Following is the Code for the Style class mentioned in the image

Code:

.cwc_navMenuLabel {
line-height:14px;
vertical-align:top;
white-space:nowrap;
}

.AccButton{
	float: right;
	align:right;
	text-align: right;
	position: relative;
	top: -1px;
	z-index: 10;
	width: 16px;
	margin:0 5px 0 0;	
}

/*USE THIS FOR IE*/

.AccLiIE {
	display: inline;
	background-color: #A2C2E4;
	background-image: url(../../images/acordion_backgr.png);
	background-repeat: repeat-x;
	border-top: 1px solid #7591AC;
	height: 19px;
	white-space: nowrap;	
}


/*USE THIS FOR NON-IE BROWSER*/

.AccLi {
	background-color: #A2C2E4;
	background-image: url(../../images/acordion_backgr.png);
	background-repeat: repeat-x;
	border-top: 1px solid #7591AC;
	white-space: nowrap;
}

Please let me know the change that i have to do in CSS to make the menu appear in IE the way it looks in Firefox.

Thanks and appreciate your help

Hello. I've spent the past week making my web page. It is currently hosted on my laptop. When I finalize it, I will upload it to a proper hosting service.

I have a job interview for a co-op job for searstravel.ca tomorrow, and I want to make sure my website works across all browsers.

My webpage is at URL.

If you open the page in IE, you will notice a horizontal white space just beneath the image at the top. In Mozilla (suite/Firefox) and Opera the site displays just fine.

I've had the site looked at by a number of friends who are more adept at CSS than me, but to no avail.

I was hoping that someone in here might spot the cause of the display bug.

The CSS file is located at URL.

Thanks for your help everyone!

Hi Everyone,

I'm new to the forum and somewhat new to CSS.

I am developing a simple webpage that has a horizontal unordered list serving as a navigation bar.

Firefox adds what looks like about 20px of extra space above and below the entire list while internet explorer shows it aligned top left.

Eventually I would like to center the unordered list top and bottom, but I can't seem to get any alignment formatting to work at all.

Here is the problem code:
Code:

<div id="navbox">
	<ul id="navbar">
    <li><a href="index.html">HOME</a></li>
    <li><a href="http://showrooms.canadatrader.com/7010/7622">INVENTORY</a></li>
    <li><a href="formapp.html">APPLY NOW</a></li>
    <li><a href="mailto:rjtria@gmail.com">EMAIL ME</a></li>
   </ul>
  </div>

And the corresponding CSS:
Code:

#navbox {
	background-color: #B1C5D0;
	height: 50px;
	width: 760px;
	overflow: visible;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-left-style: solid;
	border-top-color: #333;
	border-right-color: #333;
	border-bottom-color: #333;
	border-left-color: #333;
	color: #036;
	font-weight: bold;
	font-size: 130%;
	font-family: "Courier New", Courier, monospace;
	line-height: normal;
}
#navbar li {
	display: inline;
	list-style-type: none;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: dotted;
	border-right-style: dotted;
	border-bottom-style: dotted;
	border-left-style: dotted;
	padding-right: 10px;
	padding-left: 10px;
	margin: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}

I know it's not much.. but it's making me crazy.
I have tried zeroing out all padding / margins to no avail...

Any help would be greatly appreciated!!
Thanks in advance!
Celeste

How do I fix this CSS-Firefox Issue?

I have a horizontal CSS menu with a width of 400px. There are four elements each with a width of 100px. The height is 50px (if that matters at all). This whole menu is centered using the <center> tag right outside the <ul> tag which I use to center the menu. The following is the CSS I'm using. It's not fully complete with respect to the images. The problem is that the elements (with a width of 100px) will all line up horizontally as expected in IE, but the fourth element drops off (vertical ~20px vertical shift) in Firefox. I have tried adjusting the width of the <ul> in the CSS and it will bring all the elements on the same horizontal level if I change the width to 500px, but it doesn't center the menu anymore. Is there anyway I could center my menu without the error in Firefox.

CSS:
#nav {width:400px; list-style:none; overflow:hidden;}

#nav ul li {padding: 10px; list-style-type:none; display:inline; /*text-indent: -9999px;*/}

#nav a {display:block; float:left; text-decoration:none; outline:none; width:100px; height:35px;background-image: url(MenuBar.gif);}

#home {}
#home:hover {background-position:0 -100px;}
#products
#products
#history
#history
#contact
#contact

#nav a:link {color:blue;}

#nav a:hover {color:green;}

a {outline:none;}

HTML:
<td width="80%" id="nav"><center><ul id="nav">
<li><a href="#" id="home">Home</a></li>
<li><a href="#" id="product">Products</a></li>
<li><a href="#" id="history">History</a></li>
<li><a href="#" id="contact">Contact</a></li>
</ul></center>
</td>

[This menu is organized by a large table, hence the 80% width which helps organize the elements of the page]

PLEASE Help me. I can't seem to get it working.

EDIT: Solved.