...

View Full Version : Please Assist a CSS Rookie



chriswhiteley
01-10-2008, 01:49 AM
I normally do all my work with tables and HTML. I have decided that it is time to step out of my comfort zone and begin learning CSS.

I have finished the basic template for the site I am making and it looks as it should in FF, but is having some issues in IE7. I was hoping that someone may take a few moments to have a look at my code to see what I have done incorrectly.

The differences between FF and IE are that Nav menu is slightly angled and gets gradually lower (like stairs) and also I have have a blockquote that uses large quotation marks before and after the blockquote that does not even show up in IE. I think that is it, otherwise everything else looks alright.

Here is the link to the page: http://www.whiteleyenterprises.net/white/

Excavator
01-10-2008, 06:33 AM
Hello chriswhiteley,
I didn't look at this long ... try it out and see if it works:
/* Navigation */
#nav {
padding: 0 0 2px 0;

}
#nav ul {
margin: 0 auto;
width: 730px; /*might need to play with this a bit*/
overflow: auto;
}
#nav li {
list-style:none;
margin: 0 2px;
}
#nav li a {
background: url(images/navbg.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 140px;
display: block;
border: 2px solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}

#nav li a:hover
{
background: url(images/navhover.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 140px;
display: block;
border: 2px solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}

chriswhiteley
01-10-2008, 06:50 PM
Excavator,

Thanks for the help, but it didn't seem to work.

I will keep plugging away at it.

Excavator
01-10-2008, 07:20 PM
Good morning chriswhiteley,
Sorry for not looking at that closer, I shouldn't have missed this...

Your styling the link well enough but leaving the li open to interpretation by the browser. If you specify a width for the li then IE won't get so confused.
Try this:
/* Navigation */
#nav {
padding: 0 0 2px 0;
}
#nav ul {
margin: 0 auto;
width: 730px;
overflow: auto;
}
#nav li {
width: 140px;
float: left; list-style:none;
margin: 0 2px;
}
#nav li a {
background: url(http://www.whiteleyenterprises.net/white/images/navbg.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
width: 140px;
display: block;
border: 2px solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}
#nav li a:hover {
background: url(http://www.whiteleyenterprises.net/white/images/navhover.gif) #fff bottom left repeat-x;
}
/* Main Container */

I tried it in IE7 and FF, but not IE6.
You can change your image paths back. I just do that so I can work on it here locally.

Also, if you'll notice, when your page first loads and you hover over a button...it takes just a second for the a:hover image to download. If you want to get rid of that little flicker have a look at my CSS rollover examples here:
one (http://nopeople.com/CSS/CSS_rollover/)
two (http://nopeople.com/CSS/2state%20CSS%20navbar/)
three (http://nopeople.com/doodlebug/)

chriswhiteley
01-10-2008, 11:11 PM
Thanks Excavator, looks like you nailed it.

I just had to adjust the


#nav ul {
margin: 0 auto;
width: 730px;
overflow: auto;
}


to



#nav ul {
margin: 0 auto;
width: 750px;
overflow: auto;
}


in order to have everything fit in a single row in IE6.

With the adjustments I made the centering is all thrown off. In IE the <ul> pulls to the left and in Mozzila it pulls to the right. I have been wrestling with it for quite some time and I can only seem to get one or the other centered, not both.

The only way I could get it centered is by using <!--[if IE]> ... <![endif]--> and creating adjustments separate to IE. Of course I am hesitant to do this as I do not know if it complies to proper CSS standards.

If you have any thoughts please feel free to share. You have helped me so much thus far and I appreciate it, I just don't want waste your time with trivial things such as centering.

Also thank you for suggesting the CSS Rollovers. I definitely change my rollovers to the style that you have suggested



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum