CSS - Div's With Margin 0 Have Visible Margin In Ie

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

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

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.

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 )

Hi

I am trying to define margins of a div so that the text near it can be displayed with a space, please click here to the see the sample


but it is not affecting the text and the text strikes the borders of the div.

Code:

<div style='float: right; border:solid 1px; padding-left: 5px; 
padding-top:5px; padding-bottom: 5px; marign-left: 5px;'>

Can anyone guide me please how to give some space between the text and the div borders?

thanks

Hi. Can anyone tell me why Internet Explorer doubles the margin width on the left side in this example?

http://www.dirtybbq.com/test/

This works fine in FireFox. Thanks for your help.

Here is my style sheet...

Code:

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

p, input, select, th, td, h1, h2, textarea {
  font-family: verdana;
  font-size: 11px;
}

#container {
  border: 1px solid #000000;
  background-color: #FFFFFF;
  background-image: url('../images/bg.gif');
  background-position: right;
  background-repeat: repeat-y;
  border: 1px solid #666666;
  margin-left: auto;
  margin-right: auto;
  width: 641px;
}

#header {
  background-color: #666666;
  background-image: url('../images/hd.gif');
  background-position: bottom left;
  background-repeat: no-repeat;
  height: 64px;
  width: 641px;
}

#footer {
  background-color: #666666;
  padding-bottom: 0px;
  text-align: left;
  width: 641px;
}

#footer p {
  color: #FFCC00;
  font-size: 10px;
  margin: 0px;
  padding: 4px;
}

#footer a {
  color: #FFCC00;
  font-weight: bold;
  text-decoration: none;
}

#footer a:hover {
  text-decoration: underline;
}


#left {
background-color: #FF6600;
  float: left;
  margin: 10px;
  margin-right: 11px;
  text-align: left;
  width: 400px;
}

#side_bar {
  background-color: #FFFF00;
  float: right;
  text-align: left;
  width: 220px;
}

I cannot see a margin when I test this page in safari from dreamweaver. Basically I am trying for a centered container which will hold all the content and have some space from the top margin and be centered. With the CSS I have the container shows up with a margin when I test it in the firefox browser and even when using live view, but not in Safari. The latest version of Safari.

What do I need to change to get the top margin to show correctly in Safari? Is something overriding something else?

Code

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

body {

color: #000000; /*This sets all text to Black*/
/*background-color: #FFFFFF; /*This sets the bacground to white*/
margin: 100px auto; /*This sets the margin to zero*/
padding:0;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000099;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000099;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000099;
}
.redtext {
color: #FF0000;
}
a {
color: #009900;
}
a:link {
color: #000099;
text-decoration: underline;
}
a:visited {
color: #666666;
text-decoration: none;

}
a:hover {
text-decoration: none;
background-color: #CCCCCC;
}
a:active {
text-decoration: none;

}

.menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
.menu a:link {
color: #336600;
text-decoration: none;
}
.menu a:visited {
color: #666666;
text-decoration: none;
}

.menu a:hover {
color: #990000;
text-decoration: none;
}

.menu a:active {
color: #666666;
text-decoration: none;
}
div#container {
width: 960px;
height:760;
/*margin-left:0 auto; /* the auto value on the sides, coupled with the width, centers the layout */

}
div#outer {
margin-left: auto;
margin-right: auto;
width: 960px;
}
div#header {
position:relative;
text-align: center;
width: auto;
}
div#nav {
width: auto;
padding: 10px;
margin-top: 1px;
position:relative;
}
div#main {
position:relative;
width: auto;
}
div#footer {
position:relative;
width:auto;
padding: 15px;
margin: 0px;
}#nav {
position: relative;
padding:20px;
width: auto;
}

I seem to be missing the margin at the bottom of my subforums in IE. Works fine in FF. See the subforums, in IE the boxes are right up against the bottom instead of spaced out like in FF.

http://mmogm.com/

Anyone please help me with the solution? Thanks in advance

Can someone tell me why margin-top won't work on the administration bar on this page: *** removed *** ?

You'll see there's a margin-top of 15px pix on the administration bar, but it butts up against the main nav bar.

Thanks!




