12 replies [Last post]
mille142
Offline
newbie
cis444.cs.csusm.edu/mille142/ssw
Last seen: 14 years 13 weeks ago
cis444.cs.csusm.edu/mille142/ssw
Joined: 2008-11-02
Posts: 8
Points: 0

I cannot get the header to space correctly its driving me nuts.. Please help. i've tried to position:absolute and relative.. it throws the whole page off.. i just need to space the header and menu up about 20 pixels no clue why it spaces it down in IE6 but displays correctly in IE7. PLEASE HELP

Link to Page: cis444.cs.csusm.edu/mille142/ssw/index.html
Link to css: cis444.cs.csusm.edu/mille142/ssw/style.css

CSS CODE

body,html {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	height: 100%;
	width: 100%;
	background-color: #ffffff;
	background-image: url(images/bg_main.gif);
	background-repeat: repeat-x;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
}
 
#page {
	width: 750px;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
}
 
#page-header {
	width: 670px;
	height: 85px;
	padding: 20px 40px 0px 40px;
	background-image: url(images/bg_header.gif);
	line-height: 85px;
	font-size:28px;
}
 
 
#page-name {
	float: left;
	margin-top:5px;
}
 
 
#page-slogan {
	float: right;
	font-size: 18px;
	font-weight: normal;
	font-style: normal;
	padding-right: 10px;
}
 
span, #page-name span,#page-slogan span {
	color: #CC0000;
	font-size:22px;
}
 
#page-header2 {
	width: 660px;
	height: 175px;
	padding: 0px 40px 0px 40px;
	background-image: url(images/bg_eyecatcher.gif); 
 
}
 
#page-navigation {
	width: 670px;
	background-color: #000000;
	height: 22px;
	border-bottom: 1px solid #ffffff;
	padding-left: 0px; /* FireFox */
}
 
ul#navigation {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
 
#navigation li {
	display: inline;
	list-style: none;
	height: 22px;
}
 
#navigation li a {
	color: #ffffff;
	line-height: 22px;
	font-size: 11px;
	text-decoration: none;
	padding: 5px 15px 6px 15px;
	border-right: 1px solid #ffffff;
}
 
 
#navigation li a:hover {
	text-decoration:  none;
	background-color: red;
 
}
 
#navigation2 li a:hover {
	text-decoration:  none;
	background-color: green;
 
}
 
#page-content {
	width:670px;
	background-image: url(images/bg_content.gif);
	background-repeat: no-repeat;
	padding: 20px 40px 0px 40px;
	margin: 0 0 0 0;
	height: auto;
}
 
#page-content2 {
	width:670px;
	background-image: url(images/bg_content.gif);
	background-repeat: no-repeat;
	padding: 20px 40px 0px 40px;
	margin: 0 0 0 0;
	height: auto;
	text-align: center;
}
 
#content {
	width: 430px;
	float: left;
}
 
#content2 {
 
	padding: 5px;
	background-image: url(images/sswmap.jpg);
	background-repeat: no-repeat;
 
	padding-left: 390px;	
}
 
#border {
	width: 190px;
	margin-left: 480px;
	background-image: url(images/fade2.jpg);
	padding:0;
	text-indent:15px;
}
 
#images{
	width: 60px;
	margin-left: 450px;
	}
#page-footer {
	border-top: 4px solid #E5E5E5;
	width: 670px;
	padding: 10px 0px 20px 0px;
	margin: 0 40px 0px 40px;
	clear: both;
	color: #aeaeae;
}
 
#page-footer a {
	font-weight:normal;
	padding: 2px 2px 2px 2px;
	color: #aeaeae;
}
 
#page-footer a:hover {
	color: #006AC3;
}
 
#footer {
	font-size: 11px;
	color: #aeaeae;
	width: 670px;
	margin-bottom: 20px;
}
 
#footer-copyright {
	float: left;
	width: 425px;
	padding-left: 10px;
}
 
#footer-meta {
	float: right;
	text-align: right;
	width: 325px;
	padding-right: 10px;
}
 
.clearer {
	clear: both;
}
 
h1 {
	font-size: 22px;
	color: black;
	margin: 0 0 0 0;
	padding: 0px 0 20px 25px;
	background-image: url(images/h1_arrow.gif);
	background-repeat: no-repeat;
	background-position: 5px 7px;
	line-height: 24px;
}
 
h4 {
	font-size: 14px;
	color: #CC0000;
	text-transform: uppercase;
	letter-spacing: -0.5px;
	}
h6 {
	font-size: 22px;
	color: #C2C7BE;
	margin: 0 0 0 0;
	padding: 0px 0 20px 50px;
	line-height: 24px
 
 
	}
 
hr {
	border: none 0;
	border-top: 1px solid #cccccc;
	height: 1px;
}
 
#content hr {
	border: none;
	border-top: 1px solid #cccccc;
	margin: 0px 0 0px 25px;
	height: 1px;
}
 
#content p {
	line-height: 19px;
	color: #666666;
	margin: 0 0 20px 25px;
}
 
#content p a, #border p a {
	text-decoration: none;
	color: #006AC3;
	border-bottom: 1px dotted #006AC3;
	padding: 2px 2px 2px 2px;
}
 
#content p a:hover, #border p a:hover  {
	text-decoration: none;
	color: #FFFFFF;
	background-color: #006AC3;
	padding: 2px 2px 2px 2px;
}
 
#content li {
	line-height: 20px;
	color: #666666;
	margin: 0 0 0 15px;
}
 
#content .quote {
	border-top: 1px solid #E5E5E5;
	background-color: #f7f7f7;
	border-bottom: 1px solid #E5E5E5;
	padding: 15px 15px 15px 65px;
	background-image: url(images/bg_quote.gif);
	background-repeat: no-repeat;
	background-position: 10px 10px;
	color: #CC0000;
	font-style: normal;
}
 
#border p {
	line-height: 17px;
	font-size: 11px;
	color: #666666;	
}
 
ul#subnavigation {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 15px 0px;
	background-image: none;
}
 
#subnavigation li {
	list-style: none;
	padding: 0px 0px 2px 10px;
	margin: 0px 0px 5px 0px;
}
 
#subnavigation li a {
	text-decoration: none;
	color: #006AC3;
	border-bottom: 1px dotted #006AC3;
}
 
#subnavigation li a:hover {
	text-decoration: none;
	border-bottom: 1px solid #006AC3;
}
 
ul#subnavigation2 {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 15px 0px;
	background-image: none;
	color:black;
}
 
#subnavigation2 li {
	list-style: none;
	padding: 0px 0px 2px 10px;
	margin: 0px 0px 5px 0px;
}
 
#subnavigation2 li a {
 
	font-style:normal;
	color: black;
	border-bottom: 1px dotted #006AC3;
}
 
 
#subnavigation2 li a:hover {
	text-decoration: none;
	border-bottom: 2px solid #CC0000;
}
 
ul#subnavigation3 {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 15px 0px;
	background-image: none;
	color:black;
	display:block;
 
}
 
#subnavigation3 li {
	list-style: none;
	padding: 0px 0px 2px 10px;
	margin: 0px 0px 5px 0px;
	display:block;
}
 
#subnavigation3 li a {
 
	font-style:normal;
	color: black;
	border-bottom: 1px dotted #006AC3;
}
 
 
#subnavigation3 li a:hover {
	text-decoration: none;
	border-bottom: 2px solid #CC0000;
 
}
 
#experiance li {
	list-style: none;
	background-image: url(images/li_cube.gif);
	background-repeat: no-repeat;
	background-position: 2px 6px;
	padding: 1px 0px 2px 15px;
	margin: 0 0 0px 0px;
}
 
 
#content img1 {
	background-color: #E7F1FF;
	padding: 4px;
	border: 1px solid #006AC3;
}
 
img.alignleft {
	float: left;
	margin: 0 15px 5px 0px;
}
 
img.alignright {
	float: right;
	margin: 0 0 5px 15px;
}
 
img.alignabove {
	margin: 0 0 10px 0;
}
 
#menu {
 
	height:20px; 
	position:relative; 
	z-index:100;
	font-family:arial, sans-serif;}
 
* html .menu {width:670px; width:670px;}
.menu ul {padding: 0px 0px 0px 0px; margin:0px; list-style-type:none; float:left;}
.menu ul ul {width:109px;}
.menu li {float:left;width:109px;position:relative;}
 
.menu a, .menu a:visited {
			display:block;
			font-size:11px;
			text-decoration: none; 
			color:#fff; 
			width:100px; 
			height:20px; 
			border:1px solid #fff; 
			border-width:1px 0 1px 1px; 
			background:#000; 
			padding-left:24px; line-height:20px; font-weight:bold;}
 
 
* html .menu a, * html .menu a:visited {width:149px; width:138px;}
* html .menu ul ul {top:30px;top:31px;}
* html .menu ul ul a, * html .menu ul ul a:visited {width:150px;width:128px;}
 
/*Drop Class */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#d4d8bd 130px center;}
.menu ul ul a.drop:hover{background:#c9ba65;}
.menu ul ul :hover > a.drop {background:red  130px center;}
 
/* Hiding the sub-levels*/
.menu ul ul {visibility:hidden;position:absolute;height:0;top:20px;left:0; width:149px;border-top:1px solid #000;}
 
/*Style Table for IE */
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;}
 
.menu a:hover, .menu ul ul a:hover{color:#000; background:red;}
.menu   .menu ul ul :hover > a {color:#000; background:red;}
 
/* Postition 2nd DD Links */
.menu ul ul a, .menu ul ul a:visited {color:#000; height:auto; line-height:1em; padding:5px 10px; width:128px;border-width:0 1px 1px 1px;}
/* Position 3rd DD Menu */
.menu ul ul ul{left:149px; top:-1px; width:149px;}
.menu ul ul ul li a.drop2{left:149px; top:-1px; width:100px; padding:5px 5px 5px 5px; background:white;}
.menu ul ul ul li a:hover{color:#000; background:red;}
/* Make Visible When Hovering */
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible; }
.menu ul :hover ul ul{visibility:hidden;}
.menu ul :hover ul :hover ul{ visibility:visible;}
 
#menu2 {
	width: 270px;
	background-color: #FFFFFF;
	padding-left: 0px; /* FireFox */
	height: 20px;
}
 
ul#menu2 {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	padding-left: 0px; /* FireFox */
}
 
#menu2 li {
	display: inline;
	list-style: none;
	height: 20px;
	padding-left: 0px; /* FireFox */
}
 
#menu2 li a {
	color: #ffffff;
	line-height: 20px;
	font-size: 13px;
	text-decoration: none;
	padding: 5px 15px 6px 15px;
	color: red;
	padding-left: 0px; /* FireFox */
 
}
 
 
#menu2 li a:hover {
 
	text-decoration:  none;
	color: black;
 
}
 
#products a {
	color: #ffffff;
	line-height: 22px;
	font-size: 11px;
	text-decoration: none;
	padding: 5px 15px 6px 15px;
	border-right: 1px solid #ffffff;
}
 
#products ul { 
list-style:none; /* No bullets */ 
overflow:hidden; /* Clear the floats */ 
} 
#products li { 
display:inline;
float:left; /* Horiz list */ 
width:130px; /* Room for thm and text */ 
padding:15px; /* Gap between */ 
} 
#products li div { 
text-align:center;
} 
#products li img { 
display:block; 
margin:0 auto; 
width:100px; 
height:100px; 
border:0;
}
 
.right {
	font-size: 1.0em;
	padding-right: 100px;
	text-align: right;
}
 
#info {
	border: 1px solid #C2C7BE;
	margin-left: 80px;
	margin-right: 80px;
	margin-top: 20px;
	padding: 0px 15px 0px 15px;
	position: relative;
}
 
#info a, #info a:visited {
	color: #8A9483;
	text-decoration: none;
}
 
#info a:hover {
	color: #9BA495;
	text-decoration: underline;
}
 
#pic {
	background-color: #FFFFFF;
	left: 10px;
	position: relative;
	top: 10px;
	width: 135px;
	float: left;
	margin: 0 15px 5px 0px;
}
 
#pic a .large {
	border: 0px;
	display: block;
	height: 1px;
	left: -1px;
	position: absolute;
	top: -1px;
	width: 1px;
}
 
#pic a img {
	border: 0;
}
 
#pic a.p1, #pic a.p1:visited {
	background: #FFFFFF;
	border: 1px solid #000000;
	display: block;
	height: 90px;
	left: 0;
	text-decoration: none;
	top: 0;
	width: 135px;
}
 
#pic a.p1:hover {
	background-color: #8C97A3;
	color: #000000;
	text-decoration: none;
}
 
#pic a.p1:hover .large {
	border: 1px solid #000000;
	display: block;
	height: 233px;
	left: 150px;
	position: absolute;
	top: -60px;
	width: 300px;
}
 
#top {
	margin-left: 180px;
}

HTML CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>SSW Mechanical Construction Inc.</title>
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
	<link href="style.css" rel="stylesheet" type="text/css" />
	</head>	
 
   <body>
 
        <div id="page">
            <div id="page-header">
                <div id="page-name"><img src="images/logo.jpg "alt=""/></div>
 
			<div id="page-slogan"><span>&quot;</span>Done Right The First Time!<span>&quot;</span></div>
 
		</div>
 
 
	<div id="page-header2">
 
		<div class="menu">
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="about.html">About Us</a>
					<ul>
						<li><a class="drop" href="mission.html">Mission Statement</a></li>
						<li><a class="drop"href="profile.html">Company Profile</a></li>
						<li><a class="drop"href="work.html">What We Do</a></li>
					</ul>
				</li>
 
				<li><a href="plumbing.html">Plumbing</a>
					<ul>
						<li><a class="drop" href="contractors.html">Contractors</a></li>
						<li><a class="drop" href="plumbingprojects.html">Projects</a>
					<ul>
						<li><a class="drop" href="churches.html">Churches</a></li>
						<li><a class="drop" href="customs.html">Custom Homes</a></li>
						<li><a class="drop" href="military.html">Military Housing</a></li>
						<li><a class="drop" href="schools.html">Learning Institutions</a></li>
					</ul>
					</li>
 
					<li><a class="drop">Links</a>
						<ul>
							<li><a class="drop2" href="http://www.americanstandard.com"><img src="images/american.jpg"></a></li>
							<li><a class="drop2" href="http://www.brasstech.com"><img src="images/brasstech.jpg"></a></li>
							<li><a class="drop2" href="http://www.deltafaucet.com"><img src="images/delta.jpg"></a></li>
							<li><a class="drop2" href="http://www.elkay.com"><img src="images/elkay.jpg"></a></li>
							<li><a class="drop2" href="http://www.ferguson.com"><img src="images/ferguson.jpg"></a></li>
							<li><a class="drop2" href="http://www.grohe.com"><img src="images/grohe.jpg"></a></li>
							<li><a class="drop2" href="http://www.hdsupply.com"><img src="images/hdsupply.jpg"></a></li>
							<li><a class="drop2" href="http://www.hilti.com"><img src="images/hilti.jpg"></a></li>
							<li><a class="drop2" href="http://www.kohler.com"><img src="images/kohler.jpg"></a></li>
							<li><a class="drop2" href="http://www.moen.com"><img src="images/moen.jpg"></a></li>
							<li><a class="drop2" href="http://www.oatey.com"><img src="images/oatey.jpg"></a></li>
							<li><a class="drop2" href="http://www.pricepfister.com"><img src="images/price.jpg"></a></li>
							<li><a class="drop2" href="http://www.victaulic.com"><img src="images/victaulic.jpg"></a></li>
							<li><a class="drop2" href="http://www.viega.net"><img src="images/viega.jpg"></a></li>
 
						</ul>
						</li>
					</ul>
				</li>
					<li><a href="pipelining.html">Pipe Lining</a>
						<ul>
							<li><a class="drop" href="work.html">What we do</a></li>
							<li><a class="drop" href="pipeliningprojects.html">Projects</a></li>
						</ul>
					</li>
					<li><a href="ac.html">A/C Heating</a>
 
							<ul>
								<li><a class="drop" href="acprojects.html">Projects</a></li>
							</ul>
					</li>
					<li><a href="contact.html">Contact</a></li>
 
 
			</ul>
 
	</div>
       <img src="images/header2.jpg" alt="Business picture" />
