SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Navbar issue in IE

    Hello everyone!

    My secondary horizontal navbar displays correctly in Firefix and Opera, but displays wrong in IE. I was wondering if anyone could kindly help me?

    www.tecbit.net

    thanks a million !

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It's a "haslayout" issue (see faq if you don't know what this is ).

    Add these fixes as shown.

    Code:
    #menu {    
      margin-top: -21.50em;
        min-height:0;/* ie7 fix*/
    }
    * html #menu{height:1%}/* ie6 fix*/

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is due to having the very large header h1 element and negatively pulling the nav bar back up over it using em units - the position of the nav bar is entirely dependant on rendered text size (increase text size in FF and see what happens). Rather than have that empty h1, set #pageHeader to the correct height and apply header.gif as a background to #container.

  4. #4
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I too looked at your site, but I was stuck on an other phenomena; when I change user font-size in IE(7) the top divs moves around.

    Is that an issue to investigate, or is it just a temporary under development thing?

    Edit:

    Centauri already answered that.


    I'm rather slow thinking sometimes.
    Happy ADD/ADHD with Asperger's

  5. #5
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awsome help you guys, worked a treat thanks again

  6. #6
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by erik.j View Post
    I too looked at your site, but I was stuck on an other phenomena; when I change user font-size in IE(7) the top divs moves around.

    Is that an issue to investigate, or is it just a temporary under development thing?
    well the site is very much under development, I will take a look at it now erik i appreciate you pointing it out for me

  7. #7
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by johnuk
    well the site is very much under development, I will take a look at it now erik i appreciate you pointing it out for me
    I think Centauri has already solved the cause of that issue.
    Happy ADD/ADHD with Asperger's

  8. #8
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by erik.j View Post
    I think Centauri has already solved the cause of that issue.
    ahhh yes how did i miss that !!


    It is because there are so many helpful people on sitepoint !!!

  9. #9
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Centauri View Post
    It is due to having the very large header h1 element and negatively pulling the nav bar back up over it using em units - the position of the nav bar is entirely dependant on rendered text size (increase text size in FF and see what happens). Rather than have that empty h1, set #pageHeader to the correct height and apply header.gif as a background to #container.
    just out of interest, what is the correct height? thankyou!

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    just out of interest, what is the correct height? thankyou!
    About 147px.

    You would be better off putting that layout image gradient on #container instead of incorporating it in the h1 and then you won't need to specify a height in #container as the content will always be enough to cover it. (You shouldn't have a height on #container anyway as that will limit your layout.)

    You could then just put the 147px high header logo in the h1 but you should also put some text in that h1 for search engines and screen readers using an image replacement technique.

  11. #11
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    About 147px.

    You would be better off putting that layout image gradient on #container instead of incorporating it in the h1 and then you won't need to specify a height in #container as the content will always be enough to cover it. (You shouldn't have a height on #container anyway as that will limit your layout.)

    You could then just put the 147px high header logo in the h1 but you should also put some text in that h1 for search engines and screen readers using an image replacement technique.
    It has all gone a bit wrong !

    www.tecbit.net

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I'd do something like this:

    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" xml:lang="en" lang="en">
    <head>
    <title>www.TecBit.net - Technology for Everyone Everywhere!</title>
    <meta http-equiv="content-type" 
            content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <style type="text/css" media="all">
    body {background-color: #f1f1f1}
    .p1 {
      padding-left: 1.5em;
      padding-right: 1em;
        font:  17px sans-serif;
      color:  white;        
    }
    
    a img {border: none}
    
    /* Menu Container */
    
    
    /* CSS Menu Styles */
    
    .solidblockmenu li{
        display: inline;
    }
    
    .solidblockmenu li a{
            float: left;
            color: white;
            padding: 7px 11px;
            text-decoration: none;
            border-right: 1px solid #238dcf;
    }
    
    .solidblockmenu li a:visited{
            color: white;
    }
    
    .solidblockmenu li a:hover, .solidblockmenu li .current{
            color: white;
            background: transparent url(http://www.tecbit.net/blockactive.gif) center center repeat-x;
    }
    
    .solidblockmenu{
            margin: 0;
            padding: 0;
            font: bold 15px sans-serif;
            width: 100&#37;;
            border: 1px solid #238dcf;
            border-width: 1px 0;
            background: black url(http://www.tecbit.net/blockdefault.gif) center center repeat-x;
            list-style: none;
                    clear:both;
                    overflow:auto;
    }
    
    p.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
            padding-top: 1em;
    }
    
    /* Anchor Hover Styles */
    
    a {
            color:#ffffff;
            text-decoration:none;
    }
    
    
    
    /* Main Body Container */
    
    #container {
            font-family: sans-serif;
            margin-left: auto;
            margin-right: auto;
            width: 960px;  
            background:#fff  url(http://www.tecbit.net/header.gif) no-repeat top left; 
                    min-height:100%;
                    margin-bottom:-142px;
    }
    * html #container{height:100%}
    
    /* Header Styles */
    #pageHeader { 
        width: 960px;
        height:147px;
        position:relative;
    }
    #pageHeader h1 em,
    #pageHeader h1,
    #pageHeader h1 a{
        width:960px;
        height:147px;
        display:block;
        position:relative;
        margin:0;
        padding:0
    }
    #pageHeader h1 em{
        position:absolute;
        left:0;
        top:0; 
        background: url(http://www.tecbit.net/header.gif) no-repeat top left; 
    }
    
    
    #row1 {
           
      width: 960px; 
        height: 350px;
    }
    
    /* Main Article Box */
    
    
    
    #newarticle h3{
            padding-top: 1em;
            padding-left: 1.5em;
            padding-bottom: 1em;
            color:  white;
            display: none;    
    }
    
    
    #newarticle{
    
            float:left;
            background:  url(http://www.tecbit.net/articleh1.gif) no-repeat; 
            margin-left: 30px;             
            width:580px;
            height:320px;
            padding:0;    
            display:inline;    
    }
    
    /* Sub Article 1 Box*/
    
    #article1{
    
            float:left;
            margin-top: 61px;
            margin-left: 30px;             
            width:235px;
            height:230px;
            padding:0;    
            display:inline; 
            
    }
    
    .photo1{
            padding-right: 3em;
            margin-top: 1em;
            margin-left: 1em;
                        
    }
    .headline1{
            font-weight:bold;
            font-size: 13pt;
            padding-left: 1.50em;
            background: none;
            color: white;
    }
    
    /* Sub Article 2 Box */
    
    #article2{
    
            float:right;
            margin-top: 61px;
            margin-right: 40px;             
            width:235px;
            height:230px;
            padding:0;    
            display:inline;        
    }
    
    .photo2{
            padding-right: 3em;
            margin-top: 1em;
            margin-left: 1em;                   
    }
    .headline2{
            font-weight:bold;
            padding-left: 1.50em;
            
    }
    
    /* Channel Menu */
    
    #channels h3{
            padding-top: 1em;
            padding-left: 1.5em;
            padding-bottom: 2em;
            color:  white;
            display: none;
    }
    
    #channels{
            float:right;
            background:  url(http://www.tecbit.net/channelhead.png) no-repeat; 
            margin-right: 30px;
            width:300px;
            height:320px;
            padding:0;    
            display:inline;
    }
    
    
    #iconsrow1{
            margin-top: 80px;
    }
    
    a.computericon {
        background:url(http://www.tecbit.net/computingfade.png) no-repeat;
        float:left;
        height:80px;
        width:110px;
        }
    
    a.computericon:hover,.computingcurrent {
            background:url(http://www.tecbit.net/computing.png) no-repeat;
        float:left;
        height:80px;
        width:110px;
        }
    
    a.gameingicon {
        background:url(http://www.tecbit.net/gameingfade.png) no-repeat;
        float:left;
        height:80px;
        width:90px;
        }
    
    a.gameingicon:hover,.gameingcurrent {
            background:url(http://www.tecbit.net/gameing.png) no-repeat;
        float:left;
        height:80px;
        width:90px;
        }
    
    a.mobileicon {
        background:url(http://www.tecbit.net/mobilesfade.png) no-repeat;
        float:left;
        height:80px;
        width:90px;
        }
    
    a.mobileicon:hover,.currentmobile {
            background:url(http://www.tecbit.net/mobiles.png) no-repeat;
        float:left;
        height:80px;
        width:90px;
        }
    a.techicon {
        background:url(http://www.tecbit.net/techfade.png) no-repeat;
        float:left;
        height:80px;
        width:90px;
        }
    
    a.techicon:hover,.teccurrent {
            background:url(http://www.tecbit.net/tech.png) no-repeat;
        float:left;
        height:80px;
        width:90px;
        }
    
    
    a.electronicsicon {
        background:url(http://www.tecbit.net/electronicsfade.png) no-repeat;
        float:left;
        height:100px;
        width:120px;
        }
    
    a.electronicsicon:hover,.electronicscurrent {
            background:url(http://www.tecbit.net/electronics.png) no-repeat;
        float:left;
        height:100px;
        width:120px;
        }
    
    a.webicon {
        background:url(http://www.tecbit.net/webfade.png) no-repeat;
        float:left;
        height:80px;
        width:80px;
        }
    
    a.webicon:hover,.webcurrent {
            background:url(http://www.tecbit.net/web.png) no-repeat;
        float:left;
        height:80px;
        width:80px;
        }
    
    
    /* More  Articles Header */
    
    #morearticle h3{
    
            padding-top: 1em;
            padding-left: 1.5em;
            color:  white;
            padding-bottom: 1em;
            display: none;
    }
    
    #morearticle{
            margin-top: -20px;
            background:  url(http://www.tecbit.net/morearticle.png) no-repeat; 
            float:left;
            margin-left: 30px;             
            width:580px;
            height:700px;
            padding:0;    
            display:inline;       
    }
    
    
    
    /* H4 */
    
    #h4{
            margin-top: -20px;
            float:right;
            background:  url(http://www.tecbit.net/h4.png) no-repeat; 
            margin-right: 30px;
            width:300px;
            height:500px;
            padding:0;    
            display:inline;       
    }
    
    #h4 h3{
    
            padding-top: 1em;
            padding-left: 1.5em;
            color:  white;
            padding-bottom: 1em;
            display: none;
    }
    
    
    
    /* Footer */
    
    
    * {
        margin: 0;
        padding:0;
    }
    
    html, body {
        height: 100%;
    }
    
    .footer, .push {
        height: 142px; /* .push must be the same height as .footer */
      background-color:#1e87c8;
      margin-left: auto;
      margin-right: auto;
      width: 960px; 
        clear:both;
    }
    
    .C1 {
            font:  17px sans-serif;
            color:  white;
            text-align: center;
            Margin-Top: 2em;
    }
    
    .C2 {
            font:  17px sans-serif;
            color:  white;
            text-align: center;
            Margin-Top: .50em;
    }
    
    /* Pre-Load Images */ 
    
    
    
    div#preload {position:absolute;top:-9999em;left:-999em }
    
    /* Mobile Channel Styles */
    
    #mobileheader{
    
            float:left;
            background:  url(http://www.tecbit.net/mobilehead.gif) no-repeat;
            background-color: #45aae9;
            margin-left: 30px;             
            width:570px;
            height:900px;
            padding:0;    
            display:inline;    
    }
    
    /* Games Channel Styles */
    
    #gamesheader{
    
            float:left;
            background:  url(http://www.tecbit.net/gamehead.gif) no-repeat;
            background-color: #45aae9;
            margin-left: 30px;             
            width:570px;
            height:900px;
            padding:0;    
            display:inline;    
    }
    
    /* Computing Channel Styles */
    
    #computingheader{
    
            float:left;
            background:  url(http://www.tecbit.net/computinghead.gif) no-repeat;
            background-color: #45aae9;
            margin-left: 30px;             
            width:570px;
            height:900px;
            padding:0;    
            display:inline;    
    }
    
    /* Tec Channel Styles */
    
    #techeader{
    
            float:left;
            background:  url(http://www.tecbit.net/techead.gif) no-repeat;
            background-color: #45aae9;
            margin-left: 30px;             
            width:570px;
            height:900px;
            padding:0;    
            display:inline;    
    }
    
    /* Electronics Channel Styles */
    
    #elecheader{
    
            float:left;
            background:  url(http://www.tecbit.net/elechead.gif) no-repeat;
            background-color: #45aae9;
            margin-left: 30px;             
            width:570px;
            height:900px;
            padding:0;    
            display:inline;    
    }
    
    /* Web Channel Styles */
    
    #webheader{
    
            float:left;
            background:  url(http://www.tecbit.net/webhead.gif) no-repeat;
            background-color: #45aae9;
            margin-left: 30px;             
            width:570px;
            height:900px;
            padding:0;    
            display:inline;    
    }
    
    /* Google Search Bar Styles */
    
    .searchbox {
                 position:absolute;
                    top:62px;
                    right:30px;
            background:  url(http://www.tecbit.net/searchbar.png) no-repeat;
            width:421px;
                    height:45px;
    }
    
    .searchbar {
            margin-right: 20px;
            margin-top: 6px;
            float:right; 
                    display:inline;      
    }
    
    .location {
            font: bold 13px sans-serif;
            padding-left: 25px;
            margin-bottom: 5px;
            background-color: #035588;
    }
    
    .homelocation {
            font: bold 13px sans-serif;
            color:white;
            padding-left: 25px;
            margin-bottom: 5px;
            background-color: #035588;
    }
    
    /* Footer */
    
    .teccopyright {
        float: right;
            margin-top: 1em;
        line-height: 20px;
        color: #ffffff;
        font-size: 15px;
        border-left-width: 1px;
        border-left-style: solid;
        border-left-color: #ffffff;
        width: 300px;
        height: 110px;
        text-align: right;
        padding-right: 40px;
    }
    
    </style>
    </head>
    <body>
    <div id="container">
        <div id="pageHeader">
            <h1><a href="#">Tecbit.net - Technology for everyone everywhere<em></em></a></h1>
            <form action="http://www.google.com/cse" id="cse-search-box">
                <div class="searchbox">
                    <div class="searchbar">
                        <input type="hidden" name="cx" value="000329636563476331994:fq-hsly-qx4" />
                        <input type="hidden" name="ie" value="UTF-8" />
                        <input type="text" name="q" size="41" />
                        <input type="submit" name="sa" value="Search" />
                    </div>
                </div>
            </form>
            <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en"></script>
        </div>
        <ul class="solidblockmenu">
            <li><a href="Index.html" class="current">Home</a></li>
            <li><a href="computing.html">Computing</a></li>
            <li><a href="gameing.html">Gaming</a></li>
            <li><a href="mobiles.html">Mobiles</a></li>
            <li><a href="tec.html">Tech Articles</a></li>
            <li><a href="electronics.html">Electronics</a></li>
            <li><a href="web.html">The Web</a></li>
            <li><a href="Dummy8">About Us</a></li>
        </ul>
        <div class="homelocation">
            <p>Welcome to Tecbit.net! Please Select a Channel</p>
        </div>
        <div id="row1">
            <div id="newarticle">
                <h3><span>What's Hot on TecBit</span></h3>
                <div id="article1"><img class="photo1" src="http://www.tecbit.net/iphone.png" height="180" width="155" alt="Apple iPhone" title="Apple iPhone" />
                    <p class="headline1">iPhone 3G: Apple's latest</p>
                </div>
                <div id="article2"><img class="photo2" src="http://www.tecbit.net/ps3.png" height="180" width="155" alt="Sony Playstation 3" title="Sony Playstation 3" />
                    <p class="headline1">Sony's PS3 Console</p>
                </div>
            </div>
            <div id="channels">
                <h3><span>Select a Channel</span></h3>
                <div id="iconsrow1"> <a class="computericon" href="computing.html"></a> <a class="gameingicon" href="gameing.html"></a> <a class="mobileicon" href="mobiles.html"></a> </div>
                <div id="iconsrow2"> <a class="techicon" href="tec.html"></a> <a class="electronicsicon" href="electronics.html"></a> <a class="webicon" href="web.html"></a> </div>
            </div>
        </div>
        <div id="row2">
            <div id="morearticle">
                <h3><span>Recent Articles</span></h3>
                <div id="recent"></div>
            </div>
            <div id="h4">
                <h3><span>Hot Links</span></h3>
            </div>
            <div id="preload"> <img src="http://www.tecbit.net/computing.png" width="110" height="80" alt="Image 01" /> <img src="http://www.tecbit.net/gameing.png" width="90" height="80" alt="Image 02" /> <img src="http://www.tecbit.net/mobiles.png" width="80" height="80" alt="Image 03" /> <img src="http://www.tecbit.net/tech.png" width="90" height="80" alt="Image 04" /> <img src="http://www.tecbit.net/electronics.png" width="120" height="100" alt="Image 05" /> <img src="http://www.tecbit.net/web.png" width="80" height="80" alt="Image 06" /> </div>
        </div>
        <div class="push"></div>
    </div>
    <div class="footer">
        <div class="teccopyright">
            <h3>Tecbit | Technology for Everyone</h3>
            <p>Copyright &copy; 2008 Tecbit.net</p>
            <p>Terms of Service | Privacy Policy</p>
            <p>All Rights Reserved</p>
        </div>
    </div>
    </body>
    </html>

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Note that I have removed the height from #container and cleared the floats properly which allows the layout to expand.

    I have added an image replacement technique for your header which allows the h1 text to be in place.

    I have also fixed the footer and removed some superfluous divs.

  14. #14
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Note that I have removed the height from #container and cleared the floats properly which allows the layout to expand.

    I have added an image replacement technique for your header which allows the h1 text to be in place.

    I have also fixed the footer and removed some superfluous divs.
    your a legend paul! I got it working in the end, but you cleaned it up for me and i thankyou very much

  15. #15
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just one more thing!

    The rest of my "channel" pages are slightly out, what is the fastest way to remedy this please?

    thanks!!

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It all depends on what's wrong exactly. You'll have to show an example and then say what's wrong as I'm not sure I know what your channel pages are

    It's likely to be those heights you've set in all those other styles causing you problems.

  17. #17
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.tecbit.net/computing.html

    here you can see there is no secondary horizontal menu as found underneath the navbar on the home page

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    There's no easy way as you will have to change the html on each page. It's easy once you've done it once and this is how the html page for that page should look.

    Code:
    <div id="container">
        <div id="pageHeader">
            <h1><a href="#"><em></em></a></h1>
            <form action="http://www.google.com/cse" id="cse-search-box">
                <div class="searchbox">
                    <div class="searchbar">
                        <input type="hidden" name="cx" value="000329636563476331994:fq-hsly-qx4" />
                        <input type="hidden" name="ie" value="UTF-8" />
                        <input type="text" name="q" size="41" />
                        <input type="submit" name="sa" value="Search" />
                    </div>
                </div>
            </form>
            <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en"></script>
        </div>
        <ul class="solidblockmenu">
            <li><a href="index.html">Home</a></li>
            <li><a href="computing.html" class="current">Computing</a></li>
            <li><a href="gameing.html">Gaming</a></li>
            <li><a href="mobiles.html">Mobiles</a></li>
            <li><a href="tec.html">Tech Articles</a></li>
            <li><a href="electronics.html">Electronics</a></li>
            <li><a href="Dummy6">The Web</a></li>
            <li><a href="Dummy7">About</a></li>
        </ul>
        <div class="location"><a href="index.html">TecBit</a> > <a href="computing.html">Computing</a></div>
        <div id="row1">
            <div id="computingheader"> </div>
            <div id="channels">
                <h3><span>Select a Channel</span></h3>
                <div id="iconsrow1"> <a class="computingcurrent" href="computing.html"></a> <a class="gameingicon" href="gameing.html"></a> <a class="mobileicon" href="mobiles.html"></a> </div>
                <div id="iconsrow2"> <a class="techicon" href="tec.html"></a> <a class="electronicsicon" href="electronics.html"></a> <a class="webicon" href="web.html"></a> </div>
            </div>
        </div>
        <div id="row2">
            <div id="h4">
                <h3><span>Hot Links</span></h3>
            </div>
            <div id="preload"> <img src="http://www.tecbit.net/computing.png" width="110" height="80" alt="Image 01" /> <img src="http://www.tecbit.net/gameing.png" width="90" height="80" alt="Image 02" /> <img src="http://www.tecbit.net/mobiles.png" width="80" height="80" alt="Image 03" /> <img src="http://www.tecbit.net/tech.png" width="90" height="80" alt="Image 04" /> <img src="http://www.tecbit.net/electronics.png" width="120" height="100" alt="Image 05" /> <img src="http://www.tecbit.net/web.png" width="80" height="80" alt="Image 06" /> </div>
        </div>
        <div class="push"></div>
    </div>
    <div class="footer">
        <p class="C1">(C) 2008 TecBit.net. All rights reserved. </p>
        <p class="C2">Terms of Service | Privacy Policy </p>
    </div>
    Basically, you need to remove the menu open and closing divs as they are not needed and then move the closing div of #pageHeader above the horizontal menu. Next remove the wrapper opening and closing divs.

    Then move the push footer up one level so its inside #container and acts as a clearer and a push.

    Shouldn't take more than a couple of minutes per page

  19. #19
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks paul! is my indedntation ok here?

    http://www.tecbit.net/computing.html


    thanks

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I had a quick look and it seems ok except that you need to get rid of .wrapper which isn't used anymore and would upset the 100&#37; high footer technique anyway.

  21. #21
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I had a quick look and it seems ok except that you need to get rid of .wrapper which isn't used anymore and would upset the 100% high footer technique anyway.
    your a Legend paul !


Bookmarks

Posting Permissions

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