Alan Gresley wrote: > Ray wrote: > > >> Hi all, >> >> It's always the freebies that give me a headache :) >> >> I'm working on a site which amounts to a simple 3 column layout in >> appearance. My current issues are >> 1) the text in <h1> and <h2> aren't centering despite text-align: >> center; being stated >> and >> 2) IE7 drops the 'content' div way down in the viewport. >> >> It's been a long weekend of non-coding and I need to hit this hard >> today. Any/all help is greatly appreciated. >> >> site: >> http://devel.legionpost130.org/index3.php >> >> css: >> http://devel.legionpost130.org/styles/legionpost130-3col.css >> >> Best regards for a layout-incompatibility-free week :)) >> >> ~Ray >> > > Hi Ray > > Looking at your layout in FF first. The content (text) within your div#header > and div#content will naturally be displaced by the div#nav float. This float > is floated right and has a width of 140px and it's margin left is 450px. So > the content within your div#header and div#content will be displaced by > 590px, leaving only about 140px of the content still showing beside the float > with a viewpoint of 800px in width. Please note that I have said that the > content of the div#header and div#content will be displaced and not the divs > themselves. The margin left for the div#nav should be much smaller like 20px. > > IE will behave differently. The div#header and div#content themselves will be > displaced by the float since they both have haslayout since they have a width > of 800px. > > http://www.satzansatz.de/cssd/onhavinglayout.html#nextfloat > > In IE, you would need a viewpoint of at least 1450px wide > (140px+450px+800px+scrollbar) before the div#header and div#content could > rise up to sit beside the float. Remove both the widths from both the > div#header and div#content and use a margin left or padding left to keep > their content from going over the emblem. > > The background images need to be applied to different elements since the flag > sit over the emblem. The flag could be applied to the body element and the > emblem to the container. Test this slimmed downed CSS. > > body { > font-family: "Century Gothic", Helvetica, sans-serif; > font-size: 1em; > background: #FFF url('/images/American-Flag.gif') no-repeat 50% 100px; > color:#000000; > } > h1 { > font-size:1.5em; > text-align: center; > } > h2 { > font-size: 1.3em; > color: blue; > text-align: center; > } > p { > line-height: 1.2em; > } > #header, #content { > margin: 20px 165px 0 230px; > } > #container { > background: url('/images/AmericanLegionColorEmblem.png') no-repeat 20px 0; > } > div#nav { > width: 140px; > float: right; > margin: 0 0 0 20px; > } > ul.navbar { > font-size: 95%; > } > ul.navbar, li.navitem { > padding: 0; > margin: 0; > list-style: none; > font-weight: bold; > } > li.navitem { > margin: 0 3px; > } > a.menu:link, a.menu:visited { > color: blue; > text-decoration: none; > } > a.menu:active, a.menu:hover { > color: red; > text-decoration: none; > } > > Kind regards, Alan > > ______________________________________________________________________ > css-discuss [EMAIL PROTECTED] > http://www.css-discuss.org/mailman/listinfo/css-d > IE7 information -- http://css-discuss.incutio.com/?page=IE7 > List wiki/FAQ -- http://css-discuss.incutio.com/ > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > Alan,
Thanks for your reply. I am reading (and will continue to). I'll post results and new URLs once I've played with it a bit. Truly thank you for your input. I learn more and more here each day! Regards, ~Ray ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
