SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Melbourne, Vic, Australia
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Is IE really the enemy ?? ( Part 1 )

    Hi Everyone,

    I have been reading Sitepoint forums and articles for some time, I have purchased some of the Sitepoint books and I have been playing with CSS layouts and page design and I am discovering a wonderful new way to approach site design.

    I am however still learning (quite confused at times) but everywhere I read the deionisation of Internet explorer over NS, and MOZ...

    Without going into a lot of detail in my first post I am having some issues with replicating the same results in IE and NS/MOZ. ( Like everyone else. ) The problem I have is that I am getting unexpected results .. NOT IN IE but in NS and MOZ...

    I have constructed a basic page : http://au.channelenablers.com/cssexp/basic.asp

    If I view it in IE, everything looks as I would expect (Please forgive the lack of CSS shorthand ... I use dream weaver for my experimenting)

    If I view it in NS or MOZ, It I get two problems... 1: The right hand "page" boarder drops to about half of what it should be.. and 2: The "right" div does not push down the "main" containing div as it does in IE

    Can anyone help me with both a way around this and an explanation of why? A lot of the assistance I find on the web tend to give example of 'correcting' code but do not explain why.

    I have discovered that this gap seems to be effected by padding of the "Bar" , "header", "main" and "footer" divs.

    I also found that I must have the same padding on all the divs or they will not line up!?!? Why does the internal padding of the divs affect the body left and right margin?

    an example of the same page with the "main" div having a padding of 20px is at : http://au.channelenablers.com/cssexp...ain_pad_20.asp

    Its fine in IE but not in NS/MOZ .. The extra padding pushes out the div to the right.
    Any assistance would be greatly appreciated. I understand and agree that just about any other browser is better than IE, but the high usage, and at this stage what I am finding to be "as expected" results I am a little confused and wounder what I am doing wrong!

    Thanks heaps in advanced.

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    1. Add a DOCTYPE of some type. In your case I recommend HTML 4.01 Transitional:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    This will make the browsers come to some type of consensus as to how to render your page.

    2. You're floating #right, but not clearing it. Add this line of CSS to your rule for #footer:
    Code:
    clear: both;
    If you had enough content that would work perfectly. However, since you don't have enough content, change your code for #main from this:
    HTML Code:
    <div id="main">
    
      	<div id="right">
          <p>Whats News.... . </p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
    
          <p><br>
            <br>
            <br>
            <br>
          </p>
        </div>
        <p>Main content<br>
        </p>
    
        </div>
    To this:
    HTML Code:
    <div id="main">
    
      	<div id="right">
          <p>Whats News.... . </p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
    
          <p><br>
            <br>
            <br>
            <br>
          </p>
        </div>
        <p>Main content<br>
        </p>
    <br clear="all">
        </div>
    The "<br clear='all'>" will force #main to grow past any floated content like your sidebar.

    Once you learn more about the ins and outs of CSS this all becomes second nature. Don't be so quick to blame the browsers .

  3. #3
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Melbourne, Vic, Australia
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Vinnie,

    Thank you so much for that... I wasn’t meaning to blame browsers... I just read so much about how IE is so bad and it was the one that was working for me .. so I was pretty sure it was me ..

    I have never really understood the clear properly, and from the number of solutions I have seen in these forums that require clears being added or removed I suspect I am not alone by a long way. But after you fix, I think I might have a bit of a handle on it now.. Thank you… Its amazing how a relatable example and help so much!

    I actually deliberately removed all the content in the #main section so that this would happen... One of the sites that I am going is going to use database driven content entered by the end users so... I will never know what they will be entering (Or Not as the case may be ). I needed to understand / find a solution rather than just add a few <br>’s or something, so thank you again!!!!

    One question regrading the <br clear="all">..... can I use something other than a <br> so that there is not a gap at the bottom of the content ? Not a biggie (It doesn’t look bad or anything), just thought I would ask.

    But I still a problem though

    Ok, so now it looks the same in both browsers, but I am still stuck with the left hand gutter being 50px as requested using the body margin ( also tried using a margin on the .page ), but the right hand gutter is affected by the internal padding of other layout divs... Ie:, the page is not centred ... I used the left and right margin technique rather than centring a surrounding div after reading the faqs / tips and trick etc but as I’m just starting all this I dare say that I missed something in the technique.. any ideas anyone ??? The two example pages are:

    http://au.channelenablers.com/cssexp/basic.asp

    This one now shows the 50px left body margin, but the right body margin seems to have dropped to 30px ( 28 if I capture and measure but....) which I believe is the 10px padding on each side of any of the #bar,#header,#main, #footer divs.

    Is there something wrong with my logic/ my use of CSS, or is this something I have to work around, and what is the best way to go about it ???

    This issue also seems to restrict me to having the same padding on all the layout divs.. see the 2nd example where I have increased the padding on the #main div to 20px while the rest are at 10: http://au.channelenablers.com/cssex...main_pad_20.asp and whilst I am happy to use 10px for this one, I can see that I may wish to have differing padding in the future..

    Again, anyone got any idea's, this ones got me stumped as well...

    Cheers

    Michael Tull

  4. #4
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Melbourne, Vic, Australia
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm, Is this all to do with the Broken Box model ??? Seems that it may be some sort of an answer, but if it is, why is everything the same in both IE and Moz ??

    Just thinking it text..

    Cheers

    Michael Tull

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI Michael,
    can I use something other than a <br> so that there is not a gap at the bottom of the content ? Not a biggie (
    Have a look at the FAQ on floats which explains how to clear them without leaving gaps in the page.

    Paul

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

    The problem is that you have specified a 100% width and then you have added padding and borders which makes the element bigger than 100% therefore it stretches into the margins that you have set because things don't add up any more.

    A statically placed element defaults to auto width which is effectively 100% when no positioning is applied so you don't need to define 100% width for static elements. Therefore you can safely add padding and borders without the element stretching pass the 100% limit.

    here's your first example amended as mentioned above:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    <!--
    html,body {margin:0;padding:0}
    body {
    background-color: #F0F0F0;
    margin: 30px 50px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #666666;
    text-align:center;/*centre for ie5*/
    }
     
    .page {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #666666;
    }
    #header {
    background-color: #FFFFFF;
    border-right: 1px solid #9999CC;
    border-bottom: 1px none #9999CC;
    border-left: 1px solid #9999CC;
    padding: 10px;
    }
    #main {
    margin: 0px;
    padding: 10px;
    background-color: #FFFFFF;
    border-right: 1px solid #9999CC;
    border-left: 1px solid #9999CC;
    text-align: justify;
    }
    #footer {
    clear: both;
    background-color: #9999CC;
    border-top: 1px none #9999CC;
    border-right: 1px solid #9999CC;
    border-bottom: 1px solid #9999CC;
    border-left: 1px solid #9999CC;
    padding: 2px 10px;
    }
    #right {
    float: right;
    width: 240px;
    padding: 10px;
    border: 1px inset #666666;
    margin-top: 0px;
    margin-right: 10px;
    margin-bottom: 10px;
    position: static;
    margin-left: 10px;
    background-color: #F8F8F8;
    }
    #bar {
    background-color: #CCCCCC;
    height: 16px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-bottom-style: none;
    border-left-style: solid;
    border-right-color: #9999CC;
    border-bottom-color: #9999CC;
    border-left-color: #9999CC;
    padding-right: 10px;
    padding-left: 10px;
    background-image: url(images/bback.gif);
    }
    #mnav {
    height: 16px;
    border-right-style: solid;
    border-left-style: solid;
    padding-right: 10px;
    padding-left: 10px;
    border-right-color: #9999CC;
    border-left-color: #9999CC;
    background-color: #CCCCCC;
    background-image: url(images/bback.gif);
    border-right-width: 1px;
    border-left-width: 1px;
    }
    .clearer{
    height:1px;
    overflow:hidden;
    clear:both;
    margin-top:-1px;
    }
    -->
    </style>
    </head>
    <body>
    <div class="page"> 
    <div id="bar"> </div>
    <div id="header">Header<br>
    	<br>
    	<br>
    	<br>
    	<br>
    </div>
    <div id="mnav"> Nav Bar </div>
    <div id="main"> 
    	<div id="right"> 
    	 <p>Whats News.... . </p>
    	 <p>&nbsp;</p>
    	 <p>&nbsp;</p>
    	 <p>&nbsp;</p>
    	 <p>&nbsp;</p>
    	 <p><br>
    		<br>
    		<br>
    		<br>
    	 </p>
    	</div>
    	<p>Main content Main contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain contentMain contentMain contentMain contentMain contentMain 
    	 contentMain content
    	</p>
    	<br class="clearer">
    </div>
    <div id="footer">Footer</div>
    </div>
    </body>
    </html>
    Hope that helps.

    Paul

  7. #7
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Melbourne, Vic, Australia
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Many Thanks

    Hi Paul,

    Thanks you for that. I finally get it.. ( Well this little bit anyway

    I was sure it was somthing to do with the broken box model.. turs out its just my broken brain... I had actually read directions about this a number of times but until it applied to an example I was working on it just didnt sink in.

    Also, thanks for the bit on floats. I read the FAQ again and found your explanation which did actually make sence.

    Many Many Thanks...

    Now to get the CSS drop down menus working for the template ..

    Cheers

    Michael Tull


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
  •