CSS - Want To Center Some Image Links

I've checked the class, and it's peachy, I've added a style= "margin: 0 auto;" tag, a style="text-align: center;" tag.

I've tried everything I can think of.

The image isn't receiving any parent styling that is holding it back from centering that I am aware of.

Will somebody please learn me!

URL is :
www . dalcon .com / business / skype-for-asterisk/

the image I'm referring to is the skype for asterisk image.

Sorry about broken link, I don't have the rep around here to not be considered a spammer yet I guess (it won't let me post a link)

I'm working with a php script that i purchased. In my admin_login.php page is the entry for the image and my entry from my layout.css page. I'm only seeing half my background image. I cant seem to get it centered.

admin_login.php...

5.<div id="container_login">
6. <a href="http://www.myglobalpnr.com" target="_blank" id="login_logo"><img src="<?php echo IMG_PATH; ?>login_logo.jpg" alt="Property Listing Script by ClassifiedsGeek.com" /></a>
7. <div id="main_login">
8. <?php require $content_tpl; ?>
9. </div> <!-- main_login -->
10. </div> <!-- container_login -->
11.
12.layout.css...
13.
14./* login */
15.#container_login{
16. font-family: Arial, sans-serif;
17. font-size: 12px;
18. margin: 0 auto;
19. overflow: hidden;
20. position: relative;
21. max-width: 100%;
22. height: 1306px;
23.}
24.a#login_logo{
25. position: absolute;
26. top: 0;
27. left: 404px;
28. height: 129px;
29. margin: 0 auto;
30. width: 192px;
31.}
32.#container_login #main_login{
33. float: none;
34. margin: 200px auto 0;
35. position: relative;
36. text-align: left;
37. width: 343px;
38.}
39.#container_login h3{
40. font-size: 1.3em;
41. font-weight: bold;
42. margin: 5px 15px;
43. text-transform: uppercase;

I know there's one thing that i didn't do. Can you help me please?

Thanks in advance,
Scotty13

I have a problem with my background image. I need to centre the background image and center the container div on top of that. I have used the below CSS which has the desired effect in Mozilla but for some reason in ie, the background moves depending on browser size when it needs to stay put! Any ideas?

body {
font-size: 0.70em;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
background:#ffffff url('../images/content_bg.gif') top center no-repeat;
color: #303030;
height:100%;
min-height:100%;
}

#container {
width: 900px;
text-align:left;
position: absolute;
margin-left:-450px;
left:50%;
z-index: 100;
}

I am trying to get the background image for #feature-stripe to be fluid. I want it to expand and contract equally with the images just above and below it. The other images are in the #banner & #main-center. I can't seem to get the #feature-stripe to do the same.

Also, I am using the #main-left as a placeholder for position. I tried to eliminate it, but things to line back up like I think they should.

Side note: I am using XHTML 1.0 Strict DTD.

Any help or if someone could point me in the right direction I would appreciate it.

CSS Code:
Original - CSS Code body { margin: 0px 0px 0px 0px; padding: 0px; background: #431111; } #main-right { width: 20%; float: left; background: url('column_background2.png') repeat; overflow: hidden; padding-bottom: 5px; } #main-right p{ padding: 5px 10px 5px 10px; } #main-center { width: 60%; float: left; margin-left: auto; margin-right: auto; background: #000; padding-bottom: 0px; } #main-center #img { margin-left: 0%; } #main-left { width: 10%; float: left; /*background: #fff; */ padding-bottom: 10px; } #banner { background: #000 url('front-basket_1.png') no-repeat; height: 9.7em; width: 80%; margin-left: auto; margin-right: auto; color: gold; } #banner #right { float:right; width: 25%; height: 9.7em; background: url('column_background2.png') repeat; margin:0px 0px 10px 10px; } #banner #right p{ padding: 5px 10px 5px 10px; } #feature-stripe { background: #5B0E0E url('front-basket_2.png') no-repeat; background-position: 12.7% 0%; height: 20px; }

  

     body {


         margin:  0px 0px 0px 0px;


         padding:  0px;


         background:   #431111;


         }


     


     #main-right {


         width:  20%;


         float:  left;


         background:  url('column_background2.png') repeat;


         overflow: hidden;


         padding-bottom: 5px;


         }


      


      #main-right p{


         padding: 5px 10px 5px 10px;


         }


         


     #main-center {


         width:  60%;


         float:  left;


         margin-left:   auto;


         margin-right:   auto;


         background:  #000;


         padding-bottom:  0px;


         }


     


     #main-center #img {


         margin-left: 0%;    


         }


     


     #main-left {


         width:  10%;


         float:  left;


         /*background:  #fff; */


         padding-bottom:  10px;


         }


     


     #banner {


         background:  #000 url('front-basket_1.png') no-repeat;


         height:   9.7em;


         width:   80%;


         margin-left:   auto;


         margin-right:   auto;


         color: gold;


         }


  


     #banner #right {


         float:right;


         width: 25%;


         height: 9.7em; 


         background:  url('column_background2.png') repeat;


         margin:0px 0px 10px 10px;


     }


     


     #banner #right p{


         padding: 5px 10px 5px 10px;


         }


         


     #feature-stripe {


         background:  #5B0E0E url('front-basket_2.png') no-repeat;


         background-position: 12.7% 0%;


         height:   20px;


         } 

Code:
XHTML

<div id="banner"><div id="right"></div></div>
<div id="feature-stripe"></div>
<div id="main-left"></div>
<div id="main-center"><div id="img"><img src="front-basket_3.png" alt="" /></div></div>
<div id="main-right">This is the main right</div>

Edit: Currently I am getting this to work in Firefox. I will worry about the others later. Therefore, I may be back with more questions later.

BIO

BIO CSS

i would like for both the image and text to be centered on page-- they are just a little off....

am using FOX as primary browser -- but IE displays pretty much the same--

anyone got a fix for this??? its late and i have been over the coding

a million times but just dont see the solution it right now

thanks in advance!

Hi,

Here's the site I'm working with:
http://www.cjfusion.com

I want to get that image centered on the browser window and then depending on how big the viewers screen is, the browser will cover up the left and the right. I hope that makes sense. I almost want it to be fluid, but I'm unsure how to do that.

Ask questions if this doesnt make sense. Its hard to explain.

-CJ

I've tried margin: 0 auto; and that didn't work.

I'm trying to position the image below vertically center and horizontally left to no avail. Its horizontally left but centers the top of the image in the center of the page. What am I doing wrong?

<DIV style="position: absolute; top: 50%; left: 0px; border: none"><img src="images/right.jpg"></img></DIV>

It seems I get one or the other, but not all.

I am converting my news system from tables to pure CSS. So far its going great, and I'm almost complete except for one problem; Each post has a category, and the category image is displayed in each post using "background-image" in CSS. Although it somehow comes back in the background of each link within the <div> (in Firefox). I have attached an image of what I'm talking about.

Here's the html (simplified):
Code:

<div class="games">
<div class="newstoryinfo">
<h2>Topic goes here</h2>
</div>
text text text text text text text text text text text text text text text text text text text text text and so on... 
</div>

Here's the CSS
Code:

.news {
background-image: url("/img/topics/1.gif");
background-color: transparent;
background-repeat: no-repeat;
border: 1px solid black;
padding: 10px;
}

.news div {
text-align: justify;
margin-left: 1ex;
margin-bottom: 10px;
padding-left: 60px;
padding-right: 5%;
line-height: 1.6em;
}

.newstoryinfo {
  padding-top: 5px;
  color: #888;
  font-size: 11px;
  font-family: "Lucida Grande", Verdana, Geneva, Lucida, Helvetica, sans-serif;
}

Can someone please tell me how to make links in the "text text text.." area display with a white/transparent background? Thank you!

My website works in safari, but not in IE or firefox. My question is, how do I get my links to match up in the other browsers?

Hi all,

I am having difficulty with the background for an image link. I have the following:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Test page</title>
    <style type="text/css">
      a:hover { color: #FFFFFF; background: #0000ff; text-decoration: none; } 
      a:hover img { background: none; }
      .box { background: #00ff00; padding: 1em; } 
      .box img { border: 0; }
    </style>
  </head>
  <body>
    <div class="box">
      <p><a href="#"><img src="images/a1a8aa6a43.jpg" alt="" /></a></p>
      <p><a href="#">Text link</a></p>
    </div>
  </body>
</html>

I have a global style for links that change the background color and the color of the text. However, this also changes the background color of an image link which makes it look odd. I attempted to fix this with

Code:

a:hover img { background: none; }

But this does not fix the issue. Any thoughts?

I am using XHTML strict because the CMS I am using forces me to an XHTML stylesheet. Also, this is just a snippet of the code of the actual page but the bug is present in this snippet.

Hobby Helper Model Trains

The above link is where my problem is...

If you look at the middle column running down the page, there are several text links that I have the CSS working nice with the background color changing to orange.

There is an arrow image that should follow the mouse as I run over these text links, but can't figure out how to get the darn thing to move.

Any help will be GREAT!! THANKS!