Positioning of DIV - IE and FIrefox Zoom issues
in [CSS]
|
Prev: Input Data Sheet
Next: Free sms site launched
From: jeff on 2 Sep 2009 14:07 tallbarb wrote: > I am brand new to using CSS. I have built a site for a non-profit > group and it works well at 100% zoom on both browsers but when you > zoom in, the positioning gets wacked. Perhaps someone can give me a > hand with what I'm doing wrong? Thank you so much! > > Here's the site: http://kraorg.com/index.html. Here's the contents > of my stylesheet: The problems I see are not in the stylesheet, nor do they have anything to do with font sizing. For example, I see an overlap on the side nav. The html looks like this: <UL style="WIDTH: 153px; HEIGHT: 141px" id=linklist> .... Note the height. Git rid of your container heights if you want them to expand when the font size is increased. Jeff > > body { > text-align: center; > background-color: #D5D0B0; > margin-top:10px; > margin-bottom:10px; > color:#666666; > } > > A:link { > COLOR: #C86000; text-decoration: none > } > A:visited { > COLOR: #C86000; text-decoration: none > } > A:active { > COLOR: #C86000; text-decoration: none > } > A:hover { > COLOR: #C86000; text-decoration: underline > } > > #page_wrapper { > margin-left: auto; > margin-right: auto; > width: 760px; > text-align: left; > background: #FFFFFF url('../img/content_bg.gif') top left repeat-y; > } > > #page_header { > height: 140px; > background: #FFFFFF url('../img/header.jpg') bottom left no-repeat; > clear: both; > } > > #page_header h1 { > padding-top:50px; padding-left:15px; > margin:0px; > font-family: verdana; > font-size: 24px; > color: #FBD539; > line-height:26px; > letter-spacing:-1px; > } > > #page_header h2 { > margin:0px; > padding-left:15px; > font-family: verdana; > font-size: 12px; > color: #D5D0B0; > line-height:22px; > } > > #menu_bar { > margin:0px; > padding:0px; > border:0px dashed #cccccc; > height:31px; > clear:both; > background: #FFFFFF url('../img/menu_bg.gif') bottom left no-repeat; > } > > #content_wrapper { > margin-top:10px; > margin-bottom:10px; > margin-left:10px; > margin-right:10px; > border:0px dashed #FFFFFF; > } > > #center { > margin-left:160px; > margin-right:160px; > border:0px dashed #cccccc; > } > > #center h3 { > margin-top:0px; > margin-bottom:5px; > font-family: verdana, arial, sans-serif; > font-size: 11px; > color: #ffffff; > padding:4px; > border: 1px solid #425227; > background-color: #739240; > } > > #center p { > margin-top:5px;margin-bottom:15px; > padding:4px; > font-family: verdana, arial, sans-serif; > font-size: 11px; > line-height: 16px; > } > > #left_side { > float: left; > width:140px; > border:0px dashed #cccccc; > } > > #left_side h3 { > margin-top:0px; > margin-bottom:5px; > font-family: verdana, arial, sans-serif; > font-size: 11px; > color: #ffffff; > padding:4px; > border: 1px solid #425227; > background-color: #739240; > } > > #left_side p { > margin-top:5px;margin-bottom:15px; > padding:4px; > font-family: verdana, arial, sans-serif; > font-size: 11px; > line-height: 16px; > color: #666666; > } > > #right_side { > float: right; > width:140px; > border:0px dashed #cccccc; > } > > #right_side h3 { > margin-top:0px; > margin-bottom:5px; > font-family: verdana, arial, sans-serif; > font-size: 11px; > color: #ffffff; > padding:4px; > border: 1px solid #425227; > background-color: #739240; > } > > #right_side p { > margin-top:5px;margin-bottom:15px; > padding:4px; > font-family: verdana, arial, sans-serif; > font-size: 11px; > line-height: 16px; > color: #666666; > } > > #page_footer { > height: 60px; > background: #425227; > clear: both; > border-left: 1px solid #425227; > border-right: 1px solid #425227; > border-bottom: 1px solid #425227; > } > > #page_footer p { > padding-top:15px; > text-align:center; > font-family: verdana; > font-size: 10px; > line-height:14px; > color:#D5D0B0; > } > > #page_footer A:link { > COLOR: #FBD539; text-decoration: none > } > #page_footer A:visited { > COLOR: #FBD539; text-decoration: none > } > #page_footer A:active { > COLOR: #FBD539; text-decoration: none > } > #page_footer A:hover { > COLOR: #FBD539; text-decoration: underline > } > > > #navcontainer ul { > padding-left: 0; > margin-left: 0; > margin-top:0px; > background-color: #C86000; > background: url('../img/bar.jpg') top right no-repeat; > color: White; > float: left; > width: 100%; > font-family: verdana, arial, helvetica, sans-serif; > font-size:12px; > font-weight:bold; > } > > #navcontainer ul li { display: inline; } > > #navcontainer ul li a { > padding-top: 5px; > padding-bottom: 7px; > padding-left:10px; > padding-right:10px; > background-color: transparent; > color: White; > text-decoration: none; > float: left; > border-right: 1px solid #BD620E; > } > > #navcontainer ul li a:hover { > background-color: #DE6B02; > background: url('../img/bar_bg_hover.gif') bottom left repeat-x; > color: #fff; > } > > #linklist { > padding-left: 0; > margin-left: 0; > border-bottom: 1px solid #D1D9C4; > width: 140px; > } > > #linklist li { > list-style: none; > margin: 0; > line-height:20px; > border-top: 1px solid #D1D9C4; > font-family:verdana; > font-size:10px; > } > > #linklist li a { text-decoration: none; } > > .thumbnail_left { > float:left; > margin-right:10px; > margin-bottom:5px; > border:0px; > } > > .thumbnail_right { > float:right; > margin-left:10px; > margin-bottom:5px; > border:0px; > }
From: John Hosking on 3 Sep 2009 05:26 On Wed, 02 Sep 2009 14:07:17 -0400, jeff wrote {and I quote in full, mostly, and exceptionally, for pedagogic purposes): > tallbarb wrote: >> I am brand new to using CSS. I have built a site for a non-profit >> group and it works well at 100% zoom on both browsers but when you >> zoom in, the positioning gets wacked. Perhaps someone can give me a >> hand with what I'm doing wrong? Thank you so much! >> >> Here's the site: http://kraorg.com/index.html. Here's the contents >> of my stylesheet: > > > The problems I see are not in the stylesheet, nor do they have anything > to do with font sizing. > > For example, I see an overlap on the side nav. > > The html looks like this: > > <UL style="WIDTH: 153px; HEIGHT: 141px" id=linklist> > ... > > Note the height. > > Git rid of your container heights if you want them to expand when the > font size is increased. Likewise here: <DIV style="WIDTH: 760px; HEIGHT: 1388px" id=page_wrapper> which leaves space much too long at the bottom of the page. > > Jeff [246 lines of unnecessarily posted code, unnecessarily quoted by somebody who ought to know better, snipped by myself] Jeff, again, would you *please* stop doing that? TRIM what you're not responding to, for crying out loud. -- John
From: jeff on 3 Sep 2009 08:26 John Hosking wrote: > On Wed, 02 Sep 2009 14:07:17 -0400, jeff wrote > {and I quote in full, mostly, and exceptionally, for pedagogic purposes): > >> tallbarb wrote: >>> I am brand new to using CSS. I have built a site for a non-profit >>> group and it works well at 100% zoom on both browsers but when you >>> zoom in, the positioning gets wacked. Perhaps someone can give me a >>> hand with what I'm doing wrong? Thank you so much! >>> >>> Here's the site: http://kraorg.com/index.html. Here's the contents >>> of my stylesheet: >> >> The problems I see are not in the stylesheet, nor do they have anything >> to do with font sizing. >> >> For example, I see an overlap on the side nav. >> >> The html looks like this: >> >> <UL style="WIDTH: 153px; HEIGHT: 141px" id=linklist> >> ... >> >> Note the height. >> >> Git rid of your container heights if you want them to expand when the >> font size is increased. > > Likewise here: > <DIV style="WIDTH: 760px; HEIGHT: 1388px" id=page_wrapper> > which leaves space much too long at the bottom of the page. > >> Jeff > > [246 lines of unnecessarily posted code, unnecessarily quoted by somebody > who ought to know better, snipped by myself] > > Jeff, again, would you *please* stop doing that? TRIM what you're not > responding to, for crying out loud. > I don't need this. I've unsubscribed. Jeff
From: dorayme on 3 Sep 2009 19:06 In article <h7ocle$pn6$1(a)news.albasani.net>, jeff <jeff_thies(a)att.net> wrote: > John Hosking wrote: .... > > [246 lines of unnecessarily posted code, unnecessarily quoted by somebody > > who ought to know better, snipped by myself] > > > > Jeff, again, would you *please* stop doing that? TRIM what you're not > > responding to, for crying out loud. > > > > I don't need this. > > I've unsubscribed. > That's a pity Jeff, surely just trim and stay would be better. Reconsider! *One* problem with serious cases of not trimming is causing others to scroll unnecessarily, reaching exasperating proportions when the scrolling user finds nothing at all at the end that is added by the poster. John mentioned the other one: quoting what probably should not have been included by the OP in the first place. -- dorayme
From: Jonathan N. Little on 6 Sep 2009 12:40
dorayme wrote: > In article <h7ocle$pn6$1(a)news.albasani.net>, jeff <jeff_thies(a)att.net> > wrote: > >> John Hosking wrote: > ... >>> [246 lines of unnecessarily posted code, unnecessarily quoted by somebody >>> who ought to know better, snipped by myself] >>> >>> Jeff, again, would you *please* stop doing that? TRIM what you're not >>> responding to, for crying out loud. >>> >> I don't need this. >> >> I've unsubscribed. >> I'm taking my ball and going home.... > > That's a pity Jeff, surely just trim and stay would be better. > Reconsider! > > *One* problem with serious cases of not trimming is causing others to > scroll unnecessarily, reaching exasperating proportions when the > scrolling user finds nothing at all at the end that is added by the > poster. John mentioned the other one: quoting what probably should not > have been included by the OP in the first place. > Another is others that have limited bandwidth! (Yes, no longer on dialup but only option was satellite "broadband" that is only sometimes fast if you *don't* use it!) -- Take care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com |