19 replies [Last post]
larmyia
Offline
Elder
London
Last seen: 11 years 13 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

Morning. having trouble with the *active page* button. In FF it's fine, but in IE it's too close to the other buttons. I've tried to use margin: 3px (for example) but then it goes too far apart from the other buttons in FF. any suggestions? is it a prob with IE or have I done something wrong? Unfortunatly IE users are my main audience, so I need to sort this out.

why can't everyone use FF? wah! :?

http://www.subtleasafish.com/test/primetrics/index.html

larmyia

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 12 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

IE nav placement probs

First, you need to understand what is causing the gaps between the menu elements in the first place. Then you can use that knowledge to control it.

step 1: specify margin:0 on all the elements involved to make sure both browsers are singing from the same hymn sheet. In this case that change makes no difference.

step 2: eliminate the white space between the elements. Now all the elements close up. And it becomes apparent where the difference between the two browsers is. IE includes the white space after the li.navlist_active element within the borders of that element. FF renders it between the two <li> elements.

solution: remove all white space between the <li> elements and specify margin-left.

And, nice clean, clear design Smile

larmyia
Offline
Elder
London
Last seen: 11 years 13 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

IE nav placement probs

Chris..S wrote:
step 1: specify margin:0 on all the elements involved to make sure both browsers are singing from the same hymn sheet. In this case that change makes no difference.

isn't that what this is doing???

html, body {
margin: 0;
padding: 0;
}

Quote:
step 2: eliminate the white space between the elements.

this where I put them all next to each other in my html. Is this the only way?

Quote:
solution: remove all white space between the <li> elements and specify margin-left.

why margin-left? does that have nothing to do with the fact that my nav bar is the the right?

Quote:
And, nice clean, clear design Smile

ah...the (currently?) elusive dream!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 17 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

IE nav placement probs

Quote:
this where I put them all next to each other in my html. Is this the only way?

Unfortunately, to fix IE, yes. However, not everything - for example:

<ul>
<li> item 1 </li>
<li> item 2 </li>
</ul>

should become:

<ul><li>
item 1 </li><li>
item 2 </li></ul>

or something thereabouts.

Verschwindende wrote:
  • CSS doesn't make pies

larmyia
Offline
Elder
London
Last seen: 11 years 13 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

IE nav placement probs

oic. so it's still readable? will work the same if it was one after the other in a row?

still dont' see how I get a gap between the menu elements tho...

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 12 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

IE nav placement probs

You are getting a gap between the elements because they are inline and its correct to render a single white space between inline elements. Its same as if your html was

<span id=red>some red text</span> [space] <span> some blue text</style>.

You would not want the browser to render "some red textsome blue text" but "some red text some blue text"

========

html, body {margin:0; padding:0;} is only setting the margin and padding for the <html> & <body>. margin and padding aren't inherited. To set margin and padding on all elements do ...

/* must go at the top so it can be overwritten when needed */
* {margin:0; padding:0}

========

The step idea, was to help show the steps to go through to work out where the problem lies, so next time you wouldn't get stuck. Although your concern was why the selected item was hard up against the next menu item, I look at it and wondered why the others were all nicely spaced out when you hadn't specified any margins.

yes, margin-left as you are spacing from the right. that way you won't have any extra margin-right left over on the right hand menu item. The extra margin-left on the first item will not be noticed.

In fact, you really only need to close up the white space between the highlighted item and its two neighbours (well one neighbour if the first or last menu item is selected). If you leave white space between the others, you don't need any new margins. However, I would think by closing up the white space completely and using margin-left you have something you can easily copy to the other pages and only have to worry about changing the one item that represents the current page.

I hope that all made sense.

Laughing out loud

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 17 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

IE nav placement probs

Yep. You could bunch it all up on one line (which also reduces file size), but for editing, and ease of use to look at, leave it like that.

Verschwindende wrote:
  • CSS doesn't make pies

larmyia
Offline
Elder
London
Last seen: 11 years 13 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

IE nav placement probs

Right Chris...(had to have a break before I went mad and got stuck into an episode of CSI)

