CSS - Margin Trouble In Ie

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

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

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.

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

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'm using this CSS for a FORM: Code:

#div1, #div2, #div3, #div4 {
			padding: 10px;
			margin: 0 auto;
			overflow: auto;
			display: none;
			border 1px;
		}
		fieldset {
			position: relative;
			padding: 10px 10px 10px 10px;
			margin: 10px 10px 0 0;
			border: 1px solid #336633;
		}
		.input-box
		{
			color: #336633;
			background: #FDFCE5;
			border: #26a solid 1px;
		}

Problem: Looks fine in FF, top margin is 10 px as I want. But in IE7, even if I delete the top margin completely, it's still about 30 px from the DIV above it.

See he nojailforpot.com/signers2.php

Please look at www.tmhdesign3.com

The h1 on teh bottom -

<h1 id="header-bottom">Santa Rosa Luxury Estates, Vineyards, Ranches, and Wineries Realtor</h1>

i can put a margin-top of 20px on it in FF !!!

I have a question about the behavior of the margins for contents of a container div. Basically what I have done is created a container div that has a specified width but no margin, so it should be slammed up against the top, left, and bottom of the page. However, when I put divs inside the container div, their margins seem to be applying to the container as well - at least their top and bottom margins seem to be. I've included the code below, which can easily be copied and pasted.

Basically what's happening is that if the first div inside the container has a top margin, that margin is then being applied to the container div, meaning the container div is then pushed down from the top of the page by the amount of top margin specified. The same thing is happening at the bottom of the container div when I've included a bottom margin on the last element inside the container.

To my surprise, this problem is only happening in Firefox. It is showing exactly how I want it to in IE6.

