CSS - Issues With Whitespace Between Divs On Some Browsers

Good day! I have exhausted all of the people I could ask regarding this so I'm hoping I may get help here. This is the first website I've made and it's causing a lot of problems.

http:// www . sycwin . com / index2 . html

My issue is that my website is browser compatible with everything BUT IE. My problem is getting it to look the same on IE as it currently looks now on Firefox. I understand that there are java script solutions for div stacking problems, but for some reason those are causing no effects

problems:
1. subinfo not positioning over mainwrapper and is instead STACKING on top of mainwrapper on IE
2. introduction not in position to the right of carousel/slideshow on IE
3. paints and wires divs are messed up in width, padding and margin on IE

here's the css:
Code:

body {
color:#333333;
background-color: #f5f5ef;
background-image:url(images/bg.jpg);
background-repeat:repeat;
font-family:Arial, Helvetica, sans-serif;
line-height: 18px;
font-size:11px;
padding:0px;
margin:0px;
}

emphasis {
background-color:#e7d018;
}
strong {
color:#2b6934;
}

a:active, a:link, a:hover, a:visited {
border:none;
text-decoration:none;
}

img {
border:none;
}

/*MAIN SEGMENTS*/
#mainwrapper{
width:1000px;
margin:0 auto;
margin-top:-20px;
margin-bottom:-50px;
z-index:900;
overflow:hidden;
}
#contentwrapper {
width:1000px;
margin-bottom:-10px;
}
#header {
background-image:url(images/header.png);
background-repeat:no-repeat;
height:492px;
margin-top:-15px;
width:1000px;
float:none;
}

#footer {
width:1000px;
height:222px;
background-image:url(images/footer.png);
background-repeat:no-repeat;
background-position:bottom;
margin-top:-300px;
padding-top:-300px;
margin:0 auto;
}

/*SUBINFO*/
#subinfo {
width:220px;
position:relative;
top:0px;
right:35px;
float:right;
z-index:1000;
}
#blurb {
width:220px;
height:165px;
color:#FFFFFF;
background-image:url(images/blurb_01.png);
background-repeat:no-repeat;
text-align:center;
padding-top:380px;
padding-bottom:64px;
font-size:11px;
}
.call {
font-size:22px;
padding-top:20px;
font-weight:bold;
line-height:20px;
}
#contact {
width:220px;
background-image:url(images/blurb_02.png);
background-repeat:no-repeat;
font-size:14px;
line-height:20px;
text-align:center;
padding-top:5px;
}
#blurb strong {
color:#FFFFFF;
}
.blurbheader {
font-size:20px;
font-weight:bold;
}
.blurbsubtext {
font-size:14px;
font-weight:bold;
}
#credits {
text-align: center;
font-size:9px;
line-height:14px;
padding-top:80px;
}
/*CONTENT*/
#content {
width:700px;
background-image: url(content-bg.png);
background-repeat:repeat-y;
padding-right:250px;
margin-top:-240px;
padding-left:44px;
}

#slideshow {
width:460px;
padding-left:10px;
height:360px;
float:left;
padding-bottom:20px;
overflow:hidden;
}
#write-up {
width:210px;
height:360px;
padding:8px 0 20px 10px;
margin-left:470px;
}
#products {
width:680px;
padding-right:10px;
margin: 0 auto;
margin-top:20px;
}

