OK, it doesn't look right in IE, but it looks the way I want it to. Actually, I coded this and tested in Firefox, and couldn't get it to look right. Then, I opened it up in IE, and it looked the way I wanted it to 
I've tried everything to get it to look the same in FF, but nothing I've tried works. Can someone help me? Thanks,
-Dan
<!-- m --><a class="postlink" href="http://www.thenamesdan.com/new/This">http://www.thenamesdan.com/new/This</a><!-- m --> should give you a hint. Put a width:500px; in your div#content style. If you want the #menu and the #content to be side by side their combined width has to be less than the page width.This does the trick:
div#menu {
float: left;
padding: 0 0 0 41px;
margin: 0 50px 0 0;
}
div#page {
margin-left:190px;
border: 1px solid #900;
background: #fff url("images/contentback.jpg") no-repeat;
padding: 0;
margin-right: 20px;
margin-top: 0;
}
the 190px is an approximation, adjust as needed. Should work in IE too, but I didn't test it. One other note: it may be better to put #menu after #page in the document flow, but thats kinda your allThanks Sam, but all that does is move #page in, and does not move it up, beside the links, as you can see. Any suggestions?
-DanWhat I recommended does. You should load this page into FF with the EditCSS extension and hack away for yourself. That's what I did.Don't hack!
Just change layout. Check out the attachment, those two content areas are positioned with floats and the left one comes after the right one in the source (which means your navigational links can go after the source).
You can position the right content area with it's margins and then because the left content area has no width (152px width, negative right margin of 160px, total width actually -8px) you can do the same with that one, or use position:relative, whichever you prefer.
You can get your cross browser pixel perfect layout and still be accessible.
Did you know that your page is not application/xhtml+xml? You have to have a little bit of server-side stuff to do that (as well as the meta tag), if you didn't already know that then I can point you to the server-side script.
If you do use the new layout then you will have to hang the background off the #main div tag, this shouldn't really be a problem because the #main div tage is 100% page width.
You may be wondering why you have to hang the background off the #main div tag, well in application/xhtml+xml the body tag only extends as far down as is has to and so does the background you apply to the body tag, because the columns are floated the body tag will shrink to have no height and the background will simply not be shown.
You should also know that when images are disabled your navigational menu disappears (white text on a white background = invisible).My solution works. Note that you have to take the float off #page (as I did in my example). I just tested with editCSS and simply removing the float:left; fixes your layoutThanks Sam! That works nicely. Also, where can I find the editCSS extension? Is it just at that place where all the other extensions are? If so, I still need the link, cuz I forgot where it was
editCSS (<!-- m --><a class="postlink" href="http://texturizer.net/firefox/extensions/#editcss">http://texturizer.net/firefox/extensions/#editcss</a><!-- m -->)
You can get to the mozilla home page at any time by clicking the button directly under the "X" to close mozilla (the image is different depending on what theme you use, and I can't remember what the default image is). By the way, what font are you using for your header?Originally posted by Sam
editCSS (<!-- m --><a class="postlink" href="http://texturizer.net/firefox/extensions/#editcss">http://texturizer.net/firefox/extensions/#editcss</a><!-- m -->)
You can get to the mozilla home page at any time by clicking the button directly under the "X" to close mozilla (the image is different depending on what theme you use, and I can't remember what the default image is). By the way, what font are you using for your header?
The default image for FF appears to be a magnifying glass. And the font I'm using for my header is called "Choc ICG" (in attatchment)
-Dan
PS: When I tried to copy the font file from C:\WINDOWS\Fonts\, it split it into two files, and I'm not sure you'll be able to get it installed. Both files are in the attatchment.
I've tried everything to get it to look the same in FF, but nothing I've tried works. Can someone help me? Thanks,-Dan
<!-- m --><a class="postlink" href="http://www.thenamesdan.com/new/This">http://www.thenamesdan.com/new/This</a><!-- m --> should give you a hint. Put a width:500px; in your div#content style. If you want the #menu and the #content to be side by side their combined width has to be less than the page width.This does the trick:
div#menu {
float: left;
padding: 0 0 0 41px;
margin: 0 50px 0 0;
}
div#page {
margin-left:190px;
border: 1px solid #900;
background: #fff url("images/contentback.jpg") no-repeat;
padding: 0;
margin-right: 20px;
margin-top: 0;
}
the 190px is an approximation, adjust as needed. Should work in IE too, but I didn't test it. One other note: it may be better to put #menu after #page in the document flow, but thats kinda your allThanks Sam, but all that does is move #page in, and does not move it up, beside the links, as you can see. Any suggestions?
-DanWhat I recommended does. You should load this page into FF with the EditCSS extension and hack away for yourself. That's what I did.Don't hack!
Just change layout. Check out the attachment, those two content areas are positioned with floats and the left one comes after the right one in the source (which means your navigational links can go after the source).
You can position the right content area with it's margins and then because the left content area has no width (152px width, negative right margin of 160px, total width actually -8px) you can do the same with that one, or use position:relative, whichever you prefer.
You can get your cross browser pixel perfect layout and still be accessible.
Did you know that your page is not application/xhtml+xml? You have to have a little bit of server-side stuff to do that (as well as the meta tag), if you didn't already know that then I can point you to the server-side script.
If you do use the new layout then you will have to hang the background off the #main div tag, this shouldn't really be a problem because the #main div tage is 100% page width.
You may be wondering why you have to hang the background off the #main div tag, well in application/xhtml+xml the body tag only extends as far down as is has to and so does the background you apply to the body tag, because the columns are floated the body tag will shrink to have no height and the background will simply not be shown.
You should also know that when images are disabled your navigational menu disappears (white text on a white background = invisible).My solution works. Note that you have to take the float off #page (as I did in my example). I just tested with editCSS and simply removing the float:left; fixes your layoutThanks Sam! That works nicely. Also, where can I find the editCSS extension? Is it just at that place where all the other extensions are? If so, I still need the link, cuz I forgot where it was
editCSS (<!-- m --><a class="postlink" href="http://texturizer.net/firefox/extensions/#editcss">http://texturizer.net/firefox/extensions/#editcss</a><!-- m -->)You can get to the mozilla home page at any time by clicking the button directly under the "X" to close mozilla (the image is different depending on what theme you use, and I can't remember what the default image is). By the way, what font are you using for your header?Originally posted by Sam
editCSS (<!-- m --><a class="postlink" href="http://texturizer.net/firefox/extensions/#editcss">http://texturizer.net/firefox/extensions/#editcss</a><!-- m -->)
You can get to the mozilla home page at any time by clicking the button directly under the "X" to close mozilla (the image is different depending on what theme you use, and I can't remember what the default image is). By the way, what font are you using for your header?
The default image for FF appears to be a magnifying glass. And the font I'm using for my header is called "Choc ICG" (in attatchment)
-Dan
PS: When I tried to copy the font file from C:\WINDOWS\Fonts\, it split it into two files, and I'm not sure you'll be able to get it installed. Both files are in the attatchment.