CSS - Sprite & Alignment Issues In Ie

First of all, I know that my CSS is hideous and I have a ways to go in terms of coding. However, given the time I have, I've done my best for the time being. I recently launched a beta for my portfolio site and although everything was tested and working on my Mac (Opera, Safari, and Firefox), I noticed problems when testing it on a Windows machine and several versions of IE. First of all, here's the link:

hellomynameisad.am

Second, here are screen grabs of my Mac/Firefox and a PC/IE7. You'll notice that the padding between lines on the Mac screen grab is tight and neat whereas the space is wider and not even on the PC/IE7. Second, you'll notice that the rules extend the entire width of the white boxes on the Mac whereas they are short of 100% on the PC/IE7. Hopefully someone can lend a hand and help. Thanks!

hellomynameisad.am/mac - firefox.png
hellomynameisad.am/pc - ie.png

Hi,

Just wondering it anyone can help... I am trying to get my left hand navigation to sit at the top of the cell and no matter what I change it won't budge!

You can see what I am working on at www. freedomwhalewatch .com.au /Stirling /index.html as you can see the left hand navigation is sitting towards the bottom... anyone have any suggestions as to how I would move it up to be directly underneath the logo?

To see my working files just use the right click and view page source.

Any help or suggestions would be much appreciated. I am a newbie to css!

Cheers,
Jen

** UPDATE - sorry guys i spelt the url incorrectly!
http://www. freedomwhalewatch .com.au/Stirling /index.html

I have a custom list where the list elements will show horizontally across a row until they can't, and then bump down to the next row. I use it for a gallery of pictures. The problem is, there is all this extra padding on the left of the list for some reason that I can't seem to get rid of. I'm not sure what is causing this. I attached the picture and here is the CSS for the <ul> tag

Code:

.photolistitem
{
    position: relative;
    display: block;
    float: left;
    list-style-type: none;
    height: 140px;
    width: 140px;
    padding: 5px;
    border: solid 1px black;
    margin: 5px;
    background: white;
    text-align: center;
}

Here is the HTML. There is PHP in there to get each photo

Code:

<ul id="sortable">
<?php
    $pics = $DB->query("SELECT * FROM pictures WHERE gallery_id='".$gallery['id']."' ORDER BY position ASC");
    $num = $DB->rows();
    if ($num > 0) {
        while ($pic = $DB->fetch()) { ?>
    <li class="photolistitem">
        <table>
            <tr>
                <td class="imageCell">
                    <a rel="group" class="gallerypiclink" href="pictures/<?php echo $pic['filename']; ?>" title="<?php echo $pic['caption']; ?>"><img class="gallerypic" name="<?php echo $pic['filename']; ?>" galleryid="<?php echo $pic['gallery_id']; ?>" src="pictures/thumbs/<?php echo $pic['filename']; ?>" width="<?php echo $pic['thumb_width']; ?>" height="<?php echo $pic['thumb_height']; ?>"></a>
                </td>
            </tr>
            <tr>
                <td>
                    <p>
                        <a href="#" class="delete">Delete Picture</a><br />
                        <a href="#" class="editCaption">Edit Caption</a>
                    </p>
                </td>
            </tr>
        </table>
    </li>
<?php   }
    } else {
        echo "<p id=\"none\">No images uploaded yet</p>";
    }
?>
</ul>

There is just one table around the list with only the list in it. I made the bgcolor of it blue to highlight the issue. Thanks

I am in the process of building out this site: ( gosandbox dot com/smack/ )

My navigation is displaying a few pixels different between Firefox and Safari/Chrome.

I have gone in and tried to tweak everything I can think of to no avail.

Basically what I am seeing is that on the far right of the page/main nav on hover, everything aligns perfectly in Firefox. In Safari/Chrome, it's off about 10px.

Any ideas on what is wrong here that I am missing?

Thanks in ADVANCE!!!!!

Example Screenshot and Entire File

When you view the screenshot, you will notice that the two columns are obviously not flush with eachother.. I can't seem to fix this minor issue, though (as far as I can tell) the offset only happens when I manually resize the window..

if I resize the window, close it, and then reopen it, the offset does not occur and all is well, but there is still the chance of somebody resizing the window and getting that weird effect.

Greetings all---

I've been playing more and more with css and div layouts and have run into an issue. Not the typical carriage-return issue but something a little more peskier.

My website is quite simply laid out as:
div - logo top
div - navigation
div - logo bottom
div - content
span - header1
span - header
div - content footer

Code:

<html>
<body>
<div id="wrapper">
<!--navtop-->	
    <div id="navtop">
	</div>
	<div>
		<span class="links">
	  <img src="images/borderleft.png" /><a href="http://www.coastalequip.com"><img src="images/coastalequip.png" /></a><img src="images/logomid.png"/><a href="http://www.pickyourlandscaper.com"><img src="images/pickyourlandscaper.png" /><img src="images/borderright.png" /></a></span>
    </div>
    <div>
        <img src="images/logobottom.png" />
    </div>   
<!--content--> 
    <div id="content">
<!--content header-->
        <span class="header1">
        	BAR
        </span>
        <br />
        <span class="header2">
            FOO
        </span><br /> <br />
<!--content body-->        
        <span class="body_text">
            Lorem Ipsum
        </span>
    </div>
<!--content bottom-->
  <div id="contentbottom">
  </div>
</div>
</body>
</html>

I've decided to style every attribute using CSS to give myself some freehand practice. I decided to keep my project more organized by adding a wrapper around my project so that I would only have to use the width attribute once in my css.

Well- after I added the div wrapper around my project and aligned it to center I ran into my issue.

I can't seem to align the text in the class header1 to center. Padding will move it, but it seems fixed to the left; header2 centers fine. I've made sure all of my html tags were closed and I haven't seen any issues in my coding but I think some extra sets of eyes will help.

CSS:
Code:

/* CSS Document */

body {
	background-color:#CCC;
}

img {
	border:0;
	padding:0;
}

#wrapper {
	width: 794px ;
	margin-left:auto;
	margin-right:auto;
}

#navtop {
	background-image:url(../images/logotop.png);
	height:129px;
}

#content {
	background-image:url(../images/bodybg.png);
	background-repeat:repeat-y;
	background-position:center;
	font-family:Tahoma, Geneva, sans-serif;
}

#contentbottom {
	background-image:url(../images/contentbottom.png);
	background-repeat:repeat-y;
	background-position:center;
	height:28px;
}

.header1 {
	text-align:center;
	padding:10px;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:50px;
	font-weight:bolder;
	text-shadow:#666;
	text-transform:uppercase;
	color:rgb(190,30,45);
}

.header2 {
	text-align:center;
	padding:10px;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:35px;
	font-weight:bolder;
	text-shadow:#666;
	text-transform:uppercase;
	color:rgb(0,0,0);
	line-height:.5em;
}

.body_text {
	text-align:left;
	padding:10px;
}

I am having consistent alignment issues with IE7. I am uncertain as to what the issue could be. Any help, assistance or a link to some reference would be greatly appreciated.

1) . The line at the top of the screen and the tabs do not line up
properly. The line transects the buttons.
standardizedsupplements{dot}com


2) Image and Text are not aligned on same line:
standardizedsupplements.com/tremorsure.html
standardizedsupplements.com/purchase_tremorsure.html

3) Gif/Arrow to right side panel list ( <li> ) is not consistent showing up on all lists.
standardizedsupplements.com/contact-us.html


4) In the FAQs, at the very top of the page, the numbers and the text overlap, when there are double digits.
standardizedsupplements.com/faq.html

Hello all,
I have a really anoying alignment issues with fire fox and IE.
Have a look at the follwoing page in both browsers:
http://pfwd.org.uk/style.htm

I need to get IE to display what Firefox shows.
The four rows on the left hand side (date, date value, number and number value) need to be aligned with the rows Descirption and description value.
Please note not all style code is in the external stylesheet

external CSS file:

PHP Code:
 body{
    background-color:#006699;
    font-family:Arial, Helvetica, sans-serif;
}

.main, header, subHeader{/*Positon values that make every thing go inside the main box */
    position:absolute;
    left:100px;
}
.main, subHeader dbItem{
    border: solid 1px #0099CC;

}
.main, header{
    top:125px;
    left:140px;
    width:451px;
    }

.main{
    height:300px;
}
.header{
    background-color:#0099CC;
    font-size:12px;
    font-weight:800;
}
.subHeader{
    height:22px; 
    width:200px;
    border: solid 1px #0099CC;
    background-color:#FFCC66;
    float: left;
    font-size:10px;
    font-weight:700;
    padding: 2px;
}
.dbHeader{
    border: solid 1px #0099CC;
    background-color:#FFCC66;
    font-size:10px;
    font-weight:600;
    padding: 2px;
    width: 50px;
}
.dbItem{
    background-color:#FFFFFF;
    border: solid 1px #0099CC;
    font-size:10px;
    font-weight:700;
    padding: 2px;
    width:50px;
}
.dbdescripHeader{
    border: solid 1px #0099CC;
    background-color:#FFCC66;
    font-size:10px;
    font-weight:600;
    padding: 2px;
    width: 364px;
    float:right;
}
.dbdescripItem{
    background-color:#FFFFFF;
    border: solid 1px #0099CC;
    font-size:10px;
    font-weight:700;
    padding: 2px;
    width:50px;
    width: 390px;
    float:right;
    height:48px;
}
.link{ 
    font-size:11px;
    font-weight:700;
    font-family:Arial, Helvetica, sans-serif;
    padding:2px;
    color:#0099CC;
    text-decoration:none;
    float:right;
}
.links{
    background-color:#006699;    
    border: 1px solid #0099CC;
    border-top:1px solid #0099CC;
    color:#0099CC;
    text-decoration:none;
    padding:0 2px;
    }
.link a:hover{ 
    font-size:11px;
    font-weight:700;
    font-family:Arial, Helvetica, sans-serif;
    padding:0 2px;
    text-decoration:none;
    color:#FFCC66;
    background-color:#006699;    
}
br{
    margin-top:-15px;
}

.subsubheader{
    border: solid 1px #0099CC;
    background-color:#FFCC66;
    float: left;
    font-size:10px;
    font-weight:700;
    padding: 2px;
    } 





page file:

PHP 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>
    <title>

    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="style.css"type="text/css" />
  </head>
  <body>
<div class='main'>
    <div class='header'>Updates to the site</div>
<div style='margin-bottom:20px;'>
    <div class='subHeader' style='height:22px;'>Search for an update</div>
    <div class='dbItem' style='left:180px;  width: 239px; float:left; height:22px;'>
      <form name="search" method="post" action="post">
        <select name="Year">
            <option>Year</option>
            <option>2005</option>
            <option>2004</option>
            <option>2003</option>
            <option>2002</option>
            <option>2001</option>
            <option>2000</option>
        </select>
        <select name="Month">
            <option>Month</option>
            <option>January</option>
            <option>Febuary</option>
            <option>March</option>
            <option>April</option>
            <option>May</option>
            <option>June</option>
            <option>July</option>
            <option>August</option>
            <option>September</option>
        </select>
        <input type="submit" name="Submit" value="Search" />
      </form>
    </div>      
</div>
            <div style='margin-bottom:10px;'>
                <div class="link"><a href='#' class='links'>GO</a></div>
                  <div class='dbdescripHeader'>Description of update</div>
                  <div class='dbdescripItem'>First set of information from the database</div>
                    <div class='dbHeader'>Number</div>
                    <div class='dbItem'>one</div>
                    <div class='dbHeader'>Date</div>
                    <div class='dbItem'>10/01/01</div>
                </div>
                
            <div style='margin-bottom:10px;'>
                  <div class="link"><a href='#' class='links'>GO</a></div>
                  <div class='dbdescripHeader'>Description of update</div>
                  <div class='dbdescripItem' >Second set of information from the database</div>
                      <div class='dbHeader'>Number</div>
                    <div class='dbItem'>two</div>
                    <div class='dbHeader'>Date</div>
                    <div class='dbItem' >10/01/01</div>
            </div>
        
            <div style='margin-bottom:10px;'>
                  <div class="link"><a href='#' class='links'>GO</a></div>
                  <div class='dbdescripHeader'>Description of update</div>
                  <div class='dbdescripItem'>third set of infroamtion from the database</div>
                      <div class='dbHeader'>Number</div>
                    <div class='dbItem'>three</div>
                    <div class='dbHeader'>Date</div>
                    <div class='dbItem'>10/01/01</div>
            </div>

    <!-- End on the fly scripts -->
</div>
</body>
</html> 





URLS
css: http://pfwd.org.uk/style.css
page: http://pfwd.org.uk/style/htm

Can any one help me sus out the alignment issues?
thanks
pfwd

hi....

i'm currently having this issue with ie6. I have a png sprite image. In the sprite there is a rounded corner frame. When i apply the neccessary css.. it work perfectly with ff.. but for ie.. i can not seem to move/translate the background to the correct path..

i've tried using background-position. it works with ff but not with ie6..

here is the code snipplet

Code:

#image{
	background:url(images/160x120_image.jpg) no-repeat;
	width:160px;
	height:120px;
	position:relative;
}

#frame{
	width:160px;
	height:120px;
	background:url(images/sprite.png) no-repeat -59px 0;
	_background:none;	
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/sprite.png',sizingMethod='crop');

}

</style>


	<div style="width:200px; margin:20px auto;">
		<div id="image">
			<div id="frame"></div>
		</div>
	</div>

here is the sprite



does anyone have any clues to move the sprite to the correct position??

Thanks in advance

Hello,

I have created a CSS Sprite containing the many different list bullets, in a vertical form. I have then defined the different li styles. This all works, however, the bullet background is showing the other bullet styles when the li spans more than one line. It's probable best if I show you what I mean:

http://snkhan.co.uk/origami.php

The corresponding CSS is:

Code:

#content ul {margin: 0 0 20px 0; padding: 0;}
#content li {list-style: none; background: url(../images/list.png) no-repeat scroll 0px -34px; padding-left: 20px;}

and

Code:

#community > li {background: url(../images/list.png) no-repeat scroll 0px -18px !important;} 
#music > li {background: url(../images/list.png) no-repeat scroll 0px -16px !important;} 
#twitter > li {background: url(../images/list.png) no-repeat scroll 0px -18px !important;}

Is there anyway I can prevent the li background showing more than 16px x 16px at a time?

Thank you for your time.

I currently have a menu sprite set up that works.
I also have a css dropdown menu set up as well in conjunction with the sprite menu.

Issue: The dropdown does not work in IE6. It drops down behind the div just below it (never to see it until I hid the contents in the div below) even after adding z-index to nearly every attribute. After hiding the contents in the div below, I see the drop down, but as soon as I mouse over it, it disappears. This has been a headache for me and I need to get this resolved asap.

Here is the CSS:
aunkor.com/css.html

Here is the HTML:
aunkor.com/html.html

Please help! >_<

Hi everyone

I recently stumbled upon the CSS sprite idea and i've been loving it! Makes changing and adding graphics so much easier. However i've run into a concern. My image sprite is becoming quite large (>150KB) and my HTML code has many divs who's background refers to this sprite (can get upto 100 divs). With this i've started to notice slight sluggishness of my HTML page and got me thinking weather i should divide my large sprite into a number of smaller ones to enhance performance. This is mainly because i have quite a lot of hover effects (which merely shift the background position) and i suspect this is causing the sluggishness and high memory usage.

It's far too time consuming to try this myself so i'm wondering if anyone has any experience with such an action.

Many thanks

Hello folks,

I am trying to get a basic sprite working. I have been reading on this for over a week and I think I am missing something very basic.

I made a couple sprite png's in photo shop could not get them to display correctly and I found a place online that makes them for U, it displays just like the ones I made... so

http://www.realestateozarks.com/mcnally/mcn.png

Ok what is happening when I try and call the sprite and display a pic on it, it does correct width and height but divides the height by the 6 pictures on it and displays all of them instead of 1. http://www.realestateozarks.com/rsstest.htm and U can see what I am trying to say.

I am not trying to do anything fancy here only display 1 pic out of the 6 correctly.

if I call the sprite in a image statement like <img class="sprite mcn1 mc5"> it does display the img correctly... but that is not correct html code and if alt statment is added it displays it on top of pic. css code passes w3c.org test NOTE: if I try and display a individual pic in a td statment like <td class="sprite mcn1 mc5"> it displays the picture correctly... well as a backround image anyway...

here is my html code to call sprite...

In head statment
Code:

<link href="mcsprite.css" rel="stylesheet" type="text/css" >

in body to call pic
Code:

<img src="../mcnally/mcn.png" class="sprite mcn1 mc5">

Here is code in my mcsprite.css file
Code:

.sprite {background:url(../mcnally/mcn.png); 
	background-repeat:no-repeat; }

        .mcn1 {height:125px;}

		/* mcn1 */
		.mc1 {width:200px; background-position: 0px 0px;}
		.mc2 {width:200px; background-position: 0px -135px;}
		
	
		.mc3 {width:200px; background-position: 0px -270px;}
		.mc4 {width:200px; background-position: 0px -405px;}
		
                .mc5 {width:200px; background-position: 0px -540px;}
		.mc6 {width:200px; background-position: 0px -675px;}

If I can get it to display 1 pic correctly then I can change my code and display all 6 pics correctly. I have 24 pic's on my home page so using a couple sprites with 6 pic's each on them with .2 sec latency on grabbing each individual pic will save me about 2 sec load time on my home page.

thanks in advance for any suggestions/help

whonoes