CSS Problems

hsncorrosion · January 29, 2007

My website at www.haroldsearchnetworks.co.nr on some pcs (with the same screen size and browser) The bar that says (somthinghere) should be on the right but somtimes its on the left.

Here is my index source.

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;

&lt;head&gt;

&lt;HTML LANG=en&gt;

&lt;HEAD&gt;

&lt;TITLE&gt;HaroldSearchNetworks Connecting You, With Harold&lt;/TITLE&gt;

&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;

&lt;meta http-equiv="Content-Language" content="en-us"&gt;

&lt;LINK REV="made" href="mailto:haroldsearchnetworks@gmail.com"&gt;

&lt;META NAME="keywords" CONTENT="harold search networks haroldsearchnetworks haroldsearchnetworks.co.nr haroldsearchnetworks.tk www.haroldsearchnetworks.co.nr www.haroldsearchnetworks.tk"&gt;

&lt;META NAME="description" CONTENT="The home of HaroldSearch, The -=HSN=- Clan, and more. Free Internet, and more to come."&gt;

&lt;META NAME="author" CONTENT="Harold J. G."&gt;

&lt;META NAME="ROBOTS" CONTENT="ALL"&gt;

&lt;!-- Metadata generated by http://vancouver-webpages.com/META/mk-metas.html --&gt;

&lt;link rel="shortcut icon" href="favicon.ico" &gt;

      &lt;link rel="icon" href="animated_favicon1.gif" type="image/gif" &gt;

&lt;/HEAD&gt;



&lt;script type="text/javascript" &gt; 

&lt;!-- 

function ctRoster(usrName) 

{ 

    

    var div = document.getElementById("roster_data");

    var textnode = document.createTextNode(usrName);

    div.appendChild(textnode);

} 

function ctRosterClean() 

{ 

    var label = document.getElementById("roster_data")

     while( label.hasChildNodes() ) { label.removeChild( label.lastChild ); }

} 

// --&gt; 

&lt;/script&gt;

&lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;

&lt;/head&gt;

&lt;body style="background-color: #A5CADA"&gt;

&lt;!-- Main wrapper --&gt;

&lt;div id="wrap"&gt;

    &lt;div id="header"&gt;

        &lt;div id="innerheader" style="width: 998px; height: 147px"&gt;

            &lt;h1&gt;&lt;span&gt;Site Created by Knightmare @ ClanTemplates.com&lt;/span&gt;&lt;/h1&gt;

            &lt;ul&gt;

                &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;

                &lt;li&gt;&lt;a href="http://www.boardzero.com/haroldsearchnet/"&gt;Forums&lt;/a&gt;&lt;/li&gt;

                &lt;li&gt;&lt;a href="downloads.html"&gt;Downloads&lt;/a&gt;&lt;/li&gt;

                &lt;li&gt;&lt;a href="pubpodcast.html"&gt;PodCast&lt;/a&gt;&lt;/li&gt;

                &lt;li&gt;&lt;a href="http://hsn-clan.tk"&gt;HSN Clan&lt;/a&gt;&lt;/li&gt;

                &lt;li&gt;&lt;a href="http://electronic-greetings.com/cgibin/c1.cgi?53823"&gt;

                E-Cards&lt;/a&gt;&lt;/li&gt;

                &lt;li&gt;&lt;a href="weather.html"&gt;Weather&lt;/a&gt;&lt;/li&gt;

                &lt;li&gt;&lt;a href="media.html"&gt;Media&lt;/a&gt;&lt;/li&gt;

                &lt;li&gt;&lt;a href="telnet://hsnclanserver.gotdns.com"&gt;Chat&lt;/a&gt;&lt;/li&gt;

            &lt;/ul&gt;

        &lt;/div&gt;

        

    &lt;/div&gt;

    

    &lt;div id="content"&gt;

        &lt;div class="side_column"&gt;

        

            &lt;h1&gt;P&lt;font size="1"&gt;OD&lt;font color="#FFFFFF"&gt;Cast&lt;/font&gt;&lt;/font&gt;&lt;/h1&gt;

            &lt;p&gt;&lt;!--webbot bot="HTMLMarkup" startspan --&gt;&lt;A HREF="javascript:void(0)" onclick="window.open('http://www.pupuplatters.com/pupuplayer/free/pupuplayer.php?podcast=http://www.gcast.com/u/haroldsearchnetworks/main.xml', 'linkname', 'height=235, width=450, scrollbars=no')"&gt; &lt;img src="http://www.pupuplatters.com/pupuplayer/buttons/button7.gif" alt="PupuPlayer FREE", border="0" /&gt; &lt;/a&gt;&lt;!--webbot bot="HTMLMarkup" endspan --&gt;&lt;/p&gt;

            &lt;h1&gt;Search&lt;span style="background-repeat: repeat; background-position: 0 0"&gt;&lt;font color="#FFFFFF"&gt;WEB&lt;/font&gt;&lt;/span&gt;&lt;/h1&gt;

        

            &lt;form action="#" method="post"&gt;

                &lt;p&gt;

                Enter Search String:

                &lt;form&gt;&lt;/form&gt;&lt;form method="post" action="http://www.gigablast.com/search"&gt;

