CSS - Why Is Ie Adding Space Between Images?

I've been trying to solve this problem about my website.

My site

What it is suppose to look like.

Image

Thanks in advance.

Hi everyone.
I have a strange problem which get's on my nerves for a long time and it usually makes me keep on using tables instead of css.
It has to do with floating images inside another div or td.

I have, let's say, a td which contains 2 pictures. I want the first picture to be at the left side and the other one at the right leaving space in the middle. So I just have the following code:

Code:

<td class=top width="936" height="52"><img src="images/left.jpg" style={float:left;}><img src="images/right.jpg" style={float:right;}></td>

I also have declared the following in the style definition:
Code:

td.top {background:url(images/back.jpg) repeat;padding:0;margin:0;}
td.top img {padding:0;margin:0;}

So I test my page and although it appears ok on firefox a strange thing happens on Explorer. Both pictures leave some blank space on their side just like if I had added 2-3 pixels of side margin.
It is even more annoying that the float:left img leaves a space on it's left side and the float:right img on it's right one.
Notice that the table has both cellpadding and cellspacing set to 0.

Thank you in advance for your time.

hello there
i am starting my own site pretty soon

and i am stuck at the final desgin stage and i tryed everything to edit the .css and add images and so did the guy i hired to install the script

the site is koooraup.com
as you can see i have 2 blank spaces on both sides
what i want to do is the following
add about 4 logos at each side like the EPL logo
i got all the logos ready

but i couldnt figure out how to add them
so can some one help please
here is the .css contents

Quote:
body{

background:#48494B;
}

#mainc{
width: 780px;
background-color:#FFFFFF;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
border: 10px solid #FFFFFF;
}

#header{
margin: 0 auto;
width: 780px;
background-image:url(/images/h_bg.gif);
background-repeat: repeat-x;
height: 169px;
}

#hd_top{
margin: 0 auto;
width: 780px;
height: 42px;
background-image: url(/images/hd_top.gif);
}
#hd_down{
width: 780px;
margin: 0 auto;
height: 36px;
}

#container{
width: 780px;
margin: 0 auto;
background-image:url(/images/b_bg.gif);
background-repeat:repeat-y;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:small;
color:#FFFFFF;
}

fieldset#formwrap {
border : 0;

}

/* section fieldsets - it's common to make this border : 0; */
fieldset {
border : 0;

}

#footer{
text-align: center;
width: 780px;
height: 23px;
padding-top:5px;
background-image:url(/images/f_bg.gif);
background-repeat:repeat-x;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:small;
}

#browse{
width: 434px;
height: 30px;
background-image:url(/urlbox.gif);
padding-left: 40px;
}

#input{
background-image: url(/urlbox.gif); no-repeat;
border: none;
padding-left: 40px;
width: 474px;
height:30px;
font-size: 18px;

}

table, td{
font:100% Arial, Helvetica, sans-serif;
}
table{width:100%;border-collapse:collapse;margin:1em 0;}
th, td{text-align:center;padding:.5em;border:1px solid #fff;}
th{background:#d80119 url(/images/tr_back.gif) repeat-x;color:#fff;}
td{background:#ffffff;color:#000000;}

/* tablecloth styles */

tr.even td{background:#e2e2e2;}
tr.odd td{background:#e2e2e2;}

th.over, tr.even th.over, tr.odd th.over{background:#ff1933;}
th.down, tr.even th.down, tr.odd th.down{background:#bce774;}
th.selected, tr.even th.selected, tr.odd th.selected{}

td.over, tr.even td.over, tr.odd td.over{background:#bce774;}
td.down, tr.even td.down, tr.odd td.down{background:#bce774;color:#fff;}
td.selected, tr.even td.selected, tr.odd td.selected{background:#bce774;color:#555;}

/* use this if you want to apply different styleing to empty table cells*/




a {
color:#FFF;
text-decoration:none;
border-bottom:2px dotted #CE3939;
font-size: 15px;
}



.file_1 {
background: url('images/urlbox.gif') no-repeat;
border: none;
padding-left: 40px;
width: 434px;
height:30px;
font-size: 18px;

}

#credit {
text-align:center;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size:small;
padding-top:3px;

}

#credit a {
color:#000;
text-decoration:none;
border-bottom:none;
font-size: 13px;
}

#credit td (
background:#48494B;
color:#000000;
}

#div_file{position:static;left:-9999px;}
#div_url {position:absolute;left:-9999px;}



and if possible make the background black


thanks alot in advanced i been trying to do this for the last 2 days

regards
ahmed

I've been trying to get all the space out of IE, tried line-height and all of that, and nothing.
Any hack to take out all of the space gaps so I can later on put some small margin?

Thanks in advance

In the following code...why is there a space between the two div's??

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
   <style>
      #header { background-color: cadetblue; }
      #footer { background: blue; }
   </style>
</head>
<body>
   <div id="header">
      <p>This is my header.</p>
   </div>
   <div id="footer">
      <p>This is my footer.</p>
   </div>
</body>
</html>

If I remove the <p></p>'s from each sentence the spacing disappears. If I add a "border: 1px solid black;" to each style the spacing disappears. I don't want to know how to make it go away. I want to know why it's there?

I mean shouldn't the paragraphs be fully enclosed inside the div's?

Such that no spacing should appear between the div's?

Any insight anyone might care to share with me would be most appreciated.

Thanks.

Carlos

I'm working on a web site that has a jFlow slideshow (not implemented just yet) and I was mocking up a page with just a plain img in its place. When the page is viewed in FF 3.5, there is extra space to the right and bottom of the image. However, it shows as expected in IE8. I can't figure this out for the life of me.

If I "use border box model" from the Google Web Developer toolbar in FF, it shows as desired as well.

Here's a link to the file:
http://www.websimage.com/3238/index2.html

I've been trying to figure this out for a while now and I'm getting nowhere but frustrated, so any help you could provide would be *greatly* appreciated.

EDIT: I've found some information regarding box-models, and have applied the -moz-box-model: border-box; which seems to have eliminated the additional space within the gray div...however, there is an additional 10px of unwanted padding on the right & left of it now. I can live with this, but I don't want to if I don't have to.

Edit #2: If I take out the margin-left: auto; and margin-right: auto; (to center it) the extraneous padding is not on the left, but is added to the extraneous padding on the right. All the math adds up when it comes to the widths and padding specified for the respective "wrappers" so I'm at a loss as to what's causing this.

Hello,

I have a table formatted by CSS within which there are two styles of text, headers and content. I have the content formatted using a class (conftabledetail), with the statement:

.conftabledetail {font-size:10px;}

I did that to make the content more compact and distinguishable from the headers.

I would like to force a space between the paragraphs of content without using a <br> tag. I read that there is an "adjacent selector" which can be used to locate adjacent tags and apply a style, for example p + p {margin-top:1em;}, which would put a 1em space between adjacent paragraphs.

Apparently this selector does not work when used against a subclass, because I can't get this statement to work:

p + p.conftabledetail {margin-top:1em;}

I CAN get this statement to work:

p.conftabledetail {margin-top:1em;}

But that's not what I want to do.

Anyone have any ideas as to what I need to change or do differently?

It would also be nice to do this with a <div> tag so I don't have to repeat the class identifier on every <p> tag...

Thanks,

Chris

default template from DW.
I get these white gaps and cant get rid of them.
Going mad.
Any advice for a newbie appreciated.

Code and pic...

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>Untitled Document</title>
<style type="text/css">
<!--
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}
.oneColFixCtrHdr #container {
	width: 780px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColFixCtrHdr #header {
	padding: 0 10px 0 20px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
	background-color: #FF9933;
}
.oneColFixCtrHdr #header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.oneColFixCtrHdr #mainContent {
	padding: 0 20px;
	background-color: #00CCCC;
}
.oneColFixCtrHdr #footer {
	padding: 0 10px;
	background-color: #FF0000;
}
.oneColFixCtrHdr #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
-->
</style>
</head>

<body class="oneColFixCtrHdr">

<div id="container">
  <div id="header">
    <h1>Header</h1>
  <!-- end #header --></div>
  <div id="mainContent">
    <h1> Main Content </h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
    <h2>H2 level heading </h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
	<!-- end #mainContent --></div>
  <div id="footer">
    <p>Footer</p>
  <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

http://cirqueamongus.bdigia.com/main/
http://cirqueamongus.bdigia.com/x.css

Page is valid XHTML1.1 and CSS.

However, IE 6 causes a space to appear between my header div and my menu divs.

Firefox and opera display the page just fine

thanks for the help.

Also, if you're using IE Mac, it might display funny there, as well. If you can give me information on what's happening there, I would also appreciate it.

Im trying to change the background color of my news posts for the main page. What I want is to have every second post a darker grey than the one before.

In my css file I've added the following lines to accomplish this. Sectiontable1 and 2 beeing the different posts.

Code:
.sectiontableentry,
.sectiontableentry0 { padding: 5px; }

.sectiontableentry1 {
border-bottom: 1px solid #ccc;
padding: 5px;
background-color: #ffffff;
}

.sectiontableentry2 {
border-bottom: 1px solid #ccc;
padding: 5px;
background-color: #f6f6f6;
}


The php code look like this(see below) when inspecting it in the browser and I can cleary see that there is a blank space in between the class name and the number. But the problem is I have no clue how I can write that space in css. Cause if I just add a blank space in the css it thinks its another class or rather a standard tag like h1 and it doesnt work. Is there some way to write a space like that in css?


Code:
<span class=contentpane>
<div class=sectiontableentry 1></div>
<div class=sectiontableentry 2></div>
<div class=sectiontableentry 1></div> /* see there is a space between sectiontableentry and 1*/
</span>

I'm having problems with a web page not viewing correctly in IE7. Here is a link to the page:

test(dot)phoenixit(dot)com(dot)au/GBDGP/index(dot)asp

The left and right columns should be level (top) with the centre content area. Any help on this would be greatly appreciated. Cheers

At some point, something I did caused my website to have around 400 pixels of white space above it. My site is very simple but I can't seem to figure out the cause. I'm hoping someone can take a look and figure it out.

Thanks for any help,

Chris

HTML CODE:
http://www.bottomtimedesign.com

CSS CODE:
Code:

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

body {
	background-color: #FFFFFF;
	text-align: center;
}

/*defines web page dimensions and centers page */
#pagedimensions {
	background-color: #DCDBC9;
	border: none;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	position: relative;
	width: 1024px;
	height: 768px;
	text-align: left;
}

#mask {
	position: absolute;
	left: 575px;
	top: -45px;
}

#sign {
	margin-left: 50px;
	float: left;
	margin-right: 50px;
}
	
#snorkel {
	position: absolute;
	top: 390px;
	left: -39px;
}


#header {
	float: right;
	margin-right: 20px;
	margin-bottom: 0px;
	margin-top: 10px;
}


#content {
	margin-left: 50px;
	margin-right: 155px;
	position: static;
	margin-top: 300px;
}

Hey everyone,

I am creating Tabs in CSS. However these tabs are in 2 rows.

I was wondering if anyone can give me an idea how do i make these tabs so that they feel all the available space. Is it even possible to do that?

My tabs run in 2 rows and also its a combination of image and text.

so calculating the width of the screen and dividing by number of tabs doesnt seem to work.

Hey guys!


My website looks quite good, except for the footer when viewed on IE 6, 7, and 8. The problem is that the footer doesn't go all the way down to the bottom of page, rather leaving a space of about 5 pixels vertically so it doesn't look good. How do I get the footer to go and stay all the way down the page in IE? The footer is only within the <body> div, which has the property: margin: 0. The footer div has the following properties set:

.footer {
background:#6CBDF0;
clear: both;
height:45px;
padding-top:5px;
}

So is there any way I could make changes to these elements so that the footer wouldn't leave that annoying white space below it?

Thank you very much!

PS. I've tried solving this for well over an hour now...

Ok guys, I'm hoping someone can help me. I am a complete newbie to CSS and web site construction in general. I have a left vertical navigation bar made up of graphics in a div tag that is set to float on the left. I'm having difficulty with the graphics, they have white spaces in between them when viewed in IE. They are supposed to butt up against one another. I have tried setting the margin and padding in that div to 0. I have also seen in other forums where the <li> tag can be placed on the previous line to fix this problem in IE. I haven't even viewed the page on any other browsers yet, can someone help me please?

Thanks so much!
vonatah