| View previous topic :: View next topic |
| Author |
Message |
quartzy
Joined: 26 Dec 2007
Posts: 413
|
 Posted: Mon Feb 11, 2008 5:04 am nav block adds large gap using IE6 |
 |
|
|
My nav block on 2 websites, adds a large gap between the navigation lists items. Looking on the internet I found that you could add display: inline-block; to get rid of the gap in IE6, but now my border lines stop after the list word and do not sit right along the block. Does anyone know how I can rectify this? So that the border-bottom goes to the end of the block.
| Code: |
#navigation {
float:left;
width: 137px;
margin-left: 2px;
margin-top: 5px;}
#menu {
list-style-image: url('images/arrow.gif');
background-repeat: no-repeat;
font-size: 0.75em;
color: #5B5B5B;
margin: 0;
padding-left: 20px;
background-position: 2.0em 50% }
#menu a {
border-bottom: 1px solid #00FF00;
padding: 3px;
display:inline-block;
margin: 0; }
|
|
|
Corey Bryant
Site Admin
Joined: 15 May 2004
Posts: 8427
Location: Castle Pines North, CO USA
|
|
quartzy
Joined: 26 Dec 2007
Posts: 413
|
| Posted: Mon Feb 11, 2008 6:00 am re |
|
|
|
| OK thanks for the link |
|
madprof
Joined: 26 Jan 2008
Posts: 98
|
| Posted: Mon Feb 11, 2008 1:00 pm |
|
|
|
display: inline-block support is patchy and not recommended, especially when these are not inline items but sit on top of each other.
Quite a lot of the "inline-block" hacks are just a way of giving an element layout, a rather odd IE-only property that Microsoft refuse to get rid of, and often an IE6-only style command to set zoom: 1 or something is useful (and harmless for rendering purposes). You can use conditional comments to apply it so only IE6 picks it up as well.
For more info on "layout" see http://www.satzansatz.de/cssd/onhavinglayout.html |
|
quartzy
Joined: 26 Dec 2007
Posts: 413
|
| Posted: Mon Feb 11, 2008 2:28 pm re |
|
|
|
hello
yes I have still not found a fix for this, so I will look at your link and hope they have something there.
thanks |
|
madprof
Joined: 26 Jan 2008
Posts: 98
|
|
quartzy
Joined: 26 Dec 2007
Posts: 413
|
| Posted: Mon Feb 11, 2008 2:32 pm re |
|
|
|
| cannot really understand the link you gave me, they are not explicit enough but I think that i should add layout-true: min height; would you agree? I am still dumbfounded and searching on the web has done nothing. |
|
madprof
Joined: 26 Jan 2008
Posts: 98
|
| Posted: Mon Feb 11, 2008 2:48 pm |
|
|
|
OK it works a bit like this:
Microsoft invented this invisible non-CSS property called "layout" which applies to HTML elements. I say it is invisible but it affects how IE renders things. It just seems invisible as there is no way to say "just give this thing layout please" in CSS.
You can trigger it by giving something dimensions like height or width though. Or doing something harmless like zoom: 1 which zooms something to 1 x normal size - this is an IE-only style instruction.
Sometimes IE's behaviour is rather odd and the only way to make something behave is to give it layout and it starts to do the right thing. This goes for IE 6 and IE 7 as, despite fixing lots of bugs and enhancing the rendering engine, Microsoft kept this layout idea. in their latest browser.
The Developer Toolbar tells you if something has layout. There is a particular function in it where you click on anm element and it displays its properties - both HTML attributes and CSS styles. Included amongst the CSS is "hasLayout" when the thing you've just clicked on has layout or not.
Hope this provides a bit more background info. My advice is to create an IE-only stylesheet for all this and keep your fixes in there. |
|
quartzy
Joined: 26 Dec 2007
Posts: 413
|
| Posted: Mon Feb 11, 2008 3:04 pm re |
|
|
|
| I am not all that familiar with the haslayout property. I did download the toolbar, and I saw (haslayout -1) on my current website I am doing but not knowing what that means I could not look into it, I need to find out what haslayout is first. Amongst other things, I still do not have a fix for my other two webs. |
|
madprof
Joined: 26 Jan 2008
Posts: 98
|
| Posted: Tue Feb 12, 2008 10:47 am |
|
|
|
| Code: |
#menu li { zoom: 1; }
|
This seems to work in IE 6. Make sure that only IE 6 reads this code by using conditional comments so:
| Code: |
<!--[if IE 6]>
<style type="text/css">
#menu li { zoom: 1; }
</style>
<![endif]-->
|
All browsers other than IE will interpret this as an HTML comment and only IE 6 will actually respond to it.
Last edited by madprof on Tue Feb 12, 2008 1:11 pm; edited 1 time in total |
|
quartzy
Joined: 26 Dec 2007
Posts: 413
|
| Posted: Tue Feb 12, 2008 12:27 pm re |
|
|
|
| thanks for posting the fix, I will keep note of it and use it in the future, I found lots of helpful tips for browsers on positioniseverything.net. or something like that. And printed off all the common bugs so I am more prespared now. |
|
quartzy
Joined: 26 Dec 2007
Posts: 413
|
| Posted: Tue Mar 04, 2008 2:53 am re |
|
|
|
| regarding this fix, do I add it to each of the pages in the web or can I add it to the style sheet? I have come back to it as it is still not displaying correctly using the display: block; fix, Can you let me know how to apply this to the style sheet please? At the moment I have it on all pages. |
|
madprof
Joined: 26 Jan 2008
Posts: 98
|
| Posted: Tue Mar 04, 2008 11:14 am |
|
|
|
If the HTML that had the problem occurs on every page, the CSS must be availbel for every page.
That is OK though. You just have a main site template that references a common_elements.css or something that contains styles for things common to all pages. |
|
quartzy
Joined: 26 Dec 2007
Posts: 413
|
| Posted: Tue Mar 04, 2008 2:09 pm re |
|
|
|
| I just posted all the code you gave and it seems to work, I put it in the style sheet. Thanks |
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