#products td {
width:160px;
padding-bottom:5px;
text-align:center;
}
#products-wires {
width:660px;
margin: 0 auto;
margin-top:20px;
}
#products-wires td {
width:220px;
text-align:center;
}
.product-header {
font-family:Gotham, Helvetica, Arial, sans-serif;
text-align:left;
font-size:25px;
font-weight:bold;
text-transform:uppercase;
letter-spacing:-2px;
line-height:14px;
}
#introduction {
width:680px;
font-size:11px;
line-height: 18px;
text-align:left;
overflow:hidden;
}
#paints{
margin-right:18px;
width:290px;
padding:20px;
background-image:url(images/introduction.png);
background-repeat:no-repeat;
height:195px;
float:left;
margin-bottom:20px;
}
#wires {
margin-left: 348px;
width:290px;
padding:20px;
margin-right:10px;
background-image:url(images/introduction.png);
background-repeat:no-repeat;
height:195px;
margin-bottom:20px;
}
.product-brand {
background-color:#314842;
color:#FFFFFF;
font-family:Gotham, Helvetica, Arial, sans-serif;
font-weight:bold;
text-transform:uppercase;
text-align:left;
letter-spacing:2px;
font-size:12px;
padding-left:5px;
}

/*ROLLOVER*/
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
text-align:center;
z-index:3;
}

#preview img{
width:300px;
height:300px;
} 
/*CAROUSEL*/
#carousel ul {
	list-style: none;
	width:3600px;
	margin: 0;
	padding: 0;
	position:relative;
	padding-left:10px;
height:350px;
float:left;
padding-bottom:20px;
}
#carousel li {
	display:inline;
	float:left;
}
#carousel {
overflow:hidden;

I hope you guys could help me figure this one out. I'm absolutely clueless. Thank you for taking the time to read this.

Alright, I run a joomla site and im working on making a 100% tableless xhtml compliant template. I'm very new at this so im trying my best to learn.

I used the Lean version of skidoo's layout as the base and then added all the appropriate php tags needed to make it a joomla template. For the one part I need two modules to load right next to each other near the top of the page to mimic the table version of the Latest News and Popular Modules. I'll show you code snipits of how I did it.

Code:

 
html:
      <div id="contentColumn">
        <div class="inside">
          <!-- middle column content begin -->
          <p class="blocktext">
            <?php mosLoadModules( 'banner', -1 ); ?>
          </p>
          <div id="users">
            <?php mosLoadModules ( 'user1' ); ?>
          </div>
          <div id="users">
            <?php mosLoadModules ( 'user2' ); ?>
          </div>
          <p>
          <div id="nofloat">
            <?php mosLoadModules ( 'top' ); ?>
            <?php mosMainBody(); ?>
            <?php mosLoadModules ( 'bottom' ); ?>
          </div>

css:

/*top users */
#users {
    float:left;
	width: 300px;

}
#nofloat {
	float: none;
	
}

So anyways this does indeed put each div tag side by side but my problem is that I need the following PHP code ( <?php mosLoadModules ( 'top' ); ?> <?php mosMainBody(); ?> <?php mosLoadModules ( 'bottom' ); ?>) to return to the next line after the div's, but instead it jumps everything to the right and breaks the template. So I added the nofloat css and that fixed it and put the rest of the content below the side by side div's but now it doesn't work in FireFox. Now I tried padding-top and that worked in both browsers, but its not flexible as the side by side div modules are not always there and I don't want 200px of white space on the pages that don't show it. Also as a side note I tried putting <?php mosLoadModules ( 'user1' ); ?> and user2 into separate div tags that that floated left and right but it had the same outcome, so I stuck with one float left that seems to work the same.

My question is what can I do to make this content show after the side by side div's and not beside it in both browsers?

You can see what I mean by looking at this test site in both IE 6 and FireFox.
http://www.wii-volution.com/testbed/

Thanks for any help you guys can give me!

I've been having some issues getting a design for a site I'm co-authoring to display correctly using CSS. I know that what I'm trying to do should be possible, but I haven't been able to figure it out and am getting pretty damn frustrated with the whole thing. I could probably do it with tables, and right now I have it set up with some javascript that I threw together, but css+divs would be the ideal solution.

