Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    Regular Coder ajhauser's Avatar
    Join Date
    Nov 2007
    Location
    Earlville. It's where Earls come from.
    Posts
    226
    Thanks
    74
    Thanked 1 Time in 1 Post

    Internet Explorer W3C Valid - but navbar display issue

    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):



    Here is how it looks in IE7:
    *Notice the bottoms don't show up*


    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.

    Thanks ,
    AJ
    Last edited by ajhauser; 12-16-2007 at 09:49 AM. Reason: Forgot to add url

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    Last edited by effpeetee; 12-16-2007 at 11:03 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Regular Coder
    Join Date
    Dec 2007
    Posts
    107
    Thanks
    0
    Thanked 3 Times in 3 Posts

    Smile

    If you have used a CSS class for the column, then try to give fixed bottom and top padding.
    Programming & Webmaster Forum - AdSense Revenue Sharing forum

  • #4
    Regular Coder ajhauser's Avatar
    Join Date
    Nov 2007
    Location
    Earlville. It's where Earls come from.
    Posts
    226
    Thanks
    74
    Thanked 1 Time in 1 Post
    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).
    Last edited by ajhauser; 12-16-2007 at 11:32 AM. Reason: More trials...

  • #5
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    yeh put that at the top of the stylesheet

    Code:
    *{
    margin:0;
    padding:0;
    
    }
    ahead of:

    Code:
     body {
    }
    bazz

  • #6
    Regular Coder ajhauser's Avatar
    Join Date
    Nov 2007
    Location
    Earlville. It's where Earls come from.
    Posts
    226
    Thanks
    74
    Thanked 1 Time in 1 Post
    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

  • #7
    Regular Coder ajhauser's Avatar
    Join Date
    Nov 2007
    Location
    Earlville. It's where Earls come from.
    Posts
    226
    Thanks
    74
    Thanked 1 Time in 1 Post
    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?

  • #8
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Edit:
    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
    Last edited by bazz; 12-16-2007 at 09:25 PM.

  • #9
    Regular Coder ajhauser's Avatar
    Join Date
    Nov 2007
    Location
    Earlville. It's where Earls come from.
    Posts
    226
    Thanks
    74
    Thanked 1 Time in 1 Post
    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

  • #10
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    The border is set up here.

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

    Code:
    #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
    Last edited by effpeetee; 12-17-2007 at 09:13 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #11
    Regular Coder ajhauser's Avatar
    Join Date
    Nov 2007
    Location
    Earlville. It's where Earls come from.
    Posts
    226
    Thanks
    74
    Thanked 1 Time in 1 Post
    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:





    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://www.ivcl.org/

    Hang Test Page nothing under text in IE7

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

    Does that make a little more sense (I hope)?
    Thanks very much,
    AJ
    Last edited by ajhauser; 12-17-2007 at 10:34 PM. Reason: added urls

  • #12
    Regular Coder ajhauser's Avatar
    Join Date
    Nov 2007
    Location
    Earlville. It's where Earls come from.
    Posts
    226
    Thanks
    74
    Thanked 1 Time in 1 Post
    Any ideas?

  • #13
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    This seems to work. I don't know why!

    Frank

    Code:
    #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
    Last edited by effpeetee; 12-18-2007 at 10:00 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #14
    Regular Coder ajhauser's Avatar
    Join Date
    Nov 2007
    Location
    Earlville. It's where Earls come from.
    Posts
    226
    Thanks
    74
    Thanked 1 Time in 1 Post

    Thumbs up

    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

    HERE IS THE CODE FOR THE FIRST SET OF LINKS:
    Code:
    #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:
    Code:
    #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!
    -AJ

  • #15
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    Code:
    *{
    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
    Last edited by effpeetee; 12-18-2007 at 11:59 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •