[SOLVED] My nav images

[thewebkid]

My web server is down for some reason or another, luckily I have more than one.

http://adrianrodriguez.frihost.net/index.htm

When you go there on Firefox, the navigation is there, but it doesn't show on Internet explorer. How can I fix that?

[dab42pat]

there is no width and height setting on your nav images.

you have width and height settings like this width: 52; try width: 52px;

use px on all your width and height settings.

hope this helps.

[thewebkid]

That didn't work for me...should I set the width and height of the div?

[Stuart]

I looked at your CSS. You didn't set correct widths and heights at all! You're still missing "px" for every one!

[thewebkid]

O sorry, I tried it on my computer before I uploaded it. It didn't work on my computer, so I didn't think it would work on the internet.

[dab42pat]

have you tried it online. the px missing off your width and height settings is stopping your css from validating.

[thewebkid]

Yes I just put it online. And yes it is validated. I still get the problem though.

[Aso]

Your last anchor closing tag is incomplete. You need to fix that.

Then to fix your IE problem you need some text within the anchor. For example

Code: Select all

<li id="nav2"><a href=" ">text here</a></li>

Then add this declaration in your CSS to hide the text:

Code: Select all

#nav a {
text-indent: -5000px;
}

[thewebkid]

That causes a problem in firefox now and still doesnt work on ie

[Aso]

You need

Code: Select all

#nav a {
display: block;
}

[thewebkid]

Now it makes them line up on top of each other, and not in a line.

[dab42pat]

give this a go.

HTML: Select all

#nav li { 
display : inline;
} 
#nav { 
float : right;
margin-right : 40px;


} 
#nav1 a { 
background-image:url(images/nav1.gif);

    width:51px;
    height:37px;
    float: left;
    
    text-align: center;
    display: block;            

} 
#nav1 a:hover { 
background : url(images/nav1-2.gif) no-repeat;
width : 51px;
height : 37px;
display:inline;
} 
#nav1 a:active { 
background-image: url(images/nav1-2.gif) no-repeat;
width : 51px;
height : 37px;
display:inline;
} 
#nav2 a { 
background : url(images/nav2.gif) no-repeat;
width : 52px;
height : 37px;
float: left;
display: block;
} 
#nav2 a:hover { 
background : url(images/nav2-2.gif) no-repeat;
width : 52px;
height : 37px;
display:inline;
} 
#nav3 a { 
background : url(images/nav3.gif) no-repeat;
width : 72px;
height : 37px;
float: left;
display: block;} 


#nav3 a:hover { 
background : url(images/nav3-2.gif) no-repeat;
width : 72px;
height : 37px;
display:inline;
} 
#nav4 a { 
background : url(images/nav4.gif) no-repeat;
padding : 17px 45px 0 10px;
width : 68px;
height : 37px;
float: left;
display: block;} 


#nav4 a:hover { 
background : url(images/nav4-2.gif) no-repeat;
width : 68px;
height : 37px;
display:inline;
} 

I'm sure there are some short cuts you could take but this should work for now.

[thewebkid]

Now it's really messed up....what could it be?

[Stuart]

OK. I fixed your code and tested it. It should work now.

Entire CSS:

Code: Select all

body 
{
    background-color: #303B4A; 
    margin: 0px; 
    padding: 0px; 
    text-align: center; 
    color: #303B4A;
 }
 
    /*LAYOUT STYLES*/
 
#container 
{
    background-image: url(http://adrianrodriguez.frihost.net/images/bg.gif); 
    background-repeat: repeat-y; 
    width: 840px; 
    height: 1000px;
    text-align: center; 
    margin: 0px auto 0px auto;
 }
 
#head 
{
    text-align: center;
}

    /*HEADER*/

#head img 
{
    margin-top: 10px; 
    border: 0;
 }
 
    /*NAVIGATION*/
 
#nav li { 
display : inline;
} 
#nav { 
float : right;
}
#nav ul li a {
padding : 17px 20px 0 10px;
}
#nav ul li a span {
display:none;
}
#nav1 a 
{
    background:url(http://adrianrodriguez.frihost.net/images/nav1.gif) no-repeat;
    width:51px;
    height:37px;
    float: left;
    text-align: center;
    display: block;
} 
#nav1 a:hover { 
background : url(http://adrianrodriguez.frihost.net/images/nav1-2.gif) no-repeat;
width : 51px;
height : 37px;
display:inline;
} 
#nav1 a:active { 
background-image: url(http://adrianrodriguez.frihost.net/images/nav1-2.gif) no-repeat;
width : 51px;
height : 37px;
display:inline;
} 
#nav2 a { 
background : url(http://adrianrodriguez.frihost.net/images/nav2.gif) no-repeat;
width : 52px;
height : 37px;
float: left;
display: block;
} 
#nav2 a:hover { 
background : url(http://adrianrodriguez.frihost.net/images/nav2-2.gif) no-repeat;
width : 52px;
height : 37px;
display:inline;
} 
#nav3 a { 
background : url(http://adrianrodriguez.frihost.net/images/nav3.gif) no-repeat;
width : 72px;
height : 37px;
float: left;
display: block;} 


#nav3 a:hover { 
background : url(http://adrianrodriguez.frihost.net/images/nav3-2.gif) no-repeat;
width : 72px;
height : 37px;
display:inline;
} 
#nav4 a { 
background : url(http://adrianrodriguez.frihost.net/images/nav4.gif) no-repeat;
width : 68px;
height : 37px;
float: left;
display: block;} 


#nav4 a:hover { 
background : url(http://adrianrodriguez.frihost.net/images/nav4-2.gif) no-repeat;
width : 68px;
height : 37px;
display:inline;
}

Entire HTML:

HTML: Select all

<!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" >
<head>
<title>Adrian Rodriguez | Web and Graphic Designer</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="container">
    <div id="head">
    <a href="adrian-rodriguez.net"><img src="images/header.gif" alt="Adrian Rodriguez | Web and Graphic Designer" /></a>
    </div>

    <div id="nav">
    <ul>
    <li id="nav1"><a href="index.htm"><span>Home</span></a></li>
    <li id="nav2"><a href=" "><span>About</span></a></li>
    <li id="nav3"><a href=" "><span>Portfolio</span></a></li>
    <li id="nav4"><a href=" "><span>Contact</span></a></li>
    </ul>

    </div>
</div>

</body>
</html>

The above code, css and html, is all you need!

Hope that helps!

[thewebkid]

It worked great. Finally! Thank for all your help guys. There is a bit of a gap between the nav in firefox, but that's ok....I do want to fix that though...it will probably affect ie as well.

[Stuart]

Which gap do you mean? The one between the links? That's easy to do:

Code: Select all

#nav ul li a {
padding : 17px 20px 0 10px;

Reduce those two numbers a bit, and that should do it.

Cheers

[thewebkid]

Sorry I meant the gap between the header and the nav...

[Stuart]

That, also, is quite easy. Add this:

Code: Select all

#nav { 
float : right;
margin-top:-10px;
}

And that, again, should do it!

[thewebkid]

I tried that, but then it causes the nav to cover some of the header imagein ie

[Stuart]

Odd. It worked for me without covering anything up! Try reducing the margin to -5px.