Here is the code. This is just a very simple page to demonstrate the problem, so I used an embedded style sheet. I am using the transitional doctype (couldn't include it here because it contains a URL). The height of the first div inside the container is so big so that the page must be scrolled down to see the entire thing on any normal screen resolution:

<html>

<head>

<title>box test</title>

<style type="text/css">

body {margin: 0; padding: 0;}

#bgbox {width: 500px; background-color: #aaaaaa; margin: 0; padding: 0;}

#boxone {height: 700px; border: 1px solid #000000; background-color: #ffffff; margin: 20px; padding: 20px; color: #000000;}

#boxtwo {border: 1px solid #000000; background-color: #ffffff; margin: 20px; padding: 20px; color: #000000;}

</style>

</head>

<body>

<div id="bgbox">

<div id="boxone">This is box one</div>

<div id="boxtwo">this is box two</div>

</div>

</body>

</html>



Any thoughts?

Thanks!

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

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

I'm creating a menu and use margin as a separator between menu elements.
On the first and second level, margin works but no matter what I put on the third, they're all stick together.

html4strict Code:
Original - html4strict Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "(URL address blocked: See forum rules)"> <html xmlns="(URL address blocked: See forum rules)" lang="en" xml:lang="en"> <head> <title>Title</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/menu.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="menu_1st_normal"> <a href="default.asp?catID=17">abcde</a> </div> <div class="menu_2nd_normal"> <a href="default.asp?catID=5">abcde</a> </div> <div class="menu_3rd_normal"> <a href="default.asp?productID=44">abcde</a> </div> <div class="menu_3rd_normal"> <a href="default.asp?productID=45">abcde</a> </div> <div class="menu_3rd_normal"> <a href="default.asp?productID=46">abcde</a> </div> <div class="menu_2nd_normal"> <a href="default.asp?catID=6">abcde</a> </div> <div class="menu_2nd_normal"> <a href="default.asp?catID=7">abcde</a> </div> <div class="menu_2nd_normal"> <a href="default.asp?catID=8">abcde</a> </div> <div class="menu_1st_normal"> <a href="default.asp?catID=9">abcde</a> </div> </body> </html>

  

  


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


    "(URL address blocked: See forum rules)">


  


 <html xmlns="(URL address blocked: See forum rules)" lang="en" xml:lang="en">


 <head>


 <title>Title</title>


 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


 <link href="css/menu.css" rel="stylesheet" type="text/css" />


 </head>


  


 <body>


 <div class="menu_1st_normal">


     <a href="default.asp?catID=17">abcde</a>


 </div>


  


     <div class="menu_2nd_normal">


         <a href="default.asp?catID=5">abcde</a>


     </div>


                                         


         <div class="menu_3rd_normal">


             <a href="default.asp?productID=44">abcde</a>


         </div>


  


         <div class="menu_3rd_normal">


             <a href="default.asp?productID=45">abcde</a>


         </div>


  


         <div class="menu_3rd_normal">


             <a href="default.asp?productID=46">abcde</a>


         </div>


  


     <div class="menu_2nd_normal">


         <a href="default.asp?catID=6">abcde</a>


     </div>


                                             


     <div class="menu_2nd_normal">


         <a href="default.asp?catID=7">abcde</a>


     </div>


                                             


     <div class="menu_2nd_normal">


         <a href="default.asp?catID=8">abcde</a>


     </div>


                                     


 <div class="menu_1st_normal">


     <a href="default.asp?catID=9">abcde</a>


 </div>


 </body>


 </html> 

menu.css:
css Code:
Original - css Code .menu_1st_top{font-size:12px;padding:3px 2px 4px 12px; background: url(../images/menu_top_left.gif) no-repeat #0066CC 0px 0px; font-weight:bold;margin:0px 0 1px 0;color:white} .menu_1st_top a{color:white; font-weight:bold;} /* 1st level menu normal*/ .menu_1st_normal{font-size:12px;padding:3px 2px 4px 12px; background: #0066CC 0px 0px; font-weight:bold;margin:0 0 1px 0;color:white} .menu_1st_normal a{color:white;font-weight:bold;} /*----------------------------------------------------------------------------------------------------------*/ /* 2nd level menu normal*/ .menu_2nd_normal{font-size:11px;padding:3px 2px 4px 20px; background:#3399FF;margin:0px 0px 1px 0px;} .menu_2nd_normal a{font-size:11px;color:white;font-weight:bold;} /* 3r level menu normal */ .menu_3rd_normal{font-size:11px;padding:3px 2px 4px 28px; background:#33CCFF;margin 0px 0px 1px 0px;} .menu_3rd_normal a{font-size:11px;color:white;font-weight:bold;} /*----------------------------------------------------------------------------------------------------------*/ /* bottom image */ .menu_bottom_image{width:155px;height:10px;background:url(../images/menu_bottom_155.gif) no-repeat;font-size:1px;margin:0 0 1px 0;}

  

  


 .menu_1st_top{font-size:12px;padding:3px 2px 4px 12px; background: url(../images/menu_top_left.gif) no-repeat #0066CC 0px 0px; font-weight:bold;margin:0px 0 1px 0;color:white}


 .menu_1st_top a{color:white; font-weight:bold;}


 /* 1st level menu normal*/


 .menu_1st_normal{font-size:12px;padding:3px 2px 4px 12px; background: #0066CC 0px 0px; font-weight:bold;margin:0 0 1px 0;color:white}


 .menu_1st_normal a{color:white;font-weight:bold;}


  


 /*----------------------------------------------------------------------------------------------------------*/


  


 /* 2nd level menu normal*/


 .menu_2nd_normal{font-size:11px;padding:3px 2px 4px 20px; background:#3399FF;margin:0px 0px 1px 0px;}


 .menu_2nd_normal a{font-size:11px;color:white;font-weight:bold;}


  


 /* 3r level menu normal */


 .menu_3rd_normal{font-size:11px;padding:3px 2px 4px 28px; background:#33CCFF;margin 0px 0px 1px 0px;}


 .menu_3rd_normal a{font-size:11px;color:white;font-weight:bold;}


 /*----------------------------------------------------------------------------------------------------------*/


 /* bottom image */


 .menu_bottom_image{width:155px;height:10px;background:url(../images/menu_bottom_155.gif) no-repeat;font-size:1px;margin:0 0 1px 0;} 

I have try with both firefox and IE, the result is the same.
Any ideas? Thank you.

I have a strange css bug in IE 6 and 7 while making a simple two column structure.

In firefox both the left and the right columns are top aligned properly but in IE the right column has around 15px of space on top of it. I can't seem to figure out why this space is coming.
This seems like the IE peekaboo bug but can't be fixed using the line-height hack. Instead giving the IE proprietary ZOOM property to the UL we can fix this bug in IE.

But I want to know is there any other method to fix this issue which uses valid css.

Doctype for the HTML is xHTML transitional

Here is the css code.

#gdsrView{width:456px;}
#gdsrView .srchGrpMod{}
#gdsrView .grpResHdr{}
#gdsrView .grpPagination{}
#gdsrView .srCnt{clear:both;float:none;}
#gdsrView .srCnt ul{list-style-type:none;margin:0;padding:0;}
#gdsrView .srCnt ul#lstView li{clear:both;float:none;border-bottom:1px solid green;padding-bottom:5px;}
#gdsrView .srCnt ul#lstView .grpPic{width:75px;height:75px;overflow:hidden;float:left;}
#gdsrView .srCnt ul#lstView .grpInfo{background:#cacaca;margin-left:83px;}
#gdsrView .srCnt ul#lstView dl.grpMLnk{font-size:1.1em;}
#gdsrView .srCnt ul#lstView .grpInfo dl.grpMLnk dt{display:inline;}
#gdsrView .srCnt ul#lstView .grpInfo dl.grpMLnk dt a.actLnk{font-size:0.8em;}
#gdsrView .srCnt ul#lstView .grpInfo .grpDes{font-size:1em;}
#gdsrView .srCnt ul#lstView .grpInfo .tStamp{font-size:0.9em;}
#gdsrView .clearFl{margin-top:1px;}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)">
<head>
<title>IE bug</title>
</head>
<body>
<div id="gdsrView">
<div class="srchGrpMod"></div>
<div class="grpResHdr"></div>
<div class="grpPagination"></div>
<!-- Begin: group results list view -->
<div class="srCnt">
<ul id="lstView">
<li style="background:red;zoom:100%;">
<div class="grpPic">
<img src="../images/pic.jpg" alt="Group Image" width="75" height="75" />
</div>
<div class="grpInfo">
<dl class="grpMLnk">
<dt><a href="#">Lorem Ipsum dolor amet consectectuer...</a></dt>
<dt><a class="actLnk" href="#">Request Invitation</a></dt>
</dl>
<p class="grpDes">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Donec mattis urna eget magna. Nam cursus ipsum sit amet.lorem. Vestibulum ante ipsum primis in faucibus orci luc..</p>
<p class="tStamp">Updated 55 Minutes ago</p>
</div>
<div class="clearFl"></div>
</li>
</ul>
</div>
<!-- End: group results list view -->
</div>
</body>

Hey everyone.

Well I am making a forum. And I need to use a margin-right for the main content(because I know of no other way to do it). They problem is, FireFox doesnt respond to the margin-right. Here is my (troubled) CSS.
css Code:
Original - css Code #main-content{ margin-left: 10px; width: 100%; }

  

 #main-content{


     margin-left: 10px;


     width: 100%;


 } 

And my XHTML.
Code:

<div id="main-content">Blahblahblah</div><!--Fairly simple :D-->

I am using XHTML 1.0 Transitional.