CSS - Highlighted Text Causes Ie Bugs To Dissapear

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.

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?

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>

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>

Yesterday I was able to get my page to validate with strict XHTML and get it looking exactly how I want it to in Firefox:

http://www . restonheights . com/

However, the design falls apart a bit in IE6. Viewing in it IE6 causes the feedback div to grow causing a left-right scroll bar. Scary things also happen if you reduce the width of your browser. Again, it behaves perfectly in FF.

Can anyone recommend an IE hack that would get that feedback div to behave?

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?

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 noticed that sites I make is out of whack on different browsers.

Like the divs using absolute positions would line up on different positions, pop up windows that open to a certain size, open smaller and scrollbars appear when I asked it not to.

Is there like something a person can add, to make sure that a site you build and tested on one platform and one browser, works and looks properly on all browsers?

What are the common bugs that appear and the common hack or fix for it?

Thanks.

Good Morning All,

Been having a slight problem with the visual in the screenshot below.

The blue line is our H2, and the purple one is our H3, however, as you can see, the underline spans the entire width of the column, not just underneith the text, which is our requirement.

***As i am not allowed to upload a url as a new user, the underline is as follows. With the text centre aligned.

text
-----------------------------------------------------------

rather than

text
------

and obviously by the css, the underline on the headers is a small image, repeated - x.


Please see relevant css information.

* (line 23)

{

margin-top: 0pt;

margin-right: 0pt;

margin-bottom: 0pt;

margin-left: 0pt;

padding-top: 0pt;

padding-right: 0pt;

padding-bottom: 0pt;

padding-left: 0pt;

}

h2, h3, h4, h5, h6 (line 101)

{

font-size: 1.2em;

font-weight: normal;

padding-bottom: 4px;

margin-top: 0.6em;

margin-right: 0pt;

margin-bottom: 0.8em;

margin-left: 0pt;

text-align: center;

}

.contentArea h2, #secondaryNavigation h2 (line 114)

{

background-color: transparent;

background-image: url("../images/h2_gradient_bg.gif");

background-repeat: repeat-x;

background-attachment: scroll;

background-position: left bottom;

color: #0066cc;

}


Many Thanks in advance.

Marc.

I would like to pop up the text, that is, make it bigger when the user hovers on it. but the problem everytime the text gets bigger, the whole row moves and the surrounding texts gets displaced.

any idea ? tutorial? let me know if i need to explain more.

can someone help me with this?
here is the page&css I have been working on...

the page file
the css file

I might be silly to use a template that I did on illustrator (with all the banner, boxes and navbar read and just use that as my container background. then I made some transparent boxes for puting in text, images or form elements. Is that why I am not able to select any other those things on the site?

this is the first time I try using css to make the whole webpage, so I would appreciate any guidance...thanks!!