IE spacing problem and a link not showing

[freddukes]

Okay... Goole Chrome and FireFox show my site perfect, however, IE refuses to display it perfectly...

The site I'm looking at is here and the part I'm looking at is the navigation bar and just under. In FireFox and Google chrome, there is a gap underneath each 'inactive' tab (the grey ones) and the orange tabs (or the active tabs) fade smoothly into the bar underneath. I believe most of the site has been pushed down by about 5px and I don't know the cause.

The second problem is in the top right there is a basket icon. Although there isn't yet a link location, there is a hover javascript code, and it works good in Google Chrome and FireFox, but the link doesn't display in IE and I need to get it working for when I do actually make that link accessable.

Here is a picture of it working and how it should work (in Google Chrome)
Here is a picture of it NOT working and how it SHOULDNT work :P (In Internet Explorer 7, although 6 doesn't work either... I've not tried 8 beta)

Thank you in advance

-freddukes

[David Laakso]

Ditch the "rivers" unless your client's marketing department is on a specific mission to make the primary selling content of the page really difficult to read.

html
<div id="col1">
 <!--<div align="justify"--><div class="pictureHeader" id="special" name="special">
<div class="pictureHeader" name="popular"><!-- align="justify">-->
 

Re-set as follows to prevent the center section of the rounded corner box from breaking right in IE/6; and, prevent that section from looking bloated ("pregnant") in all browsers.

.rounded .inside 
{
padding-left: 10px;<------------:: delete
padding-right:10px;<------------:: delete    
}
.rounded .inside p { <------------:: add this new ruleset to your css file
padding-left: 10px;
padding-right:10px;
text-align: left;
}
 

The hasLayout[1] trigger for for the top nav in IE/7 (to make the space beneath it) is min-height.

#topnav
{
min-height: 30px;<--------- :: add
}
 
* html #topnav <---- :: add hack for IE/6 (does not support min-height
{
height: 30px;
}
 

The IE/6 and IE/7 hasLayout [1] triggers to open/close the gap between the h-nav and the content division are width and opening, and enclosing the contained floats.

#content 
{
overflow: hidden; <---:: add
float: left; <---:: add
padding-top: 20px; <---:: leave
margin-top:20px; <---:: delete
width: 100%;  <---:: add                            
}
 

There may be more. I forget..., but the above should help get you on the way
[1] on having layout

FWIW: Not freezing the fonts in your client's users most popular browser is always a nice touch. And all versions of IE and all versions of Opera trip on line-height set in pixels. Use a raw number-- no unit of measure, as in: 1.3.

[freddukes]

thank you so much for the reply, I appreciate it so much! I have done everything you hav advised, and the only thing it has done has pushed the #contact ID to "snuggle up" with the Nav... Any more ideas?

Thank you in advance

-freddukes

[David Laakso]

Compare your declaration for #content with mine.
You have both min-height and height on #topnav. Delete the height rule. Leave the min-height rule.
Put the IE/6 hack at the bottom of the style sheet.
Validate the CSS.
Validate the HTML.
I'll get back to you on the rest...

[David Laakso]

Save your style sheet.

Replace your style sheet in its entirety with mine. Too many changes were made to even think of trying to do it piecemeal. See if my style sheet yields what you are after. You will need to change both the names of the images and the paths to them to yours in the style sheet, as the image names and paths to them I used are different than yours.

* {
padding : 0;
margin : 0;
}
body {
font : 100%/1.35 "Trebuchet MS", Arial, Helvetica, sans-serif;
color : #000;
background : #ddd;
}
.clear {
clear : both;
}
#col1 h1 {
font-size : 140%;
line-height : 1;
margin : 0;
}
#col1 p {
font-size : 100%;
margin : 10px 0;
}
#col2 h1 {
color : #feffef !important ;
font-size : 125%;
margin : 0;
}
h2, h3, h4 {
color : #fff !important ;
font-size : 100%;
display : block;
margin : 0 0 0 40px;
text-align : left;
}
ul {
list-style : none;
}
a {
color : #fff;
text-decoration : none;
}
a:visited {
color : #fff;
text-decoration : none;
}
a:active {
color : #ff8800;
text-decoration : none;
}
a:hover {
text-decoration : none;
}
#content {
overflow : hidden;
float : left;
padding-top : 8px;
width : 100%;
}
#main {
background : #ddd;
padding : 10px;
width : 750px;
margin : 30px auto 30px auto;
}
#headerHome {
display : block;
height : 100px;
margin : 0;
margin-top : -40px;
background : url(header00.htm) no-repeat center top;
text-align : center;
}
#basket {
height : 50px;
text-align : right;
color : #000;
}
.sitename {
display : block;
font-size : 150%;
color : #fff;
height : 30px;
padding : 0 5px;
margin : 0;
letter-spacing : 12px;
}
.sitename a, .sitename a:visited, .sitename a:active {
color : #fff;
border : none;
text-decoration : none;
}
.sitename a:hover {
color : #eee;
text-decoration : none;
}
.pictureHeader {
padding : 0;
margin : 0;
}
.pictureHeader .picture {
width : 49%;
float : left;
margin : 8px 0 15px 0;
}
.pictureHeader .text {
width : 49%;
float : right;
margin : 8px 0 15px 0;
}
#topnav {
width : 750px;
min-height : 30px;
}
#topnav {
padding-top : 10px;
}
#topnav ul {
margin : 0;
padding : 0;
}
#topnav li {
display : inline;
font-size : 90%;
}
#topnav a {
display : block;
background : url(tab-grad.png) repeat-x top 0%;
height : 30px;
padding : 0 10px 0 10px;
float : left;
margin : 0 10px 0 0;
color : #fff;
text-decoration : none;
}
#topnav a:hover {
background : url(tab-grae.png) repeat-x;
color : #000;
text-decoration : none;
}
#topnav .active a {
background : url(tab-graf.png) repeat-x;
color : #fff;
text-decoration : none;
}
#pageLinkBar {
overflow : hidden;
width : 750px;
height : 30px;
background : url(menubar0.png) repeat-x;
text-decoration : none;
float : left;
}
#pageLinkBar ul {
margin : 0;
padding : 0;
}
#pageLinkBar ul li {
font-size : 95%;
display : inline;
list-style : none;
}
#pageLinkBar li a, #pageLinkBar li a:link, #pageLinkBar li a:visited, #pageLinkBar li a:hover {
height : 28px;
padding : 0 10px;
color : #fff;
text-decoration : none;
}
#pageLinkBar li a:hover {
color : #000;
}
#col1 {
float : left;
width : 367px;
}
#col2 {
float : right;
width : 367px;
}
#col2 #footer {
width : 367px;
padding : 10px 0 10px 0;
margin-bottom : 15px;
margin-left : -10px;
}
#col2 #footer #column1 {
float : left;
width : 180px;
padding : 0;
}
#col2 #footer #column2 {
float : right;
width : 180px;
padding : 0;
}
input, textarea {
display : block;
background : #f4f4f4;
border : 1px solid #ddd;
padding : 5px;
}
input:hover, textarea:hover {
background : #fff;
border : 1px solid #bbb;
}
input:focus, textarea:focus {
background : #fff;
border : 1px solid #333;
}
img.alignleft, img.alignright {
padding : 3px;
background : #efefef;
border : 1px solid #333;
margin : 5px;
}
#bottom {
text-align : center;
padding-top : 10px;
clear : both;
border-top : 1px solid #333;
margin-top : 15px;
}
#bottomNav {
width : 750px;
overflow : hidden;
color : #000;
margin-bottom : 10px;
}
#bottomNav a, #bottomNav a:visited, #bottomNav a:hover, #bottomNav a:active {
text-decoration : none;
color : #000;
padding : 0 10px;
}
#bottomNav a:hover {
color : red;
}
#bottomNav li {
display : inline;
}
#contact {
margin-top : 30px;
margin-bottom : 30px;
}
#contact .firstTwoWrap {
width : 385px;
float : left;
}
#contact .contactCol1 {
width : 365px;
float : left;
text-align : center;
}
#contact .centerBar {
width : 20px;
text-align : center;
background : url(bar-grad.png) repeat-y center 0%;
margin-left : 365px;
}
#contact .contactCol2 {
width : 365px;
text-align : center;
margin-left : 385px;
}
#contact #shops {
width : 750px;
padding-top : 10px;
padding-bottom : 10px;
}
#contact #shops .shopDetails {
width : 700px;
margin-left : 50px;
}
#contact #shops .shopDetails p {
font : bold 12px Arial, Helvetica, sans-serif;
color : #000;
}
.rounded .top-left, .rounded .top-right, .rounded .bottom-left, .rounded .bottom-right {
background-image : url("corners0.png");
height : 30px;
font-size : 2px;
margin-top : 0;
margin-bottom : 0;
}
.rounded .top-left, .rounded .bottom-left {
margin-right : 90px;
}
.rounded .top-right, .rounded .bottom-right {
margin-left : 30px;
margin-top : -30px;
}
.rounded .top-right {
background-position : 100% 0;
}
.rounded .bottom-left {
background-position : 0 -30px;
margin-top : -20px;
}
.rounded .bottom-right {
background-position : 100% -30px;
}
.rounded .inside {
background : #ff8800;
color : #000000;
}
.rounded .inside p {
color : #feffef !important ;
font-size : 95%;
margin : 0 35px 0 40px;
text-align : left;
}
#basketToolTip {
width : auto;
}
#content #contact #shopToolTipDerby, #content #contact #shopToolTipLeeds, #content #contact #shopToolTipSheffield, #content #contact #shopToolTipNottingham {
background-color : #ffffff;
border : 10px;
width : auto;
padding : 5px;
}
.tip {
font-size : 85%;
border : 1px solid #666666;
width : auto;
padding : 1px 5px 1px 5px;
position : absolute;
z-index : 100;
visibility : hidden;
color : #000000;
top : 0;
left : 0;
background-color : #ff8800;
}
* html #topnav {
height : 30px;
}
 
 

[freddukes]

OMG!!! You are such a ledgend ^_^ I can't believe you re-wrote my entire CSS!!! It now works perfect (and looks cool with the text changes, I've gotta learn how to do that...) The only gripe I have left is the fact the "link" in the top right (the basket text) isn't a link in IE... Any ideas? I'm thankful for everything you have done so far! Hats off to you man!

-freddukes

[David Laakso]

the "link" in the top right (the basket text) isn't a link in IE... Any ideas?
-freddukes

I did not look at the link you mention, nor will I look at it, until you try and resolve the problem yourself. If other links within that page do work, in whatever one or more versions of IE you are talking about, what is it about them that is different than the one that does not work? In all likelihood, you may already have the answer in front of you. Or do you?

PS
The above does not mean you need live in fear of asking a question if you are truly stuck in resolving it yourself. If that be the case, do indeed write back-- if not myself, I can assure you that someone on this forum will be more than willing to give an assist...