HTML - More Margin Problems (i Think)

I'm having problems getting my site to render correctly in internet explorer 7. It seems to ignore the margin-top, I want a gap at the top of the page. Also the absolute bar along the top seems to get moved to the right.

This is my site: http://suffolkcottage.x10.bz/

Here is the css for the container on the page, where most of the content is inside.
#container
{
width:900px;
margin: 30px auto 0px auto!important;
margin: 30px auto 0px auto;
background-color:#FFFFFF;
background:#ffffff url('grad.png') repeat-x bottom;
border:1px solid #e8e8e8;
z-index:100;
}

Any help would be appreciated

I have someone that develops an html newsletter that I send out to my clients contact database. I ask them to also provide me with a version for the web (as the right margin gets cut off when I upload the original HTML), but every time they struggle with this, and this time told me it's not possible without having access to my CMS (which my client refuses to provide).

Someone on this forum (Rblbliss) helped me one time and told me exactly which line of code to change (I don't have any HTML experience). I'm hoping someone can help me this time around as well.

Here is a link to the page I'm referring to:

http://www.eastpointehealthandfitnes...er-newsletter/

Thanks in advance!

Reem

So I have a simple question about margins, say I have this code:

HTML Code:

<div id="content">

  <div id="content_item">
  </div>

  <div id="content_item">
  </div>

</div>

with this css:

Code:

#content{
  width: 770px;
  height: 100%;
  background-color: green;
}

#content_item{
  margin: 50px 35px 50px 35px;
  width: 700px;
  height: 250px;
}

now my first content Item, instead of stretching the content div up the margin, pushes the header div on top of the content div up the amount of the top margin starting from the top of the content div, leaving a large empty space. Is there some way to make that work without using padding?

edit--
Ok so I've set the top padding of the content div to 30px and got rid of the margin, that gives me a nice buffer between my header on top of the content div, namely the content_item div's margin pushes the padding up now. This is giving me the effect I wanted, if anyone would still like to help me I would like to know if this is on the right track code wise. Good code, bad code, I'm still a little html green.

new css:

#content{
padding: 30px 0px 0px 0px;
width: 770px;
height: 100%;
background-color: green;
}

Hey so I guess there are going to be quite a few groans from some people, but I need help with the HTML Coding on my band's MySpace...

I am rubbish at this whole code business so I bow down to anyone who can help me with a few things...

Firstly, take a look at the page...

www.myspace.com/sevendayslater

OK, I've got it looking almost how I want it, but there are a few things that are annoying the hell out of me...

1) The band logo is kind of right-aligned... the code says it is "left" but it looks weird..

2) I want the music player / gig listing / blog entry to be in line with where it says Biography...

3) The mailing list thingy, does anyone know how to make it the same size as everything else in it's column?? Also can the background be black and not transparent??


If anyone can help I would hugely appreciative!?!

OK guys I'm having a 'no brain day'.
Could someone please take a look at http://www.telfordsteamrailway.co.uk...ture/usage.php

Near the bottom is a yellow box. - why is there a yellow border / margin under the image?
heres the code - which validates
Code:

<div style="padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; border:0px; background-color:yellow;">
<img style="padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; border: 0px; background-color: green;" src="http://www.meteogroup.co.uk/meteo/hptool/logo_meteogroup.png" alt="" width="120px" height="32px" />
</div>

I havent got much hair left to tear out.

Allan

I am having a problem that I can not figure out why this is happening. I have two divs one named content and one named welcome. The welcome div is nested inside the content div. Whenever I change the margin top for the welcome div it also changes the margin top of the content div it is nested in.

How can I keep it where the content div is fixed and doesn't move no matter where I set the margin top for the welcome div?

Here is the HTML....

Code:

<div id="content">
                
            <div class="welcome">
                       <p> Coming Soon, a new and improved Texas Camping Forum for Fall 2008!!!<br>
                               Bookmark us and check back often....</p>
            </div>
            
    </div>

Here is the CSS...

Code:

#content {
  margin: 5px 0 0 140px;
  text-align: center;
  width: 630px;
  border-left: 1px solid #F4F4F4;
}

.welcome {
  margin-top: 25px;
}

Here is the link to the site....

http://development.mesquitechristmas.com/index.html

Any ideas or suggestions as why this is happening?

-Thanks

Hey,

This has been bugging me for some time and I'm rubbish when it comes to borders and margins etc. Could someone tell me how modify the margin (presuming it's a margin) around the edge of the page? If you look at the attached image, you can see that the table isn't touching the edge of the page, and It does the same with images, text etc.

Thanks

Greetings! I am back again. I thought I would repost my previous link as my problems now have nothing to do with Image Location.

I have successfully placed my inline frame where I want to! Thanks for all the help getting there. Now I have two issues to deal with. I have enclosed photos to illustrate my problems.

#1 There is a white line above my Inline frame. I want to get rid of this but cannot find what in the coding is causing it.

#2 To the Right of the window there is a white space I also cannot find the code for. I want both of these issues eliminated.

I have tried my best to find the code, really I have.

Here is my current code and the images which corrospond to my problem.

<!doctype html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>The works of D.M. Rosemark</title>
<style type="text/css" media="screen">
<!--
body
{
background-color: #ffffff;
margin: 0px
}




#horizon
{
color: white;
background-color: transparent;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}


#wrap {margin: 0px auto; width: 1300px; }

iframe.one
{
width: 600px;
height: 375px;
border-style:ridge;
border-width:10px;
border-color:#999999;
padding:1px;
float: left;
display: inline;
}
//-->
</style>
</head>
<body>

<div id="wrap">
<img src="topbanner.jpg" alt="Top Banner" style="width: 1260px;">
<div id="innerwrap">
<img src="leftimage.jpg" style="float: left; width: 325px;">
<iframe class="one" frameborder="0" src="http://www.webmasterworld.com/category10.htm" scrolling="yes">
</iframe>
<img src="rightimage.jpg" style="float: left; display: inline; width: 325px; "></div>
<img src="bottombanner.jpg" alt="Bottom Banner" style="width: 1260px;"></div>
</body>
</html>

Hey guys,

First post. Glad to see such an active forum.

Can someone check out http://www.karmasfortune.com/ohiopainclinic/

I'm trying to get rid of the top margin between the very top and the div.. so that I can utilize the top portion of the background image as a menu system. I tried putting the top-margin: 0px in my div container, but it won't budge.

Thanks in advance..

I inserted a SWF inside a table and it should fit perfectly. However, the table streches a bit and makes the background repeat for a couple of pixels which totally screws the layout.

Here is my website: http://jlcq.uuuq.com/jl.html

I'm talking about the two horizontal lines on each side of the banner. It looks like the SWF has some kind of margin. How can i delete it so it fits perfectly?

If you have the time take a look at my code or download the site and find a way to modify the code so that it fits. Note that the problem also occurs if I insert an image in the same spot instead of a SWF.

Thanks!

So, I'm new to HTML/CSS, and I just started a new website...

I have a div inside of a div, 'cen' inside of 'tu', but when I try to add a top margin to cen, instead of adding the margin from the top of 'tu', it adds a margin from the bottom of 'top'.

I can fix this by adding padding to 'tu' and and reducing its height, but I want to know why the problem exists, as I'm trying to learn. Thanks a lot...

Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Austin</title>

<style type="text/css">

html, body, h1, h2, h3, img, p, ul, li {
margin: 0;
padding: 0;
}

.top {
height: 100px;
width: 100%;
background-color: #0F272B
}

.tu {
height: 350px;
width: 100%;
background-color: #37648D;
}

.cen {
margin-top: 50px;
width: 800px;
margin-left: auto;
margin-right: auto;
position: relative;
height: 250px;
background-color: #91CED9;
}

</style>

</head>

<body>

<div class="top">

<h1>Austin</h1>

</div>

<div class="tu">

<div class="cen">

<h2>This is the website</h2>

</div>

</div>

</body>

</html>

Hi,

I am extremely new to HTML so please bear with me. Basically I downloaded a template for blogger. I am having a problem with the location of a picture. I want to move it up, so it is even with the other side but there is a big space on top of it. I believe that deals with either padding or margins? This is the HTML code that I am trying to figure out. Any help would be appreciated. If I have forgotten anything please let me know, because I can't think of anything else to add.


<div style='clear:both;'/>

<div id='right-content'>

<!-- main image -->
<div id='main-img'><img alt='' src='http://i77.photobucket.com/albums/j67/jennjohnny/Soccer-Mom-1-1.jpg'/></div>
<div style='margin-left:25px; margin-right:60px;'>

</div></div>




I use Firefox 3.6.15 and Vista.

Below is my url, so you can see what I mean.

http://jennileighsjournal.blogspot.com/

Okay I know IE 7 problems are nothing new but being that I am fairly new at this and I am reading everything I can and I am still not catching up with how to correct it. I have the website up on a test server at http://www.vsncom.com/sterling I am working on a mac and the site works fine on IE 5.2 for mac and any other browser. However, IE7 causes a huge shift in the whole page to the left. And a few other elements are slightly shifted as well. The bottom nav is up a little higher than it belongs. The three pictures on the left are shifted further right. And that is all that I get shown when I capture the screen from net render and such. (Please look at attached picture to see what IE7 gives me) So, im not sure what else may be going on. If I can get the whole page to come back to the left then I can address the other issues maybe. But does anyone have any ideas how to do this. Please. I appreciate the help. I have been trying to figure this out for a week now and reading everything I can find online and trying anything I can think of so please save me.

Matt

Hello! I hope you can help. This code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<style type="text/css">
.container {display: table; border-collapse: collapse}
.row {display: table-row}
.cell {border: 3px solid red}
.map{width:480; border:4px solid #C63; margin:0}
</style>
<link type="text/css" rel="stylesheet" href="GA.css"/>
</HEAD>
<BODY>
<div class="container">
<div class="row">
<div class="cell"><IMG class="map"SRC="mapA.jpg"alt='PAP'></div>
<div class="cell"><IMG class="map"SRC="mapB.jpg"alt='Pacot'></div>
</div></div>
</BODY></HTML>
gives the expected red outer borders and brown inner borders.
But... what is the blue (empty) space between them?