Faux Background not working in IE and FF

[shahidr100]

Hi all,

I am a newbie and somehow i have managed to create a webpage which I have posted at the following link:

http://tutorials4u.uuuq.com/index-1.htm

The CSS & Other files:
http://tutorials4u.uuuq.com/styles.css
http://tutorials4u.uuuq.com/menu.css
http://tutorials4u.uuuq.com/csshover.htc

The problem is that the background image is not displaying fully. Its a faux column. I have gone through couple of website for CSS basics....however, i was not able to rectify it.

Please help.

Thanks in advance.
Shahid

[coothead]

Hi there shahidr100,

and a warm welcome to these forums. ;)

Change this...


#faux
{
background-image: url(images/faux.jpg);
background-repeat: repeat-x;
width: 780px;
margin: 0 Auto;
position: relative;
}

...to this...

[
#faux {
background-image:url(images/faux.jpg);
width:780px;
margin:0 auto;
}
#faux:after {
content:'';
display:block;
clear:both;
}

Also note that all the position:relative attributes that you have in your stylesheet are totally unnecessary.

coothead

[mdisch]

As you may not know, CSS content property isn't supported by IE. Thus, I advise that shall not be used.

[shahidr100]

Hello all,

Thank you for all your help. The menu is coming perfectly and the padding is also been taken care of. However, on drop down, unnecessary side arrow is coming in all the items, whereas it should come only where it is required to come.

The links to the main page and css files are given below for your information.

http://tutorials4u.uuuq.com/ind.html
http://tutorials4u.uuuq.com/css/menu.css
http://tutorials4u.uuuq.com/css/style.css

I have attached the files as well.

Thank you in advance.

[bluewalrus]

Give this a try...


#menu ul li a/* attaches side-arrow to all parents */
{
background-image: url(../images/nav_blue.gif);
background-position: right center;
background-repeat: no-repeat;
}

#menu ul li a.none/* attaches side-arrow to all parents */
{
back

And then anywhere you don't want an arrow give it a class none like...


<li><h2>Networking</h2>
<ul>
<li><a href="#">RED</a>

<ul>
<li><a class="none" href="#">RED-1</a></li> <!--This will have no arrow-->
<li><a href="#">RED-2</a></li>
<li><a href="#">RED-3</a></li>
</ul>
</li>