CSS - Ie7 Alignment Issues - Assistance Needed

Hi all this is my first post on the board! I have a slightly annoying problem with a nav menu I am trying to make; Here is the css

#nav {

background:url(images/nav.gif) no-repeat;
width:470px;
height:40px;
margin-top:44px;
padding:0;
}

#nav span {
display: none;
}

#nav li, #nav a {
height:40px;
display:block;
}

#nav li {
float:left;
list-style:none;
display:inline;
}

#nav-01 {width:65px;}
#nav-02 {width: 65px;}
#nav-03 {width: 65px;}
#nav-04 {width: 65px;}
#nav-05 {width:65px;}
#nav-06 {width: 65px;}
#nav-07 {width: 65px;}

#nav-01 a:hover{background:url(images/nav.gif)0px -45px no-repeat;}
#nav-02 a:hover {background:url(images/nav.gif) -65px -45px no-repeat; }
#nav-03 a:hover {background:url(images/nav.gif) -130px -45px no-repeat; }
#nav-04 a:hover {background:url(images/nav.gif) -195px -45px no-repeat; }
#nav-05 a:hover {background:url(images/nav.gif) -260px -45px no-repeat; }
#nav-06 a:hover {background:url(images/nav.gif) -325px -45px no-repeat; }
#nav-07 a:hover {background:url(images/nav.gif) -390px -45px no-repeat; }

Here is the HTML:

<ul id="nav">
<li id="nav-01"><a href="index.html"><span>HOME</span></a></li>
<li id="nav-02"><a href="index.html"><span>PLANNING</span></a></li>
<li id="nav-03"><a href="index.html"><span>STRATEGY</span></a></li>
<li id="nav-04"><a href="index.html"><span>DELIVERY</span></a></li>
<li id="nav-05"><a href="index.html"><span>NEWS</span></a></li>
<li id="nav-06"><a href="about.html"><span>ABOUT US</span></a></li>
<li id="nav-07"><a href="index.html"><span>CONTACT</span></a></li>
</ul>


The problem I am having is that although the images are aligned when you hover over them, the image is sliced at the wrong position, I have tried adjusting every part of the css I can think of but I still can't figure it? Any ideas or help would be much appreciated.

i42.tinypic.com/16libh0.gif

here is the nav- notice the slice width is correct and the images are aligned, it is just that the slice happens in the wrong place.( u need to input the htt* bit )

Hi,

I'm having an issue getting my body background image to show a line that runs vertically down the sides. It shows in FF, but it doesn't show the left vertical line in IE or Chrome. The content is covering it up, and anytime I try making the overall width smaller in width, the content background color/area keeps aligning to the left and thus covering up my left border. Doh.

Link:
http://aries.addaction.net/~copeland/

Another issue is that there's a big gap separating the content from the footer. I think I've had this problem in the past, but unfortunately don't remember how to remedy the issue. I've tried and tried, but keep gettin' denied.

Any thoughts on either of these obstacles?

Thanks in advance. I love this forum.

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

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.

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 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!!!!!

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

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;
}

So I have been trying to troubleshoot this issue for days and can't come up with a solution. I hope someone out there can help!!

So my navigation image sprite is not displaying correctly in IE7 or 6. It basically shows the whole sprite image scrunched up into the defined 100px height of the <ul>. Also, the sprite image has a width of 930px but in Firefox it begins to repeat the image even though the <ul> width is 930px. So I added the no-repeat to the background image sprite. Now it's not centered on the page. What's up with this?

Also, I am trying to display the pictures on the page with one large pic on the left and then 4 images to the right of the large image. You'll have to see it to understand. It displays perfectly how i want in Firefox...and of course IE7 and 6 are all out of wack. Not sure what I am doing wrong here as well. I used a grid system, but it is not locking it in like it normally does.

You can see the sprite and alignment issues if you view in IE 7 and how I want it to look in Firefox.

Here's my coding:

HTML:
Code:

<body id="pretty-pics">

<div id="container">

		<div id="navigation">
			<ul id="nav">
				<li id="home"><a href="/">home</a></li>
				<li id="essence"><a href="../essence.html">essence</a></li>
				<li id="pictures"><a href="/pretty-pictures.html">pretty pictures</a></li>
				<li id="treasures"><a href="/treasures.html">treasures</a></li>
				<li id="contact"><a href="/contact.html">contact</a></li>
			</ul>
		</div><!--end nav-->
	
	<div class="clear"></div>
	
	<div class="pic-wrap col12">
		<div class="col5 float-left">
			<a href="images/products/product-1.jpg" rel="shadowbox[products]" title="Necklace"><img id="product-1" src="images/products/product-1-t.png" /></a>
		</div>
		<div class="col7 float-right">
			<div class="col4 float-left">
				<a href="images/products/product-2.jpg" rel="shadowbox[products]" title="Bracelet"><img id="product-2" src="images/products/product-2-t.png" /></a>
				<a href="images/products/product-4.jpg" rel="shadowbox[products]" title="Bracelets"><img id="product-4" src="images/products/product-4-t.png" /></a>
			</div>
			<div class="col3 float-right">
				<a href="images/products/product-3.jpg" rel="shadowbox[products]" title="Necklaces"><img id="product-3" src="images/products/product-3-t.png" /></a>
				<a href="images/products/product-5.jpg" rel="shadowbox[products]" title="Necklaces"><img id="product-5" src="images/products/product-5-t.png" /></a>
			</div>
			<div class="clear"></div>
		</div>
	</div><!--end main wrapper-->

CSS:
Code:

#pretty-pics{
	background: #32b4c9 url(images/wall-bg.jpg) no-repeat scroll center 0px;
}
/* Main Navigation */

#nav{
	width: 930px;
	height: 100px;
	background: url(images/sprite.png) no-repeat;
	margin: 20px auto;
	position: relative;
}

#nav li{
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	top: 0;
	text-indent: -9999px;
}

#nav li, #nav a{
	height: 100px;
	display: block;
}

#home{
	left: 0;
	width: 186px;
}

#essence{
	left: 186px;
	width: 186px;
}

#pictures{
	left: 372px;
	width: 186px;
}

#treasures{
	left: 558px;
	width: 186px;
}

#contact{
	left: 744px;
	width: 186px;
}

#home a:hover{
	background: transparent url(images/sprite.png) 0 -104px no-repeat;
}

#essence a:hover{
	background: transparent url(images/sprite.png) -186px -104px no-repeat;
}

#pictures a:hover{
	background: transparent url(images/sprite.png) -372px -104px no-repeat;
}

#treasures a:hover{
	background: transparent url(images/sprite.png) -558px -104px no-repeat;
}

#contact a:hover{
	background: transparent url(images/sprite.png) -744px -104px no-repeat;
}

#essence a.current{
	background: transparent url(images/sprite.png) -186px -208px no-repeat;
}

#pictures a.current{
	background: transparent url(images/sprite.png) -372px -208px no-repeat;
}

#treasures a.current{
	background: transparent url(images/sprite.png) -558px -208px no-repeat;
}

#contact a.current{
	background: transparent url(images/sprite.png) -744px -208px no-repeat;
}

/* Pictures */
.pic-wrap{
	height: 550px;
	margin: 50px auto;
}

#product-1{
	margin: 10px 0 0;
}

#product-2{
	margin: 10px 50px 0;
}

#product-3{
	margin: -40px 20px 0;
}

#product-4{
	margin: 20px 70px 0;
}

#product-5{
	margin: 30px 0 0;
}

ANY help is appreciated. I am tired of pulling my hair out over this one!
Thanks in advance!!!

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

Ive tried to make the text float next to the image but when i try the text just sits below the div line under the image to the right.

here is the URL: http://www.nevertap.com/s_media.php

here is the markup:

Code:

<div id="center_top_content_header">

<h3>Event DVDs</h3>

<div id="center_top_content">

<a href="http://www.nevertap.com/s_media_01.php"><img src="/i/cover_thmb.jpg" alt="Nevertap: Season 1" /></a>


<div id="imagetext">
<p><span class="plusone bold">Nevertap Season 1 DVD, 5 hours of premium submission grappling!  19.99 Plus S&H</span></p>

</div>
<!-- END imagetext -->

</div>
<!-- END center_top_content -->

</div>
<!-- END center_top_content_header -->

And here is the relavent CSS:
Code:

div#center_window {
  /* margin-top: 0px;*/
  margin-left: 215px;
  margin-right: 250px;
  padding: 5px;
  height: 100%;
  /* border-left: 1px solid black; */
  /* border-right: 1px solid black; */
  /*border: 1px solid black; */
}


div#center_top_content_header {
  width: auto;
  margin: auto;
  border: 1px solid black;
}

div#center_top_content {
  padding: 0 10px 10px 10px;
  width: auto;
  margin: auto;
  /*border: 1px solid black; */
}

div#imagetext {
  float: right;
  width: auto;
  margin: auto;
  padding: 0;
  display: inline;
  border: 1px solid black;
}

Please look at this page -

http://www.tmhdesign2.com

See the nav bar with the green background and white font? I want that background to have an opacity of say 70% but when I do that the font also gets that opacity which is what I don't want.

Hi, I am currently trying to postion an SWF menu on the top right corner of a DIV element, I am just starting with CSS and my brain has blanked out. I would greatly appreciate some HELP. Here is the link on the web= (ok I dont have permission to position a URL, please advise guys.)

CSS
body {
background-color: #efefbe;
}

div#container {
margin: 50px auto 0px auto;
width: 1050px;
height: 525px;
}


div#left {
width: 525px;
height: 525px;
float: left;
margin: 0px;
}

div#menu {
width: 200px;
height: 230px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
}


div.content {
width: 525px;
height: 525px;
background: white;
float: left;
margin: 0px;
}


p {
font: 11px sans-serif;
color: #666666;
padding: 25px;
}


p#auto {
overflow: auto;
}