3 replies [Last post]
jrexi
Offline
newbie
Last seen: 12 years 32 weeks ago
Timezone: GMT-5
Joined: 2007-04-22
Posts: 3
Points: 0

Hi All,

I'm fairly new to CSS and have a problem that is driving me crazy. I spent the last day or so learning about the position: code and it had been a life saver for me...at least until now.

Here's the background. I using the position syntax to move around 2 elements in my header (1) a navigation element and (2) a search form. My problem is when I move the 2 elements mentioned above using the position syntax my overall page expands to the right of the browser and my background image in the moves as well (in IE 7). In Firefox, the background image doesn't move, but the page expands to the right just like in IE.

Here's my CSS:

* { margin: 0px; padding: 0px; } body { background: #2c2c2c url(images/bodybg2.gif) no-repeat top center; color: #000; font-size: 12px; font-family: "Lucida Grande", "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; } img { border: 0px; } .cnt { width: 760px; background-color: #fff; margin: 20px auto 30px; }

/* ------------------------------------------------------------------------------
header
------------------------------------------------------------------------------ */
.j4menu {
position:relative;
left:40px;
top:0px;
}
.j4search {
position:relative;
left:570px; /* higher number moves to the right */
top:-15px; /* negative number moves object higher */
}
.header{
background: url(images/headerbg.gif) no-repeat;
width: 760px;
height: 100px;
float: left;
}
.head1 {
width: 760px;
padding: 40px 15px 0 0;
text-align: center;
float: left;
}
.header h1 a {
color: #fff;
text-decoration: none;
}
.header h1 a:hover {
text-decoration: underline;
}
.header h1 {
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 24px; /* edited for Coppermine */
font-weight: normal;
letter-spacing: -1px;
margin-bottom: 0px;
}
.description {
color: #fff;
font-size: 12px;
}
.head2 {
width: 260px;
float: left;
}
.head2 p {
color: #fff;
padding: 0 15px;
font-size: 12px;
line-height: 16px;
}
.head2 h3 {
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 19px;
font-weight: normal;
letter-spacing: -1px;
margin-bottom: 5px;
padding: 15px 0 0 16px;
text-transform: lowercase;
}

/* ------------------------------------------------------------------------------
main
------------------------------------------------------------------------------ */
.main {
width: 760px;
}
.content {
padding: 20px 0 0 15px;
float: left;
width: 478px;
margin-right: 3px;
overflow-x:auto;
display: block;
}
.content a {
color: #9b0e0e;
}
.navigation {
font-size: 14px;
margin-bottom: 15px;
}
.post {
margin-bottom:30px;
}
.posttitle {
margin-bottom: 15px;
}
.post h2 {
color: #294A59;
font-size: 26px;
font-weight: normal;
letter-spacing: -1px;
}
h2.pagetitle {
color: #555;
font-size: 22px;
font-weight: normal;
letter-spacing: -1px;
margin-bottom: 15px;
}
.post h2 a {
color: #294A59;
text-decoration:none;
}
.post h2 a:hover {
text-decoration:underline;
}
.post small {
color: #294A59;
display: block;
margin-bottom: 15px;
}
.post p {
font-size: 14px;
margin-bottom: 15px;
line-height:21px;
}
.post blockquote {
background: url(images/blockquotebg2.gif) no-repeat;
color: #294a59;
padding: 15px 0 0 42px;
}
.post ul {
list-style-type: none;
font-size: 14px;
margin-bottom: 15px;
}
.post ul li {
background: url(images/bullet02.gif) no-repeat 0px 5px;
margin-bottom: 5px;
padding-left: 17px;
}
p.postmetadata {
font-size:11px;
margin:3px 0;
}

/* ------------------------------------------------------------------------------
sidebar
------------------------------------------------------------------------------ */
.sidebar {
font-size: 12px;
float: left;
width: 254px;
margin-left: 4px;
padding: 10px 6px 0 0;
line-height: 14px;
}
.bloque1, .bloque2 {
margin-bottom: 10px;
}
.bloque1 {
background: #e8e6d9 url(images/bloque1bg.jpg) no-repeat;
}
.bloque2 {
background: #e2ebed url(images/bloque2bg.jpg) no-repeat;
}
.bloque1 h3 {
color: #6c644d;
}
.bloque1 h3, .bloque2 h3 {
font-size: 19px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
letter-spacing: -1px;
margin-bottom: 10px;
padding: 20px 0 5px 16px;
text-transform: lowercase;
}
.bloque2 h3 {
color: #294A59;
}
.sidebar ul {
list-style-type: square;
padding-left: 30px;
}
.sidebar p {
line-height: 16px;
}
.sidebar ul li {
margin-bottom: 5px;
}
.sidebar ul span {
color: #000;
}
.sidebar ul a {
color: #000;
text-decoration: none;
}
.bloque1 ul a {
border-bottom: 1px dashed #968e77;
}
.bloque1 p a, .bloque2 p a {
color: #000;
}
.bloque1 ul a:hover, .bloque1 p a:hover {
background-color: #6c644d;
color: #fff;
border: 0px;
}
.bloque2 ul a {
border-bottom: 1px dashed #668b9c;
}
.bloque2 ul a:hover, .bloque2 p a:hover {
background-color: #294A59;
color: #fff;
border: 0px;
}
.bloque1 ul {
color: #968e77;
padding-bottom: 12px;
}
.bloque2 ul {
color: #668b9c;
padding-bottom: 12px;
}

/* search */
.buscar {
padding: 0px 15px 15px;
}
.bus1 {
width: 140px;
font-size: 16px;
border: 1px solid #aaa;
}
.bus2 {
vertical-align: top;
}
.sidebar p {
padding: 0 10px 15px 16px;
}
/* subscribe */
.subscriberss {
padding: 0px 0 15px 15px;
}
.subscriberss select {
width: 110px;
margin: 5px 5px 0 10px;
float: left;
}
.subscriberss a {
float: left;
}
.subscriberss a.btnnofloat {
float: none;
}
.subscriberss a.rsstext {
color: #000;
margin: 5px 0 0 3px;
float: left;
}
.bus1 {
width: 140px;
font-size: 16px;
border: 1px solid #aaa;
}
.bus2 {
vertical-align: top;
}


/* ------------------------------------------------------------------------------
comments
------------------------------------------------------------------------------ */
h2.responses {
color: #294a59;
font-family: Arial, Helvetica, sans-serif;
font-size: 19px;
font-weight: normal;
margin-bottom: 10px;
text-transform: lowercase;
}
.commentlist {
width: 464px;
margin-bottom: 20px;
list-style-type: none;
font-size: 14px;
}
.commentlist li {
background: #e4ecee url(images/commentlistbg3.jpg) no-repeat;
padding-top: 20px;
margin-bottom:15px;
}
.commentcontent {
padding: 0 10px;
margin-bottom: 15px;
}
.commentcontent p {
margin-bottom: 15px;
font-size:12px;
color:#333;
line-height:17px;
}
.commentcontent a {
color: #265368;
}
p.authorcom {
background-color: #fff;
text-align: right;
}
p.authorcom span {
background: #fff url(images/authorbg3.jpg) no-repeat;
color: #294a59;
font-size: 16px;
padding-left: 100px;
}
.authorcom small {
font-size: 10px;
}
.commentcontent {
padding: 0 10px;
}
.commentcontent ul {
list-style-type: none;
font-size:12px;
color:#333;
line-height:17px;
}
.commentcontent li {
background: transparent url(images/bullet02.gif) no-repeat 0px 5px;
padding-left: 15px;
padding-top: 0px;
margin-bottom: 5px;
}
.commentcontent blockquote {
background-color: #d5e0e3;
margin-bottom: 15px;
padding: 5px 5px 2px 8px;
border-left: 4px solid #b1c6d0;
font-size:11px;
color:#777;
line-height:17px;
}
.commentcontent blockquote p {
margin-bottom:5px;
}
.commentform {
background: #f2f6f7 url(images/commentform2bg.jpg) no-repeat;
width: 440px;
padding: 20px 12px 0 12px;
margin-bottom: 20px;
}
.commentform h2 {
color: #294a59;
font-family: Arial, Helvetica, sans-serif;
font-size: 19px;
font-weight: normal;
margin-bottom: 10px;
text-transform: lowercase;
}
.cfbox1 {
width: 150px;
margin-right: 20px;
padding-left: 3px;
float: left;
}
.cfbox2 {
width: 250px;
float: left;
}
.cfbox2 textarea {
width: 250px;
height: 108px;
}
.cfbox3 {
background: transparent url(images/cfbox3bg2.jpg) no-repeat right bottom;
width: 440px;
padding-bottom: 12px;
text-align: center;
clear: both;
}
.commentform label {
color: #294a59;
margin-bottom: 2px;
display: block;
}
.commentform input {
width: 150px;
margin-bottom: 10px;
}
.commentform textarea {
margin-bottom: 20px;
}
input.submit {
width: 150px;
margin-bottom: 6px;
margin-left: 173px;
display: block;
}

/*************** NAVIGATION
############################################*/

ul#navigation {
position:relative; /* added as test, delete to get back to normal */
left:0px; /* added as test, delete to get back to normal -- higher number moves left*/
top:72px; /* added as test, delete to get back to normal -- higher number moves down */
list-style:none;
margin:0 auto;
padding:0;
font-family:Arial,Georgia, Verdana, Serif;
font-weight:bold;
background:#464;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
text-transform:lowercase;
height:30px;
line-height:30px;
font-size:1.1em;
}

ul#navigation li
{
float:left;
margin:0;
padding:0;
list-style:none;
white-space:nowrap;
background:none;
}

ul#navigation li a {
display:block;
padding:0 15px;
text-transform:lowercase;
letter-spacing:1px;
border:none;
color:#ccc;

}
ul#navigation li a:hover,ul#navigation li a:active, #navigation li.current_page_item a
{
color:#fff;
background:#141;

}

/* ------------------------------------------------------------------------------
footer
------------------------------------------------------------------------------ */
.footer_wp {
background: url(images/footerbg3.gif) no-repeat;
width: 730px;
height: 120px;
padding: 0px 15px 0;
color: #fff;
font-size: 11px;
display: block;
float: left;
}
p.foot1 {
padding-top: 25px;
}
p.foot2 {
padding-top: 25px;
float: right;
text-align: right;
margin-right:5px;
}
.footer_wp a {
color: #fff;
}
.footer_wp a:hover {
background-color: #650000;
text-decoration:none;
}
.foot2 a:hover {
background-color: #294A59;
}

/* ------------------------------ clear ------------------------------ */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

And here's my HTML:

{TITLE}
{META}

{CUSTOM_HEADER}

{ADMIN_MENU} {GALLERY} {LANGUAGE_SELECT_LIST}{THEME_SELECT_LIST}
{LANGUAGE_SELECT_FLAGS}



{CUSTOM_FOOTER}

If you want to see the live site and the problem I'm experiencing, click here:

http://j4media.com/gallery//index.php

Notice how you can scroll to the right although there is no content there.

Thanks in advance for your help!

Jrexi

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Your problem is caused by

Your problem is caused by this:

.j4search { position:relative; left:570px; /* higher number moves to the right */ top:-15px; /* negative number moves object higher */ } You don't use position: relative in this way. To find out why, read this.

What you should do with it instead is to float it right and then use margins to position it.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

jrexi
Offline
newbie
Last seen: 12 years 32 weeks ago
Timezone: GMT-5
Joined: 2007-04-22
Posts: 3
Points: 0

Ah perfect Tyssen. I

Ah perfect Tyssen.

I changed it to:

.j4search {
float:right;
margin: -10px 10px;
}

as per your suggestion as it worked liked a charm. Thank You so much!

Generally, should I use float for forms, or should I use it to position everything? I left my positioning of the navigation in the header as relative, but I guess I can figure out a solution with float if that's the general way to go.

Thanks again.

Jrexi

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Reading the link I gave you

Reading the link I gave you should give you a good general idea on when and why you'd use position: absolute/relative instead of (or in combination) with floats.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference