...

View Full Version : W3C Valid - but navbar display issue



ajhauser
12-16-2007, 10:48 AM
Hello guys, I checked and everything is W3C valid, but for some reason my navbar CSS is not rendering correctly in IE7 (even though it works in FFox and IE6).

Here is what it should look like (FFox Screenshot):
http://i84.photobucket.com/albums/k31/hausaj/ex_ffox.jpg


Here is how it looks in IE7:
*Notice the bottoms don't show up*
http://i84.photobucket.com/albums/k31/hausaj/ex_ie7.jpg

So it's not a major issue but it's driving me nuts and looks bad. I've checked and corrected all my validation errors, but I'm at a loss. Any ideas?

The site is located here (http://www.ivcl.org).

Thanks ,
AJ

effpeetee
12-16-2007, 11:03 AM
Try this at the start of your navigation css.

*{
margin:0;
padding:0;

}


#DivNavbar {
height: 22px;
width: 898px;
background-image: url(../images/layout/nav_bg.gif);
padding-top: 10px;
padding-left: 0px;
}

Frank

Try cssvista, it will let you see IE7 and FFox together and it's free. Get it here.

http://litmusapp.com/labs

technica
12-16-2007, 11:09 AM
If you have used a CSS class for the column, then try to give fixed bottom and top padding.

ajhauser
12-16-2007, 12:17 PM
Hmmm... Ok I added some defined padding and margins to my class "NavBar", which is where the unordered list that makes up my links rests, but no luck.

Maybe I am not understanding what it is you are trying to say?
Thanks so much for the responses though.

Frank did you want me to literally add:

*{
margin:0;
padding:0;

}

in the top of my navigation.css or does that stand for some class or variable?
Or am I now supposed to apply "*" to something?

(I'm really really new to CSS)

AND I have also tried now changing the padding and margins of several elements, but nomatter where these links are on the page, IE7 always chops off the bottom of the boxes right under the text. Meaning, wherever I move these links on the page, they look the same, so I do not think it's the padding/margin in the div they are located (#NavBar).

bazz
12-16-2007, 12:35 PM
yeh put that at the top of the stylesheet



*{
margin:0;
padding:0;

}


ahead of:



body {
}


bazz

ajhauser
12-16-2007, 09:21 PM
Hmmmm... it doesn't seem to have any effect on anything.
I was hoping that this was a common thing in IE that could be easily fixed but I guess not.

Again, thanks for all the responses guys.
Anyone else have any ideas?

Thanks,
AJ

ajhauser
12-16-2007, 09:55 PM
And if I were to add this to the top of my navigation stylesheet:

*{
margin:0;
padding:0;

}

What does the "*" even mean and effect?

bazz
12-16-2007, 10:17 PM
Just realised that you have it working fine in IE6 and that it is only IE7 that is causing you difficulties. You could try straightaway using the conditional statement mentioned below before making any more css. I didn't have time to look through your css coz, with my IE, it opens in notepad and it's all jumbled. (note to self: change default text editor to wordpad).




The '*' means that it is applied to everything. the need arises when IE adds padding or margins by default, whereas other browsers do not.

So without it, you can pull your hair out because you get an effect like the one you have described and can't find what is causing it.

Until others with more specialist knowledge come along, I would suggest trying one of the following things:

1. copy your stylesheet and testing in IE remove all the padding attributes and use the *{} as shown above and get it to look as you want it to. Then, look at the site in Firefox (for example) and see what you have to do to get it OK in FF. You can comment such additional lines like this /*comment between these two pairs of chars*/

Befoe others say it, I know that it makes more sense to code for FF first and then hack for IE but I think it would help the OP (ajhauser), to see at first hand, why it becomes important.

Then when you have seen the reasoning of coding for one and then the other (FF type browsers firstly), you will already have the stylesheet for FF (the current one) and the new one, which should work for IE.

Then you can add conditional statements in your html so that the IE stylesheet is served up only for the specific IE that it is meant for.

hth

bazz

ajhauser
12-17-2007, 09:13 PM
Ok guys, now to make things even easier to figure out, I was working on another page and made a draft with all the CSS in the same document and very simple. Here is the page:

http://www.temp1.hangnailproductions.com/

Now notice in FFox there is a border underneath that shows up, and in IE7 there isn't one. I figure if we get this page working I can apply the fix to the ivcl.org page as well. Why does IE stop the bottom border from showing up?

Thanks all,
AJ

effpeetee
12-17-2007, 09:59 PM
The border is set up here.

You don't say whether you want it or want it removed.


#Navbar a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin-left: 15px;
margin-right: 15px;
color: #ABA892;
text-decoration: none;
font-weight: bold;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #A3120E;

If it's just the line that you want, text-decoration: underline; works.

Everything is so dark and gloomy it is difficult to see the difference in colour.
I can just see the line under the text, but not a box surrounding it.

Frank

ajhauser
12-17-2007, 11:32 PM
Thanks for the reply, I was unclear though. My point is this, in both instances anything under the line of text in IE7 is not showing up for some reason. Here is a visual of the problem:

http://i84.photobucket.com/albums/k31/hausaj/ex2_ff.jpg

http://i84.photobucket.com/albums/k31/hausaj/ex2_ie7.jpg

Now I understand what makes the border, and this is what I would like to work. I don't want to add in a link underline because it will all be one color, I'm going for the 2-color links (light yellow with a red underline). I was saying though if we could figure out what is causing this much more simple page to not work, then I could probably apply that new knowledge to the ivcl.org page links that are goofed up as well, because in both instances whatever falls underneath the text is not showing up - you see what I mean?

IVCL nothing under text in IE7
http://i84.photobucket.com/albums/k31/hausaj/ex_ie7.jpg
http://www.ivcl.org/

Hang Test Page nothing under text in IE7
http://i84.photobucket.com/albums/k31/hausaj/ex2_ie7.jpg
http://www.temp1.hangnailproductions.com/

Does that make a little more sense (I hope)?
Thanks very much,
AJ

ajhauser
12-18-2007, 08:22 AM
Any ideas?

effpeetee
12-18-2007, 10:35 AM
This seems to work. I don't know why!

Frank


#Navbar {
background-image: url(http://i84.photobucket.com/albums/k31/hausaj/hangnail_myspace/bg_navbar.jpg);
height: 40px;
width: 800px;
text-align: center;
padding-top: 14px;
padding-bottom:10px;
}

Have you tried CSSVista? It's free and you can edit CSS while watching the result on FFox and IE.

It's available here.

http://litmusapp.com/labs

ajhauser
12-18-2007, 12:14 PM
AH! Thank you for the post effpeetee, really appreciate it man. I did make some progress tonight but now I have another question. I added in a pixel line height to the links and now they appear to be working in IE7:

HERE IS THE PAGE (http://www.temp1.hangnailproductions.com/)

HERE IS THE CODE FOR THE FIRST SET OF LINKS:

#Navbar a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin-left: 15px;
margin-right: 15px;
color: #FFFFFF;
font-weight: bold;
border: 1px solid #9E0C0C;
padding: 3px;
background-color: #181818;
line-height: 22px;
text-decoration: none;
}

SO now it is working in both browsers, and I am pretty sure this will work for my other site as well. HERE is where it gets interesting though. See the other links on the left side in the "Recent Work" column? I did NOT have to set the line-height for those links and they appear correctly in IE7 no problem, see?

HERE IS THE CODE FOR RECENT WORK LINKS:

#ContentRecent a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #ABA892;
text-decoration: none;
font-weight: bold;
border: 1px solid #818181;
padding-top: 0px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;
background-color: #181818;
}



My guess is because there is something actually "below" the links - or it could have something to do with the font size maybe (10px vs. 12px)?

Any ideas?
Thanks so much, I really want to understand this.
But even if we don't - it's still success!:thumbsup:
-AJ

effpeetee
12-18-2007, 12:36 PM
Any ideas?
Thanks so much, I really want to understand this.
But even if we don't - it's still success!
-AJ

I'm sorry, but I don't have any idea about it except that different browsers have what I call pre-set values for some things. That is why coders put
*{
margin:0;
padding:0;
}


at the start of their css. * is the universal selector and sets these values for every relevant selector.

I am largely what I call a "Suck it and see" coder. If it doesn't work, I mess about with the code until it does. Not very efficient, but at 82 yrs old, I have plenty of time on my hands, and my ability to remember what I read is very limited,so it suits me.
That's why I like CSSVista

Frank

Apostropartheid
12-18-2007, 02:58 PM
Haha, I think we're all like that, Frank. Otherwise how else would we have gotten all the fixes for IE6?

effpeetee
12-18-2007, 03:02 PM
Haha, I think we're all like that, Frank. Otherwise how else would we have gotten all the fixes for IE6?
Old age doesn't seem quite so bad, when you consider the alternative!!

Frank.

ajhauser
12-18-2007, 05:58 PM
Hey again Frank, thanks much for the conversation. I'll have to snag this CSSVista program - is this freeware that runs on XP too? Seems extremely useful, I have some add-on fr FFox that lets me edit CSS realtime but one with both would be excellent.

This thread has been a great help to me and I thank everyone again for helping who pitched in.

Is there some sort of rating system in this forum? A week ago I thought I was able to "Thank" people but now I'm having a hard time finding where that was so I can do it again...

Thanks,:thumbsup:
AJ

effpeetee
12-18-2007, 06:35 PM
The CSSVista runs on XP and Vista. The "add to reputation" icon is the middle one of the group of three in bottom of the left hand section. I think that the other one has been discontinued.

There are a lot of useful sites in the Sources address in my signature too.

http://litmusapp.com/labs this for CSSVista.

Happy coding.

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum