CSS - Looks Great In Ff - Bugs In Ie - Floats/margins

So I have a body div which has a left and right div(columns). I need to add 2 more divs inside the left div.

But, these 2 divs have to unordered lists in them.

I know my CSS is pretty average if not worse. My layout looks fine except for when I add 2 divs.. I have the float:left with %50 widths..

Screen shot of how my layout looks.
img209.imageshack.us/img209/2913/idear.gif

I did not add any clear tags to my css.. which I think might be what's causing the issue.
Side note: In IE compatibility view the top of the page has a gap and so does the right of the page.. the logo and footer are both 100% width and the top div has a -negative margin to close the gap, it looks fine without compatibility view, and fine in firefox, and chrome. XHTML passed validation and so did CSS. This is before even messing with the columns.

I didn't do anything with the unordered lists.
Maybe i should ask how to correctly make my layout first.. Because what I've been doing is just adding new divs where I see fit, and then going back to edit the CSS till it works.



Thanks for helping me out!
BTW: what book would you recommend me getting.. I understand basics of CSS and I think I'm good with XHTML, I just need to get a better definition of CSS than w3schools has to offer.
Thanks again.

I am having a problem where I have a <div> that holds my body image, margin: 0 auto; Inside that is my content <div> with margin:15px; but this is visually dropping the background image's margin by 15px. The problem compounds every time I add another margin/padding requirement into the rest of the <div>.

Code:

html, body {
	margin:0px;
	padding:0px;
	background-image:url(images/interface/background.png);
}


#body_image {
	width:935;
	margin:0 auto;
	padding:0px;
	background-image:url(images/interface/body.png);
	background-repeat:no-repeat;
	background-position:center;
}

#container {
	width:904px;
	height:750px;
	margin:15px;
}



#slug {
	height:15px;
}

Code:

<div id="body_image">

<div id="container">
	<div id="header">Header</div>
	<div id="nav">Nav</div>
	<div id="sidebar">Sidebar</div>
	<div id="content">Content</div>
	<div id="footer">Footer</div>
	


</div>
</div>

The extent of my CSS is a few tutorials online and the class I took 10 years ago where the teacher said "Here's CSS, you can't do much more than change your font size and color with it... on to tables!" Thought it'd only be fair to give you a little background.

Hi All,

This seems to be a bit of a recurring problem for me in a lot of the new CSS designs I'm trying... but it seems that IE interprets both padding and margins differently than how firefox interprets them. Sometimes it seems to do it the same, and other times differently.

Take a look at this:
http://zeroonedesign.com/beta/newsite/index.html

CSS he
http://zeroonedesign.com/beta/newsite/style.css

Now look at it first in Firefox (the desired effect) and then in IE. IE seems to be incapable of understanding this particular piece of the code

Code:

#menu {padding-top:140px;text-align:left;padding-left:38px;}
#menu ul{margin:0px;}

#menu ul li{display:inline;margin-right:10px;padding:5px 7px 5px 7px;color:#fff;}

#menu ul li a{color:#fff;font-size:10pt;text-decoration:none;}

#menu ul li a:hover{color:#fff;font-size:10pt;border-bottom:3px solid #fff;}

#menu ul li a.selected{color:#f88000;font-size:10pt;border-bottom:2px solid #f88000;}

Ideas? Help? I know the box model is different for IE than it is for FF but I've tried the box model hack and it doesn't seem to do anything.

I am redesigning my website at this location: http://www.brovizion.com/newsite.

I have 3 little bugs that are driving me crazy:

