SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    min-width causes page to break

    okay im working on about the fourth or fith build of this site

    i have essentially a 3 column layout with the middle column fluid and a navbar floating to the left in the margin, the right margin is left clean (at the moment anyway)

    i have a min width of 300px specifyed for the middle column (the margins are set to 197px) when i reduce the size of my browser window once the middle column gets to 300px in moves down the page a few hundred pixels but appart from this acs normally, ie it doesnt get any smaller than 300px

    also it seems that the window, no matter what size it is, cannot contain the whole page, you always have to scroll horizontally to see the last 10 or so px, i have all my widths set to 100% so i dont understand why its doing this

    if anyone could help me i'd really appreciate it

    live example here

    http://www.ats-heritage.co.uk/div/Red%20Div%202/


    cheers

  2. #2
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    In IE7 there is a red bar at the bottom of the menu area. It doesn't appear there at all in firefox!
    Put some text in the currently empty footer, just out of interest.

    Just done it myself - it makes the footer appear in firefox.

  3. #3
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I also notice you have this
    <div id="navbar">
    <span class="navbar">

    styles you have for the class navbar should really be for the id navbar

  4. #4
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    okay there is a load of text in the footer now

    the span within the nav bar is simply to style the links, i didnt think you could define that within the css for the div

    cheers

    james

  5. #5
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i just noticed that my problem is only apparant in ie i'm using 7 and have no way to check previous versions atm

    my header doesnt appear in ff though

    oh the joy

  6. #6
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Okay, in IE7 it is dropping below your div #navbar, for which you have set a height of - wait for it , wait for it - 182px. Try removing that line for a start.

  7. #7
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Firefox doesn't like the space in the file name for your header image.
    background-image:url(Images/Logos/ATS Heritage.png); Remove the space and I bet it turns up in Firefox. You should never have spaces in your file names, some browsers can choke on this as in this case.

    Change the width from 100&#37; to 99% and the horizontal scroll should disappear.

    PS: You may find this site useful - styling of list menus

    Nadia

  8. #8
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I found I needed 98&#37; for the width of the #main to make the horizontal scrollbar disappear in FF.

    I'd have set the min-width on #main and at 770px. and not on the #body div inside it. This gives a min width of a bit more than 300px for #body, but that is not important IMHO (I'll just go measure what it gives in a second or two)

    EDIT: Seconds later - it makes #body come out at 380px, so you could set it lower still on #main if necessary, but as your dropping div problem appears at 313px width for #body, I'd leave it at a larger value

    You will need a conditional statement to make min-width work in IE6 and below however.

    PS Yes, listomatic is very very helpful

  9. #9
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    right well thankyou all

    i have managed to make my site work very nicely except for one issue

    with the footer when the window width is changed it pushes my right footer (float right) to the left side of the element its positioned against..
    if that makes sence......it floats to the left of the thing it is floating right (or meant to be) of

    have a look..i cant explain it very well

    http://www.ats-heritage.co.uk/div/Re.../template.html

    if anyone could test this in ie6 for me i would appreciate it as it will save me setting up another pc


    cheers

    : )

  10. #10
    SitePoint Addict
    Join Date
    Apr 2007
    Location
    Phoenix, AZ
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    FYI - In IE6, none of the images under the Latest News are appearing. The heading is OK, but no images in the content, just text.
    Joe

  11. #11
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lol that was just me using a capital letter in the filename

    stupid me


    cheers m8


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
  •