*the step thing was good, as I think I find it hard to think outside the box when it comes to finding where I've gone wrong. I just get all stressed out.
*I get the whitespace in inline elements. and I assume it's a bug in IE which is why it renders differently to FF?
*I thought the html, body {margin: etc} applied throughout. is * {margin: etc} commonly used? It's just that I've not seen it before, but it makes sense!
*still confused ("great" says chris!) on the margin-left thing. I've tried applying it in several place and none seems to make the blindest bit of difference in good ol' IE6!!!
*I get why it's better to close up all the whitespaces.[/list]
*mostly (it made sense)! Smile

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 12 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

IE nav placement probs

larmyia wrote:
  • still confused ("great" says chris!) on the margin-left thing. I've tried applying it in several place and none seems to make the blindest bit of difference in good ol' IE6!!!

If you have closed up the white space, then add

.navlist_main li {margin-left: 0.5em;}

as shown here

a couple of points

  • you don't need to place CSS url's in quotes. In fact, doing so is a problem for one of the Mac browsers.
  • Your building picture is very dark/low contrast.

[/][/]
larmyia
Offline
Elder
London
Last seen: 11 years 13 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

IE nav placement probs

Chris..S wrote:

.navlist_main li {margin-left: 0.5em;}

ok great that works. now, just to confirm...I have put a margin of 0.5em to the left of all the *buttons*, is that right? now, why put it in .navlist_main and not ul.navlist_main?

Quote:

a couple of points
  • you don't need to place CSS url's in quotes. In fact, doing so is a problem for one of the Mac browsers.

ok done. didn't know that. learn something new everyday, or as in the case of today, learn tons of new stuff!