1. (http://www.brovizion.com/newsite)(all pages) #mainNav won't put the background color all the way across the div on FF or Netscape. IE does take the dark blue background color all the way accross the page, but I don't know why the other two wont. I like the looks of it both ways, but still want to know why it is behaving weird.

2. (http://www.brovizion.com/newsite/portfolio.html) (IE only) For some reason the table in the middle of the page is pushing the left-most column out its position. This is not happening in FF or Netscape. Am I missing something simple?

3. (http://www.brovizion.com/newsite/contact.html) (IE only) The background color I've set for the fieldset tag is continuing upward approx 1 em. It is not happening in the other 2 browsers? Anyone know a simple hack to fix this?

While we're at it, I know this isn't CSS related, but regarding (http://www.brovizion.com/newsite/contact.html), how come FF is making the input fields for "name" and "email" that light yellow color? Is there a way to get rid of it?

Thanks in advance to anyone who has any ideas on how to fix these items?

http:// bluedesign.shaheenwebdesign. com/
Username: access
Password: 123456

The slideshow and the welcome letter are next to each other (slideshow on right, letter on left) in Firefox as they should be, but when viewed in IE, the slideshow takes over and the letter is pushed down the page to below the slideshow. Also, my navigation menu links appear higher on the page in IE. I can't figure it out, help please!

Code:

  <div id="mainContent">

       
	<br />
    <div id="wrapper2">
    <div style="position: relative; float: right;">
  	<jdoc:include type="modules" name="left" />
    </div>
    <div id="WelcomeLetter">
    <h1> Force Training And Equipment</h1>
    <p>If you're looking for a wide selection of Guns, Scopes and other Accessories then you've come to Force Training and Equipment. Serving Central PA and beyond since 1989, Kirk knows how to treat you, the customer, and is here to answer any question you may have about weapons. Please look at our Specials and Inventory to see what we have to offer! 
    </p>
    </div>
    </div>

Code:

.oneColElsCtrHdr #mainContent {
	padding: 0 20px;
	background: #ffffee;
}
#wrapper2 {
width: 980px;
margin: 0 auto;
}
#WelcomeLetter {
position: relative;
border: 1px solid #1d4873; 
width: 350px; 
font-family: Arial;
color: #000000;
line-height: 2em;
margin-top: 3px;
padding: 0px 10px 0px 10px;
}

I am having a lot of trouble trying to get my new design to work correctly in Internet Explorer 6, which sadly around 15% of my visitors still use

It has been breaking the top navigation bar and instead of having the tabs appear horiziontally it has had them vertically, messing up the header.

It also seems to be breaking the content sections, so that the right content section appears below the left sideblock.

Then there is an annoying bug with a small div I use to separate the menu list on the sideblock.

I really wish I didn't have to support IE6, but so many visitors use it I really can't not. I'm not the best at CSS, but I don't think my code is that buggy as it works correctly in the latest versions of Opera, Firefox & Safari, as well as IE7 & IE8.

The site is he http://beta.the-big-bang-theory.com.

Many thanks for any assistance.

Hi,

Does anyone have any Ideas how to fix the two rendering bugs shown in the screenshots below?

In IE5.5 The two top bars that stretch across the screen stretch too far distorting the page slightly. (Circled in red).

http://www.explosiveracing.net/test/render_bugs/ie55.jpg

In NN6 the backgrounds on the table cells do not fill correctly looking unsightly. (Circled in red). If you compare this to viewing the site in FF then you can see what I mean

http://www.explosiveracing.net/test/render_bugs/nn6.jpg

Site: http://www.explosiveracing.net/test/

I have some layout issues.....one in FF, and one in IE....

I have a set of nested div's. One main one that applies a 2px solid black collapsable border. In side are two more divs of equal height. One floated left, and one floated right.

In FF, they display perfect except that the border of the main div does not extend all the way to enclose both of the divs that it contain.

In IE, the div that I have floated right appears centered beneath the first div instead of next to it.

Here is the relevant XHTML 1.1 code (I've added the <base> tag so you can recreate this locally):
html4strict Code:
Original - html4strict 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" xml:lang="en" lang="en"> <head> <title>Welcome to Foltzconstruction.com</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="en-US" /> <link rel="stylesheet" href="newstyles.css" /> <base href="http://www.foltzsconstruction.com"> <script type="text/javascript"> var revert = new Array(); var inames = new Array('about', 'gallery', 'services', 'estimates', 'test', 'contacts'); // Preload if (document.images) { var flipped = new Array(); for(i=0; i< inames.length; i++) { flipped[i] = new Image(); flipped[i].src = "images/"+inames[i]+"2.jpg"; } } function rollover(num) { if(document.images) { revert[num] = document.images[inames[num]].src; document.images[inames[num]].src = flipped[num].src; } } function rollback(num) { if(document.images) document.images[inames[num]].src = revert[num]; } </script> </head> <body> <div ID="main"> <div ID="header"> <h1><a href="index.html"><IMG SRC="images/title.jpg" WIDTH=775 HEIGHT=53 ALT="Welcome to Foltzconstruction.com" /></a></h1> <div ID="navbar"> <a href="about.html" onmouseover="rollover(0)" onmouseout="rollback(0)"><img name="about" src="images/about1.jpg" width=274 height=54 border=0 alt="about us" /></a> <a href="gallery.html" onmouseover="rollover(1)" onmouseout="rollback(1)"><img name="gallery" src="images/gallery1.jpg" width=274 height=32 border=0 alt="photo gallery" /></a> <a href="services.html" onmouseover="rollover(2)" onmouseout="rollback(2)"><img name="services" src="images/services1.jpg" width=274 height=31 border=0 alt="services" /></a> <a href="contacts.html" onmouseover="rollover(3)" onmouseout="rollback(3)"><img name="estimates" src="images/estimates1.jpg" width=274 height=31 border=0 alt="estimates" /></a> <a href="tests.html" onmouseover="rollover(4)" onmouseout="rollback(4)"><img name="test" src="images/test1.jpg" width=274 height=31 border=0 alt="customer testimonials" /></a> <a href="contacts.html" onmouseover="rollover(5)" onmouseout="rollback(5)"><img name="contacts" src="images/contacts1.jpg" width=274 height=67 border=0 alt="contacts" /></a> </div> <h2><img src="images/m3.jpg" width=501 height=179 alt="" /><a href="pom.html"><img src="images/project.jpg" width=501 height=67 border=0 alt="project of the month" /></a></h2> </div> <div ID="headline"> <img src="images/aboutbar.jpg" alt="About Us" /> </div> </div> </body> </html>

  

  


 <!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" xml:lang="en" lang="en">


 <head>


    <title>Welcome to Foltzconstruction.com</title>


    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


    <meta http-equiv="Content-Language" content="en-US" />


    <link rel="stylesheet" href="newstyles.css" />


    <base href="http://www.foltzsconstruction.com">


    <script type="text/javascript">


         var revert = new Array();


         var inames = new Array('about', 'gallery', 'services', 'estimates', 'test', 'contacts');


  


         // Preload


         if (document.images) {


           var flipped = new Array();


           for(i=0; i< inames.length; i++) {


             flipped[i] = new Image();


             flipped[i].src = "images/"+inames[i]+"2.jpg";


           }


         }


  


         function rollover(num) {


           if(document.images) {


             revert[num] = document.images[inames[num]].src;


             document.images[inames[num]].src = flipped[num].src;


           }


         }


         function rollback(num) {


           if(document.images) document.images[inames[num]].src = revert[num];


         }


 </script>


 </head>


 <body>


     <div ID="main">


         <div ID="header">


             <h1><a href="index.html"><IMG SRC="images/title.jpg" WIDTH=775 HEIGHT=53 ALT="Welcome to Foltzconstruction.com" /></a></h1>


             <div ID="navbar">


                 <a href="about.html" onmouseover="rollover(0)" onmouseout="rollback(0)"><img name="about" src="images/about1.jpg" width=274 height=54 border=0 alt="about us" /></a>


                 <a href="gallery.html" onmouseover="rollover(1)" onmouseout="rollback(1)"><img name="gallery" src="images/gallery1.jpg" width=274 height=32 border=0 alt="photo gallery" /></a>


                 <a href="services.html" onmouseover="rollover(2)" onmouseout="rollback(2)"><img name="services" src="images/services1.jpg" width=274 height=31 border=0 alt="services" /></a>


                 <a href="contacts.html" onmouseover="rollover(3)" onmouseout="rollback(3)"><img name="estimates" src="images/estimates1.jpg" width=274 height=31 border=0 alt="estimates" /></a>


                 <a href="tests.html" onmouseover="rollover(4)" onmouseout="rollback(4)"><img name="test" src="images/test1.jpg" width=274 height=31 border=0 alt="customer testimonials" /></a>


                 <a href="contacts.html" onmouseover="rollover(5)" onmouseout="rollback(5)"><img name="contacts" src="images/contacts1.jpg" width=274 height=67 border=0 alt="contacts" /></a>


             </div>


             <h2><img src="images/m3.jpg" width=501 height=179 alt="" /><a href="pom.html"><img src="images/project.jpg" width=501 height=67 border=0 alt="project of the month" /></a></h2>


         </div>


         <div ID="headline">


             <img src="images/aboutbar.jpg" alt="About Us" />


         </div>


     </div>


 </body>


 </html> 

And here's my current stylesheet:
css Code:
Original - css Code body { padding: 10px; margin: 0; background-image: url(images/wood120.jpg); font-family: Verdana; font-size: 12px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; color: #525252; } #main { margin: 0 auto; width: 775px; border-width: 2px; border-spacing: 0px; border-style: solid; border-color: black; border-collapse: collapse; position: relative; top: 10px; height: *; } #header { width: 775px; margin: 0; padding: 0; font-size: 1px; height: 189px; } #navbar { width: 274px; height: 246px; float: left; } #headline { width: 775px; height: 47px; } h1 { width: 775px; margin: 0; padding: 0; height: 53px; } h2 { width: 501px; height: 246px; margin: 0; padding: 0; float: right; } a img { border: none; }

  

  


 body {


     padding: 10px;


     margin: 0;


     background-image: url(images/wood120.jpg);


     font-family: Verdana;


     font-size: 12px;


     font-style: normal;


     line-height: normal;


     font-weight: normal;


     font-variant: normal;


     text-transform: none;


     color: #525252;


 }


 #main {


     margin: 0 auto;


     width: 775px;


     border-width: 2px;


     border-spacing: 0px;


     border-style: solid;


     border-color: black;


     border-collapse: collapse;


     position: relative;


     top: 10px;


     height: *;


 }


 #header {


     width: 775px;


     margin: 0;


     padding: 0;


     font-size: 1px;


     height: 189px;


     }


 #navbar {


     width: 274px;


     height: 246px;


     float: left;


 }


 #headline {


     width: 775px;


     height: 47px;


 }


 h1 {


     width: 775px;


     margin: 0;


     padding: 0;


     height: 53px;


 }


 h2 {


     width: 501px;


     height: 246px;


     margin: 0;


     padding: 0;


     float: right;


 }


 a img {


     border: none;


 } 

hello! You help in solving a few minor problem on my project would be greatly appreciated!

site is he http://pnlab.soundwebdev.com/changetheme-xSixteen.phtml

Issues:
1) right-side content box does not move flush to top ov div in non-IE browsers.
2) links in the 'clockblock' are wrong color in IE only. CSS tells them to be silverish.
3) footmenu links (footmenu directly below clockblock) are the wrong color in IE only. CSS tells them to be grayish.

I have toyed with just about evrything I can think of for these three items. Any help would be greatly appreciated!

Hopefully I'm just not stumbling on the right CSS to fix the bugs. I understand that these same bugs might be attributed to the myspade code or myspace rules limiting html/css.

Here's the mock-up: www.myspace.com/brovizion

2 bugs (1 in firefox, 1 in ie (6.0)):

1. (firefox only) There are 2 nav bars in the "innerwrapper" div (both black), one at the top, and one at the bottom. On the lower nav bar, my background image that is supposed to tile vertically throughout the whole "innerwrapper" div disapppears.

2. (ie only) The upper and lower nav bars (whose links are set to display: block) are on each of their own lines, yet still floated horizontally. This one is hard to explain except to say the nav bars should work like they do in firefox, but in ie they are on their own program. Viewing the site in both browsers will clearly demonstrate the problem. (ie 6.0, haven't tested in 7.0 yet.)

I understand that the nature of this project (a design that must reside in a div overlay on a myspace page) makes for a million different possibilities for why it's messed up, but maybe if someone can help me brainstorm some potential fixes, I'll stumble onto something that works.

I'll post my code as well.

CSS:

Code:

<style type="text/css">

.btext {display:none;}
.contacttable {display:none;}
.lightbluetext8 {display:none;}
.nametext {display:none;}
.orangetext15 {display:none;}
.redlink {display:none;}
.whitetext12 {display:none;}
.hidethem {visibility:hidden; display:none;}
.comments {visibility:hidden; display:none;}

body {
	background-color: 003366;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}

table {
	background-color: 003366;
}





p {
	font-size: 12px;
}

h1 {
	font-size: 24px;
	font-weight: bold;
}

h2 {
	font-size: 18px;
}

h3 {
	font-size: 16px;
	font-weight: bold;
}



ul {
	list-style-type: none;
}

ul li {

}





a {
	color: 003366;
	text-decoration: none;
	font-size: 12px;
	font-weight: bold;
}

a:hover {
	color: 003366;
	text-decoration: underline;
}

a:visited {
	color: 003366;
	text-decoration: none;
}

a:visited:hover {
	color: 003366;
	text-decoration: underline;
}

h1 a {
	color: 003366;
	text-decoration: none;
	font-size: 24px;
	font-weight: bold;
}

h1 a:hover {
	color: 003366;
	text-decoration: underline;
}

h1 a:visited {
	color: 003366;
	text-decoration: none;
}

h1 a:visited:hover {
	color: 003366;
	text-decoration: underline;
}




.wrapper {
	position: absolute;
	top: 132px;
	left:50%;
	margin-left:-460px;
	width: 870px;
    height: 800px;
    z-index: 1;
    text-align: center;
}

.masthead {
	width: 870px;
	background-image: url(http://www.ourcampusbookstore.com/myspace/images/mastheadbg.jpg);
	background-repeat: no-repeat;
	height: 195px;
}

.innerwrapper {
	width:870px;
	padding-left: 92px;
	padding-right: 22px;
	background-image: url(http://www.ourcampusbookstore.com/myspace/images/bodybg.jpg);
	background-repeat: repeat-y;
	text-align: left;
}

	.uppernav {
		width: 756px;
		margin: 0;
		padding: 0;
		background-color: 000000;
		font-weight: bold;
		display: inline;
	}
	
		

	.leftcol {
		clear: both;
		width: 500px;
		float: left;
		vertical-align: top;
                padding: 10px;
	}

	.rightcol {
		width: 220px;
		float: left;
		vertical-align: top;
        padding: 10px;
		text-align: center;
	}
	
		.rightcol h3 {
			text-align: center;
		}
	
	.lowernav {
		width: 756px;
		margin: 0;
		padding: 0;
		background-color: 000000;
		font-weight: bold;
		clear: both;
	}
	
		
	
.footer {
	width: 870px;
    background-image: url(http://www.ourcampusbookstore.com/myspace/images/footerbg.jpg);
	background-position: bottom;
	background-repeat:no-repeat;
	height: 30px;
	clear: both;
}





.uppernav ul {
	width: 756px;
    list-style: none;
    background-color: 000000;
	margin: 0;
	padding: 0;
    float: left;
	border-bottom: 2px solid black;
}
			
	.uppernav ul a {
		width: 151px;
		display: block;
		float: left;
		margin: 0;
		text-decoration: none;
		line-height: 20px;
		text-align: center;
		color: ffffff;
		font-weight: bold;
	}
	
.lowernav ul {
	width: 756px;
    list-style: none;
    background-color: 000000;
	margin: 0;
	padding: 0;
    float: left;
	border-bottom: 2px solid black;
	border-top: 2px solid black;
}

			
	.lowernav ul a {
		width: 151px;
		display: block;
		float: left;
		margin: 0;
		text-decoration: none;
		line-height: 20px;
		text-align: center;
		color: ffffff;
		font-weight: bold;
	}
	
.schoollist {
	text-align: center;
}

	.schoollist li {
		line-height: 16px;
		padding: 1px 1px;
		width: 150px;
		margin: 0 auto;
	}







.uppernav ul a:hover, .uppernav ul a:visited:hover {
		background-color: ffcc66;
		color: 003366;
}

.lowernav ul a:hover, .lowernav ul a:visited:hover {
		background-color: ffcc66;
		color: 003366;
}
	
.schoollist a, .schoollist a:visited {
	color: 000000;
	background-color: EEEEEE;
	width: 150px;
	line-height: 18px;
	font-size: 14px;
	font-weight: bold;
	display: block;
	padding: 1px;
}

.schoollist a:hover, .schoollist a:visited:hover {
	color: FFFFFF;
	width: 150px;
	text-decoration: none;
	background-color: 00FF33;
}

.c0000FF a, .c0000FF a:visited {
	width: 150px;
	text-decoration: none;
	font-weight: bold;
}

.c0000FF a:hover, .c0000FF a:visited:hover {
	color: FF6600;
	width: 150px;
	text-decoration: none;
	background-color: 0000FF;
}


.c990000 a, .c990000 a:visited {
	width: 150px;
	text-decoration: none;
	font-weight: bold;
}

.c990000 a:hover, .c990000 a:visited:hover {
	color: FFCC00;
	width: 150px;
	text-decoration: none;
	background-color: 990000;
}


.cCC6600 a, .cCC6600 a:visited {
	width: 150px;
	text-decoration: none;
	font-weight: bold;
}

.cCC6600 a:hover, .cCC6600 a:visited:hover {
	color: FFFFFF;
	width: 150px;
	text-decoration: none;
	background-color: CC6600;
}


.c3366CC a, .c3366CC a:visited {
	width: 150px;
	text-decoration: none;
	font-weight: bold;
}

.c3366CC a:hover, .c3366CC a:visited:hover {
	color: FFCC33;
	width: 150px;
	text-decoration: none;
	background-color: 3366CC;
}

.c993333 a, .c993333 a:visited {
	width: 150px;
	text-decoration: none;
	font-weight: bold;
}

.c993333 a:hover, .c993333 a:visited:hover {
	color: 999999;
	width: 150px;
	text-decoration: none;
	background-color: 993333;
}

</style>

XHTML:

Code:

<div class="wrapper">

	<div class="masthead"></div>
	
	<div class="innerwrapper">
	
		<div class="uppernav">
			<ul>
				<li><a href="#">View our Pics</a></li>
				<li><a href="#">Watch our Video</a></li>
				<li><a href="#">View Blog</a></li>
				<li><a href="#">Send Message</a></li>
				<li><a href="#">Add 2 Friends</a></li>
			</ul>
		</div>
		
		<div class="leftcol">
			<h1><a href="http://www.ourcampusbookstore.com">OurCampusBookstore.com</a></h1>
			<h2>About us:</h2>
			<p><strong>OurCampusBookstore.com</strong> is an online classifieds website customized just for university students. It is formatted to allow students to post anything from textbooks and furniture, to electronics, event announcements and roommates.</p>
			<h3>What can it be used for?</h3>
			<ul>
				<li><strong>1. Post events</strong> - Is your band having a concert? Throwing a huge party? Have a club event to announce? Use the site!</li>
				<li><strong>2. Furniture</strong> - Are you moving out and need to get rid of furniture? Are you moving into an apartment and need to find furniture? Post what you have or need now and make arrangements to buy/sell your furniture in the future.</li>
				<li><strong>3. Textbooks</strong>- Buy and sell your used textbooks. Avoid the middleman and the high cost of books. Trade amongst yourselves.</li>
				<li><strong>4. Jobs</strong> - We have several companies signed up to post available jobs in Pullman, as well as summer internships and post-graduate opportunities all over Washington.</li>
				<li><strong>5. Apartments</strong> - Need to sublease? Moving to a new apartment? Find information on what's available at ourcampusbookstore.com.</li>
				<li><strong>6. Electronics, Clothes, etc.</strong> - Sell your used video games, consoles, computers, monitors, TVs, movies, software, and so on.</li>
			</ul>
			<h2>Who we'd like to meet:</h2>
			<p>As many students as possible who have books, furniture and electronics to sell, or students looking for books, furniture, apartments, jobs and events to attend!</p>
		</div>
		
		<div class="rightcol">
			<h3>Current Schools</h3>
			<ul class="schoollist">
				<li class="c0000FF"><a href="http://florida.ourcampusbookstore.com">Florida</a></li>
				<li class="c990000"><a href="http://minnesota.ourcampusbookstore.com">Minnesota</a></li>
				<li class="cCC6600"><a href="http://texas.ourcampusbookstore.com">Texas</a></li>
				<li class="c3366CC"><a href="http://ucla.ourcampusbookstore.com">UCLA</a></li>
				<li class="c993333"><a href="http://washingtonstate.ourcampusbookstore.com">Washington State</a></li>
			</ul>
		</div>
		
		<div class="lowernav">
			<ul>
				<li><a href="#">Add 2 Group</a></li>
				<li><a href="#">Forward 2 Friend</a></li>
				<li><a href="#">Add 2 Favorites</a></li>
				<li><a href="#">Block Me</a></li>
				<li><a href="#">Rank Me</a></li>
			</ul>
		</div>
	
	</div>
	
	<div class="footer"></div>

</div>

Two issues I could use some help on, if anyone is willing to assist:

One:
I'm once again finding myself at a loss to correct an odd CSS rendering anomoly that shows up (of course) only in MSIE6 and it's Mac counterpart (but more severely in IE6/Win).

Basically, I'm using the negative margins method (described here in an article we probably all know on ALA). This combines neg. margins with Dan Cedarholm's Faux Columns to create a nice two-column layout with a footer that always clears regardless of which column is longer. It could be done fluidly, but this site calls for fixed width @ 760px, so it's in a viewport div.

The problem is, I'd like to extend a border {1px solid #eee} between the two columns. I assumed based on my code that I would simply apply a right hand border to the content div, and that (regardless of the non-semantic wrapper div used to keep things kosher with the faux columns) that would draw the necessary line.

This seems to have worked fine (with a swap of margin for padding at the bottom of the content div, to keep the area contiguous to the footer).
But in IE 6, I noticed a gap at the bottom of the page even with 0 margin.

I assumed I was missing somethiing obvious like a whitespace bug for it to work in everything but IE, but alas no -- I can't find the source so I'm hoping one of you pros may do what I can not.

Two:
Secondly, I'm having endless problems with the "Story Options" <UL>. No matter what I try, I cannot get a consistent alignment of bullet-to-list text accross browsers. Every single one is at least one pixel different. Right now is the closest I can get things to working using background images instead of list-style-image, but frankly I'm near giving up and using a character and just scrapping the custom bullet altogether.

Sadly, I may have found a solution earlier but it breaks IE5/Mac which (among other problems) doesn't seem to like background-position definitions, or at least the ones I tried. I sorta need IE5 mac support even though I would otherwise not care, because the office of the content providers for this site is entirely OS9 Mac based. Ick.

If anyone knows a solution to this problem off hand though, I would seriously appreciate it before I jump off the roof

Here's the code:

Click here to see the template.
Click here for CSS.

Thanks in advance. This really should be the final nail the darn coffin for this project's CSS templates. Then I can get back to the warm snuggle of PHP

-- Aiden

Just so I don't feel like a moron in front of the pros: I'm totally aware I should be using an inline list with :hover for the navbar, and I'm also aware how much better my unstyled content would look if I used semantic definitions for headlines and such. The reason for the former is deadline and the fact that the current system works on every browser I've tested with - more than I can say about most of this code. The second is because <Hx> spans have an inherited top/bottom margin that extends beyond style, the only way I have found to override being negative margins. Unfortunately, IE6/Win doesn't read these right and screws the whole thing. Thus, I'm using non-semantic proprietary classes for the headlines/subheads, and perfectly OK with that for this project since it works and let's me keep the ledding nice and tight the way the client wants it.

I have made a CSS dropdown menu which works O.K. on Safari and Firefox but on Explorer, I loose my dropdown menu and all I see is an orange line. Funny thing is, that it works OK on Explorer 8 on vista but not Explorer 8 on XP??? Explorer 5 and 6 is a problem and probably other Explorer versions.

I can't recall whether I read somewhere that I have to put a hack line of code somewhere for it to work on Explorer???

Can someone help please? I need it to work properly on all browsers and platforms. Does my code look alright?

CSS code:
Code:

#menu {
text-align: left;
position:relative;
vertical-align:middle;
display:table-cell;
height: 17px;
}

.submenuHead {
	font-family:Arial, Helvetica, sans-serif;
	color:#A7A9AC;
	font-size:11px;
	font-weight:none;
}

#nav {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER: 0px, none; WIDTH: 121px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none;
}
#nav UL {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 150px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none;
}
#nav LI {
	FLOAT: left; MARGIN-BOTTOM: 0px; WIDTH: 180px; LINE-HEIGHT: 17px; POSITION: relative; border:0px;
}
#nav LI UL {
	MARGIN-TOP: -50px; LEFT: -999em; MARGIN-LEFT: 121px; POSITION: absolute;
}

#nav LI A {
	BORDER-RIGHT: none 0px solid; PADDING-RIGHT: 0px; BORDER-TOP: none 0px solid; DISPLAY: block; PADDING-LEFT: 0px  ; FONT-WEIGHT: none; PADDING-BOTTOM: 0px; BORDER-LEFT: none 0px solid; WIDTH: 121px; COLOR: none; PADDING-TOP: 0px; BORDER-BOTTOM: none 0px solid; BACKGROUND-COLOR: none; TEXT-DECORATION: none;
}
#nav LI2 A {
	BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 0; BORDER-TOP: #ccc 1px solid; DISPLAY: block; PADDING-LEFT: 5px; FONT-WEIGHT: none; PADDING-BOTTOM: 0px; BORDER-LEFT: #ccc 1px solid; WIDTH: 150px; COLOR: #000; PADDING-TOP: 0px; BORDER-BOTTOM: #ccc 1px solid; BACKGROUND-COLOR: #F2F2F2; TEXT-DECORATION: none;
}
#nav LI A:hover {
	COLOR: #fff; BACKGROUND-COLOR: #FBB568;
}
#nav LI:hover UL {
	LEFT: auto;
}
#nav LI LI:hover UL {
	LEFT: auto;
}
#nav LI.sfhover UL {
	LEFT: auto;
}

This goes to the HTML:
Code:

<div id="menu">
                <UL id=nav>
                  <LI><a href="" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menuBtn','','images/menu1.jpg',1)"><img src="images/menu2.jpg" name="menu" width="121" height="17" border="0" rel="balloon1"></a></span>
                    <UL>
                      <LI2><a href="http://www.sample1.com" target="_blank" class="submenuHead">Sample1</a></LI2>
                      <LI2><a href="http://www.sample2.com" target="_blank" class="submenuHead">Sample2</a></LI2>
                      <LI2><a href="http://www.sample3.com" target="_blank" class="submenuHead">Sample3</a></LI2>
                    </UL>
                  </LI>
                </UL>
              </div>

I wanted to validate my site and started running the validator. SO i got one doctype and placed in my page(<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">)

But now, some of my css "tags" are not working. For and example:

Code:

#contact {

border:1px solid #666;
background:#FDF5E6;
width:500px;
margin-left:200px;
margin-top:20px;
padding:20px;
padding-top:5px;
font-size:15;
text-align:left;
}

The border, padding, width, background work. But font-size isnt working.

Any ideas?

Hey guys, I'm working with firefox and just checking things out in IE to make sure nothing to major pops out.

One such thing did come out and I discovered that when I highlight the text of a link the :hover background appears, it normaly doesn't otherwise...although it doesn't follow all my rules here is some code.

Code:

/*splash.css*/
#splash p a:hover{
	background-image:url('/image/splash_hover.png');
	background-repeat:no-repeat;
	color:#000;
}
/*index.html head*/
<!--[if ie 6]>
<style>
* html #inner_wrap {
	top:35%;
}
#splash a:hover{
	background-image:url('/image/splash_hover.png');
	background-repeat:no-repeat;
	color:#000;
	position:relative;
	top:2em;/*otherwise the same, I gota push the link down farther for IE, 6 anyway*/
}
#jbc_vc{
display:none;/*because it pushes the enter link off the page*/
}
</style>
<![endif]-->

The background image is repeated even thought it's not in firefox, and I have to highlight the text for the background image to even apear. Does anyone know what error is being triggered here?

Hi,

Here's my demo site: http://www.alpha-dreams.com/demo5/

Why is IE 7 off? I've looked everywhere. Do I need a stylesheet for IE 7?

Thanks