&lt;input type="text" name="q" size="32"&gt; 

&lt;input type="image" src="images/search_button.gif" value=submit class="button" name="submit" width="57" height="18" /&gt;

&lt;input type="hidden" name="sc" value="0"&gt;

&lt;input type="hidden" name="iu" value="http://freewebtown.com/haroldsflash/haroldsearch/haroldsearchresultslogo.jpg"&gt;

&lt;input type="hidden" name="iw" value="200"&gt;

&lt;input type="hidden" name="ih" value="50"&gt;

&lt;input type="hidden" name="ix" value="http://haroldsearchnetworks.co.nr"&gt;

&lt;p&gt;



&lt;/form&gt;&lt;br /&gt;

                 &lt;/p&gt;

            &lt;/form&gt;

            &lt;h1&gt;Official&lt;small&gt;Sponsors&lt;/small&gt;&lt;/h1&gt;

            

              &lt;!--webbot bot="HTMLMarkup" startspan --&gt;&lt;a href="http://www.freedomain.co.nr/" target="_blank"&gt;

&lt;img src="http://nasasra.so.com.ru/image3.gif" width="88" height="31" border="0" alt="Free Domains Forwarding" /&gt;&lt;/a&gt;&lt;!--webbot bot="HTMLMarkup" endspan --&gt;&lt;p&gt;

             &lt;/div&gt;

        &lt;!-- END LEFT COLUMN --&gt;

        &lt;div id="middle" style="width: 534px; height: 627px" &gt;

            &lt;h1 align="center"&gt;Welcome&lt;/h1&gt;

            &lt;!-- ENTER MAIN CONTENT HERE --&gt;

            &lt;div class="content" style="width: 493px; height: 244px"&gt;

                

                &lt;h2&gt;Information about the HaroldSearchNetworks Website&lt;/h2&gt;

                &lt;p&gt;

                    First Let me thank you all for coming to the new site. As 

                    you may or may not know the site has been trough a lot of 

                    tough changes and The website is not even completed yet. But 

                    I am working hard on the site. This site looks best in 

                    Internet Explorer, I like firefox better. working on a fix.&lt;/p&gt;

                &lt;p&gt;

                    If you are coming from the old

                    &lt;a href="http://www.haroldsearchnetworks.tk"&gt;

                    www.haroldsearchnetworks.tk&lt;/a&gt; address the new site is.

                    &lt;a href="http://www.haroldsearchnetworks.co.nr"&gt;

                    www.haroldsearchnetworks.co.nr&lt;/a&gt;&lt;/p&gt;

                &lt;p&gt;

                    Also we now have a telnet chat system!

                    &lt;a href="telnet://hsnclanserver.gotdns.com"&gt;Click Here&lt;/a&gt; 

                    to join.&lt;/p&gt;

                &lt;p&gt;

                    Download our toolbar

                    &lt;a href="http://haroldsearchnetworks.ourtoolbar.com"&gt;HERE.&lt;/a&gt;&lt;/p&gt;

                &lt;p&gt;Thanks again. &lt;/p&gt;

            &lt;/div&gt;

            &lt;div class="content" style="width: 493px; height: 135px"&gt;

                &lt;h2&gt;The -=HSN=- Clan&lt;/h2&gt;

                &lt;p&gt;

                    As you may know the HSN clan or HaroldSearchNetworks clan is 

                    a group of players that compete against each other for fun, 

                    The clan is under development and we are accepting new 

                    members actively. The current clan site is at.

                    &lt;a href="http://www.hsn-clan.tk"&gt;www.hsn-clan.tk&lt;/a&gt; I hope 

                    to see you there. If you have Unreal Tournament 2004 Please 

                    feel free to join me at our server.

                    &lt;a href="ut2004://hsnclanserver.gotdns.com:7777"&gt;

                    ut2004://hsnclanserver.gotdns.com:7777&lt;/a&gt;

                &lt;/p&gt;

                &lt;p&gt;

                    We have also added a cube and HSNLAN - cube server at the 

                    address hsnclanserver.gotdns.com&lt;/p&gt;

            &lt;/div&gt;

            &lt;div class="content" style="width: 493px; height: 264px"&gt;

                &lt;h2&gt;Contact &lt;/h2&gt;

                &lt;p&gt;If you have any suggestions or have any problems here's my 

                info.&lt;/p&gt;

                &lt;p&gt;Yahoo ID: hsncorrosion&lt;/p&gt;

                &lt;p&gt;Google Talk: 

                &lt;a href="mailto:haroldsearchnetworks@gmail.com"&gt;

                haroldsearchnetworks@gmail.com&lt;/a&gt;&lt;/p&gt;

                &lt;p&gt;Email:  &lt;a href="mailto:haroldsearchnetworks@gmail.com"&gt;

                haroldsearchnetworks@gmail.com&lt;/a&gt;&lt;/p&gt;

                &lt;p&gt;X-Fire:  hsncorrosion&lt;p&gt;For live support contact our 

                operators

                &lt;a href="http://haroldsearchnetworks.livehelpengine.com/livehelp.php?tab=1&amp;doubleframe=yes&amp;page=offline.php&amp;department=1"&gt;

                here.&lt;/a&gt;&lt;p&gt; &lt;/div&gt;

            &lt;!-- END MAIN CONTENT --&gt;

        &lt;/div&gt;

        &lt;div class="side_column" id="right"&gt;

            &lt;h1&gt;Somthing&lt;font color="#FFFFFF"&gt;HERE&lt;/font&gt;&lt;/h1&gt;

            &lt;form action="#" method="post"&gt;

                &lt;p&gt; &lt;/p&gt;

                &lt;p&gt; &lt;/p&gt;

                &lt;p&gt; &lt;/p&gt;

                &lt;p&gt; &lt;/p&gt;

                &lt;p&gt; &lt;/p&gt;

                &lt;p&gt; &lt;/p&gt;

                &lt;p&gt; &lt;/p&gt;

                &lt;p&gt; &lt;/p&gt;

                &lt;p&gt; &lt;/p&gt;

                &lt;p&gt; &lt;/p&gt;

                &lt;p&gt; &lt;/p&gt;

                &lt;p&gt; &lt;/p&gt;

                &lt;p&gt; &lt;/p&gt;

                &lt;p&gt; &lt;/p&gt;

                &lt;p&gt; &lt;/p&gt;

                &lt;p&gt; &lt;/p&gt;

                &lt;p&gt; &lt;/p&gt;

                &lt;p&gt; &lt;/p&gt;

                &lt;p&gt; &lt;/p&gt;

                &lt;p&gt; &lt;/p&gt;

                &lt;p&gt; &lt;/p&gt;

                &lt;p&gt; &lt;/p&gt;

            &lt;/form&gt;

        &lt;/div&gt;

        

    &lt;/div&gt;

    

    &lt;div id="footer" style="width: 1001px; height: 36px"&gt;

        &lt;p&gt;Copyright 2007 HaroldSearchNetworks&lt;/p&gt;

    &lt;/div&gt;

