Results 1 to 11 of 11
  1. #1

    div prob 800x600

    Im currently having a problem with a new site of mine with the 800x600 resolution (also happening on 1024x769 16bit)

    Basically the site is valid XHTML mostly <div>.

    I have used float: left; to get the navigation bar on the left hand side of the main content.

    But for people using 800x600 resolution the navigation bar shows above, not next to the content. (if that makes sense)

    The site is http://www.woodyweb.net/portfolio/bcp/ and css http://www.woodyweb.net/portfolio/bcp/css.css

    Any help would be great.
    Cheers

  2. #2
    Turs out its not a 800x600 problem. Its actually an IE6 problem/

    Ive managed to get a screenshot of the problem.
    http://img87.imageshack.us/img87/8545/bcpzn1.gif

    Ive tried * { margin: 0; } in css but still no luck.

    Does anyone know of any other things i could try?
    Cheers

  3. #3
    Join Date
    Mar 2008
    Location
    Poland
    Posts
    15
    Read about Internet Explorer double margin / padding issue.

    I always make float: left for left collumn , and float: right for right one ... this will make Your divs to be side by side with no margin.
    There is one more idea - You have to float parrent div
    You can find sollutions for dual margin on A List Apart or just in google
    Last edited by barat; 04-12-2008 at 02:34 PM.

  4. #4
    Join Date
    Feb 2006
    Location
    top: 50px; left: 200px;
    Posts
    213
    funny becuase I tried your code in DW with ie6 on win and it displayed OK.?
    Try adding an empty <div> after content and before the footer with this rule in css:

    .clearfix{clear: both;}

    html:

    <div class="clearfix"></div>

    may solve your problem if anything it will help seperate the footer to the bottom where it should be.?

    BTW if you are looking to design to a 800x600 res you may want to make your container div less then 800. At the moment you have it at 826px wide.? 766px is a good width for 800x600...
    Last edited by killapix; 04-12-2008 at 02:42 PM.
    Filefeed.net - Image Hosting -

  5. #5
    Quote Originally Posted by killapix View Post
    funny becuase I tried your code in DW with ie6 on win and it displayed OK.?
    Try adding an empty <div> after content and before the footer with this rule in css:

    .clearfix{clear: both;}

    html:

    <div class="clearfix"></div>

    may solve your problem if anything it will help seperate the footer to the bottom where it should be.?

    BTW if you are looking to design to a 800x600 res you may want to make your container div less then 800. At the moment you have it at 826px wide.? 766px is a good width for 800x600...
    I coded the site in DW and everything looked fine so i thought it was. I tested in FireFox and IE7 so i assumed everything worked.

    Got to work, looked at it on 800x600 IE6 and it looked like the pic so i thought it was 800x600. Yesterday looked at it on a higher resolution with IE6 and it was the same.

    Ill give that ago and see what happens. I wasnt really looking to make the site 800x600. The extra few pixels means i get the most useable area for content with minimal scrolling for 800x600 users.

    Thanks for the sugestions

  6. #6
    Join Date
    Feb 2006
    Location
    top: 50px; left: 200px;
    Posts
    213
    Ok no problem, Also just thought you may need also to define a width for the nav container and the content container as I think ie6 will define a <div> as 100% of its parent as default if no width attribute is defined in the css..
    Filefeed.net - Image Hosting -

  7. #7
    Quote Originally Posted by killapix View Post
    Ok no problem, Also just thought you may need also to define a width for the nav container and the content container as I think ie6 will define a <div> as 100% of its parent as default if no width attribute is defined in the css..
    Width is defined for almost everything i think. Nav div is 201px, ill have to check the content one as i cant remember what i did with it

    Unfortunatly your earlier suggestion didnt work.

    Ive read up on the Ie6 margin thing and the solution appears to be adding display: inline; to the css which didnt help either

    If it wasnt a company site i would have given up on it and told the people using IE6 to upgrade, but thats not an otption im willing to take

  8. #8
    Join Date
    Mar 2008
    Location
    Poland
    Posts
    15
    I always make something like this (height and background color just for presentation):

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    <style type="text/css">
    <!--
    body {margin:0; padding:0;}
    
    #container {width:800px; margin:10px auto;}
    
    #left {width:250px; float:left; background-color:#00FF66; height:500px;}
    
    #right {width:550px; float:right; background-color:#FF3366; height:500px;}
    
    .clear {clear:both;}
    -->
    </style>
    </head>
    
    <body>
        <div id="container">
            <div id="left"></div>
            <div id="right"></div>
            <div class="clear"></div>
        </div>
    </body>
    </html>
    Thanks to right and left floats there is no margin/padding between those two divs, and they can "touch" each other.
    Ofcourse CSS normaly should be in separate file, here is an example.
    I ised margin:10px auto for centering container div (replace 10px by any other value if you want)
    You can replace clear div with normal footer div in other projects and set clear:both for this footer. You use clear because Float throw away divs from normal flow and those divs with float doesn't affect containing div (and we want to stretch this div, because in most of cases container div is used for faux collumns trick)

    I hope that this will help You to understand how thise things works.

    By the way, you can change positions for layers left and right to make this page more "semantic". That will place content div over the text div (helpfull for screen readers and browsers with css turned off).

  9. #9
    I think there was a problem with my coding, although i couldnt find any obivous mistakes.

    Just recoded the whole thing from scratch including CSS and everything is how it should so far be bar the 3px margin IE adds which is an easy fix. But i havnt added the menu in the nav properly yet so that could be the problem.

  10. #10
    Ladies and Gentlemen we have our problem!

    It was the image with the 4 buildings on. In the HTML i had specified the width of the image before i resized it in Photoshop.

    For some reason IE took exception to setting width=" to the same size as the image..

    Thank you for your help

  11. #11
    ^forget that. Managed to find the source.

    Ended up being the navigation. I used padding-left: 14px; to get the menu text where i wanted it.

    But IE is putting 14px on the right side too. added padding-right: 0px; but its still adding 14px on the right side

Posting Permissions

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