CSS - Problem With Image Alignment In Ie.

Hi There,

If you put images in in replacement for standard form buttons they don't align properly.

I have been trying to move away from nested tables with my current work in favour of css layouts and was wondering if there is any quick and easy way to align button images?

If you look at the following URL the 'add to basket' buttons are higher up thean they should be.....

http://www.storesprite.org/taml/vie...l?category_id=3

Thanks

Hi.

K, I have NO idea where to begin on this one. I need to display a series of thumbnails (to be selected dynamically from a database) inside 1 <td> tag. I need them to be organized 3 wide by 3 high, with their titles underneath.

What would I use for this? I"m assuming I just set up a new class for that, but I don't know what to do for it.

Any help is greatly appreciated.

Okay, I'm no newbie on using CSS but the long story short is that I bought software for a shopping cart and had to use their pre-made template in order to keep the peace. I of course, being a web designer changed the template to my own liking, but can NOT get this header centered for the life of me! I have tried everything I know, including things I have looked up, nothing will work.

Here is the main.css (only css file being used)

Code:

body {
     color: #ffffff;
     background-color: #000000;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     font-weight: normal;
     text-align: left;
     margin:auto;
     text-align:center;
     margin:0 auto;
     }

a {
     color: #d92f2f;
     font-weight: normal;
     text-decoration: underline;
     cursor: pointer;
     }

p {
     margin: 0px 0px 7px 0px;
     }

sup {
     display: inline;
     padding: 0px;
     vertical-align: super;
     font-size: 8px;
     }

a:hover {
     color: #ffb4b4;
     }

legend {
     display: none;
}


label {
     display: none;
}

fieldset {
     border: none;
     padding: 4px 0px 4px 5px;
    }

fieldset p {
     display: block;
     margin: 5px 5px 5px 2px;
     }

form {
     margin: 0px 0px 5px 0px;
     }

img {
     border: none;
     }

li {
     padding-bottom: 5px;
     }

/* +------------------------------------------------------------+ */
/* | General XHTML Classes                                      | */
/* +------------------------------------------------------------+ */

.center {
     text-align: center;
     }

.inlinecenter {
     text-align: center;
     }

p.inline {
     display: inline;
     padding: 0px;
     }

.strong {
     font-weight: bold;
     }

.big {
     font-weight: bold;
     font-size: 16px;
     }

.hidden {
     display: none;
     }

a.unfancy {
     color: #d92f2f;
     font-weight: normal;
     text-decoration: underline;
     cursor: pointer;
     }

/* +------------------------------------------------------------+ */
/* | Skin Specific Divs                                         | */
/* +------------------------------------------------------------+ */


#skin_header {
     height: 230px;
     width: 899px;
     margin:auto;
     padding: 0px;
     background-position: center top;
}
     
#skin_wrapper {
     width: 910px;
     padding: 0px;
     margin:auto;
     }

#skin_wrapper_full {
     width: 100%px;
     padding: 0px;
     margin:auto;
     background-image: url('../media/header.png')
     background-repeat: repeat-x;
     background-position:  top left;
     }

#skin_ct {
     width: 100%;
     padding: 0px;
     margin: auto;
     border-spacing: 0px;
     border-collapse: collapse;
     }

#skin_ct_lcol_head {
     font-size: 16px;
     font-weight: bold;
     padding: 10px;
     margin: auto;
     width: 160px;
     height: 80px;
     }

#skin_ct_rcol_head {
     font-size: 16px;
     font-weight: bold;
     padding: 10px;
     margin: auto;
     height: 80px;
     text-align: right;
     }

#skin_ct_lcol {
     padding: 20px 10px 10px 10px;
     margin: 0px;
     vertical-align: top;
     width: 160px;
     text-align: left;
     }

#skin_ct_mcol {
     padding: 20px 10px 10px 10px;
     margin: 0px;
     vertical-align: top;
     line-height: 150%;
     }

#skin_ct_rcol {
     padding: 2px 10px 10px 10px;
     margin: 0px;
     vertical-align: top;
     width: 160px;
     }

#skin_footer {
     color: #FFFFFF;
     background-color: #000000;
     padding: 50px 10px 10px 10px;
     margin: 0px;
     text-align: center;
     background-image: url('../media/footer.png');
     background-repeat: repeat-x;
     background-position:  top left;
     }

#skin_pgtitle {
     font-size: 16px;
     padding: 0px 0px 4px 0px;
     margin: 0px 0px 10px 0px;
     font-weight: bold;
     border-bottom: 1px solid #999999;
     }

#skin_content {
     margin: auto;
     }

There is more coding but the actual image header is located inside of the #skin_header.

Also, here is the PHP code where the SRC code is located:

Code:

</head>

<body>


<div id="skin_header" align="center">
<img src="skins/Default/media/logo.png" alt="Home" width="899" height="230" align="center" style="margin:auto;"/>
</div>

<div id="skin_wrapper_full"><div id="skin_wrapper">




<table id="skin_ct">

<tr>


<td id="skin_ct_rcol_head" colspan="3">

<div id="skin_menu_head">

<ul>

<?php 
if (!(empty($link_home)))     {print '<li><a href="' . $link_home . '" title="Home">Home</a></li>';}
if (!(empty($link_cart)))     {print '<li><a href="' . $link_cart . '" title="Shopping Cart">Shopping Cart</a></li>';}
if (!(empty($link_checkout))) {print '<li><a href="' . $link_checkout . '" title="Checkout">Checkout</a></li>';}
if (!(empty($link_account)))  {print '<li><a href="' . $link_account . '" title="Your Account">Your Account</a></li>';}
if (!(empty($link_contact)))  {print '<li><a href="' . $link_contact . '" title="Contact">Contact</a></li>';}
?>

</ul>

Please, ANY help would be appreciated, I want to get this site live, pronto. The link is www.PhantomSupplements.net

thank you!

Nevermind, folks over at codingforums helped me.

I'm really hung up on what class alignments I need to alter in order to get my thumbnails to align properly. If my thumbnails span the width of my page width, they are justified, but if they do not, they align left. The forum isn't letting me post a link to an example, but my website is at www dot the312hole dot com. The latest post shows an example of what I'm talking about with the thumbnails at the bottom of the post.

Any advice on how to get them to always space evenly? Preferably with a predefined margin and padding that spaces them equally regardless of how many are in each row?

Thanks for the help!

This post can be deleted, I solved my problem.

I'm trying to get something that looks like this:



Here is the xhtml:

Code:

<div id="container">
                <div class="design_box">
			<img src="images/image.png" alt="" />
                        <h1>Header goes here</h1>
                        <p>Paragraph goes here</p>
		</div>
		<div class="design_box">
			<img src="images/image.png" alt="" />
                        <h1>Header goes here</h1>
                        <p>Paragraph goes here</p>
		</div>
		<div class="design_box">
			<img src="images/image.png" alt="" />
                        <h1>Header goes here</h1>
                        <p>Paragraph goes here</p>
		</div>
</div>

Here is the relevant css:

Code:

.design_box {
	display: block;
	margin-bottom: 17px;
}

#row_a_right_web_design img {
	float: left;
}

.design_box h1 {
	color: #fbfbfb;
	font: bold .9em Tahoma, arial, sans;
	margin-bottom: 4px;
}

.design_box p {
	color: #c4c2c2;
}

Needless to say, the above css does not produce the desired outcome. I'm having a serious brain-fart as to what the best way is to tackle this.

Thanks in advance.

Hello all,

I am trying to make a horizontal nav bar using a list. Everything was going good until I tried to add an image (essential a line) to seperate each <li>. When I did this, the height of the nav bar expanded and it moved the entire list down about 15 pixels or so. I am attaching an image before I added the image and after I added the image to show.

Here is my css code for before I add the image:
PHP Code:
#navbar {
    height:37px; 
    line-height:33px;
    padding: 2px 0 0 10px;
    vertical-align:top;
    background: url(images/linkbarbg1.png) repeat-x;
    font-family: Tahoma, Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    color: #FFFFFF;

}

#navbar ul {
    vertical-align:top;
    margin:0;
    padding:0;
    border: 0px solid #000000;
}

#navbar ul li {
    display: inline;

}

#navbar ul li a {
    display: inline;
    text-decoration: none;
    padding-top: 5px;
    padding-bottom: 4px;
    padding-right: 10px;
    padding-left: 10px;
    color:#FFFFFF;

}

#navbar ul li a:hover
{
height: 31px;
background:url(images/linkbarbg1hover.png) repeat-x top left;
background-color: #FF3300;
} 





And HTML:
PHP Code:
<div id="main">
 <div class="leftshadow">
  <div class="rightshadow">
   <div id="header"><img src="images/logo1.png" /></div>
   <div id="navbar">
    <ul>
     <li><a href="#">Milk</a></li>
     <li><a href="#">Eggs</a></li>
     <li><a href="#">Cheese</a></li>
     <li><a href="#">Vegetables</a></li>
     <li><a href="#">Fruit</a></li>
    </ul>
   </div>
  </div>
</div> 





And here is what it looks like:


My CSS Code is the same for after, here is my HTML code for after:
PHP Code:
<div id="main">
 <div class="leftshadow">
  <div class="rightshadow">
   <div id="header"><img src="images/logo1.png" /></div>
   <div id="navbar">
    <ul>
     <li><a href="#">Milk</a></li>
     <li><img src="images/linkbarseperator1.png" /></li>
     <li><a href="#">Eggs</a></li>
     <li><a href="#">Cheese</a></li>
     <li><a href="#">Vegetables</a></li>
     <li><a href="#">Fruit</a></li>
    </ul>
   </div>
  </div>
</div> 





and here is what is looks like:


Is there a way to fix this?

UPDATE
I have noticed the same thing happens even when it is not a list. Therefore, it must be due to some other factor...does anyone have any ideas?

Hi! I'm new to this forum, but I'm hoping you can help me! Included is my CSS coding. I am having a little bit of trouble getting #siteAds to have the correct width after adding borders to the three #mainContent. When I tweak the pixel amount it either runs onto the next line or just doesn't line up properly with #siteNav and #footer. I've tried replacing the pixel counts with percentages; doesn't work. I'm relatively new at CSS so any help would be appreciated. Thanks in advance!

Code:

<style type="text/css">
body
{
	background-image:url('bg-1.jpg');
	background-repeat:no-repeat;
	background-position:top;
	background-color:#FFF;
	background-attachment:fixed;
}
* {
	margin: 0px;
	padding: 0px;
}
#wrapper {
	height: 1300px;
	width: 1000px;
	margin:0px auto;
	text-align:left;
}
#branding {
	height: 228px;
	width: 1000px;
}
#branding #logo {
	height: 228px;
	width: 1000px;
	position: relative;
	background-image:url('hooplogolarge.jpg');
	background-repeat:no-repeat;
	background-position:top;
	background-color:#000000;
}
#siteNav {
	height: 38px;
	width: 1000px;
	color: #FFF;
	background-color: #000;
	line-height: 38px;
	clear: both;
	font-family: Arial, Helvetica, sans-serif;
	float: none;
	text-align: center;
	word-spacing: normal;
	font-size: 24px;
}
#mainContentWrapper {
	float: none;
	width: 1000px;
	background-color: #FFF;
}
#mainContentWrapper #news {
	float: left;
	width: 265px;
	height: 953px;
	background-color:#FFF;
	border: thin dashed #000;
	padding: 10px;
}
#mainContentWrapper #mainContent {
	float: left;
	width: 488px;
	height: 953px;
	background-color:#FFF;
	padding: 10px;
	border: thin dashed #000;
}
#mainContentWrapper #siteAds {
	float: right;
	width: 175px;
	height: 953px;
	background-color:#FFF;
	padding: 10px;
	border: thin dashed #000;
}
#footer {
	width: 1000px;
	font-size: 9px;
	color: #CCC;
	text-align: center;
	line-height: 35px;
	background-color: #000;
	clear: both;
}
</style>

OK, I somehow became a css n00b overnight (I've made 4-5 websites heavily using css.)

Basically, here is what I want:
Code:

style :: [ ] [ ]

And here is what I'm getting:
Code:

style ::
[ ] [ ]

For some reason the boxes won't align with the text. No matter what I do! Here is the link to see: http://www.sential.co.uk/test.php

Here is the html:
Code:

<div id="style_selector">
    <p>style ::&nbsp;
        <a href="#" onclick="setActiveStyleSheet('SE001');
        return false;" title="change to style: Underwater - Water Planet"><div id="style_se001">Blue</div></a>
        <a href="#" onclick="setActiveStyleSheet('SE002');
        return false;" title="change to style: Orkidea - Beautiful"><div id="style_se002">Orange</div></a>
    </p>
</div>

And here is the css:
Code:

#style_selector{
	position: absolute;
	top: 70px;
	left: 160px;
	height: 25px;
	width: 100%;
	text-align: left;
}
#style_se001{
	float: left;
	height: 15px;
	width: 15px;
	text-indent: 10000px;
	overflow: hidden;
	background-color: #6187E1;
	display: block;
	border: 1px solid #ffffff;
}
#style_se001:hover{
	border: 1px solid #6187E1;
}
#style_se002{
	float: left;
	height: 15px;
	width: 15px;
	text-indent: 10000px;
	overflow: hidden;
	background-color: #FCB029;
	display: block;
	border: 1px solid #ffffff;
}
#style_se002:hover{
	border: 1px solid #FCB029;
}

I'm sure it's something simple, yet I've tried switching positioning attributes and everything, and the code for aligning these boxes is IDENTICAL to the menu buttons at the top. I'm totally miffed

-Luke

My page looks great, except in IE 6 where the green header shifts left instead of staying centered.

I don't know why!!!

It can be viewed at: http://www.descom.org/testing/home.html

Roll over "About" and then click on any of its sublinks.

The CSS sheets a http://www.descom.org/testing/allianceStyles.css
and: http://www.descom.org/testing/ie6.css

THANK YOU!

I'm using this layout, modified quite a bit for visual design, but the "mechanics" are the same as the author's demo for the most part:

http://matthewjamestaylor.com/blog/...rail-pixels.htm

The top navigation is a horazontal list aligned to the left.

What I would *like* to do is have all of the nav "tabs" aligned to the left as they are now, except the last one, aligned to the right. Sort of like this:

TTTT_____T

Any ideas?

I'm trying to have a logo in a div next to a navigation menu that can align at a specific height in my logo. but im having a problem with my li background images staying within the ul background image.

Can someone help me fix my code to align this properly?

HTML CODE:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- load the typeface.js library and typeface.js fonts -->
<script src="js/typeface-0.14.js"></script>
<script src="fonts/haettenschweiler_regular.typeface.js"></script>
</head>

<body class="oneColFixCtrHdr">

<div id="container">
  <div id="header">
     <div id="navigation" class="menu">
     	<ul id="top-nav">
        	<li class="item4"><a href="#" title="Contact">Contact</a></li>
		<li class="item3"><a href="#" title="About">About</a></li>
		<li class="item2"><a href="#" title="Ideas">Ideas</a></li>
                <li class="item1"><a href="#" title="Portfolio">Portfolio</a></li>
       </ul>
     </div>
     <div id="logo"><span><a href="http://www.nadesignstudio.com/" title="NA Design Studio" rel="home">NA Design Studio</a></span></div>
     <div class="clear"></div>