&lt;/div&gt;

&lt;!-- / main wrapper --&gt;

&lt;!--webbot bot="HTMLMarkup" startspan --&gt;&lt;table width="133" border="0" cellspacing="0" cellpadding="3"&gt;&lt;tr&gt;&lt;td align="center"&gt;&lt;a href="http://www.hit-counter-download.com/web-hosting.html" target="_blank"&gt;&lt;img src="http://www.hit-counter-download.com/cgi-bin/counter.pl?URL=http://freewebtown.com/haroldsflash" alt="web hosting service providers" border="0" &gt;&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td align="center"&gt;&lt;font style="font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 9px; color: #24092C; text-decoration: none;"&gt; &lt;a href="http://www.hit-counter-download.com/" target="_blank" style="font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 9px; color: #444444; text-decoration: none;" title="free html hit counter code"&gt;free html hit counter code&lt;/a&gt; &lt;/font&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;

&lt;!--webbot bot="HTMLMarkup" endspan --&gt;

&lt;/body&gt;

&lt;/html&gt;

Here is my Css source

html, body {

    background-color:#e1f1ff;

    margin:0;

    padding:0;

    font-family:  Tahoma, Verdana, "Trebuchet MS", Arial, Helvetica , sans-serif;

    font-size:11px;

    

    color:#000;

}

#wrap {

    margin:0 auto;

    background:#e1f1ff url('images/bg_repeat.jpg') repeat-y top center;

    width:998px;

    padding:0;



}

a img { border:none;}

a, a:link, a:visited, a:active {

    color:#000000;

}

a:hover {

    text-decoration:none;

}

    #header {

        margin:0 auto;

        height:208px;

        background:#000000 url('images/header_repeat.gif') repeat-x top center;

    }

        

        #innerheader {

            height:150px;

            background:#FFFFFF url('images/header_image.gif') no-repeat top left;

            width:998px;

            padding-top:57px;

        }

            #innerheader h1 {

                text-indent:-9999em;

                height:1px;

                overflow:hidden;

                font-size:1px;

                margin:0;

                padding:0;

            }

                

            #innerheader ul {

                list-style:none;

                margin:0;

                padding:0;

            }

            #innerheader li {

                background:#000000 url('images/nav_bg.gif') repeat-x top center;

                border:1px solid #495e6e;

                border-top:none;

                border-bottom:none;

                display:block;

                float:left;

                height:25px;

                margin:0 2px;

                padding:15px 10px 0 10px;

                color:#FFFFFF;

                font-weight:bold;

                font-size:10px;

                text-transform:uppercase;

            }

            

            #innerheader li a, 

            #innerheader li a:link, 

            #innerheader li a:visited, 

            #innerheader li a:active {

                color:#FFFFFF;

                text-decoration:none;

            }

            #innerheader li a:hover {

                text-decoration:underline;

            }

            

    #content {

        width:1000px;

        margin:0 auto;

        

    }

        .side_column, #middle {

            width:229px;

            float:left;

            padding:0;

            margin:0;

            

        }

            .side_column h1 {

                width:166px;

                height:32px;

                background:#d0dfec url('images/side_h1.gif') no-repeat top center;

                margin:0;

                padding:13px 0 0 64px;

                font-size:10px;

                text-transform:uppercase;

                color:#bfe3fb;

                clear:both;

            }

            .side_column h1 small {

                color:#FFFFFF;

                

            }

            .side_column ul {

                list-style:none;

                margin:0;

                padding:0;

                

            }

            .side_column li {

                margin:0;

                padding:3px 9px 3px 20px;

                width:200px;

                border-bottom:1px solid #cedce9;

                border-top: 1px solid #FFFFFF;

                

                background-image: url('images/list_bg.gif');

                background-position:center left;

                background-repeat: no-repeat;

            }

            .side_column form {

                margin:7px;

                color:#8ea8c2;

                font-size:11px;

                font-weight:bold;

                clear:left;

            }

                .side_column input.text {

                    background-color:#FFFFFF;

                    font-family: Tahoma, Verdana, "Trebuchet MS", Arial,  Helvetica, sans-serif;

                    font-size:11px;

                    color:#8ea8c2;

                    font-weight:bold;

                    padding:4px;

                    width:206px;

                    margin:5px 0;

                    border:1px solid #c0c4c7;

                    

                }

                form input.check {

                    vertical-align:middle;

                }

                form label {float:left;}

                form input.button {

                    float:right;

                    margin-bottom:5px;

                }

            .side_column #roster {text-align:center; margin-bottom:5px;}

                #roster a img {border: 2px solid #a5cada; margin:3px;}

                #roster #roster_data { 

                    width:110px;

                    padding:3px;

                    height:14px;

                    margin:0px 0 0 8px;

                    background-color:#a5cada;

                    color:#3e3e3e;

                    font-weight:bold;

                    float:left;

                }

             #right h1 {

                background-position:top left;

            }

                

        #middle {

            width:534px;

            margin:0 3px;

        

            

        }

        

            #middle #division_select {

                width:534px;

                height:114px;

                background:#FFFFFF url('images/division_select_bg.gif') no-repeat top center;

                margin:0 auto;

                font-size:1em;

                text-align:center;

                padding:47px 0 0 0;

            }

                #division_select h1 {

                    display:none;

                }

                    

            #middle #breadcrum {

                background-color:#c2d3e3;

                width:auto;

                margin:1px 0;

                padding:5px 10px;

                font-weight:bold;

                color:#85a7c7;

            }

            #middle h1 {

                color:#aecbe6;

                font-size:18px;

                font-weight:normal;

                margin:10px 0 0 20px;

                

                text-transform:uppercase;

                font-family: Helvetica , Tahoma, Verdana, "Trebuchet MS", Arial,  sans-serif;

            }

            #middle .content {

                width:493px;

                margin:10px auto;

                padding:5px;

                border-bottom:5px solid #02264a;

                background-color:#FFFFFF;

            }

                #middle .content h2 {

                    margin:0;

                    background-color:#c0c9d2;

                    color:#02264a;

                    height:20px;

                    padding:5px 0 0 10px;

                    width:auto;

                    font-size:11px;

                }

    #footer {

        clear:both;

        height:38px;

        padding-top:20px;

        background:#000000 url('images/footer_repeat.gif') repeat-x top center;

        text-align:center;

        color:#FFFFFF;

        font-weight:bold;

    }

