Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer HELP! problem with HTML CSS code please help!!!!

    I have some code here, I'm sorry if its hard to follow, but it's fairly simple CSS and HTML, my problem is when I view this with IE at 1024x768 it runs past the bottom of the browser window and I cannot see the last bit of my page...whats wrong?

    (here is the 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/TR/xhtml1/transitional">
    <head>
    <title>180&deg; Youth - Events</title>



    <style type="text/css">

    #stupid {position:absolute;
    top:700;
    z-index:0
    }


    #topbar {position:absolute;
    background-color:#4080B0;
    left:200px;
    top:10px;
    height:20px;
    width:500px;
    z-index:1
    }

    #event1 {position:absolute;
    background-color:#4080B0;
    height:20px;
    width:400px;
    z-index:3
    }

    #event2 {position:absolute;
    background-color:#4080B0;
    height:20px;
    width:400px;
    z-index:3
    }

    #mainbox {position:absolute;
    background-color:#EFEFEF;
    left:100px;
    top:100px;
    width:680px;
    z-index:2
    }

    #logo {position:absolute;
    left:0px;
    top:0px;
    z-index:2
    }

    #copyright {position:relative;
    top:50px;
    z-index:2
    }


    font {color:white;
    font-weight:bold;
    size:20pt
    }

    p {color:white;
    size:20pt
    }

    </style>
    </head>

    <body bgcolor = "#F1F1F1">




    <div id="logo">
    <img src="logo.jpg" alt="180&deg;"/>
    </div>



    <!-- ##################################################### -->
    <!-- ############## Title/Welcome Bar ################# -->
    <!-- ##################################################### -->
    <div style = "border:1px black solid;" id = "topbar">
    <font>Welcome</font>
    </div>


    <!-- ##################################################### -->
    <!-- ############## main info box ################### -->
    <!-- ##################################################### -->
    <div id = "mainbox" style = "border:1px black solid;" >
    <br />
    <center><h1>Events</h1></center>

    <hr />
    <br />

    <table>

    <!-- ##################################################### -->
    <!-- ############## Event 1 ################### -->
    <!-- ##################################################### -->
    <tr>
    <td></td><td></td><td></td><td></td>
    <td>
    <br />
    <br />
    <div id = "event1">
    <font><b><i>**180 Christmas Dinner**</i></b></font>
    </div>
    <b><i>180 Christmas Dinner</i></b>
    <br /><br />
    Kelsey's
    <br />
    (Kingston)
    <br />
    December 15 2005
    <br />
    Meet @ the Church @ 5:30pm
    <br />
    Each Person is Responsible For Their Own Meal!
    <br />
    Any Questions ask Pastor Kevin
    <br /><br />
    </td>
    </tr>
    <!-- ############## end of event 1 ################### -->



    <!-- ##################################################### -->
    <!-- ############## Event #2 ################### -->
    <!-- ##################################################### -->
    <tr>
    <td></td><td></td><td></td><td></td>
    <td>
    <div id = "event2">
    <font><b>\\//--[| Movie Night |]--\\//</b><br /></font>
    </div>
    <br />
    <br />
    December 9 2005
    <br />
    Pastor Kevin's House
    <br />
    7:00pm-11:00pm
    <br />
    Cost $2.00
    <br /><br />
    Questions call Pastor Kevin @ 354-4281
    <br /><br />
    Left Behind:World at War
    <br />
    <br /><br /><br />

    </td>
    </tr>
    <!-- ############## end of event 2 ################### -->


    </table>

    <center>"So that if any one is in Christ, that one is a new creature; old things have passed away; behold, all things have become new." -- 2Cor 5:17
    </center>
    <br />

    <!-- ##################################################### -->
    <!-- ############## copyright info ################### -->
    <!-- ##################################################### -->
    <div id = "copyright">
    Website Design &copy; Scott Carpenter & Evangel Temple Napanee, Ontario 2005
    </div>

    </div>



    <div id="stupid">
    </div>

    <!-- style = "border:1px black solid;" -->

    </body>
    </html>

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Absolute positioning. Its causing you your problems. There really is no need for it in your layout. Divs will naturally stack on top of each other. If you are going to use CSS, don't use tags like font, or center, or attributes like bgcolor etc.

  • #3
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks, can i use the tables the way they are?

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    They could be cleaned up a bit. What is with the empty td's?

  • #5
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    lazy way to move over the text

  • #6
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Why no font? or center tags?

    I really appreciate the feedback thanks

    what I use the CSS for is it give different properties to the text so I can have a different atturbute everytime I use the font tag instead of having to give it the property everytime I type it

    and the center tag I use so it dosn't center everything in the div...

    Oh I solved my problem from before, I had it set up so that the larger or longer my "#mainbox" div got the copyright info would always be 20px below it...

    somehow that screwed up along the way, and I am not sure how, so what I have done is make it absolute and now I'll just have to change its position manually everytime I change the page, any other suggestions on ways I could do this...preferably without table, I only use them when it's absolutely necessary
    Last edited by Wazzup_7; 11-25-2005 at 07:13 AM.

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by Wazzup_7
    I really appreciate the feedback thanks

    what I use the CSS for is it give different properties to the text so I can have a different atturbute everytime I use the font tag instead of having to give it the property everytime I type it

    and the center tag I use so it dosn't center everything in the div...

    Oh I solved my problem from before, I had it set up so that the larger or longer my "#mainbox" div got the copyright info would always be 20px below it...

    somehow that screwed up along the way, and I am not sure how, so what I have done is make it absolute and now I'll just have to change its position manually everytime I change the page, any other suggestions on ways I could do this...preferably without table, I only use them when it's absolutely necessary
    Both font and center tags are deprecated (old) and shouldn't be used. CSS should be used in its place. Rather than font tags use spans, rather than center use margin:auto; to center an element or text-align:center; to center text. Is there any way you can post up an example page somewhere? Its alot easier that way especially since you didn't even use the [ code][ /code] vbcode to post your html.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •