Positioning/Resolution Problem

[Siephe]

http://siephed.org/index.php

It looks fine in resolutions higher than 1024×768, or anything that’s wider than 1024 pixels. But when you try 1024×768 or lower, the upper navigation bar is messed up. Is there any way else of coding the navigation so it looks the same, but is more fluid?

I’ve also got another positioning problem, but for a different site, it’s on this thread:
http://css-tricks.com/forums/viewtopic.php?f=2&t=1732

Thanks in advance.

[davesgonebananas]

You could try adding a minimum width to the containing div.

#navtop {
font-family:Georgia;
font-size:18pt;
margin-bottom:0;
margin-right:4%;
margin-top:0;
min-width:500px;
overflow:auto;
padding:0;
text-align:center;
text-transform:lowercase;
}

Of course our beloved IE6 doesn’t support this property but you can supply an IE only hack using a conditional style sheet:

#navtop { /* IE6 only hack — use in conditional style sheet only */
width:expression(this.width < 500? "500px" : this.width);
}

[Siephe]

Hmm… But when I make the browser window even smaller, things tend to move around to places where I don’t want them to go. Is there a way to make it so that when it shrinks smaller than it normally is, the boxes don’t move around, and instead a sidescrol bar appears?

[ulrike]

You fixed this already, did’t you? Page look fine to me on small resolution.

[Soh Tanaka]

You should just wrap the parent div in a min-width/max width~

Code:

.classname {
min-width: 970px;
max-width: 1200px;
}

For IE6, I usually just stick with a fixed width :-)

Code:

*html .classname{
width: 970px;
}

[Siephe]

Hmm.. I tried that out, but it didn’t seem to work. But I did manage to find an alternative, so now it looks fine.

But now that I’ve got that problem tackled, I’ve got a slew more that keeps popping up. *sighs*
Would anyone mind helping me on MSN? It might be a bit easier and quicker… I feel really idiotic making a whole new topic for every problem that I hit. ><

Here’s my next problem, though.
http://siephed.org/47/index.php. There’s a index.html and an index.php file uploaded in that directory. If you look at both, you’ll notice that the header for index.html is where it’s supposed to be, while in the index.php file, there’s a gap that’s filled by the background between the header and the top of the browser window. I have no clue what’s wrong, the only difference in code being that in index.php, the top and bottom halves are spliced so I use <?php include(‘top.txt’); ?> to include them into index.php.

[Author]

Posts