4 replies [Last post]
guerrilladigital
Offline
Regular
milwaukee, wi
Last seen: 9 years 44 weeks ago
milwaukee, wi
Timezone: GMT-5
Joined: 2008-01-31
Posts: 39
Points: 4

http://www.guerrilladigital.cc/client_sites/victory/
http://www.guerrilladigital.cc/client_sites/victory/css/layout.css

If you load this page in IE6, everything's cool... until you rollover one of the main navigation links.. then it shifts the content below it down about 60 pixels or so.. looks fine in FF and Safari... I'm so close to finishing this up, but I'm at my witt's end with this site.

If someone could take a look at it, it'd be much obliged.

Here's the HTML:

Victory Lane Car Wash
— Home

Welcome!


Victory Lane Full Service Car Wash and Professional Detailing is located on the main drag into Racine, Wisconsin. Our Wash uses high-pressure water, mild detergents and a touchless conveyor system to clean and remove road dust and grim from your car without scratching the surface of your automobile.


For those who would like to pamper their automobiles, comes see us for all your Custom Detailing needs. Our professional crew will clean your car from top to bottom, inside and out. Call us and schedule an appointment.



  • Download Our Latest Coupons [PDF]

  • Corporate Account Application [PDF]

“We take pride in the quality of our work and it shows – in the reflection
of your CLEAN CAR.”

window wash
Hours:

Monday – Saturday: 8AM–6PM

Sunday: 9AM–4PM

logo
  • Books of 5 (Buy 4, Get 1 FREE!)
    1. Good$43.99 plus tax
    2. Better$59.99 plus tax
    3. The Best$75.99 plus tax
    4. The Best PLUS$95.99 plus tax
  • Quarterly Passes - UNLIMITED
    1. Exterior Wash$80.00 plus tax
    2. Good$125.00 plus tax
    3. Better$170.00 plus tax
    4. The Best$215.00 plus tax
    5. The Best PLUS$245.00 plus tax
  • Full Year Pass - UNLIMITED
    1. Exterior Wash$300.00 plus tax
    2. Good$550.00 plus tax
    3. Better$690.00 plus tax
    4. The Best$830.00 plus tax
    5. The Best PLUS$865.00 plus tax

Here's the CSS:

@charset "UTF-8";
html {
text-align: center;
}
body {
text-align: left;
}
.hide {
display: none;
overflow: hidden;
}
.clear {
clear: both;
}

#headerWrapper {
/*height: 103px;*/
width: 100%;
}
#header,
#navigation,
#container,
#contentWrapper,
#footer {
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#content {
width: 960px;
/*margin-top: 48px;*/
}
#contentWrapper {
clear: both;
}
#navigation {
padding-top: 68px;
}
#navigation li{
float: left;
height: 36px;
width: 160px;
display: block;
}
#navigation a {
float: left;
height: 36px;
width: 152px;
display: block;
padding-left:8px;
}
#header h3 {
line-height: 24px;
width: 640px;
display: block;
}
#mainContent {
float: left;
width: 320px;
}
#secondaryContent {
float: left;
width: 320px;
}
#tertiaryContent {
width: 320px;
float: left;
}
#specials,
#addOnServices,
#optionalDetailing {
width: 320px;
}
#specials ul,
#addOnServices ul,
#optionalDetailing ul {
padding-top: 70px;
margin-left: 30px;
margin-right: 30px;
margin-bottom: 8px;
}
#specials ol,
#addOnServices ol,
#optionalDetailing ol {
margin-top: 8px;
margin-bottom: 8px;
margin-left: 8px;
margin-right: 8px;
}
#specials ol li,
#addOnServices ol li,
#optionalDetailing ol li {
margin-bottom: 8px;
}
#footer {
margin-bottom: 20px;
}
#specials ol .price,
#addOnServices ol .price,
#optionalDetailing ol .price {
float:right;
padding: 1px 3px;
}
#specials ol .package,
#addOnServices ol .package,
#optionalDetailing ol .package {
float:left;
padding: 1px 3px;
}
#specials ol br,
#addOnServices ol br,
#optionalDetailing ol br {
clear:both;
}
#content img {
margin-bottom: 8px;
}
#location #mainContent,
#contact #mainContent,
#feedback #mainContent,
#services #mainContent {
width: 640px!important;
}
#location #secondaryContent,
#contact #secondaryContent,
#feedback #secondaryContent,
#services #secondaryContent {
display:none;
overflow:hidden;
}
#services #mainContent dt {
display: block;
width: 160px;
float: left;
}
#services .serviceTitle {
display: block;
float: left;
width: 160px;
}
#services #mainContent dd {
width: 462px;
display: block;
float: left;
margin-bottom: 16px;
margin-right: 8px;
}
#services #mainContent dl {
width: 640px;
display: block;
float: left;
}
#services #mainContent h4 {
clear: both;
}
#services .servicePrice {
display: block;
float: right;
width: 144px;
height: 72px;
margin-top: 16px;
margin-right: 16px;
}
#services #mainContent dd ul {
margin-right: 8px;
margin-left: 8px;
margin-top: 32px;
margin-bottom: 8px;
}
#services #mainContent ol {
width: 160px;
display: block;
float: left;
clear: right;
}
#services #mainContent ol li {
float: left;
}
#home #mainContent a:link, #home #mainContent a:visited {
width: 160px;
display: block;
text-align: center;
margin-top: 16px;
margin-bottom: 16px;
padding-top: .5em;
padding-bottom: .5em;
}
#services #mainContent dt img {
float: left;
clear: right;
}
#tertiaryContent img {
padding-bottom: 8px;
}

d41
d41's picture
Offline
Enthusiast
Last seen: 10 years 2 weeks ago
Timezone: GMT-7
Joined: 2007-07-07
Posts: 98
Points: 0

I had a bug like this once

I had a bug like this once before where when a tab was hovered, everything would shift over a few pixels, forcing things to go to the next line. I found the problem to be the IE6 3px text jog bug. I don't know if this is the problem with your site, though. You can try the fix and see if it fixes the problem.

guerrilladigital
Offline
Regular
milwaukee, wi
Last seen: 9 years 44 weeks ago
milwaukee, wi
Timezone: GMT-5
Joined: 2008-01-31
Posts: 39
Points: 4

thanks.. but I still don't get it.

I checked out the link. Seems interesting.. everything i've been reading starts talking about this Holly Hack nonsense... the thing is.. I think i have a learning disorder.. I can't learn how to use this particular hack. It's all nonsense to me. I don't know where to put the code... I've spent so much time learning proper CSS coding techniques, that these CSS hacks just don't make any sense to me. Not unless I have a book, or explanation, that is specifically written for me... like all the Friends of Ed books (CSS Mastery, especilally) and Transcending CSS. I've been working on trying to get this site to look proper on IE6 for the past two weeks. Funny thing is, it's looked just fine on Firefox and Safari since day one.

d41
d41's picture
Offline
Enthusiast
Last seen: 10 years 2 weeks ago
Timezone: GMT-7
Joined: 2007-07-07
Posts: 98
Points: 0

It's something like this /*

It's something like this

/* fix for IE<=6's 3-pixel gap bug */
* html .content {
height: 1%; /* triggers hasLayout */
position: relative;
left: -3px; /* move the element left to close the gap */
margin-right: -3px; /* add a negative right margin to fill the 3 pixel space left by moving everything left */
}

Replace .content with the div that is messed up.

guerrilladigital
Offline
Regular
milwaukee, wi
Last seen: 9 years 44 weeks ago
milwaukee, wi
Timezone: GMT-5
Joined: 2008-01-31
Posts: 39
Points: 4

thanks.. but I still don't get it.

that totallly worked. the offending container was #navigation li.

SWEET!