SitePoint Sponsor |
|
User Tag List
Results 1 to 11 of 11
Thread: min-width causes page to break
-
Jun 6, 2007, 03:33 #1
- 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
-
Jun 6, 2007, 03:53 #2
- 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.Dr John
www.kidneydialysis.org.uk
-
Jun 6, 2007, 03:57 #3
- 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 navbarDr John
www.kidneydialysis.org.uk
-
Jun 6, 2007, 04:03 #4
- 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
-
Jun 6, 2007, 04:06 #5
- 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
-
Jun 6, 2007, 04:13 #6
- 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.
Dr John
www.kidneydialysis.org.uk
-
Jun 6, 2007, 04:36 #7
- 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% to 99% and the horizontal scroll should disappear.
PS: You may find this site useful - styling of list menus
NadiaUnique CSS Templates by Nadia
Dreamweaver: Tutorials.Templates.CSS Designs
SitePoint Books |My Fireworks Tutorials 1 2
Follow me on Twitter | Community Team Advisor
-
Jun 6, 2007, 04:47 #8
- Join Date
- Jul 2003
- Location
- Kent
- Posts
- 1,921
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
I found I needed 98% 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 helpfulDr John
www.kidneydialysis.org.uk
-
Jun 6, 2007, 08:40 #9
- 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
: )
-
Jun 6, 2007, 17:04 #10
- 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
-
Jun 7, 2007, 10:02 #11
- 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