SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast simonpointer's Avatar
    Join Date
    Jun 2006
    Location
    Guildford UK
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Strange border isssue in Firefox - please help

    OK, so I have done a few layouts and quite a lot of work with CSS so far, but I have notced a strange thing in FF which is having an effect on my current layout. I am trying to trouble shoot so made a test page - here's the code:


    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>Simon Pointer - test layout page</title>
    <meta name="description" content="My interests and hobbies and a bit about me" />
    <meta name="keywords" content="about me, golf, motorcycling, personal stuff, hobbies and interests, winter sports, ravings, loony
    marketing manager, marketing communications, understanding people, web, on-line, online, " />
    
    
    <style type="text/css" media="screen">
    
    /* main layout styles */
    
    
    /*\*/
    * html .gainlo {
    height: 1%;
    }
    /* */
    
    body {
    margin: 0;
    padding: 20px 0 0 0;
    text-align: center;
    background: #fff;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    color: #483C2A;
    }
    
    #wrap {
    background: #ccc;
    width: 90%;
    margin: 0 auto;
    padding: 0;
    border: 1px solid #000;
    }
    
    #layout {
    background: #aaa;
    text-align: left;
    color: #483C2A;
    border: 1px dashed red;
    margin: 0;
    padding: 0;
    clear: right;
    }
    
    #innerwrap {
    background: #9e9e9e;
    border: none;
    margin: 0;
    padding: 0;
    }
    
    #dinwrap {
    background: #8a8a8a;
    padding: 130px 0 50px 0;
    }
    
    #content {
    background-color: #e6e6e6;
    margin: 0 200px 0 200px;
    width: 60%;
    min-height: 600px;
    }
    
    /* menu styles */
    
    #mainav {
    background: #fff;
    margin: 0;
    padding: 0 0 20px 0;
    float: left;
    width: 195px;
    font-size: 80%;
    position: relative;
    left: 2px;
    top: 20px;
    }
    
    #mainav ul{
    background: #5f5f5f;
    margin: 0;
    padding: 0;
    list-style: none;
    }
    
    #mainav li {
    margin: 0;
    padding: 10px 0 0 25px;
    }
    
    #secondnav {
    background: #909090;
    margin: 0;
    padding: 0 0 18px 0;
    color: #000;
    text-align: right;
    float: right;
    width: 195px;
    font-size: 80%;
    position: relative;
    top: 280px;
    }
    
    #secondnav ul {
    background: url(../img/style/secmentop.gif) top right no-repeat;
    margin: 0;
    padding: 0;
    list-style: none;
    }
    
    #secondnav li {
    margin: 0;
    padding: 10px 20px 0 0;
    border: 0;
    }
    
    
    #logo h1 {
    height: 22px;
    background: url(logo.gif) no-repeat;
    text-indent: -5000px;
    width: 211px;
    float: right;
    margin: 0;
    padding: 0;
    }
    
    #logo p {
    height: 0;
    clear: right;
    }
    
    #logo {
    height: 110px;
    margin: 0;
    padding: 0;
    }
    
    #footer {
    background-color: #fff;
    padding: 0;
    margin: 0;
    font-size: x-small;
    margin-bottom: 20px;
    }
    
    #footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    }
    
    #footer li {
    display: inline;
    padding: 0 20px 0 20px;
    margin: 0;
    }
    
    
    </style>
    
    
    </head>
    
    <body>
    
    <!--central wrapper starts here-->
    <div id="wrap">
    
    
    <div id="logo">
      <h1>Simon Pointer - Freelance web consultant</h1>
    <p>&nbsp;</p>
    </div>
    
    <!--layout area starts here-->
    <div id="layout" class="gainlo">
    <div id="innerwrap" class="gainlo">
    <div id="dinwrap" class="gainlo">
      <!--main nav-->
      <div id="mainav">
        <!--skip main nav-->
        <a href="#content" name="beginmainnav" id="beginmainnav" accesskey="s"><img src="navskp.gif" alt="skip main navigation" /></a>
    <!-- main nav starts -->
    
    <ul>
    <li><a href="../index.htm">Home <em>(1)</em> </a></li>
    <li><a href="../info/aboutme.shtml">A<em>b</em>out me</a> </li>
    <li><a href="../info/consulting.shtml"><em>C</em>onsultancy</a></li>
    <li><a href="../info/training.shtml"><em>T</em>raining</a></li>
    <li><a href="../info/projects.shtml"><em>P</em>rojects</a></li>
    <li><a href="../info/underrepair.shtml"><em>I</em>maging</a></li>
    <li><a href="../info/moreinfo.shtml"><em>W</em>ork with me</a></li>
    <li><a href="../info/spcv.shtml">My C<em>V</em></a></li>
    <li><a href="../forms/contact.shtml">Contact me <em>(9)</em> </a></li>
    </ul>
    <!-- main nav ends -->
    	</div>
    
      <div id="secondnav">
    
    <!-- second nav starts -->
    
    
    <ul>
    <li><a href="../secondary/accesskeys.shtml">Accessibility <em>(0)</em></a></li>
    <li><a href="../secondary/sitemap.shtml">Site map <em>(3)</em></a></li>
    <li><a href="../secondary/terms.shtml">T's &amp; C's <em>(8)</em></a></li>
    <li><a href="../secondary/cpyrgt.shtml">Cop<em>y</em>right</a></li>
    <li><a href="../secondary/techno.shtml">Using my site <em>(6)</em></a></li>
    </ul>
    <!-- second nav ends -->
    	</div>
    
      <div id="content" class="gainlo">
      <a href="#beginmainnav" name="goback" id="goback"><img src="navskp.gif" alt="jump back to main nav"/></a>
      <!-- InstanceBeginEditable name="content" -->
     <h1 id="abt">About me</h1>
     <p>Wow, it's quite hard writing about yourself you know, especially as it's really not in my nature! Still, I suppose if you are going to sell yourself you have to be a bit like that.</p>
     <p>I come from a marketing communications background where understanding people and what makes them tick is the key, and not surprisingly I consider my on-line work to be exactly the same.</p>
     <h2 id="rav">The ravings of a loony!</h2>
       <p>OK so the web is pretty cool, but it's not perfect, and after quite a bit of experience I have my own views on what works well and what doesn't, and what I agree with and what I don't. I have tried to capture a lot of my silly ravings, opinions and thoughts on <a href="http://bigbogblog.blogspot.com">my blog!</a> Why not have a look and even add your own opinion.</p>
       <h2 id="hobbies">Hobbies and interests</h2>
       <h3>Motorcycling</h3>
       <p>I have been riding bikes for many years, and I have also spent some time working in the industry as a marketing manager for Yamaha. I currently ride a 1000cc growling v-twin  Aprilia . She's a bit naughty with some loud exhausts, but she does make a lovely noise, and I have fitted some neat electronics so that I can listen to music and answer my phone on the move.</p>
       <h3>Golf</h3>
       <p>I have been playing the wonderful game since I was  7 and, and currently play off 6. I am a member of Pyrford golf club in surrey, which is a great course, with a lot of water in play, and I'd love to take you round it and talk about your project with you - it is a deduct able expense after all!</p>
       <h3>Winter sports </h3>
       <p>It's such a shame we don't have any snowy mountains here! I have been skiing since I was 12 and have also learned to snow board, although if pushed I'd claim to be a skier rather than a boarder - sorry boarders! Still, at least I've had a go at both!</p>
       <p>I have skied all over  Europe and many times in Canada, where Whistler is a favourite. I'd like to do a  tour of all the little resorts in the Canadian Rockies, I have yet to Heliski as last time I was about to go I broke a bone in my hand the day before. I'd  like to try skiing in some far flung place where no one else goes like Argentina or perhaps right up in the Yukon or Alaska. </p>
       <h2 id="personal">Personal stuff </h2>
     <p>I grew up in Africa and if you cut me open, you would find it running right through me.  I love it and all it's people.</p>
     <p>I am really well traveled and married to my lovely wife Helen. We don't have any children, but do love the freedom of being able to do what we want when we want - a bit selfish I know, but hey, we make our own choices right?</p>
     <!-- InstanceEndEditable -->
        <!-- content ends -->
      </div>
    
    <!-- dinwrap ends here -->
    </div>
    
    <!-- innerwrap ends here -->
    </div>
    
    <!--layout ends here-->
    </div>
    <div id="footer">
    <!-- footer starts -->
    <ul>
    <li><a href="http://www.alistapart.com/stories/betterliving/">xhtml</a></li>
    <li><a href="http://www.webstandards.org/">web standards</a></li>
    <li><a href="http://www.csszengarden.com/">css</a></li>
    </ul>
    <!-- footer ends -->
    </div>
    
    <!--wrap ends here-->
    </div>
    </body>
    </html>
    Ok so I have added and checked a few things, here's some notes:

    I have used an image swap (Phark method) for the logo, which is 22 x 211 px in size, hence the width and height properties.
    I have a multi warpped layout which needs to be there for other reasons.
    I have added a quick fix for IE to make sure that the wrappers "have layout" which I will probably remove and make a conditional comment later.
    I have added an empty <p> tag to the logo div and cleared it to make the containing div contain all the logo element (the peek a boo bug - I think)
    I have added some boreders and background colours so I can see what's going on for trouble shooting.

    Here's the issue:

    I have tested in IE 6 and FF, and generally is pretty robust and displaying the same in both except the positioning of the logo.
    FF seems to add some padding or margin to it, which IE doesn't. I would expect it to layout tightly to the top right as it does in IE.
    What's wierd is that when I apply some actual border to it, it seems to then position the same in both IE and FF.
    Of course I don't want borders on the layout, I have only added them so that I can troubleshoot.
    I have tried using values of both border:0 and border:none, but this doesn't work either, and it just reverts back in FF again.

    What am I doing wrong, is FF inheriting values from elsewhere, does it apply some default values even though I have tried to specify no padding and margin as much as possible to trouble shhot the issue.

    Please help. Thanks.

  2. #2
    SitePoint Enthusiast simonpointer's Avatar
    Join Date
    Jun 2006
    Location
    Guildford UK
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi everyone

    Here's a link to the live page

    http://82.110.105.20/totemdev.co.uk/mywork/

    Add or remove some border from the divs and see what happens

  3. #3
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Floats are not cleared in header, content box, 3 pixel jog in IE

    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>Simon Pointer - test layout page</title>
    <meta name="description" content="My interests and hobbies and a bit about me" />
    <meta name="keywords" content="aboutme,golf,motorcycling,personalstuff,hobbiesandinterests,wintersports,ravings,loonymarketingmanager,marketingcommunications, understandingpeople,web,on-line,online" />
    
    
    <style type="text/css" media="screen">
    
    /* main layout styles */
    
    *{margin: 0;padding:0;}
    
    /*\  */
    * html .gainlo {
    height: 1%;
    }
    /* */
    
    
    body {
    padding:20px 0 0 0;
    text-align:center;
    background:#fff;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:0.9em;
    color:#483C2A;
    }
    
    head+/**/body .fc:after{
    content:".";
    display:block;
    height:0px;
    clear:both;
    visibility:hidden;
    }
    
    /* mac hide \*/
    * html .fc{height:1%;}
    *+html .fc{display:inline-block;}
    /* End hide */
    
    #wrap{
    background: #ccc;
    width:90%;
    margin:0 auto;
    border:1px solid #000;
    }
    
    #layout{
    background: #aaa;
    text-align: left;
    color: #483C2A;
    border: 1px dashed red;
    }
    
    #innerwrap{background: #9e9e9e;}
    
    #dinwrap{
    background:#8a8a8a;
    padding:130px 0 50px 0;
    }
    
    #content{
    background: #e6e6e6;
    min-height:600px;
    }
    
    head+body .r{margin:0 200px 0 200px;}
    head+body #content{float:left;width:100%}
    * html .r{float:left;}
    * html #content{margin:0 5px 0 5px;}
    
    /* menu styles */
    
    #mainav{
    background:#fff;
    padding: 0 0 20px 0;
    float:left;
    width:195px;
    font-size:80%;
    position:relative;
    left:0px;
    top:20px;
    }
    
    #mainav ul{
    background: #5f5f5f;
    list-style: none;
    }
    
    #mainav li {
    padding: 10px 0 0 25px;
    }
    
    #secondnav {
    background: #909090;
    padding:0 0 18px 0;
    color: #000;
    text-align: right;
    float:right;
    width:195px;
    font-size:80%;
    position:relative;
    top:280px;
    }
    
    #secondnav ul {
    background: url(../img/style/secmentop.html) top right no-repeat;
    list-style: none;
    }
    
    #secondnav li {
    padding: 10px 20px 0 0;
    }
    
    
    #logo h1 {
    height: 22px;
    background: url(logo.gif) no-repeat;
    text-indent: -5000px;
    width:211px;
    float:right;
    }
    
    #logo p {
    height: 0;
    clear:right;
    }
    
    #logo {height:110px;}
    
    #footer {
    background: #fff;
    font-size: x-small;
    margin-bottom:20px;
    }
    
    #footer ul{
    list-style: none;
    }
    
    #footer li {
    display: inline;
    padding: 0 20px 0 20px;
    }
    
    </style>
    </head>
    <body>
    <!--central wrapper starts here-->
    <div id="wrap">
    
    
    <div id="logo" class="fc">
    <h1>Simon Pointer - Freelance web consultant</h1>
    <p>&nbsp;12345</p>
    </div>
    
    <!--layout area starts here-->
    <div id="layout" class="gainlo">
    <div id="innerwrap" class="gainlo">
    <div id="dinwrap" class="gainlo fc">
      <!--main nav-->
      <div id="mainav">
        <!--skip main nav-->
        <a href="#content" name="beginmainnav" id="beginmainnav" accesskey="s"><img src="navskp.gif" alt="skip main navigation" /></a>
    <!-- main nav starts -->
    
    <ul>
    <li><a href="http://82.110.105.20/totemdev.co.uk/index.htm">Home <em>(1)</em> </a></li>
    <li><a href="http://82.110.105.20/totemdev.co.uk/info/aboutme.shtml">A<em>b</em>out me</a> </li>
    <li><a href="http://82.110.105.20/totemdev.co.uk/info/consulting.shtml"><em>C</em>onsultancy</a></li>
    <li><a href="http://82.110.105.20/totemdev.co.uk/info/training.shtml"><em>T</em>raining</a></li>
    <li><a href="http://82.110.105.20/totemdev.co.uk/info/projects.shtml"><em>P</em>rojects</a></li>
    <li><a href="http://82.110.105.20/totemdev.co.uk/info/underrepair.shtml"><em>I</em>maging</a></li>
    <li><a href="http://82.110.105.20/totemdev.co.uk/info/moreinfo.shtml"><em>W</em>ork with me</a></li>
    <li><a href="http://82.110.105.20/totemdev.co.uk/info/spcv.shtml">My C<em>V</em></a></li>
    <li><a href="http://82.110.105.20/totemdev.co.uk/forms/contact.shtml">Contact me <em>(9)</em> </a></li>
    </ul>
    <!-- main nav ends -->
    	</div>
    
      <div id="secondnav">
    
    <!-- second nav starts -->
    
    
    <ul>
    <li><a href="http://82.110.105.20/totemdev.co.uk/secondary/accesskeys.shtml">Accessibility <em>(0)</em></a></li>
    <li><a href="http://82.110.105.20/totemdev.co.uk/secondary/sitemap.shtml">Site map <em>(3)</em></a></li>
    <li><a href="http://82.110.105.20/totemdev.co.uk/secondary/terms.shtml">T's &amp; C's <em>(8)</em></a></li>
    <li><a href="http://82.110.105.20/totemdev.co.uk/secondary/cpyrgt.shtml">Cop<em>y</em>right</a></li>
    <li><a href="http://82.110.105.20/totemdev.co.uk/secondary/techno.shtml">Using my site <em>(6)</em></a></li>
    </ul>
    <!-- second nav ends -->
    	</div>
    	
    <div class="r fc">
    
      <div id="content" class="gainlo ">
      <a href="#beginmainnav" name="goback" id="goback"><img src="navskp.gif" alt="jump back to main nav" /></a>
      <!-- InstanceBeginEditable name="content" -->
     <h1 id="abt">About me</h1>
     <p>Wow, it's quite hard writing about yourself you know, especially as it's really not in my nature! Still, I suppose if you are going to sell yourself you have to be a bit like that.</p>
     <p>I come from a marketing communications background where understanding people and what makes them tick is the key, and not surprisingly I consider my on-line work to be exactly the same.</p>
     <h2 id="rav">The ravings of a loony!</h2>
       <p>OK so the web is pretty cool, but it's not perfect, and after quite a bit of experience I have my own views on what works well and what doesn't, and what I agree with and what I don't. I have tried to capture a lot of my silly ravings, opinions and thoughts on <a href="http://bigbogblog.blogspot.com/">my blog!</a> Why not have a look and even add your own opinion.</p>
       <h2 id="hobbies">Hobbies and interests</h2>
       <h3>Motorcycling</h3>
       <p>I have been riding bikes for many years, and I have also spent some time working in the industry as a marketing manager for Yamaha. I currently ride a 1000cc growling v-twin  Aprilia . She's a bit naughty with some loud exhausts, but she does make a lovely noise, and I have fitted some neat electronics so that I can listen to music and answer my phone on the move.</p>
       <h3>Golf</h3>
       <p>I have been playing the wonderful game since I was  7 and, and currently play off 6. I am a member of Pyrford golf club in surrey, which is a great course, with a lot of water in play, and I'd love to take you round it and talk about your project with you - it is a deduct able expense after all!</p>
       <h3>Winter sports </h3>
       <p>It's such a shame we don't have any snowy mountains here! I have been skiing since I was 12 and have also learned to snow board, although if pushed I'd claim to be a skier rather than a boarder - sorry boarders! Still, at least I've had a go at both!</p>
       <p>I have skied all over  Europe and many times in Canada, where Whistler is a favourite. I'd like to do a  tour of all the little resorts in the Canadian Rockies, I have yet to Heliski as last time I was about to go I broke a bone in my hand the day before. I'd  like to try skiing in some far flung place where no one else goes like Argentina or perhaps right up in the Yukon or Alaska. </p>
       <h2 id="personal">Personal stuff </h2>
     <p>I grew up in Africa and if you cut me open, you would find it running right through me.  I love it and all it's people.</p>
     <p>I am really well traveled and married to my lovely wife Helen. We don't have any children, but do love the freedom of being able to do what we want when we want - a bit selfish I know, but hey, we make our own choices right?</p>
     <!-- InstanceEndEditable -->
        <!-- content ends -->
      </div>
      
    </div>
    <!-- dinwrap ends here -->
    </div>
    
    <!-- innerwrap ends here -->
    </div>
    
    <!--layout ends here-->
    </div>
    <div id="footer">
    <!-- footer starts -->
    <ul>
    <li><a href="http://www.alistapart.com/stories/betterliving/">xhtml</a></li>
    <li><a href="http://www.webstandards.org/">web standards</a></li>
    <li><a href="http://www.csszengarden.com/">css</a></li>
    </ul>
    <!-- footer ends -->
    </div>
    
    <!--wrap ends here-->
    </div>
    </body>
    </html>

  4. #4
    SitePoint Enthusiast simonpointer's Avatar
    Join Date
    Jun 2006
    Location
    Guildford UK
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks all for nerds, but I am not too sure I understand what you have done?
    Sorry.
    I see lots of hacks and an additional div.

    I would like to know what they all do, if you have the time explain, I don;t want to just hack them into my page without understanding it first.

    Thanks

  5. #5
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Float clearing
    head+/**/body .fc:after{/* min-height browsers but not IE7*/
    content:".";
    display:block;
    height:0px;
    clear:both;
    visibility:hidden;
    }

    /* mac hide \*/
    * html .fc{height:1%;} /* IE < 7 same as your .gainlo class*/
    *+html .fc{display:inline-block;}/* IE > 6 */
    /* End hide */

    this floats the center column, makes it adjust to any width, no 3 pixel jog for IE
    head+body .r{margin:0 200px 0 200px;}
    head+body #content{float:left;width:100%}
    * html .r{float:left;}
    * html #content{margin:0 5px 0 5px;}

  6. #6
    SitePoint Enthusiast simonpointer's Avatar
    Join Date
    Jun 2006
    Location
    Guildford UK
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi thanks again, but I still don't get it. Sorry of I am being thick.

    Where can I get a detailed explanation of this?

    I don't understand the selctor

    head+/**/body .fc:after - can you explain what it is doing?

    What is
    content:".";
    I have never seen anything like that before?

    this floats the center column, makes it adjust to any width, no 3 pixel jog for IE
    I am not too sure that I want to float the center column, why should I need to?

    no 3 pixel jog for IE
    What do you mean by a jog, and why do I need one, and why 3 pixels?

    Sorry for all the questions, but lastly, why will floating, and clearing the content area have any effect on the header div? Content is a child of wrapper and has no direct bearing on on the content column?

    Why does the position seem to change in FF when I apply borders to the header div?

    Thanks again.
    PS Good luck against Argentina tonight.

  7. #7
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    you have floats in the header and content box so you need clearing
    PIE way of clearing
    http://www.positioniseverything.net/easyclearing.html
    see als FAQ CSS
    http://www.sitepoint.com/forums/show...5&postcount=15
    IE 7 ezy hacks
    http://nanobox.chipx86.com/blog/2006...ks-for-ie7.php

    if you float the center box you can clear floats in the box
    see Paul's Demo of the problem
    http://www.pmob.co.uk/temp/flclear1.htm

    PS a margin left right wrapper model is a single column with floats in it, that makes no use of the wrapping

    3 pixel jog floats none floats in IE
    PIE info
    http://www.positioniseverything.net/...reepxtest.html
    see also FAQ CSS
    http://www.sitepoint.com/forums/show...5&postcount=15

    you don't clear floats and borders sometimes clear floats, help

  8. #8
    SitePoint Enthusiast simonpointer's Avatar
    Join Date
    Jun 2006
    Location
    Guildford UK
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks


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
  •