View Full Version : CSS Help - Images Not appearing in the correct spots

09-13-2007, 06:38 PM
Hey Everyone,

I am very new to CSS, but have good working knowledge of HTML, and am picking it up quickly. I have two issues that I pray that someone here can help me with.

I see from the sticky thread that you cant post links....
but the problem is on this page, ill just separate it with a space after the domain name so there isnt a direct link:

Here is where the problem is located: http://tralalaonline .com/beauty

in Internet Explorer, you will notice that there are two problems. At the bottom of the main posts, the image at the bottom is off.

Here is the main index .php script for that part:

<noscript>///--------------------MAIN CONTENT--------------------///</noscript>
<th width="640">
<div id="lefttop"></div>
<div id="leftbody">
<div id="posts" align="left">

<?php if (is_home()) { query_posts("cat=-135"); }?>
<?php if (have_posts()) :?>
<?php while (have_posts()) : the_post();?>

<div class="post">
<h1><a class="title" href="<?php the_permalink()?>" rel="bookmark" title="Permanent Link: <?php the_title();?>"><?php the_title();?></a></h1>
<small><?php the_time("l F dS Y")?><br /><?php _e("Filed under:");?> <?php the_category(',')?><?php edit_post_link('Edit', ' ', '');?></small>

<div class="content">
<?php the_content();?>
<div class="commentPos"><?php wp_link_pages();?><?php comments_popup_link(__('0 Comments'), __('1 Comment'), __('% Comments'));?></div>
<br />

<?php trackback_rdf();?>

<?php comments_template(); // Get wp-comments.php template?>

<?php endwhile;?>

<div class="navigation">
<div class="alignleft"><?php next_posts_link('&laquo; Previous Entries')?></div>
<div class="alignright"><?php previous_posts_link('Next Entries &raquo;')?></div>

<?php else :?>

<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>

<?php endif;?>
<br /><br />
<div id="leftbottom"></div>


Here are the DIV css commands that correlate with that script:

#lefttop {

width: 640px;
height: 16px
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-image: url(http://www.tralalaonline.com/tralalacss/textbg_01.gif);

#leftbody {

background-image: url(http://www.tralalaonline.com/tralalacss/textbg_02.gif);
background-repeat: repeat-y;
margin: 0px;
float: left;
width: 640px;
padding-right: 5px;
padding-left: 5px;

#leftbottom {

width: 640px;
height: 19px
margin: 0px;
float: left;
float: right;
background-image: url(http://www.tralalaonline.com/tralalacss/textbg_04.gif);

So, I am not sure if there is something misprogrammed or what is going on. I just cannot get that bottom image called "leftbottom" to move over into the right place.

The other issue is on the bottom box on the right hand side that holds an advertisement. There is a pink box or line that goes through the bottom of that bottom box. Ive tried to remove it, but I dont know what is wrong.

Here is the correlating php script for that box:

<noscript>///--------------------ADVERTISEMENT RECTANGLE--------------------///</noscript>
<div id="righttop"></div>
<div id="rightbody"><script type="text/javascript"><!--
google_ad_client = "pub-9991254471119783";
google_ad_width = 300;
google_ad_height = 250;
google_ad_format = "300x250_as";
google_ad_type = "text_image";
google_ad_channel = "";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "336699";
google_color_text = "000000";
google_color_url = "008000";
google_ui_features = "rc:6";
<script type="text/javascript"
<div id="rightbottom"></div>

<th width="10"></th>


And here is the corresponding DIV css script:

#righttop {

background-image: url(http://www.tralalaonline.com/tralalacss/righttop.jpg);
background-repeat: no-repeat;
background-position: bottom;
margin: 0px;
padding: 0px;
float: left;
height: 12px;
width: 330px;

#rightbody {

background-image: url(http://www.tralalaonline.com/tralalacss/rightbody.jpg);
background-repeat: repeat-y;
margin: 0px;
float: left;
width: 330px;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 5px;

#rightbottom {

background-image: url(http://www.tralalaonline.com/tralalacss/rightbottom.jpg);
background-repeat: no-repeat;
background-position: top;
margin: 0px;
padding: 0px;
float: left;
height: 17px;
width: 330px;

I really hope that someone can help me!


09-13-2007, 09:05 PM
You must have figured it out; it looks the same to me in IE7 and FF.


09-13-2007, 10:00 PM
Hey Gary,

Still havent figured it out. It is specifically with this file: http://www.tralalaonline.com/tralalacss/textbg_04.gif

On the left hand side of the screen at the bottom of the post box, do you notice how the bottom of the post box is not aligned correctly? It is moved over to the right too much.

Also, if you look on the right hand side of the screen, in the bottom advertisement box, there is a pink box overlaying the bottom portion of the white box.

It is with these two images that I am having problems. THANKS :)