Anyways, this is basically what I want to try and do (that's the javascript version). Just resize the window a bit to see what i'm getting at.

Here's the source:
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=iso-8859-1" />
	<title>Title</title>

	<style type="text/css">
		<!--
 
		#leftpane {
			float: left;
			height: 100%;
		 	border: 1px solid black;
		}


		#rightpane {
			float: right;
			height: 100%;
		 	border: 1px solid black;
		}

		-->
	</style>

	<script type="text/javascript">
		<!--
	
		// get rid of all this javascript and figure out a way to do this with css
		
		var windowWidth = 800;
		
		window.onload = function() {
			getWindowSize();
			resizeLeftPane();
		}
		
		window.onresize = function() { 
			getWindowSize();
			resizeLeftPane();
		}
	
		function getWindowSize() {
			if(window.innerWidth) {
				windowWidth = window.innerWidth;
			} else if(document.documentElement.clientWidth) {
				windowWidth = document.documentElement.clientWidth;
			} else if(document.body.clientWidth) {
				windowWidth = document.body.clientWidth;
			}	
		}
		
		function resizeLeftPane() {
			var rightpaneWidth = document.getElementById('rightpane').offsetWidth;
			var margin = 10;
			
			document.getElementById('leftpane').style.width = String(windowWidth - rightpaneWidth - margin * 3) +'px';
		}
		
		//-->
	</script>
</head>

<body>
	<div id="leftpane">
		<p>this pane needs to stretch as wide as it can while leaving room for the image at right, whose width is arbitrary</p>
	</div>
	<div id="rightpane">
		<img src="http://movingboxstudios.com/testz0rz/images/box.jpg" height="100%" alt="image" />
	</div>

</body>
</html>

Basically I need a way to have 2 elements next to eachother, 1 of which is an arbitrary size and the other be wide enough to fill the rest of the containing block. Any help would be much appreciated.