(ps this is a backup, but I'll remove the link shortly anyway).

i dont understand why i sometimes can put margin-top and why i sometimes cant :S i dont get it at all.

look at this:

http://www.xgs-gaming.com/ladder_system_1.1/index.php

these are the relevant wrappers:
as you can see i try to margin the log in div which i will fill up with forms, but i cant position it where i want, it just rapes the whole header :S why

Code:

.page_wrapper {
	margin: 0 auto;
	width: 1240px;
}
.header_menu_wrapper {
	background-color:red;
	width:1236px;
	height:311px;
}
.middle_wrapper {
	width:1236px;
	background-color:#dfdfdf;	
}
.column_small_wrapper {
	float: left;
	width: 320px;
}
.column_mid_wrapper {
	float: left;
	width: 596px;
}
.column_big_wrapper {
	float: left;
	width: 916px;
}
.header_container {
	background-color:blue;
	background-image:url('../images/header_top.jpg');
	width:1204px;
	height:228px;
}
.menu_container {
	background-color:white;
	background-image:url('../images/header_bottom.jpg');
	width:1204px;
	height:53px;
}
.login_container {
	display:block;
	width:480px;
	height:28px;
	margin-top:100px;	
	margin-left:710px;
	background-color:red;
}

this is the html code:

Code:

<div class="page_wrapper">
	<div class="header_menu_wrapper">
		<div class="header_box_wrapper">
			<div class="header_box_noheader"></div>
			<div class="header_box_main_container">
				<div class="header_container">
					<div class="login_container"></div>
				</div>
				<div class="menu_container"> <?php require "menu.php"; ?></div>
			</div>
			<div class="header_box_bottom">
			</div>
		</div>
	</div>
	<div class="middle_wrapper">
		<div class="column_small_wrapper">
			<div class="small_box_wrapper">
				<div class="box"><p>Top 10 Online Standings</p></div>
				<div class="small_box_main_container_padding">
					<?php require "online_standings_part.php"; ?>
				</div>
				<div class="small_box_bottom">
				</div>
			</div>
			<div class="small_box_wrapper">
				<div class="box"><p>Top 10 Offline Standings</p></div>
				<div class="small_box_main_container_padding">
					<?php require "offline_standings_part.php"; ?>
				</div>
				<div class="small_box_bottom">
				</div>
			</div>
			<div class="small_box_wrapper">
				<div class="box"><p>10 Recent Groups</p></div>
				<div class="small_box_main_container_padding">

				</div>
				<div class="small_box_bottom">
				</div>
			</div>
		</div>
		<div class="column_mid_wrapper">
			<div class="mid_box_wrapper">
				<div class="box"><p>Member Login</p></div>
				<div class="mid_box_main_container_padding">
					<?php require "form_login.php"; ?>
				</div>
				<div class="mid_box_bottom">
				</div>
			</div>
			<div class="mid_box_wrapper">
				<div class="box"><p>F.A.Q</p></div>
				<div class="mid_box_main_container_padding">

				</div>
				<div class="mid_box_bottom">
				</div>
			</div>
		</div>
		<div class="column_small_wrapper">
			<div class="small_box_wrapper">
				<div class="box"><p>Shoutbox</p></div>
				<div class="small_box_main_container_padding">
					<?php require "shoutbox.php"; ?>
				</div>
				<div class="small_box_bottom">
				</div>
			</div>
		</div>
	</div>
</div>

Okay,

So here is the situation and it has had me stumped for 2 days.

I have a site that was displaying perfectly on my local server - I have xampp installed to test site locally. I have a site that is displaying perfectly in Opera, Google Chrome, Safari and Firefox....and locally on IE8.

Now here is the kicker. Once I upload it to my server online the layout is thrown out of whack in IE.

Why would there be a difference between a local view and an online view in IE?

At this URL
(http://digitalspline.com/projects/gameCitadel/)

You will see the lower content area in IE looks like it is
right aligned, in firefox it is exactly where I want it.
There is a left margin set on the two first blocks, upper left
and upper right of 30pt.

Code:

body {
	background-color: #a0a0a0;
	background-image: url(images/index/pageBackground.gif);
	background-position: top;
	background-repeat: repeat-x;
	margin-top: 17px;
	color: #FFFFFF;
}
a:hover {
	color: #FFFF00;
}
#wrapper {
	background-color: #323333;
	color: #FFFFFF;
	width: 779px;
}
	#topHeader {
		background-color: #323333;
		background-image: url(images/index/headerBG.gif);
		color: #FFFFFF;
		width: 779px;
		height: 88px;
		text-align: right;
		vertical-align: middle;
		font: 8pt Verdana, Arial, Helvetica, sans-serif;
	}
		#login {
			text-align: right;
			color: #FFFFFF;
			font-weight: bold;
			padding-top: 10px;
			padding-right: 10px;
		}
		.loginBox {
			font-family: Verdana, Arial, Helvetica, sans-serif;
			font-size: 9px;
			font-weight: bold;
			color: #000000;
			background-color: #FFFFEE;
			width: 100px;
			border: 1px solid #000000;			
		}
	#mainContent {
		background-color: #323333;
		background-image: url(images/index/contentBG.gif);
		width: 779px;
		height: 700px;
		overflow: auto;
		margin-top: 7px;
	}
		#leftMenuTop {
			background-color: #323333;
			background-image: url(images/index/menuTop.gif);
			background-repeat: no-repeat;
			background-position: right;
			width: 148px;
			height: 179px;
			float: left;
			padding-left: 13px;
		}
			#leftMenuTopText {
				width: 122px;
				height: 148px;
				float: right;
				margin-top: 15px;
				font: 9px Verdana, Arial, Helvetica, sans-serif;
				font-weight: bold;
			}
				.menuText{
					padding-top: 4px;
				}
				.menuLinkText{
					color: #702706;
					text-decoration: none;
				}
		#leftMenuBot {
			background-color: #323333;
			background-image: url(images/index/menuBot.gif);
			background-repeat: no-repeat;
			background-position: right;
			width: 148px;
			height: 389px;
			float: left;
			padding-left: 13px;
			margin-top: -80px;
		}
		#bannerBoxTop {
			background-color: #323333;
			background-image: url(images/index/bannerBG.gif);
			background-repeat:no-repeat;
			width: 492px;
			height: 69px;
			float: left;
			margin-left: 62px;
		}
			#bannerTop {
				background-color: transparent;
				width: 468px;
				height: 60px;
				float: right;
				margin-top: 4px;
				padding-right: 13px;
			}
		#featuredArt {
			background-color: #000000;
			width: 571px;
			height: 179px;
			float: left;
			margin-left: 22px;
			margin-top: 20px;
		}
			#featureBoxTop {
				background-image: url(images/index/featureBoxTop.gif);
				background-repeat:no-repeat;
				height: 15px;
				font: 9px Verdana, Arial, Helvetica, sans-serif;
				font-weight: bold;
				text-align: left;
				text-indent: 7px;
				padding-top: 2px;
			}
			#featureContent{
				height: 148px;
			}
			#featureBoxBot {
				background-image: url(images/index/featureBoxBot.gif);
				background-repeat:no-repeat;
				height: 15px;
				font: 9px Verdana, Arial, Helvetica, sans-serif
			}
		#newestBlock{
			width: 571px;
			height: 400px;
			float: left;
			margin-top: 7px;
			margin-left: 22px;
		}
			#box1 {
				width: 150px;
				background-color: #000000;
				float: left;
				margin-top: 13px;
				margin-left: 30pt;
			}
			#box2 {
				width: 150px;
				background-color: #000000;
				float: left;
				margin-top: 13px;
				margin-left: 15pt;
			}
			#box3 {
				width: 150px;
				background-color: #000000;
				float: left;
				margin-top: 13px;
				margin-left: 15pt;
			}
			#box4 {
				width: 150px;
				background-color: #000000;
				float: left;
				margin-top: 15px;
				margin-left: 30pt;
			}
			#box5 {
				width: 150px;
				background-color: #000000;
				float: left;
				margin-top: 15px;
				margin-left: 15pt;
			}
			#box6 {
				height: 180px;
				width: 150px;
				background-color: #000000;
				float: left;
				margin-top: 15px;
				margin-left: 15pt;
			}
			.head150 {
				background-image: url(images/index/150header.gif);
				background-repeat: no-repeat;
				font: 9px Verdana, Arial, Helvetica, sans-serif;
				font-weight: bold;
				height: 16;
				text-align: left;
				line-height: 16px;
				text-indent: 5px;
			}
			.foot150 {
				background-image: url(images/index/150footer.gif);
				background-repeat: no-repeat;
				font: 9px Verdana, Arial, Helvetica, sans-serif;
				height: 15px;
			}
			.mid150 {
				font: 9px Verdana, Arial, Helvetica, sans-serif;
				height: 149px;
				text-align: left;
			}
	#footer {
		background-color: #323333;
		background-image: url(images/index/footer.gif);
		background-repeat: no-repeat;
		width: 779px;
		height: 99px;
	}

I have a couple of divs at the very top of my page spanning the width of the page. In IE-8 the page is displayed as I would like, with no spacing at the top margin above the first div. In FF, there is a giant space about 50 px high. I need to get rid of this space. Below is my css for the top-most div, body, and the html... any ideas?
Code:

body {
    margin-top: 0px;
    font-family: Arial,Verdana,Helvetica;
    font-size: 12px;
}

div#top {
    margin-top: 0px;    
    float: left;
    background-image: url(../img/logo.png);
    background-repeat: no-repeat;
    width: 100%;
    height: 42px;
}

<div id="top"></div>

<div style="margin-bottom:40px">
    <script type="text/javascript">javascript menu code</script>
</div>