<!-- end #header --></div>
  <div id="mainContent"><h1 class="typeface-js">Main Content </h1>
    <div class="typeface-js">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. </p>
    </div>
	<!-- end #mainContent --></div>
  <div id="footer">
    <p>na design inc, new york  ::  all right reserved 2010</p>
  <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

CSS CODE:

Code:

body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #FFFFFF;
	margin: 0;
	padding: 0;
	text-align: center;
	color: #FFFFFF;
}
.oneColFixCtrHdr #container {
	width: 800px;
	background-image: url(images/bg-stripe.png);
	background-repeat: repeat;
	margin: 0 auto;
	border: 1px solid #000000;
	text-align: left; 
}
.oneColFixCtrHdr #header { 
	padding: 10px 10px 0 10px;
	background: #000000;
}
.oneColFixCtrHdr #header h1 {
	margin: 0;
	padding: 10px 0;
}
.oneColFixCtrHdr #mainContent {
	padding: 0 10px;
}
.oneColFixCtrHdr #footer {
	padding: 0 10px;
	background: #000000;
	font-family: "Courier New", Courier, monospace;
	font-style: italic;
	font-size: 8pt;
}
.oneColFixCtrHdr #footer p {
	margin: 0;
	padding: 10px 0;
}
.typeface-js {
	font-family: Haettenschweiler;
	font-style: italic;
	letter-spacing: 1px;
	color: #FFFFFF;
}
#logo {
	display: inline;
	float: right;
	text-align: left;
}
#logo a{
	background-attachment: initial;
	background-clip: initial;
	background-color: initial;
	background-image: url(images/logo.png);
	background-origin: initial;
	background-position: 0 0;
	background-repeat: no-repeat no-repeat;
	display: block;
	height: 118px;
	margin-bottom: 10px;
	text-indent: -9000px;
	width: 296px;
}
.msie #blog-title a {
	margin-bottom: -10px;
	position: relative;
}
#navigation {
	background-image: url(images/bg-nav.png);
	background-position: 0 0;
	background-repeat: no-repeat no-repeat;
	float: right;
	height: 22px;
	width: 474px;
	margin-top: 75px;
}
#navigation ul {
}
#navigation li {
	float: right;
	height: 22px;
	position: relative;
	list-style: none;
}
#navigation li a {
	font-family: Haettenschweiler;
	font-style: italic;
	letter-spacing: 1px;
	text-decoration: none;
	text-align: center;
	color: #FFFFFF;
	font-size: 0.95em;
	font-weight: bold;
	background-image: url(images/bg-nav-btn.png);
	background-repeat: no-repeat no-repeat;
	height: 22px;
	display: block;
	width: 69px;
	overflow: auto;
}
#navigation li a:hover {
	background-image: url(images/bg-nav-btn.png);
	background-position: 50% -22px;
	background-repeat: no-repeat;
	color: #000000;
}
#navigation li.item1 a {
	font-family: Haettenschweiler;
	font-style: italic;
	letter-spacing: 1px;
	text-decoration: none;
	text-align: center;
	color: #FFFFFF;
	font-size: 0.95em;
	font-weight: bold;
	background-image: url(images/bg-nav-btn1.png);
	background-repeat: no-repeat no-repeat;
	height: 22px;
	display: block;
	width: 69px;
	overflow: auto;
}
#navigation li.item1 a:hover {
	background-image: url(images/bg-nav-btn1.png);
	background-position: 50% -22px;
	background-repeat: no-repeat;
	color: #000000;
}
.clear {
   height: 0;
   font-size: 1px;
   margin: 0;
   padding: 0;
   line-height: 0;
   clear: both;
}

Example of problem
If Image doesnt show below, view it he http://nadesign.pisigmachi.com/wp-content/uploads/2010/02/example.jpg

URL

Hi
Please see
watermark.sc
It works fine in Firefox but
header alignment is not proper in IE
What might be the problem?
San