EDIT: Here's a link to the actual working design, maybe that'll help in understanding my question (don't open it in IE unless you want a facefull of ugly).

Hi everyone,

On the profile section of a site I created for a guy there is yet another annoying whitespace issue that pops up in FF and oddly enough looks fine in IE7.

Using firebug I can fish in the general area but my fixes seem to break things worse.

Here is an example profile where you notice the large space between the bottom of the profile pic and the tabbed interface below.

I tried adding a fixed height to .cbPosTop which didn't work and I knew it wouldn't. Anyway, like I said before it looks fine regardless of profile pic size in IE.

Here is a link to a screenshot of what I'm seeing using FF...
http://www.karenwilliamson.com/test/spot_profile_ff_whitespace.gif

Thanks for any input

Please see the screenshots below. Im using offsetTop + offsetHeight of the headings (Menu1, etc) to assign style.top to the sub menus. They appear when you mouseOver the headings. See how there is a pixel or two of whitespace in IE6 w/sp1? Why is that?
Any help would be greatly appreciated.

PS - I tried this on another PC with IE6 and sp2, and it was fine.

These are the style declarations:

Code:

.menuHeading{
	padding-left:3px;
	font-size: 8pt;
	font-weight: bold;
	background-color: #ffffff;
	color: #000000;
	cursor: default;
	position: relative;
	margin-bottom: 0px;
	border-width: 0px;
	border-style: none;



}

.menuHeading_highlight{
	padding-left:3px;
	font-size:8pt;
	font-weight:bold;
	background-color:#fff392;
	color:#000000;
	cursor:default;
	position: relative;
	margin-bottom: 0px;
	border-width: 0px;
	border-style: none;


	
}

.subMenu{
	font-size:8pt;
	color:#cc9900;
	width: 200px;
	visibility:hidden;
	cursor:default;
	position: absolute;
	padding:0px;
	margin-top:0px;
	margin-left:0px
}

I am trying to create a personal website for employers. Already have the web domain and figure its a great way to brush up on everything.

I am trying to get rid of the whitespace that constantly surrounds my div or table tags. I know about background-fill but that only seems to work in the html style and with only 1 background.

This is what I want.

Instead, I keep getting this annoying whitespace around everything that I cannot get rid of.

How do I fix this?

I'm doing a new site with a 3col centered layout. On my left col i have 8 or 9 divs with an image in them. In IE it looks as desired but in *.MOZ browsers there is 2 or 3 pixels of space between each image.

Applying a bottom border to the image's containing div it shows the space is within the div and not between the divs.

Here is the Code

Code:

CSS
.left {
float:left;
position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
width: 177px;    /*** Critical left col/divider dimension value ***/
margin-left: -176px;    /*** Critical left col/divider dimension value ***/
}

*>html .left {width:176px;}   /*** Fix only for IE/Mac ***/

.container-left {
width: 175px;    /*** Critical left col dimension value ***/
padding-bottom: 110px;   /*** To keep content from going underneath the AP bottom boxes ***/ 
}

.menu-main{
	margin-left:1px;
        border-bottom:1px solid black;

}


XHTML
<div class="left">
	<div class="container-left">
		<div class="menu-main"><img src="images/home_off.jpg" /></div>
		<div class="menu-main"><img src="images/awards_off.jpg" /></div>
		<div class="menu-main"><img src="images/designawards_off.jpg" /></div>
		<div class="menu-main"><img src="images/membership_off.jpg" /></div>
		<div class="menu-main"><img src="images/crewtraining_off.jpg" /></div>
		<div class="menu-main"><img src="images/events_off.jpg" /></div>
		<div class="menu-main"><img src="images/newsletter_off.jpg" /></div>
		<div class="menu-main"><img src="images/pressreleases_off.jpg" /></div>
		<div class="menu-main"><img src="images/contactus_off.jpg" /></div>
		</div>
	</div> <!-- end left div -->

Any suggestions?

The images are all 174px in width

Hi there,

This is my first post here and already I'm asking for help.

I'm new to CSS layout and have read quite a few tutorials and "zeroed" my values for IE but have come across my first rendering issue which I hope you can help me with.

I've attached an image of the dreamweaver layout and how firefox is rendering the page as well as the source of the page in a txt file.

Why is the whitespace appearing in Firefox and not in IE?

Thanks in advance for any guidance.

http://josephman1988.tripod.com/

Test page.

In FF, the gap between the 2 horizontal lines at the bottom is more narrow then it is in IE.

Why? And how can i fix this?

Thanks for the help.

Joe.

If I place an image in a <td> there will be a three or four pixel gap under the image and the end of the cell. The only way to avoid this is to do

Code:

<td><img></td>

instead of
Code:

<td>
    <img>
</td>

are there any other ways?

In ff3 at least theres white space under my log in box and I cant figure out how to get rid of it. I must have played with it over 30 minutes now and Its stumping me

the url is www.devwebsites.com heres the code

Code:

<style type="text/css">
body {
color:#333333;
font-family:verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
font-size:small;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
a:link, body_alink
{
	color: #FFFFFF;
	text-decoration: underline;
}
a:visited, body_avisited
{
	color: #4B5970;
	text-decoration: underline;
}
a:hover, a:active, body_ahover
{
	color: #FF6600;
	text-decoration: underline;
}
#nav {
padding:0;
color: #FFFFFF;
background: url(images/navbar1.png) 0 0 repeat-x;
float:left;
list-style-type: none;
width:947px;
border:1px solid #42432d;
border-width:1px 0;
}
.login{
float:right;
height:54px;
margin:0;
background-color: #cccccc;
width:325px;
font-family:verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
font-size:11px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
#nav a:link,
#nav a:visited {
color:#FFF;
padding:10px 10px 10px 10px;
float:left;
width:auto;
border-right:1px solid #42432d;
text-decoration:none;
text-shadow: 2px 2px 2px #555;
text-transform:uppercase;

}
#nav li:first-child a {
border-left:1px solid #42432d;
}
#nav a:hover {
color:#FFF;

}

.logo{
margin-top:25px;
margin-left:25px;
float:left;
}
.search{
margin-right:40px;
margin-top:100px;
float:right;
}
#toplogo{
margin-left:25px;
margin-top:10px;
float:left;
border: 1px solid black;
width:945px;
height:70px;
}
.align{
float:left;
padding-top:15px;
padding-left: 10px;
width:200px;
}
.footer{
clear:both;
}
</style>
</head>
<body>
<div class="logo">
<img src="images/devwebsites.gif" title="BBoardX Home" height="100px" width="575px"alt="banner" />
</div>


<div class="search">
<form action="#" style="display:inline">
Search Forums
<input type="text" value="" name="search" style="background:url(images/browse.gif) left no-repeat; padding-left:25px;" />
<input type="button" value="Search" name="buttonSearch" />
</form>
</div

<div id="toplogo">
<div class="align">
<img src="images/folder-16.gif"alt="folder" /> &nbsp;BBoardX Forums

</div>
<div class="login">
<form action="login.php">
User Name<input type="text" name="username" value="User Name"
onclick="if(this.value=='User Name')this.value=''";
onblur="if(this.value=='')this.value='User Name'";
 /><input type="checkbox" name="remember" />Remember me<br />
Password &nbsp;<input type="text" name="password" value="" />
<input type="button" name="logged" value="Log in" />
</form>
</div>

and yes ryan420 i know what your going to say when (if) you see this thread link lol

Here's the website example: http://www.justuskennels.net

In the menu, for the IE6 & 7 issues, I'm using the whitespace fix as found he http://www.456bereastreet.com/archive/200610/closing_the_gap_between_list_items_in_ie/

The only problem is that when I hover over "Our Dogs" and the side menu slides out, the <li> for "Our Dogs" puts the whitespace back in. So, if you roll over the menu quickly, you'll see it jump by a few pixels on the hover.

If I'm not describing it well enough I'll try more, but does anyone know of a fix for the hovered <li> on the slide-out?

Navigation CSS:
Code:

/* Navigation Menu Styling */
#menu {	font-size:90%;
		margin:0px 0px 0px 17px;
		text-align: center;
		font-weight: bold;
		padding-bottom:50px;
		background:none;
		text-align:center;
		line-height:100%;
		} 

#menu ul {	list-style: none;
			margin: 0px;
			padding: 0px;
			width: 150px;
			}

#menu a {font-family:Verdana, Arial, Helvetica, sans-serif; display: block;}
#menu a {color:#000; text-decoration: none;}
#menu a:hover {color:#000;}
#menu li {position:relative; height:40px; line-height:40px; background:url(design/buttons.png);}
#menu li:hover {background-position:0 40px;}
#menu ul ul {position:absolute; top:0; left:100%; width:100%;}
div#menu ul ul, div#menu ul li:hover ul ul {display:none;}
div#menu ul li:hover ul, div#menu ul ul li:hover ul {display:block;}

Basially theres quite a large extent of whitespace above the text in IE7. Works fine in FF.

http://www.beta-designz.co.uk/manicgaming/

CSS:
Code:

#wwd 
{ 
width:550px; 
height:auto; 
font-family:Geneva, Arial, Helvetica, sans-serif; 
font-size:12px; 
padding:6px; 
}

HTML:
Code:

<div id="wwd">
<h3>This Is What I do!</h3>
<span class="style1">I design sites for individuals and small businesses that are visually unique, well built, and easily manageable. A site we can all be proud of and a site your visitors will find interesting and effective!</span></div>

Help would be great, regards, J.

I use Opera browser all the time and notice a couple problems while using Jupitor Portal script, the fault is on Opera so I need a way to fix this.

1. Block had some sort of padding or whitespace on the right side for some reason.
2. Search button width is short.

Problem in red: URL
Site: URL

CSS: URL

Can someone give me a solution or work around for this problem.

P.S: I'ved tried adding margin: 0; padding: 0; to con1 but that didn't work.