CSS - Firefox Adding Odd Spaces

Hi!

I have a problem in Firefox with a layout located at: link removed. Please follow this path: Executive Furniture > Executive Desks > The Haydon Range - and then select a product.

Don't open a new tab, refresh the page or resize the text and scroll down. There is a huge gap between the last 'related items' product and the card images.

Now if you open a new tab, resize the text or refresh the page, the gap disappears and won't re-appear until you close the window and re-open the site in a new window (start a new session maybe).

I have a feeling this has something to do with margins or it may just be a bug - I haven't a clue!

The relevant CSS is situated at link removed.

The main template layout is shared between the other CSS files in that directory, but they aren't relevant to that part of the layout. I apologise for it not being the most efficient CSS in the world .

You'll have to "view source" for the HTML; and this I won't apologise for, because it's being spat out by the crappiest piece of shopping cart software ever. It took me 4 months to get it to validate (originally 850+ errors)!

Anyway, if any of you could help me figure out why Firefox is displaying this big margin I would be eternally grateful.

Cheers

I'm using a two column layout (main, sidebar), and within the main column, there is a section that breaks into two columns. I'm using this code: Code:

<div>
  <p>Some main column content</p>
</div>

<div id="inner_col_wrap">
  <div id="col_left">
    <p class="col">Cum sociis natoque penatibus et magnis dis parturient montes</p>
  </div>
  <div id="col_right">
    <p class="col">Cum sociis natoque penatibus et magnis dis parturient montes</p>
  </div>
</div>

<div>
  <p>Some more main column content</p>
</div>

The problem is that some of the content that follows the two column block ("Some more main column content") is pushed up into the "col_right" DIV when "col_left" and "col_right" are not equil ("col_right is shorter than "col_left", and there is space at the bottom).

How to keep the conent that follows the two column block out of it?

is there a way using css to control how much space is below and above a form button, because I have a lot of form buttons and the space between them is killing my design.


Thanks

Hello, I have question regarding proper use of CSS, so I can get web site layout to display properly in both IE and Firefox.

At the moment it's laid out properly in FF, but I have some problems with IE.

The cells of a table "deform" while browsing in IE.
This is how it looks like:
URL
http://i38.tinypic.com/5ffe6q.gif
Here is html of the cells in question:
Code:

<table class="cHs" width="1000" border="0" align="center" cellpadding="0" cellspacing="0" background="pic/topcenter.jpg">

<tr>
<td colspan="3" class="cHs" width="1000" height="145"><img src="pic/logo.jpg"  border="0">
</td>
</tr>

<tr>
<td class="cHs" background="pic/left.jpg" width="47" valign=top></td>
<td class="cHs" align=center width="906" background="pic/backcen.gif" class=interior valign=top>
<td class="cHs" background="pic/right.jpg" width="47"></td></tr><tr><th align="left" valign="top" scope="row" height=\"37\" background="pic/bottom1.gif"></th><td class="cHs" height="37" width="906" background="pic/bottom2.gif" align="center" valign="top">
</td>
</tr>
</table>

Here is used CSS:
Code:

table.cHs{ background: transparent;
border: none;
}

td.cHs { border: none;

}

Does anybody see a problem?
Thanks in advance.

Hi

I've trying to use a UL list to display a menu on my site. I'm having a problem with spacing tho. No matter what I do, there always seems to be a slight space between the LI elements.

Code is as follows:

PHP Code:
#menu {
    margin: 0;
    padding: 0;
    list-style: none;
    
}



<ul id="menu">
    <li><a href="thestore.php"><img src="images/menu_thestore.gif" width="195" height="36" border="0" alt="The Store" onmouseover="this.src='images/menu_thestore_over.gif'" onmouseout="this.src='images/menu_thestore.gif'" /></a></li>
    <li><a href="steel_toe_cards.php"><img src="images/menu_steeltoe.gif" width="195" height="36" border="0" alt="Steel Toe Cards" onmouseover="this.src='images/menu_steeltoe_over.gif'" onmouseout="this.src='images/menu_steeltoe.gif'" /></a></li>
    <li><a href="locations.php"><img src="images/menu_locations.gif" width="195" height="36" border="0" alt="Locations" onmouseover="this.src='images/menu_locations_over.gif'" onmouseout="this.src='images/menu_locations.gif'"/></a>
</ul> 





Would it be something to do with the fact I'm using images as menu options?? There's always a slight space between them, and I can't figure out why!

In both FF and IE, my site

http://niosis.awardspace.com/polend.html

doesn't display right. Look at the link below to see exactly how it is supposed to look.

Here is how it is supposed to look:

http://niosis.awardspace.com/tempsliced.html

but of course that uses tables so I'm fixing it, and as you could see in the previous link having problems doing so.

and if you think it looks bad in Firefox, just open up internet explorer and take a look at it. ewww....

Anyways, thanks in advance to anyone who can help me.

The XHTML Validates strictly.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<table cellpadding=0 cellspacing=0 border=0 style="margin:0;padding:0;">
<tr style="margin:0;padding:0;">
<td style="border:1px solid black;width:120px;height:90px;text-align:center;margin:0;padding:0;">
	<img src="http://www.gamertagpics.com/filesave/k/Ku/s_Kurow_Shinobi.jpg" style="margin:0;padding:0;height:100px;">
</td>
</tr>
</table>
</body>
</html>

I made it as simple as could be. 1 table, with 1 row, with 1 cloumn with 1 image. EVERYTHING has a margin of 0 and padding of 0. Why is there still a space below the image? Please tell me how to remove this space.

Hi everyone,

I am working on a conceptual design with basic js rollovers and css. When I center the divs I get a small horizontal space between the divs. I have only tested this in firefox.

My css for each div is:

#foo{
margin: 0 auto;
text-align: left;
background: #006600;
width: 800px;
}

and the page can be seen he
bdgplans.com/concept/roll2.html

I have an asp page that displays some text which is formatted by a stylesheet. The colour of the text box depends on the text itself.

For example, the information displayed is a risk. If the risk is 'None', the box is white, if it is 'High', the box is red, etc.

The class is determined programmatically, according to the actual risk. In the stylesheet I have a class called 'None', another called 'High', etc.

The problem I have is that one of the risks is 'No Risk' which obviously has a space in it. The text MUST say 'No Risk' so the solution is not to have text with no space in.

How do I create a class in my stylesheet called No Risk? If I type it literally, with the space, it doesn't recognise it.

I have a procedure that selects the Risk from a database table. The asp page has the following line to set the class:

Response.Write "<td class=" & chr(34) & Replace((rs.Fields.Item("risk").Value) , " ", "") &"2" & chr(34) & ">" & (rs.Fields.Item("risk").Value) & "</td>"

Any help would be very gratefully receive it as I am rapidly running out of hair!

Thank you.

Hello folks,

I have this page Code:

(chep-net.com/main_nav)

and on the left side of the table cell it always renders a small space.

I tried cellpadding 0. Did I miss something?

At http://www.glish.com/css/7.asp there is a 3 column layout, I have taken it and put it all inside one containing <div>. I am trying to get the columns to have spaces between them, but they won't seperate without going to the bottom of the page. Here are the relevant styles:
Code:

        #main {
	margin:auto;
	width:800px;
		}
	body {
		margin:10px 10px 0px 10px;
		padding:0px;
		}
	
	#leftcontent {
		float:left;
		width:180px;
		height:400px;
		background:#fff;
		border:1px dashed #000;
		}

	#centercontent {
		float:left;
		margin:auto;
		background:#fff;
		width:400;
		height:1000;
		border:1px dashed #000;
		}
	
	html>body #centercontent {
   		margin-left:auto;
   		margin-right:auto;
		}

	#rightcontent {
		float:left;
		width:180px;
		height:400px;
		background:#fff;
		border:1px dashed #000;
		}

The first and second columns separate but not the third
Code:

<div id="main">
<div id="banner">
<h1>TITLE</h1>
</div>
<div id="leftcontent">
<h1>leftcontent</h1>
</div>
<div id="centercontent">
<h1>centercontent</h1>
</div>
</div>
<div id="rightcontent">
<h1>rightcontent</h1>
</div>
</div>

Thank you

[EDIT]
Nevermind, after looking at the "Nested Float" example on glish, I just nested it and float:right. If anyone is interested here is the updated #rightcontent style (now called #main #rightcontent)
Code:

#main #rightcontent {
		float:right;
		width:180px;
		height:400px;
		background:#fff;
		border:1px dashed #000;
		}

All you have to do is change the name and the float.

Can you have the a class name as follows:

<tr class="row one">
.

So Im having this problem where when the user inserts a word with more than 15 chars with no spaces, that word will come out of my Code:

.product_wrap .title {width:120px;}

Div.

Code:

<style type="text/css">
body {background:#CCC;
	  padding:5px 5px 0px 5px;
	  margin:10px 5% 0px 5%;
	  min-width:210px;
	  }

/*PRODUCTS*/
.product_wrap {background:#FFF;
				margin:0px;
				min-width:210px;
				max-width:600px;}
	  
				   
.product_wrap div {background:#093;
				   margin:5px;
				   padding:0px;
				   min-height:100px;
				   float:left;}

.product_wrap .title {width:120px;}
<style/>
<body>
<div class="product_wrap">
  
<!--Title-->
<div class="title"><?php echo htmlentities($_POST['title']);?></div>
</div>
</body>

How can I amend this?
Thank you in advance.

I'm new to CSS, so I apologize if this is quite elementary.


www.thinkblue2008.com

Among the obvious stylistic things I'm working on, I need to get the deadspace areas figured out first.

Basically, how can I
a) get the columns to automatically extend (ie, white down to the footer)
b) get rid of the space between

Thanks, in advance, for your time and patience.