</div>
 
 
            <div id="page-content">
 
		<div id="content">
 
                	<h1>Welcome to S<span>S</span>W Mechanical</h1>
 
                	<p>
						SSW Mechanical Construction was established in January 1997. The company is associated with Spa Plumbing and due to restructuring of Spa Plumbing; the majority of future contracts will be handled by SSW Mechanical.
 
						<br/><br/>Spa Plumbing has been providing plumbing service, primarily new construction for over thirty years. Our current focus is military housing, commercial, high end residential as well as selected residential and multiple family housing.<br/>
 
					</p>
 
			<h6>Our Dedicated Team </h6>
 
					                	<div id="pic">
					<a class="p1" title="Our Office Staff">
						<img src="images/officestaff.jpg" alt="Our Office Staff" width="231" height="176" title="Our Office Staff" />
						<img  src="images/officestaff.jpg" alt="" width="462" height="362" class="large" title="" /></a>
					</div>
 
			<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
 
 
 
			<p class="quote">Make the workmanship surpass the materials. --Ovid</p>
 
 
		</div> <!-- CONTENT END -->
 
 
		<div id="border">
			<br/><h4>More about us</h4>
			<ul id="subnavigation2">
				<li><a href=" "><strong>Mission Statement</strong></a></li><li><a href="work.html"><strong>What We Do</strong></a></li><li><a href="work.html "><strong>Contractors</strong></a></li></ul>
 
 
 
			<h4>Our Address</h4>
 
			<ul id="subnavigation3">
				<li><strong>SSW Mechanical</strong><br/></li>
				<li><strong>670 Oleander Rd.</strong></li>
				<li><strong>Palm Springs, Ca 92026<br/><br/></strong></li>
				<li><strong>Phone: (760)322-0911</strong></li>
				<li><strong>Fax:   (760)323-0418</strong></li>
				<li><a href="mailto:[email protected]"><strong>Click Here To Email Us</strong></a></li></ul>
		</div>
 
	    </div>
 
            <div id="page-footer">
                 <div id="footer">
				<div id="footer-copyright">&copy; 2008 sswmechanical.com - all rights reserved. <a href="sitemap.html">Sitemap</a><a href="www.sswmechanica.com/stats/">Admin</a>
            </div>
 
        </div> 
		</div>
	</div>
 
   </body>
</html>

soundscape
soundscape's picture
Offline
Enthusiast
Kansas City Metro
Last seen: 1 year 31 weeks ago
Kansas City Metro
Timezone: GMT-7
Joined: 2007-10-18
Posts: 188
Points: 0

The easiest and fastest way

The easiest and fastest way for me to fix an issue like that is to use a conditional comment in the head section after your normal css file, and load a css file specifically for IE6 with a different height.

Google "conditional comments" for more info.

~Soundscape
www.kenlange.com

mille142
Offline
newbie
cis444.cs.csusm.edu/mille142/ssw
Last seen: 14 years 13 weeks ago
cis444.cs.csusm.edu/mille142/ssw
Joined: 2008-11-02
Posts: 8
Points: 0

Okay. Thank You . That works

Okay. Thank You . That works for IE6 But i am having the same problem in OPERA and Firefox as well.. Firefox doesn't have conditional statements..

There has to be something wrong with my code and i cannot find it.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 7 years 21 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

The best way to do this...

#page-header {
width: 670px;
height: 85px;
padding: 20px 40px 0px 40px;
background-image: url(images/bg_header.gif);
line-height: 85px; <<<<<<<<< take out
font-size:28px;
}

line-height is causing your stuff to push down. i took it out and it fixed everything. Your "Welcome.." text was also pushed under the masthead image a bit. This was also corrected.

:rolleyes:

mille142
Offline
newbie
cis444.cs.csusm.edu/mille142/ssw
Last seen: 14 years 13 weeks ago
cis444.cs.csusm.edu/mille142/ssw
Joined: 2008-11-02
Posts: 8
Points: 0

Thank You.. I am also having

Thank You.. I am also having a problem in IE6 where the right column with more about us is thrown down below on the bottom of the page.. and it also shows the menu with wider widths for each of the menu items..

Screenshot: IE6
http://browsershots.org/png/512/26/26fd95f7b09bab6167147a0efa9b26d5.png

Screenshot: IE7 PERFECT
http://browsershots.org/png/512/40/407d220dffc88e51c9662fb164a724f1.png

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 7 years 21 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

I Cant test

I dont have IE6 on this machine, so I cant test. But I noticed something strange in your css:

#border {
width: 190px;
float: both;
margin: 10px 0 0 480px;
background-image: url(images/fade2.jpg);
padding:0;
text-indent:15px;
}

Why do you have float: both; in there?

mille142
Offline
newbie
cis444.cs.csusm.edu/mille142/ssw
Last seen: 14 years 13 weeks ago
cis444.cs.csusm.edu/mille142/ssw
Joined: 2008-11-02
Posts: 8
Points: 0

Just to reset the floats

Just to reset the floats used previously.. It doesn't change anything without it. Do you notice anything else weird in the coding? The border class i'm having troubles with on IE6. and the menu spacing is weird it is in the correct position now thanks to you but the menu items are spaced weird. it breaks the menu into two lines and pushes everything also.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 7 years 21 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Float: verticle;

The first step in trouble-shooting is validation. This will usually solve some issues. Remember, validation should always come before style.

I see you have alot of divs. divs for everything. did you know you dont need divs to contain each element? You also have alot of style mixed in with your XHTML. CSS is here to separate the two. If you're going to use the tage, it must be closed, )like you close your img tags).

Oh, I dont think float: both; is valid CSS.

mille142
Offline
newbie
cis444.cs.csusm.edu/mille142/ssw
Last seen: 14 years 13 weeks ago
cis444.cs.csusm.edu/mille142/ssw
Joined: 2008-11-02
Posts: 8
Points: 0

Everything Validates Except:

Everything Validates Except:

Line Column: 25 Error: Element type "a" must be followed by attribute specifications: ">" or "/>".
Error Position:

Is there a problem with my menu code.. Something with the width?
Thank you for everything.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 7 years 21 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

http://validator.w3.org/

dude, there are about 16 errors. go to W3's validation service http://validator.w3.org/ and check it out.

mille142
Offline
newbie
cis444.cs.csusm.edu/mille142/ssw
Last seen: 14 years 13 weeks ago
cis444.cs.csusm.edu/mille142/ssw
Joined: 2008-11-02
Posts: 8
Points: 0

I didn't space out the alt

I didn't space out the alt tag from " so i fixed it and it now validates. still having the same problem with IE6 and the menu width. Sad

Check out the actual site hosted online for validation: cis444.cs.csusm.edu/mille142/ssw/index.html

qwan
Offline
newbie
Last seen: 14 years 12 weeks ago
Timezone: GMT+5.5
Joined: 2008-10-12
Posts: 1
Points: 0

mille142 wrote:Just to reset

mille142 wrote:

Just to reset the floats used previously.. It doesn't change anything without it. Do you notice anything else weird in the coding? The border class i'm having troubles with on IE6. and the menu spacing is weird it is in the correct position now thanks to you but the menu items are spaced weird. it breaks the menu into two lines and pushes everything also.

To reset floats you use the clear:both.
Better still to clear floats the best way it to add an empty div with class
In you css add this
.clear {
clear: both;
}

Then after every float you want reset add an empty div with this class

This will effectively clear/reset any floats

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 5 years 33 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Quote:I didn't space out the

Quote:

I didn't space out the alt tag from " so i fixed it and it now validates. still having the same problem with IE6 and the menu width. Sad

Check out the actual site hosted online for validation: cis444.cs.csusm.edu/mille142/ssw/index.html

No - it still doesn't validate. 17 errors

Whatever you are using to validate is lying to you - there is only one validator and it's at the "17 errors" address. There is a CSS validator on the Home page too. Or else perhaps you haven't loaded the new version of your code?

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile