CSS - How To Eliminate Margin Around Images In A Div

I have tried every suggestion that I can find on the web, and still IE insists on putting spacing between cells in my tables when I don't want it.

Just go to my home page: www dot jamescobban dot net (Why can't I just post my website address?) In the bottom frame I use a table to hilight my contact addresses. On FFox the borders are solid because FFox honors the Code:

border-spacing: 0px

in my styles. But IE ignores it. It also ignores the Code:

padding: 0px

in the style defined for the individual cells. I have tried Code:

border-collapse: collapse

, but that merges the borders so that the cells are only separated by 2px of border when I want to total of 4px. OK I could make this particular table look the same on both by using border-collapse and defining the borders as 4px wide, but that would not address other tables I have where the borders are more complex and I really do need to keep the cell borders and the table border distinct. I just want to get rid of the d....d spacing!

html Code:
Original - html Code <hr> <table class='contacts' > <tr> <td class='contacts'>Phone:</td> <td class='contacts'>E-mail to:</td> </tr> <tr> <td class='contacts'>Phone: +1-613-592-9438 <br>FAX: +1-613-592-9438</td> <td class='contacts'>&nbsp;<a href="mailto:jamescobban@sympatico.ca">JamesCobban@sympatico.ca</a></td> </tr> </table>

  
<hr>
<table class='contacts' >
<tr>

<td class='contacts'>Phone:</td>

<td class='contacts'>E-mail to:</td>
</tr>

<tr>

<td class='contacts'>Phone: +1-613-592-9438
<br>FAX: +1-613-592-9438</td>

<td class='contacts'>&nbsp;<a href="mailto:jamescobban@sympatico.ca">JamesCobban@sympatico.ca</a></td>
</tr>
</table>

css Code:
Original - css Code <style type='text/css'> table.contacts { border: solid 2px #008000; width: 100%; padding: 0px; border-spacing: 0px; background: #99FF99; } td.contacts { border: solid 2px #008000; font-family: sans-serif; padding: 0px; } </style>

  

    <style type='text/css'>


     table.contacts    { border: solid 2px #008000; 


             width: 100%;


             padding: 0px;


             border-spacing: 0px;


             background: #99FF99;


             }


     td.contacts       { border: solid 2px #008000;


             font-family: sans-serif;


             padding: 0px;


             }


     </style> 

test

Heya guys,

Hope someone can help me with this one. Been looking around the web but most are suggesting to do what i have already done.

I've got this in style.css file:

Code:

/* SEARCH Bar */
.lb_bl {background: url(/img/lb_bl.gif) 0 100% no-repeat #E5ECEC}
.lb_br {background: url(/img/lb_br.gif) 100% 100% no-repeat}
.lb_tl {background: url(/img/lb_tl.gif) 0 0 no-repeat}
.lb_tr {background: url(/img/lb_tr.gif) 100% 0 no-repeat; padding: 3px}
.clear {font-size: 1px; height: 1px}

.topform {
	position: absolute;
	right: 5px;
	top: 65px;
	width: 300px;
	font-size: 10px;
	font-family: myriad, verdana, sans-serif;
	text-align: right; }
	
input, form {
	font-size: 11px;
	font-family: myriad, verdana, sans-serif;
	margin-bottom: 0px;
	margin: 0px; }
/* End of SEARCH Bar */

Which refers to this part of my index.php page:

Code:

  <!-- Top right SEARCH -->
  <div class="topform"> 
    <div class="lb_bl"> 
      <div class="lb_br"> 
        <div class="lb_tl"> 
          <div class="lb_tr">
            <form name="form" id="form" method="post" action=""><input name="search" type="text" />
            <input name="search" type="button" value="SEARCH" /></form>
          </div>
        </div>
      </div>
    </div>
    <div class="clear">&nbsp;</div>
  </div>
  <!-- End of top right SEARCH -->

But i am still getting a space below the form in IE (firefox is perfect). What should i do? You can see an example of the page at www.theresortwarehouse.com

Thanks in advance to anyone who can help - Gaz

Hi!

Should I do this?

p
{

margin-top: 2em;
margin-bottom: 2em;

}

or this:

p
{

margin-bottom: 2em;

}


Same question for headers (h1, h2, etc)


Thanks!

I have a test page for an image and it does not display a border. It only changes the cursor to a hand on hoover. Once clicked and subsequently returned to the page, the image does not have the dotted outline of its' border either. This is as it should be. Here is the code:

Code:

<html>
<head>
<style>		
img, fieldset	{
	border: 0;
}
</style>
		<a href="http://validator.w3.org/check?uri=referer" border="0"><img
        src="http://www.w3.org/Icons/valid-html401"
        alt="Valid HTML 4.01 Transitional" height="31" width="88"></a>
</head>
</body>

Next, I have my development pages where I have multiple link styles on each page defined by an external style sheet, prime.css. here is the relavant portion of the code:

Code:

a:link	{
    color: #2F4F4F;
    text-decoration: underline;
}
a:visited	{
    color: #778899;
    text-decoration: underline;
}
a:active	{
    text-decoration: underline
}
a:hover	{
    text-decoration: underline;
	background-color: #2F4F4F; 
    color: #FFFFFF;
}
.intraLink:link	{
	color: #2F4F4F;
	text-decoration: none;
	background-color: #FFFFFF;
}
.intraLink:visited	{
    color: #778899;
    text-decoration: none;
}

.intraLink:active	{
    text-decoration: none;
	background-color: #FFFFFF;
}

.intraLink:hover	{
	text-decoration: none;
	background-color: #FFFFFF;
	color:#D2691E;
}
.back:link	{
	color: #2F4F4F;
	text-decoration: none;
	background-color: #FFFFFF;
}
.back:visited	{
    color: #778899;
    text-decoration: none;
}
.back:active	{
    text-decoration: none;
	background-color: #FFFFFF;
}
.back:hover	{
	text-decoration: none;
	background-color: #FFFFFF;
	color:#2E8B57;
}
.image:link	{
	color: #2F4F4F;
	text-decoration: none;
	background-color: #FFFFFF;
}
.image:visited	{
    color: #778899;
    text-decoration: none;
}
.image:active	{
    text-decoration: none;
	background-color: #FFFFFF;
}
.image:hover	{
    text-decoration: none;
	background-color: #FFFFFF; 
	color: none;
}
.pageStyle {
	background-color: none;
	font-family: "Helvetica Neue", Arial, helvetica, sans-serif;
	width: 800px;
	font-size: 62.5%;
	margin: 0 auto;
	padding-top: 50px;
	margin-bottom: 25px;
	line-height: 1.5;
}
#main {
	float: left;
	width: 590px;
	padding-bottom: 25px;
}

Explanation for the multiple styles: the default link style is to change the 'default' hyperlinks to match my color scheme. The .intraLink is for links within the current page. The .back style is for calling the previous page and finally the .image style is for all images with href references.

Even though this scheme works there is a slight problem. Once an image that is used as a link is clicked and user returns to the page then the image has a dotted line as a border! I'd like it to not have that border, i.e., I'd like it to work just as the test page works, nice and clean.

Also, I'm not sure about my linking styles. I'm new with CSS and it just seems like I've done more than I really need too; like it seems like it's a lot to do to simply not have the border appear when the test page is so lean! Is there a better way? Here's the offending page code and thanks for taking the time to read this, I know it's a trivial point but I'd like to understand why:

Code:

<html>
    <head>
		<title>index.html :: home page
		</title>
		<link rel="stylesheet" type="text/css" href="prime.css">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body class="pageStyle">
	    <b>:: Index.html ::</b><hr>
		<div id="main">
			<ul>
				<li>
				<a href="rs_cv.html">My CV</a>
				</li>
			</ul>
		</div>
		<a href="http://validator.w3.org/check?uri=referer" border="0" class="image"><img
		src="http://www.w3.org/Icons/valid-html401"
		alt="Valid HTML 4.01 Transitional" height="31" width="88"></a>
    </body>
</html>

I'm wondering how do I eliminate the space between the image banner and the UL,LI tags?? It worked fine in Mozilla but not in IE... So, I figure an IE hack is needed...

Code:

.amsBannerTop
{
  width: 600px;
  height: 120px;
  margin: 0px;
  padding 0px;
}
#dmenu 
{
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 35px;
  margin-top: 0px;
  width: 26em;
  
  font-family: Verdana;
  font-style: normal;
  font-size: 10pt;
  font-weight: normal;
}
#dmenu ul li 
{ 
  /* blank... */
}
#dmenu li:hover ul
{
  /* lists nested under hovered list items */
  display: block;
}
#dmenu li.over ul
{
  display: block;
}

Code:

<div>
 <img class="amsBannerTop" src="image/AMS_Banner_RoughDraft3.jpg" alt="" border="1">

 <ul class="xMenuUl" id="dmenu">
  <li class="xMenuLi"><a href="" class="xMenuTitle">Home</a>
   <ul class="xSubmenuUl">
    <li class="xSubmenuLi"><a href="">Frequently asked questions</a></li>
    <li class="xSubmenuLi"><a href="">Impressum - Required by Law</a></li>
    <li class="xSubmenuLi"><a href="">Links and whos better than me</a></li>
    <li class="xSubmenuLi"><a href="">Sitemap - quick list of all links</a></li>
   </ul>
  </li>
  <li class="xMenuLi"><a href="" class="xMenuTitle">Perl</a>
   <ul class="xSubmenuUl">
    <li class="xSubmenuLi"><a href="">Trees, Twigs and XML</a></li>
    <li class="xSubmenuLi"><a href="">Perl Data Types and using Hashes</a></li>
    <li class="xSubmenuLi"><a href="">XML Data and how to write it</a></li>
    <li class="xSubmenuLi"><a href="">XML Data and why I love it</a></li>
   </ul>
  </li>
  <li class="xMenuLi"><a href="" class="xMenuTitle">SVG</a>
   <ul class="xSubmenuUl">
    <li class="xSubmenuLi"><a href="">Interactive with the mouse</a></li>
    <li class="xSubmenuLi"><a href="">Basic objects and which software</a></li>
    <li class="xSubmenuLi"><a href="">Interactive does not mean it is Flash</a></li>
    <li class="xSubmenuLi"><a href="">Animated ECMA and generating objects on the fly</a></li>
    <li class="xSubmenuLi"><a href="">Clipart and Popart</a></li>
   </ul>
  </li>
 </ul>
</div>

Thanks,
FletchSOD

I'm going round and round without getting any head way so hopefully someone can give me a hand...
I'm creating a mail form using a background image for the input fields. What I don't want is a border. If I don't add a border: solid black, for instance, I get a default white. Is there a way to have no border?

Code:

INPUT.email {
	background-image: url(images/bg_email.jpg);
	width:206px;
	height:21px;
	font-family: Verdana, sans-serif;
	font-size: 14px;
	color: #ffffff;
	border: 1px solid black;
	margin: 0 0 0 10px;
	padding: 0 0 0 6px;
}
 

Thanks in advance!

Hi all

Take a look at this in Firefox and then in IE7:

http://www.josh.ch/files/temp/ie7_margin_bug/formulare.html

The text input and the textarea fields have a strange margin on the left in IE7 that shouldn't be there. It seems to be "inherited" by the outher paragraph, just change the value in css/general.css on line 29 to see it happen. FF and IE6 behave well, IE7 doesn't.

Interestingly, the select field (and all the other fields like radio buttons and checkboxes) don't have this problem.

I did a search and found this link:

http://www.positioniseverything.net/explorer/floatIndent.html

Seems to be something like that, but the display:inline fix didn't help. the only way I see is a minus margin for the text input and textarea fields for IE7 only, but maybe there's a cleaner way?

Thanks a lot for help :-)
Josh

Hi there,

I have recently stumbled about a problem I had with another website I made as well, but since it was at the very bottom back then I kinda ignored it. My new website has this right in the header though, and so I decided to ask for help. Works perfectly in Gecko based browsers, though.

I have the problem that I have to Div's right after each other which both have a top and bottom margin of zero, but there is a visible gap between them, only in IE though (header and content as well as content and footer) and in Opera 7.54 at the very bottom. The colors of the background PNG are also broken in IE, never mind that, will exchange that with a JPG.

Website in question is http://cyxxon.com, WordPress with my own template. Had the same problem with a website completely handcoded by me.

Any ideas?
Thomas

Hi All,

I am having a hard time aligning an element on my site. The problem is I am floating an element to the left and it wont cross all the way to the right, its like the margin to the right doesnt exist and the text goes to the next line when there is room (so it seems) to the right.

Go to j4media.com to see what I mean...look in the sidebar and the problem is in the first bullet under the 'recent message board posts'.

Here's the CSS:

Code:

   
.sidecnt { /* individual container in sidebar */   background: #040c0f url(jimg/sb_bg1.jpg) repeat-x;   width: 245px;   height: auto;   border: 1px solid #000000;   border-bottom: 6px solid #172e34;   padding: 2px 2px 7px 2px;   }.sidecnt h2 { /* container title image */   float: left;      }    .sidecnt h3 { /* container title */   float: right;   color:#050608;   font-family: Arial, Helvetica, sans-serif;   font-weight:bold;   font-size: 10px;   }.sidecnt h4 { /* tag text */	float:left;	margin: 25px -12px 2px 1px; /* top, right, bottom, left */	padding-bottom: 5px;	font-family:Arial, Helvetica, sans-serif;	}   .sidecnt1 { /* individual container in sidebar - other than tag box */   background: #FFFFFF url(jimg/sb_bg1.jpg) repeat-x;   width: 245px;   height: auto;   border: 1px solid #000000;   border-bottom: 6px solid #172e34;   padding: 2px 2px 7px 2px;   }.sidecnt1 h2 { /* container title image */   float: left;      }    .sidecnt1 h3 { /* container title */   float: right;   color:#050608;   font-family: Arial, Helvetica, sans-serif;   font-weight:bold;   font-size: 10px;   }.sidecnt1 h4 { /* text elements */	float:left;	margin: 25px -12px 2px 1px; /* top, right, bottom, left */	padding-bottom: 5px;	font-family:Arial, Helvetica, sans-serif;	}   .sidecnt1 ul {    float:left;	margin-top: 25px; /*top, right, bottom, left*/	padding-bottom: 1px;	font-family:Arial, Helvetica, sans-serif;	}

and here's the HTML:

Code:

<div class="sidebar">		<div class="sidecnt">			<h2><img src="(URL address blocked: See forum rules)"></h2>			<h3>j4media tags</h3>			   <h4>			<?php UTW_ShowWeightedTagSetAlphabetical("coloredsizedtagcloud","",0) ?>			   </h4>			  </div>		<br>		<div class="sidecnt1">		  <h2><img src="(URL address blocked: See forum rules)"></h2>		  <h3>Subscribe</h3>			<div class="subscriberss">				<form name="subsform">					<a href="#"><img src="<? echo get_settings('home')."/wp-content/themes/i-feel-dirty/img/";?>feedicon.gif" alt="RSS" /></a> <a href="<? echo get_bloginfo('rss_url');?>" class="rsstext">RSS</a>				<select name="aggs">				<option value="(URL address blocked: See forum rules)<? echo get_bloginfo('rss_url');?>">Bloglines</option>				<option value="(URL address blocked: See forum rules)<? echo get_bloginfo('rss_url');?>">Feedness</option>				<option value="(URL address blocked: See forum rules)=<? echo get_bloginfo('rss_url');?>">My Yahoo!</option>				<option value="(URL address blocked: See forum rules)=rss&ut=<? echo get_bloginfo('rss_url');?>">My MSN</option>				<option value="(URL address blocked: See forum rules)=<? echo get_bloginfo('rss_url');?>">NetVibes</option>				<option value="(URL address blocked: See forum rules)=<? echo get_bloginfo('rss_url');?>">Newsgator</option>				<option value="(URL address blocked: See forum rules)=<? echo get_bloginfo('rss_url');?>">Rezzibo</option>				<option value="(URL address blocked: See forum rules)=<? echo get_bloginfo('rss_url');?>">Rojo</option>				<option value="(URL address blocked: See forum rules)/faves?add=<? echo get_bloginfo('rss_url');?>">Technorati</option>				</select>						<a href="#" class="btnnofloat" onclick="window.location.href = document.subsform.aggs.options[document.subsform.aggs.selectedIndex].value;"><img src="<? echo get_settings('home')."/wp-content/themes/i-feel-dirty/img/";?>okbutton.gif" title="ok btn" alt="ok" /></a>									</form>			</div>  </div>		<div class="sidecnt1">			<h3>Recent Message Board Posts</h3>			<ul>			<?php if (function_exists('wpphpbb_topics')):?>            <? wpphpbb_topics();?>            <?php endif;?>			</ul>		</div>		<div class="sidecnt1">			<h3>Categories</h3>				<ul>				<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>				</ul>		</div>		<div class="sidecnt1">					<?php /* If this is the frontpage */ if ( is_home() ) { ?>								<?php                      if(get_links(-1,'', '','', false, 'name',false,false,-1, false, false)){                 ?>						<h3>Blogroll</h3>						<ul><? get_links(-1,'<li>', '</li>','', false, 'name',false,false,-1, false, true); ?></ul>					<? } ?>		</div>		<div class="sidecnt1">					<h3>Site Tools</h3>			<ul>				<?php wp_register(); ?>				<li><?php wp_loginout(); ?></li>				<li><a href="(URL address blocked: See forum rules)" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>				<li><a href="(URL address blocked: See forum rules)/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>				<li><a href="(URL address blocked: See forum rules)/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>				<?php wp_meta(); ?>			</ul>			<?php } ?>		</div>		</div>	<div class="clearfix"></div>	<br></div>

Thanks in advance for your help!

Jrexi

Hi,

Im creating a list that shows a photo and personal data of people.

It's he

http://tiregarfio.byethost17.com/web/frontend_dev.php/miembros

username: fer
password: m

When i load it with IE6 i can see the list, but between the photos there are little space. I FF there isn't any space.

Is that the bug of the "doubled margin" of IE6?


Regards

Javi

Hello,

I am working on my website w w w . pujckyvcr . c z and there is problem with IE. Firefox is ok, in top menu, there is text with same margin from top and bottom. When you look on it in IE, text is 1px upper and text is more to up. Then hover isn't symmetrical from top and bottom in menu. Do you know how to fix thix IE bug?

Thanks you,
Jiri

I must be really dumb or blind here... For some reason i cant seem to get div.show_listing to actually move up. Sorry for my ignorance here in CSS, but i learn as i go.

css Code:
Original - css Code .container { display: block; margin-top: -32px; margin-left: 3px; width: 780px; overflow: hidden; border: 1px solid #cccccc; } /* Start Mac IE5 filter \*/ div.left_menu, div.show_listing { padding-bottom: 32767px !important; margin-bottom: -32767px !important; } /* End Mac IE5 Filter */ div.left_menu { margin-top: -32px; width: 150px; border-left: 1px solid #cccccc; height: 250px; background: #fbfbfb; border: 1px solid #cccccc; } div.show_listing { margin-top: -32px; margin-left: 155px; width: 620px; border: 1px solid #cccccc; }

  

  


 .container {     


    display: block;


    margin-top:   -32px;


    margin-left:  3px;


    width:        780px;


    overflow:     hidden;


    border:       1px solid #cccccc;


 }


  


 /* Start Mac IE5 filter \*/


 div.left_menu, div.show_listing {


    padding-bottom: 32767px !important;


    margin-bottom: -32767px !important;


 }


 /* End Mac IE5 Filter */


  


 div.left_menu {


   margin-top:   -32px;


   width:        150px;


   border-left:  1px solid #cccccc;


   height:       250px;


   background:   #fbfbfb;


   border:       1px solid #cccccc;


 }


  


 div.show_listing {


   margin-top:   -32px;


   margin-left:  155px;


   width:          620px;


   border:  1px solid #cccccc;


 } 

html Code:
Original - html Code <div class="container"> <div class="left_menu"> <div style="float: left;"> {link_one} </div> </div> <!-- This part is actually on a separate script.. it gets parsed via php --> <div class="show_listing"> <div style="float: left;"> -listing_text- fsdfsadf<br> </div> </div> </div>

  
<div class="container">
       <div class="left_menu">
        <div style="float: left;">
           {link_one}
        </div>
       </div>

<!-- This part is actually on a separate script.. it gets parsed via php -->
<div class="show_listing">
        <div style="float: left;">
          -listing_text-
          fsdfsadf<br>
        </div>
       </div>
      </div>

Again sorry for my ignorance. ( just incase its viewable here )

i am having a serious issue with ie 7 i really need help.

i am using a center layout using 900px the center layout looks and works fine

in all browsers except for ie7 i have used a border for the wrapper tag.
what i have noticed only in the case of ie7 is the left border for the wrapper

tag starts a few pixels 2px or 3px before compared to all other browsers and

due to this in ie7 the right border ends a few pixels when compared to all

other browsers. so if i can fix the left border the right border for the

wrapper tag will adjust automatically.

i am using a valid xhtml transitional document. following is my 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>Background image</title>

<style type="text/css">

body {
text-align: center;
margin: 0;
font-family: Verdana;
font-size: 10px;
}

#wrapper {
width: 900px;
text-align: left;
margin: 0 auto;
border: 1px solid #ffff00;
}

p{
margin: 0;
padding: 0;
}

</style>

</head>

<body>

<div id="wrapper">
<p>Content </p>
</div></body></html>

-------------------------------
can someone please tell me what the issue is and what the code should be. i

would highly appreciate any help as this is an issue in ie7 and not in other

browsers.

thanks.