Quote:

  • Your building picture is very dark/low contrast.

  • what do you mean? it's too dark?

    [/]
    Chris..S
    Chris..S's picture
    Offline
    Moderator
    Last seen: 7 years 12 weeks ago
    Timezone: GMT+1
    Joined: 2005-02-22
    Posts: 6078
    Points: 173

    IE nav placement probs

    in this case .navlist_main is the same as ul.navlist_main. The key is the descendant li

    ul.navlist_main li {margin-left:0.5em}

    is fine. Feel free to adjust that distance to anything you like.

    too dark? I would say so, but thats a pretty subjective opinion and can vary depending on screen type, settings and ambient lighting. If you look at my link above it has a lighter/brighter version of the picture.

    rmfred
    rmfred's picture
    Offline
    Elder
    Rock Springs, WY
    Last seen: 1 year 9 weeks ago
    Rock Springs, WY
    Timezone: GMT-6
    Joined: 2004-01-31
    Posts: 1073
    Points: 31

    IE nav placement probs

    larmyia;
    Now, to muddy the water a little more... they way you are currently doing this requires you to change your class="navlist_active" on each of your pages... which might not seem like a big deal for this site, but it might be in a future project? It also reduces your ability to use a scripting language to "include" your menu on all pages from a single menu file and have the "active" work on all pages.

    Why not let the css and html do it for you?
    A brief explanation of the technique can be found here..
    http://www.csscreator.com/css-forum/ftopic7715.html

    FWIW:
    As you have obviously seen the advantages of using css for making site wide changes easier... so to are using "includes" in your designs.
    Need to change your footer? No problem... make the change in your "included" footer.html file and the rest of the site is automatically updated... no more need to change "each and every" page by hand.

    larmyia
    Offline
    Elder
    London
    Last seen: 11 years 13 weeks ago
    London
    Timezone: GMT+1
    Joined: 2005-01-25
    Posts: 1060
    Points: 0

    IE nav placement probs

    rmfred wrote:
    Why not let the css and html do it for you?
    A brief explanation of the technique can be found here..
    http://www.csscreator.com/css-forum/ftopic7715.html

    read it and it makes sense for sure, but am still a little confused as how to exactly apply it. is there somewhere I can go for a more detailed explanation?

    Quote:
    As you have obviously seen the advantages of using css for making site wide changes easier... so to are using "includes" in your designs.

    now that sounds good. excuse the ignorance but I've not heard of includes before. I'm going to have a scout around and see if I can find anything about it.

    Chris: I understand what you're saying about the pic, but on my screen yours is way too light. could it be anything to do with my tft monitor?

    thanks

    larmyia

    Chris..S
    Chris..S's picture
    Offline
    Moderator
    Last seen: 7 years 12 weeks ago
    Timezone: GMT+1
    Joined: 2005-02-22
    Posts: 6078
    Points: 173

    IE nav placement probs

    yes, its probably down to our different brightness/contrast settings.

    on rmfred's thing:

    your menu html

    <ul id="nav"><li id="menu_home"><a>home</a></li><li id="menu_page1"><a>page1</a></li> ... <li id="menu_pagex"><a>pagex</a></li></ul>
    

    the css

    /* basic menu styles */
    #nav li {display:inline; margin-left:0.5em;}
    #nav a { background-color:#339; color: #fff;}
    #nav a:hover {background-color:#99c;}
    
    /* selected menu styles */
    body#home li#menu_home a,
    body#page1 li#menu_page1 a, 
    body#pagex li#menu_pagex a
       {background-color:#fff; color:#339}
    

    then each page will set the appropriate id in its body tag and your menu html stays identical, e.g.
    <body id="page1">
    ...
    </body>
    

    the css will automatically resolve the correct menu item to highlight.

    rmfred
    rmfred's picture
    Offline
    Elder
    Rock Springs, WY
    Last seen: 1 year 9 weeks ago
    Rock Springs, WY
    Timezone: GMT-6
    Joined: 2004-01-31
    Posts: 1073
    Points: 31

    IE nav placement probs

    larmyia:
    chris's explanation of the technique is very good.. probably better than how I would attempted to explain it.

    Includes: google for server side includes or something similar. ASP and PHP and probably others have this functionality. I typically use includes for everything now on my sites. Not only does it make updating the site easier, your pages are easier to read and/or troubleshoot. For example this is one of my templates..

    <body id="home">
    <div id="top"></div>
    <div id="wrapper">
    <div id="uppermenu"><!--include file--></div>
    <div id="header"><!--include file--></div>
    <div id="mainmenu><!--include file--></div>
    <div id="container">
    <div id="leftcol"><!--include file--></div>
    <div id="content"><!--include file-->
    </div><!--end contents-->
    </div><!--end container-->
    <div id="footer"><!--include file--></div>
    </div><!--end wrapper-->
    </body></html>

    All the pages on the site look just like this...

    larmyia
    Offline
    Elder
    London
    Last seen: 11 years 13 weeks ago
    London
    Timezone: GMT+1
    Joined: 2005-01-25
    Posts: 1060
    Points: 0

    IE nav placement probs

    menu html

    you know it took a while...but I think I did it Laughing out loud

    on to all the other problems!

    many thanks to you both!

    btw rmfred, am very interested in the includes. started checking out but since I have to have the first section of this site finished by monday morning I'm going to leave it off of here...read up some more and hopefully use it in the near future.

    larmyia

    rmfred
    rmfred's picture
    Offline
    Elder
    Rock Springs, WY
    Last seen: 1 year 9 weeks ago
    Rock Springs, WY
    Timezone: GMT-6
    Joined: 2004-01-31
    Posts: 1073
    Points: 31

    IE nav placement probs

    Well let us know when you start down the road with includes... once you start you'll wonder how you ever managed without them IMHO of course... I won't be able to help much unless you end up using ASP, since I don't currently use PHP... but just might start working with it in the very near future...

    And after that there is the wonderful world of using databases to generate content... it just keeps getting better and better doesn't it?

    larmyia
    Offline
    Elder
    London
    Last seen: 11 years 13 weeks ago
    London
    Timezone: GMT+1
    Joined: 2005-01-25
    Posts: 1060
    Points: 0

    IE nav placement probs

    funnily enough rmfred I've been thinking about cms more lately. just a big issue to tackle. has to happen some time.

    one issue with the *current page* is that my curser is still coming up as a hand. what's the best way to sort this out?

    thanks

    (a bleary eyed) larmyia

    Chris..S
    Chris..S's picture
    Offline
    Moderator
    Last seen: 7 years 12 weeks ago
    Timezone: GMT+1
    Joined: 2005-02-22
    Posts: 6078
    Points: 173

    IE nav placement probs

    cursor:default;

    larmyia
    Offline
    Elder
    London
    Last seen: 11 years 13 weeks ago
    London
    Timezone: GMT+1
    Joined: 2005-01-25
    Posts: 1060
    Points: 0

    IE nav placement probs

    thanks. works a treat.