CSS - Set The Page Margin

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!

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

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,

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.

Hi

I am displaying a div and want to give some space on the left side of the div so that text within div is displayed on a little distance from the left side border of the div, I am using following div style with margin but it is not working and the text is sticking very next to the left side broder

Code:

 <div style="background-color: #82BAE8; 
 margin: 10px 50px 30px 5px; 
font-family: arial; color: #000000; 
font-size:20; width:500px; border:thin dotted; 
border-width:2px; border-color: #E4E4D9; 
text-align: left;" > 

also the font size doesn't make any difference and the font size
is still small.

many thanks

can anybody share some wise words to fix this please?

I explain my issue in detail he

colorandinformation.com/~pressfor/csshelp.htm

New to CSS and could use some help with this, thanks.

Thanks for taking the time to read my question.

My page has a container with only the left and right borders showing. I want to center it.

If I put in margin values that look right in FF, they are way off in IE.

I suspect that there is a difference in where IE starts counting from and where FF starts counting from. FF seems to be counting from the parent container, where as I am not sure where IE is counting from.

How can I fix this?

Thanks,

Brad

HTML:
Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="piercedjunkmail@hotmail.com">
<meta name="generator" content="AceHTML 5 Freeware">
<link href="TestLayoutCSS.css" rel="stylesheet" type="text/css" />
<title>Test Layout 1</title>
</head>
<body>
<div id="HeaderContainer"></div>
<div id="PageTitle">This is the title of the page</div>
<div id="MajorLeftMainContainer">
	<div id="LeftMainContainer"></div>
<br />
<br />
<br />
<br />
<br />
<br />
<hr class="CenterVert" /><br />
<hr class="CenterVert" />
</div>
<div id="MajorRightTopContainer">
	<div id="RightTopContainer"></div>
	<div id="VertLines"></div>
	<div id="RightCenterContainer"></div>
	<div id="VertLines"></div>
<div id="RightBottomContainer"></div>
</div>
</body>
</html>

CSS:
Code:

@charset "iso-8859-1";
body {
font-family: Foo, times, serif;
margin: 0px;
background-color: #4F9FC5;
}

#HeaderContainer {
height: 50px;
width: 100%;
/*border-color: green;
border-style: solid;
border-width: 2px;*/
}

#MajorLeftMainContainer {
float: left;
margin-top: 90px;
margin-left: 10px;
/*width: 68%;*/
width: 670px;
height: 310px;
/*background-color: #4F9FC5;*/
background-color: yellow;
}

#LeftMainContainer {
border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
border-bottom-color: #C0C0C0;
border-right-color: #C0C0C0;
border-style: solid;
border-width: 5px;
float: left;
width: 80%;
height: 300px;
background-color: #EAEAEA;
}

#MajorRightTopContainer {
float: left;
margin-top: -50px;
margin-right: 10px;
width: 30%;
height: 580px;
/*background-color: #4F9FC5;*/
background-color: green;
}

#RightTopContainer {
border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
border-bottom-color: #C0C0C0;
border-right-color: #C0C0C0;
border-style: solid;
border-width: 5px;
float: left;
width: 97%;
height: 150px;
background-color: #EAEAEA;
}

#RightCenterContainer {
border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
border-bottom-color: #C0C0C0;
border-right-color: #C0C0C0;
border-style: solid;
border-width: 5px;
float: left;
width: 97%;
height: 150px;
background-color: #EAEAEA;
}

#RightBottomContainer {
border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
border-bottom-color: #C0C0C0;
border-right-color: #C0C0C0;
border-style: solid;
border-width: 5px;
float: left;
width: 97%;
height: 150px;
background-color: #EAEAEA;
}

#PageTitle {
font-size: 25px;
font-family: arial, times, serif;
/*border-color: green;
border-style: solid;
border-width: 2px;*/
width: 340px;
height: 35px;
margin-top: 40px;
margin-left: 25px;
color: black;
font-variant: small-caps;
}

#VertLines {
border-left-width: 4px;
border-left-color: #66CDFF;
border-left-style: solid;
border-right-width: 4px;
border-right-color: #66CDFF;
border-right-style: solid;
float: right;
width: 35px;
height: 50px;
margin-right: 100px;
}

hr.CenterVert {
vertical-align: middle;
border-width: 2px;
border-style: solid;
border-color: #4F9FC5;
}

Hi,

I created a css sheet for my website. The main problem though is that the form alignment keeps varying when using different browsers. Now i realize that using em is normally more consistent that px or percentage. However, I am still having problems after using em. This is my code:


Code:

body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
}
div.cecbanner
{
   border:none #b7ddf2 ;
   width: 52em;
   margin:0 auto;
}
div.orgBar
{
   display:none;
}
div.otherOrgName
{
   display:none;
}
h4.red{
font-size:9px;
font-weight:bold;
margin-bottom:8px;
color: red;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.myform{
margin:0 auto;
width:50em;
padding:14px;
}

/*------------Generate Report -------*/

.mygen
{
margin:0 auto;
width:60em;
padding:14px;
}


/* ----------- stylized ----------- */
#stylized{
border:solid  #b7ddf2;
background:white;
}
#stylized h1 {
font-size:16px;
font-weight:bold;
margin-bottom:8px;
}

#stylized p{
font-size:13px;
color:#483D8B;
margin-bottom:20px;
padding-bottom:10px;
}

#stylized label{
font-weight:bold;
text-align:right;
width:5em;
margin-right: 3em;
float:left;
}

#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:12.5em;
margin-left: 4em;
}
#stylized select{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:auto;
margin-left: 4em;
}

#stylized button{
clear:both;
margin-left:150px;
width:140px;
height:20px;
background:#666666 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}

#stylized textarea
{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
margin-left: 4em;
}

more specifically, my form input, select and textarea fields' margins vary between browsers. Any advise or help with this issue would be gr8. Thks!

yui.lastsong.net/projecthealth

I'm having problems getting the above page to show up correctly in IE6. My headers have a negative left margin and, for some reason, paragraphs below these headers seem also to be displaying this negative margin. It doesn't happen for all paragraphs, and I haven't been able to discern any pattern. The following page is an example of this: yui.lastsong.net/projecthealth/?page=team-staff

Additionally, this page is misaligned, despite using essentially the same coding from my other pages (with the exception of the content): yui.lastsong.net/projecthealth/?page=impact-families

Any ideas on how to fix this?

Hi,

i am very new to css and I am confused about the difference between

margin-top vs top

please help
Regards
Ltoso