My website is edited in microsoft frontpage 2003

VaKo · January 29, 2007

<snip>
My website is edited in microsoft frontpage 2003

Well... there's your problem.

Have you thought about separating your layout and content? Your site is crying out for some simple server side includes and it might help debug the side bar issue.

hsncorrosion · January 29, 2007

<snip>
My website is edited in microsoft frontpage 2003

Well... there's your problem.

Have you thought about separating your layout and content? Your site is crying out for some simple server side includes and it might help debug the side bar issue.

I don't know how to use server side includes.

Could you (or someone else) try and fix the source code I've given?

Sparda · January 29, 2007

I don't know how to use server side includes.
Could you (or someone else) try and fix the source code I've given?

No, go heir a web developer.

VaKo · January 29, 2007

Without PHP includes:

&lt;div id=textbox.left" &gt;

    &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec consectetuer diam at risus. Aenean eu augue at pede rutrum adipiscing. Nam urna est, malesuada nec, accumsan quis, fermentum ac, augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean sit amet arcu a elit vehicula elementum. In a felis eget metus mollis cursus. Nunc non ligula ut justo lacinia convallis. Vestibulum a nisi in pede suscipit porta. Pellentesque et odio non nunc sodales placerat. Aliquam dapibus, arcu vel viverra imperdiet, massa lacus facilisis lacus, in congue metus metus non nisi. Morbi quis turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec dui est, commodo sit amet, hendrerit ut, rutrum vel, eros. Nunc consectetuer viverra ligula. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis aliquet scelerisque quam. Sed eu lacus. Phasellus et eros.&lt;/p&gt;

