55 users online (0 members and 55 guests)  


  Results 1 to 8 of 8

Related

  1. Ie mysterious margin around my box...    Forum: CSS Forum
    Replies: 1
  2. Margin?    Forum: CSS Forum
    Replies: 4
  3. Problem with margin in CSS    Forum: HTML Forum
    Replies: 6
  4. Replies: 2
  5. web page margin    Forum: HTML Forum
    Replies: 16
  1. #1
    Frostywars's Avatar
    New User

    Status
    Offline
    Join Date
    Dec 2006
    Posts
    4

    Angry Problem with margin in CSS

    I have been beating my brain with this for a while now. I have designed websites off and on for about 7 years so it REALLY bugs me I can't figure this one out. My worst best fear is that its somthing simple and stupid I am missing.


    Here we go...

    I have designed a new and un-released site called Wastedfun.com. I designed it in front page and everything looks great.....In frontpage and Firefox only though. If you visit my site in EI the top margin is like an inch from the top. If you visit the same site in FireFox the margins are correct. Its crazy....

    Heres the wierd thing. I was always led to believe that there are no negative margins in HTML just 0's. I had to set my CSS to a -90 margin JUST to get Firfox to display the margins I want.

    Here my HTML body code...

    <body marginheight="0" topmargin="0" marginwidth="0" leftmargin="0" background="bg.JPG">

    Here is my CSS code...

    body {
    margin-top: -90px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;


    }

    I have tried the all 0's and its like a 1inch margin in both explorers. Also, I dunno if this has anything to do with it but I renamed the .html files to .php file so I can have php includes for menus.

    any ideas?

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Maybe you guys can help.....

    Hi there Frostywars,

    and a warm welcome to these forums.

    To have any chance of solving this problem, we really need to see a link to the problematic site.

  3. #3
    Frostywars's Avatar
    New User

    Status
    Offline
    Join Date
    Dec 2006
    Posts
    4

    Re: Maybe you guys can help.....

    wastedfun.com

    and thank you

  4. #4
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Maybe you guys can help.....

    Hi there Frostywars,

    I have heard a rumour that FrontPage is the work of the devil.
    I, personally prefer to code with notepad and discourage the use of tables for layout...



    With this in mind here is your page reworked using CSS...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Wastedfun.com - Watchin' Every Sunrise Drunk!</title>
    
    <base href="http://www.wastedfun.com/">
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Language" content="en-us">
    <!--<link rel="stylesheet" type="text/css" href="style.css">//--> 
    <style type="text/css">
    html,body {
        background-image:url(bg.JPG);
        margin:0;
        padding:0;
     }
    #container {
        width:967px;
        margin:auto;
     }
    #header {
        height:143px;
        background-image:url(topbg.jpg);
     }
    #contents {
        padding-top:25px;
        background-image:url(tabg2.jpg);
     }
    #banner {
        text-align:center;
     }
    #banner img {
        width:468px;
        height:60px;
        border:0 solid;
     }
    #left {
        display:inline;
        float:left;
        width:181px;
        margin-top:25px;
    }
    #left h2 {
        font-family:impact,sans-serif;;
        font-size:21px;
        color:#999;
        background-color:inherit;
        margin-left:14px;
     }
    #left ul {
        list-style:none;
     }
    #left div {
        font-size:12px;
        color:#C0C0C0;
        font-weight:bold;
        text-align:center;
        background-color:inherit;
        margin:100px 0 5px 0;
     }
    #left a img {
        width:150px;
        border:0 solid;
        margin-left:15px;
     }
    #center {
        display:inline;
        float:left;
        width:564px;
        height:870px;
        background-image:url(mainbg.gif);
        font-family:tahoma,sans-serif;
        font-size:11px;
        color: #e5e5e5;
        background-color:inherit;
        margin:25px 20px 0 20px;
     }
    #center span{
        font-weight:bold;
        padding-bottom:5px;
        border-bottom:1px dashed #e5e5e5;
     }
    #center p {
        text-align:justify;
        margin:20px 0;
     } 
    #center p:first-letter {
        margin-left:20px;
     }
    #center a {
        font-weight:700;
        margin-right:5px;
     }  
    h1 {
        color:#3d429e;
        font-weight:bold;
        font-size :20px;
        font-family:Tahoma,sans-serif;
        text-align:center;
        background-color:inherit;
        margin-top:78px;
     }
    #right {
        display:inline;
        float:left;
        width:182px;
        margin-top:25px;
     }
    #nav,#extras {
        width:153px;
        height:41px;
        margin-left:14px;
     }
    #pic02 {
        width:155px;
        height:509px;
        margin:50px 0 0 13px;
     }
    #number {
        width:120px;
        height:240px;
        border:0 solid;
        margin:17px 0 0 30px;
     }
    #bottom {
        font-family:'arial black',sans-serif;
        font-size:10px;
        color:#C0C0C0;
        height:25px;
        background-image:url(btbg.jpg);
        background-color:inherit;
        padding-left:12px;
     }
    .clear {
        clear:both;
     }
    a {
        font-size:12px;
        color:#c0c0c0;
        text-decoration:none;
        background-color:inherit;
     }
    a:hover  {
        color: #9ea3de;
        text-decoration:underline;
        background-color:inherit;
     }
    </style>
    
    </head>
    <body> 
    
    <div id="container">
    
    <div id="header"></div>
    
    <div id="contents">
    
    <div id="banner">
    <a href="http://www.kegfast.com?frostywars">
    <img  src="http://kegfast.com/impressions.cgi?frostywars^full_banner1.gif" alt=""/>
    </a>
    </div>
    
    <div id="left">
    <img id="nav" src="navigation.gif" alt="" />
    
    <h2>The Content</h2>
    
    <ul>
    <li><a href="http://www.wastedfun.com/index.php">Home</a></li>
    <li><a href="http://www.wastedfun.com/rateme/pictures.php">Pictures</a></li>
    <li><a href="http://www.wastedfun.com/clipshare/">Videos</a></li>
    <li><a href="http://www.wastedfun.com/contests.php">Contest's</a></li>
    <li><a href="http://www.wastedfun.com/ashley.php">Ashley's Spot</a></li>
    <li><a href="http://www.myspace.com/wastedfun">Myspace</a></li>
    <li><a href="http://www.wastedfun.com/phpBB/">Forums</a></li>
    <li><a href="http://www.wastedfun.com/gear.php">Gear</a></li>
    <li><a href="http://www.wastedfun.com/games.php">Games</a></li>
    <li><a href="http://www.wastedfun.com/disclaimer.php">Disclaimer</a></li>
    </ul>
    
    <h2>The Friends</h2>
    
    <ul>
    <li><a href="add.php">Add Your Link</a></li>
    </ul>
    
    <h2>The Links</h2>
    
    <ul>
    <li><a href="http://www.kegfast.com?frostywars">Kegfast.com</a></li>
    </ul>
    
    <div>Random Image</div>
    
    <a href="../rateme/pictures.php"><img src="rateme/images/8.jpg" alt="" /></a>
    
    </div>
    
    <div id="center">
    
    <h1>.: Wastedfun.com - News :.</h1>
    
    <p><span>Dec 19th, 2006</span></p>
    
    <p>
    Well we got our model! Everybody meet Ashley (look to your 
    right). As of right now that's the only place she is. As soon as more time comes 
    my way the right side will display a random picture of Ashley AND I will have a 
    section dedicated to her (pics). And we all know you will love that right? 
    Right.
    </p>
       
    <a href="http://www.wastedfun.com/news.php">Click Here</a>for previous News.
    </div>
    
    <div id="right">
    
    <img id="extras" src="extras.gif" alt="" />
    <img id="pic02" src="ashley/pics/02.jpg" alt="" />
    
    <a href="http://extremeabsinthe.com/index.html?mv_pc=Frostywars">
    <img id="number" src="http://www.affiliateimage.com/extremeabsinthe.com/120x240_2.gif" alt="" />
    </a>
    
    </div>
    
    <div class="clear"></div>
    
    </div>
    
    <div id="bottom">&copy; Copyright Wastedfun.com 2006, All rights reserved. v1.0</div>
    
    </div>
    
    </body>
    </html>
    
    If you are happy with this solution, I suggest that you place the css into the external stylesheet that I have commented out.
    You can also remove the base href tag.
    Last edited by HTML; 03-09-2012 at 11:00 AM.

  5. #5
    Frostywars's Avatar
    New User

    Status
    Offline
    Join Date
    Dec 2006
    Posts
    4

    Re: Maybe you guys can help.....

    Thank you for your invested time with this however that code for some reason does two things, one it crashed IE completely(multiple times). And two in Firefox it stretches out the layout and loses the origanal text formating.

    so is there a way to fix the margins without completely altering the code? Or am I going to be forced to re-learn web design and re-design the page....?

  6. #6
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Maybe you guys can help.....

    Hi there Frostywars,
    ....it crashed IE completely(multiple times)
    I am very sorry about that.
    But thanks for bringing it to my attention.

    I compile pages to work in Firefox and had almost finished the page when IE suddenly started crashing.
    It never occured to me that this was anything to do with my code.

    It took me over an hour to find the cause of the problem.

    Basically it was because I had a brain fart - which at my age happens more frequently than it used to - and I could
    not remember that I should use text-indent and not indent. Of course, indent did not work and so I used margin-left
    which worked OK in Firefox but as you unfortunately discovered, caused IE to crash.

    This was the offending piece of code...
    Code:
    
    #center p:first-letter {
        margin-left:20px;
     }
    
    ...and this is what I should have used...
    Code:
    
    #center #indent {
        text-indent:20px;
     }
    
    Here is the ammended code, with your comments concernig Firefox rendition taken into consideration...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Wastedfun.com - Watchin' Every Sunrise Drunk!</title>
    
    <base href="http://www.wastedfun.com/">
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <!--<link rel="stylesheet" type="text/css" href="style.css">//-->
    
    <style type="text/css">
    
    body {
        background-image:url(bg.JPG);
        margin:0;
        padding:0;
     }
    
    #container {
        width:967px;
        margin:auto;
     }
    #header {
        height:143px;
        background-image:url(topbg.jpg);
     }
    #contents {
        padding-top:17px;
        background-image:url(tabg2.jpg);
     }
    #banner {
        text-align:center;
     }
    #banner img {
        width:468px;
        height:60px;
        border:0 solid;
     }
    #left {
        display:inline;
        float:left;
        width:181px;
    }
    #left h2 {
        font-family:impact,sans-serif;
        font-size:21px;
        color:#999;
        background-color:inherit;
        margin:0 0 0 14px;
     }
    #left ul {
        list-style:none;
        margin-top:0;
        margin-bottom:22px;
     }
    #left ul li{
        line-height:0.9;
        margin:0;
     }
    #left div {
        font-size:12px;
        color:#C0C0C0;
        font-weight:bold;
        text-align:center;
        background-color:inherit;
        margin:100px 0 5px 0;
     }
    #left a img {
        width:150px;
        border:0 solid;
        margin-left:15px;
     }
    #center {
        display:inline;
        float:left;
        width:564px;
        height:844px;
        background-image:url(mainbg.gif);
        font-family:tahoma,sans-serif;
        font-size:11px;
        color: #e5e5e5;
        background-color:inherit;
        margin:0 20px;
     }
    #center span{
        font-weight:bold;
        padding-bottom:7px;
        border-bottom:1px dashed #e5e5e5;
     }
    #center p {
        text-align:justify;
        margin-top:20px;
     } 
    #center #indent {
        text-indent:10px;
        margin:6px 0 50px 0;
     }
    #center a {
        font-weight:700;
        margin-right:5px;
     }  
    h1 {
        color:#3d429e;
        font-weight:bold;
        font-size :20px;
        font-family:tahoma,sans-serif;
        text-align:center;
        background-color:inherit;
        margin-top:64px;
     }
    #right {
        display:inline;
        float:left;
        width:182px;
     }
    #nav,#extras {
        width:153px;
        height:41px;
        margin-left:14px;
     }
    #pic02 {
        width:155px;
        height:509px;
        margin:27px 0 0 13px;
     }
    #number {
        width:120px;
        height:240px;
        border:0 solid;
        margin:7px 0 0 30px;
     }
    #bottom {
        font-family:'arial black',sans-serif;
        font-size:10px;
        color:#C0C0C0;
        height:25px;
        background-image:url(btbg.jpg);
        background-color:inherit;
        padding-left:12px;
     }
    .clear {
        clear:both;
     }
    a {
        font-size:11px;
        font-weight:600;
        color:#c0c0c0;
        text-decoration:none;
        background-color:inherit;
     }
    a:hover  {
        color: #9ea3de;
        text-decoration:underline;
        background-color:inherit;
     }
    
    </style>
    
    </head>
    <body> 
    
    <div id="container">
    
    <div id="header"></div>
    
    <div id="contents">
    
    <div id="banner">
    <a href="http://www.kegfast.com?frostywars">
    <img  src="http://kegfast.com/impressions.cgi?frostywars^full_banner1.gif" alt=""/>
    </a>
    </div>
    
    <div id="left">
    <img id="nav" src="navigation.gif" alt="" />
    
    <h2>The Content</h2>
    
    <ul>
    <li><a href="http://www.wastedfun.com/index.php">Home</a></li>
    <li><a href="http://www.wastedfun.com/rateme/pictures.php">Pictures</a></li>
    <li><a href="http://www.wastedfun.com/clipshare/">Videos</a></li>
    <li><a href="http://www.wastedfun.com/contests.php">Contest's</a></li>
    <li><a href="http://www.wastedfun.com/ashley.php">Ashley's Spot</a></li>
    <li><a href="http://www.myspace.com/wastedfun">Myspace</a></li>
    <li><a href="http://www.wastedfun.com/phpBB/">Forums</a></li>
    <li><a href="http://www.wastedfun.com/gear.php">Gear</a></li>
    <li><a href="http://www.wastedfun.com/games.php">Games</a></li>
    <li><a href="http://www.wastedfun.com/disclaimer.php">Disclaimer</a></li>
    </ul>
    
    <h2>The Friends</h2>
    
    <ul>
    <li><a href="add.php">Add Your Link</a></li>
    </ul>
    
    <h2>The Links</h2>
    
    <ul>
    <li><a href="http://www.kegfast.com?frostywars">Kegfast.com</a></li>
    </ul>
    
    <div>Random Image</div>
    
    <a href="../rateme/pictures.php"><img src="rateme/images/8.jpg" alt="" /></a>
    
    </div>
    
    <div id="center">
    
    <h1>.: Wastedfun.com - News :.</h1>
    
    <p><span>Dec 19th, 2006</span></p>
    
    <p id="indent">
    Well we got our model! Everybody meet Ashley (look to your 
    right). As of right now that's the only place she is. As soon as more time comes 
    my way the right side will display a random picture of Ashley AND I will have a 
    section dedicated to her (pics). And we all know you will love that right? 
    Right.
    </p>
       
    <a href="http://www.wastedfun.com/news.php">Click Here</a>for previous News.
    </div>
    
    <div id="right">
    
    <img id="extras" src="extras.gif" alt="" />
    <img id="pic02" src="ashley/pics/02.jpg" alt="" />
    
    <a href="http://extremeabsinthe.com/index.html?mv_pc=Frostywars">
    <img id="number" src="http://www.affiliateimage.com/extremeabsinthe.com/120x240_2.gif" alt="" />
    </a>
    
    </div>
    
    <div class="clear"></div>
    
    </div>
    
    <div id="bottom">&copy; Copyright Wastedfun.com 2006, All rights reserved. v1.0</div>
    
    </div>
    
    </body>
    </html>
    

  7. #7
    Frostywars's Avatar
    New User

    Status
    Offline
    Join Date
    Dec 2006
    Posts
    4

    Re: Maybe you guys can help.....

    wow, I greatly appreciate the time and effort put into this. You have helped me tremendisly. If you would like some form of a tip for this I would be glad to paypal it to you. I am trying to launch my site 1/1/07 and this was the main reason for delays, so its helps so much.

    one last question, can I open this in macromedia to edit with my other page info? I will be able to test it when I get home but am curently at work (godaddy.com) so dont have the software here.
    once again thank you

    !

  8. #8
    fucuco's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2014
    Posts
    11

    Re: Problem with margin in CSS

    You should understand the difference between margin and padding, it will help you to avoid such mistakes in future, read the following: how to set margins and paddings in CSS. Look at pictures how blocks with margins affect on each other.



Tags for this Thread