JPhenow Posted June 16, 2008 Share Posted June 16, 2008 Hey all, I mainly use HTML and CSS within my website due to the size of whom I create for and I simply haven't moved to other languages yet. Within my website there is a slight alignment issue. I know many people who aren't web designers will miss this issue but, It bugs me like no other and I do not see how this happens. The problem is that my "news" page alignment is ever so slightly off when the others' are fine. I eventually made a div to just re-align the entire page, which I know is sloppy. This fixed it in my mind for now. BUT - here's the weird part - say I resize the window by a pixel or two, or I end up resizing it at all, the "news" page will be off by a pixel again, any clues why such a thing would happen? Here's my site - http://riftpictures.com and here's my CSS /*##############################################BANNER###################*/ .banner { position:relative; top: 2px; left: -10px; } .linkcenter { width: 833px; } .preloadimages { display: none; } .home { /*##############################Home Link Prefs#####*/ float: left; width: 169px; position: relative; left: -8px; top: -0px; background-repeat: no-repeat; } .home a { display: block; background-image: url(home.gif); font-weight: bold; height: 30px; width: 169px; outline: none; } .home a:hover { background-image: url(homeroll.gif); outline: none; } .homepre { background-image: url(homeroll.gif); background-repeat: no-repeat; background-position: -1000px -1000px; } .homepre2 { background-image: url(home.gif); background-repeat: no-repeat; background-position: -1000px -1000px; } .news { /*##############################News Link Prefs#####*/ float: left; width: 169px; position: relative; left: -8px; top: -0px; } .news a { display: block; background-image: url(news.gif); font-weight: bold; height: 30px; width: 169px; outline: none; } .news a:hover { background-image: url(newsroll.gif); outline: none; } .newspre { background-image: url(newsroll.gif); background-repeat: no-repeat; background-position: -1000px -1000px; } .newspre2 { background-image: url(news.gif); background-repeat: no-repeat; background-position: -1000px -1000px; } .projects { /*##############################Projects Link Prefs#####*/ float: left; width: 169px; position: relative; left: -8px; top: -0px; } .projects a { display: block; background-image: url(projects.gif); font-weight: bold; height: 30px; width: 169px; outline: none; } .projects a:hover { background-image: url(projectsroll.gif); outline: none; } .projectspre { background-image: url(projectsroll.gif); background-repeat: no-repeat; background-position: -1000px -1000px; } .projectspre2 { background-image: url(projects.gif); background-repeat: no-repeat; background-position: -1000px -1000px; } .forum { /*##############################Forum Link Prefs#####*/ float: left; width: 169px; position: relative; left: -8px; top: -0px; } .forum a { display: block; background-image: url(forum.gif); font-weight: bold; height: 30px; width: 169px; outline: none; } .forum a:hover { background-image: url(forumroll.gif); outline: none; background-repeat: no-repeat; } .forumpre { background-image: url(forumroll.gif); background-repeat: no-repeat; background-position: -1000px -1000px; } .forumpre2 { background-image: url(forum.gif); background-repeat: no-repeat; background-position: -1000px -1000px; } .media { /*##############################Media Link Prefs#####*/ float: left; width: 153px; position: relative; left: -14px; top: -0px; } .media a { display: block; background-image: url(media.gif); font-weight: bold; height: 30px; width: 153px; outline: none; background-repeat: no-repeat; } .media a:hover { background-image: url(mediaroll.gif); outline: none; } .mediapre { background-image: url(mediaroll.gif); background-repeat: no-repeat; background-position: -1000px -1000px; } .mediapre2 { background-image: url(media.gif); background-repeat: no-repeat; background-position: -1000px -1000px; } /*############################################### overall website pieces ###################################*/ div.container { width: 98%; margin: 1%; } tr,td { text-align: left; } body { /*############################ Body IE ################*/ text-align: center; } a { /*###############################Link Prefs###############*/ color: black; border: 0px; outline: none; } a:hover { background-color: black; color: white; outline: none; } /*##################################################FONTS and Formatting#############################*/ font { font-family: verdana; color:black; font-size: 11px; } font.copyright { vertical-align: text-bottom; font-family: verdana; font-size: 8px; text-align: center; } .copyright { text-align: center; vertical-align: bottom; font-family: verdana; font-size: 8px; } h2 { font-size: 18px; font-family: verdana; text-align: left; position:relative top: -5px; } p { text-indent:15px; } .content { /*###############################Content##########*/ position: relative; top: -15px; left: -10px; } table.center { /*######## Table Prefs#######*/ margin-left: auto; margin-right: auto; width: 833px; } table.content { /* ########################IE content###################*/ background-image: url(); background-repeat: repeat-y; width: 833px; margin-left: auto; margin-right: auto; position: relative; top: -21px; left: -10px; } body > table.content { /* ########################FF content###################*/ background-image: url(); background-repeat: repeat-y; width: 833px; margin-left: auto; margin-right: auto; position: relative; top: -22px; left: -10px; } .tablebottom { /* ########################## IE table bottom #################*/ background-image: url(); margin-left: auto; margin-right: auto; width: 833px; position: relative; top: -21px; left: -10px; background-repeat: no-repeat; text-align: center; } body > .tablebottom { /*############################ FF Table bottom ################*/ text-align: center; background-image: url(); margin-left: auto; margin-right: auto; width: 833px; height: 16px; position: relative; top: -22px; left: -10px; background-repeat: no-repeat; } /*############################################# ~~ News ~~ ###########################*/ .newsbreak { border:none; border-top:dotted 1px; color: black; width: 350px; float: left; } font.news { font-family: verdana; color:black; font-size: 11px; text-align: left; width: 700px; text-indent:15px; } .newssubmit { text-align: left; font-family: verdana; font-size: 8px; } .copyrightnews { vertical-align: text-bottom; font-family: verdana; font-size: 8px; text-align: center; position: relative; bottom: -180px; right: 85px; } /*#######################################News Special Placement##########*/ .newsplacement { /* FF FIX ########################## */ position: relative; left: 7px; } body > .newsplacement { /* IE FIX ####################*/ position: relative; left: 8px; } Thanks in advance guys Quote Link to comment Share on other sites More sharing options...
xtopolis Posted June 16, 2008 Share Posted June 16, 2008 I'm looking at in FF3 ... don't really notice it. If you are using FF as well, it may be the slight movement that appears because the scroll bar comes up (the content is longer than the main screen). Sorry if I'm missing it, I'm picky as well, but don't notice it. Quote Link to comment Share on other sites More sharing options...
JPhenow Posted June 16, 2008 Author Share Posted June 16, 2008 Well I think I explained it odd. Okay now look at home and go to news. if news doesn't shift widen the browser a pixel or 3 - then go back to home. It shifts. I too use FF3 on ubuntu Quote Link to comment Share on other sites More sharing options...
haku Posted June 16, 2008 Share Posted June 16, 2008 I don't see it. It could be all those preloaded image divs you have. You shouldn't have those there anyways, they should be at the bottom of your markup. And rather than your background position (which you don't really need because you won't be able to see the divs if you don't set a height and a width to them), you should just set them do display:none. You also have divs inside your table, which you shouldn't do. Although I personally don't think you should be using a table there at all. But if you are going to, then don't use divs inside it. It's not a division. Just use an image, or give the table cell a background image if you are that set on using a table. If the shift bothers you that much, you could copy the code from one of the other pages, and paste it into the news page. Adjust as necessary. Quote Link to comment Share on other sites More sharing options...
JPhenow Posted June 17, 2008 Author Share Posted June 17, 2008 What would you suggest aside from divs? and what you suggest aside from tables? Quote Link to comment Share on other sites More sharing options...
haku Posted June 17, 2008 Share Posted June 17, 2008 Divs shouldn't be used in tables. You can just put the information directly into the table cell. As for not using tables, well that's what CSS is all about. It's actually ok to use tables - for tabular information (i.e. information that cross references 2 categories and gives data for those categories), but they shouldn't be used for laying a page anymore. That's how things were when the internet first gained popularity, because there wasn't any other way to do it, but with browsers compatibility with CSS, tables don't need to and shouldn't be used for page layout. I have heard really good things about the tutorials on this site: http://htmldog.com/guides/cssbeginner/ I didn't use them myself (I learned different ways) or even go through them, but have heard good stuff about htmldog's tutorials from people who know what they are talking about. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.