No replies
sheikyerbouti
sheikyerbouti's picture
Offline
Regular
Last seen: 12 years 43 weeks ago
Timezone: GMT-7
Joined: 2005-08-05
Posts: 36
Points: 0

greetings-

in previous posts many helped me get my page looking just the way i wanted it, at least on a Win machine viewing with Firefox and IE6. Then i fired up the laptop, where the aspect ratio of the screen is different (1680 x 1050 on the laptop vs. 1024 x 768 on the desktop) and my #maincontent container has been pushed DOWN the page and doesn't begin until the #sidenav container has displayed all of it's content vertically.

I think it was Hugo who pointed out there might be some kind of rogue margin or padding issue that was forcing the #sidenav to be wider than it's prescribed 150px width, thus pushing the #maincontent down the page, displaying only after the sidenav content is shown. So, i stripped out ALL margin and padding information from my entire page (it looks nothing like it did and nothing like i want it to) but i still can't get that grey box (#maincontent) to move back up the page to where it "should" be, right under the header image.

here's the page: http://www.junkproductions.com/test/index_stripped.html

here's the css:

<style type="text/css" media="screen"><!--
body { color: black; font-size: 13px; font-family: Arial, Helvetica, Geneva, SunSans-Regular, sans-serif; line-height: 16px; background-color: white; }
#pagewidth { width: 720px; }
#header { position: relative; height: 100px; background-color: #FFFFFF; width: 100%; }
#header img { vertical-align: bottom; }
#logo { position: absolute; top: -10px; left: 330px; }
#maincontent { background-color: #d4d0c7; position: relative; width: 570px; float: right; display: inline; }
/* Hide temporarily 
#maincontent * {margin:0;padding:0;} */
#maincontent p {  }
#maincontent h2 { color: #339; font-size: large; font-family: "Comic Sans MS", Arial, Verdana, Helvetica, sans-serif; }
#maincontent h3 { color: #339; font-size: medium; font-family: "Comic Sans MS", Arial, Verdana, Helvetica, sans-serif; font-weight: lighter; }
#deckview { float: right; width: 320px; border: solid 1px black; text-align: center; }
#sidenav { background-color: #1e5599; width: 150px; float: left; }
/* Hide Temporarily
#sidenav * {margin:0;padding:0;} */
#sidenav ul { list-style-type: none; white-space: nowrap; }
#sidenav a { font-size: 13px; line-height: 14px; display: block; }
#sidenav a:link { color: #fff; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; border: solid 1px #1e5599; }
#sidenav a:visited { color: #fff; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; border: solid 1px #1e5599; }
#sidenav a:hover { color: #000; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: #d4d0c7; text-decoration: none; border: solid 1px black; }
#sidenav a:active { color: #fff; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; border: solid 1px #1e5599; }
#address { color: #fff; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 14px; width: 150px; }
#footer { height: 50px; clear: both; }
#maincontent img {  }
/* *** Float containers fix:
 http://www.csscreator.com/attributes/containedfloat.php *** */ 
#wrapper:after {
 content: "."; 
 display: block; 
height: 0; 
 clear: both; 
 visibility: hidden;
 }
 
#wrapper{display: inline-table;}

/* Hides from IE-mac \*/
* html #wrapper{height: 1%;}
#wrapper{ background-color: #1e5599; display: block; }
/* End hide from IE-mac */  


 
 /*printer styles*/ 
 @media print{ 
/*hide the left column when printing*/ 
#leftcol{display:none;} 
#twocols, #maincol{width:100%; float:none;}
}--></style>

here's the doctype (because i don't quite understand which i SHOULD be using)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

and i'll also attach a screen shot of what the page looks like on my laptop so you can see how the gray box is pushed down on the page.

can anyone see what in the world is making it do that? i've reached my wit's end with this one.....

a great big thank you to everyone who's helped so much, so far!!

-pete