&lt;/div&gt;

With PHP includes:

&lt;div id=textbox.left" &gt;&lt;?php include("content.txt"); ?&gt;&lt;/div&gt;

psychoaliendog · January 30, 2007

I tried your page in a gauntlet of various browsers, and it seems like its only IE6 and IE5.5 (IE5.0 wouldn't even open your page :) ). It may be an Escaping Floats Bug. In case its not this page has a good list of the possible IE bugs.

It may also have something to do with this:

      .side_column, #middle {

         width:229px;

         float:left;

         padding:0;

         margin:0;

         

      }

seeing as the "something here" div has the side_column class. The #middle later gets overridden by:

      #middle {

         width:534px;

         margin:0 3px;

      

         

      }

you could try adding this to the end of your style sheet:

.side_column #right {

     float: right;

}

and man, put down the Frontpage, we don't want anybody to get hurt, now do we. :twisted:

hsncorrosion · January 30, 2007

Hmmm....

Well I checked and it seems that it works in ie7 and avant browser (avant uses what ever ie is installed anyway)

I downloaded opra browser and the side bar is fine. Every thing else is out of whack.

Is there an easier way to fix this? Is there a way to make my site look the way it does now without the style sheet? Anything to make this easier on me? (im only 15 so I've only had so much time to learn)

VaKo · January 30, 2007

1: Throw away frontpage.

2: Get gimp & notepad2.exe

3: Learn how to write CSS & HTML by hand.

4: Learn how to use PHP

Search the forums for web design topics, I've already posted loads of useful links to things like http://www.csscreator.com/version2/pagelayout.php. No, its not as easy but learning how to do it the hard way will help you avoid weird bugs like this.

hsncorrosion · January 30, 2007

1: Throw away frontpage.
2: Get gimp & notepad2.exe

3: Learn how to write CSS & HTML by hand.

4: Learn how to use PHP

Search the forums for web design topics, I've already posted loads of useful links to things like http://www.csscreator.com/version2/pagelayout.php. No, its not as easy but learning how to do it the hard way will help you avoid weird bugs like this.

Thanx I'll work on it

Shaun · January 30, 2007

1: Throw away frontpage.
2: Get gimp & notepad2.exe

3: Learn how to write CSS & HTML by hand.

4: Learn how to use PHP

Search the forums for web design topics, I've already posted loads of useful links to things like http://www.csscreator.com/version2/pagelayout.php. No, its not as easy but learning how to do it the hard way will help you avoid weird bugs like this.

5: Get some actual content.

hsncorrosion · February 1, 2007

1: Throw away frontpage.
2: Get gimp & notepad2.exe

3: Learn how to write CSS & HTML by hand.

4: Learn how to use PHP

Search the forums for web design topics, I've already posted loads of useful links to things like http://www.csscreator.com/version2/pagelayout.php. No, its not as easy but learning how to do it the hard way will help you avoid weird bugs like this.

5: Get some actual content.

What do you think about MS Expresion Web?

psychoaliendog · February 1, 2007

What do you think about MS Expresion Web?

I've never heard of it, so I'll try it before I hate it profusely. :D You really should look into hand coding, its a great way of learning. Not only that, but you have full control, no stinking program to hold you back.

Though I personally prefer Programmers Notepad over Notepad 2, VaKo is right.

Tried MS Expression Web and it appears to be Dreamweaver clone. Thats it. Consider it un-installed.

Sign In

CSS Problems

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members